Урок. Sothink SWF Quicker 5.0
На сегодняшнем уроке мы научимся создавать своеобразный календарь. При вводе в нужные поля интересующей нас даты, в отдельном поле будет отображаться день недели, соответствующий введенной дате.
Итак приступим.
Шаг 1
Откройте новый документ. Установите на панели свойств следующие параметры
Шаг 2
Добавьте на временной шкале 11 слоёв, и верхний переименуйте в Action Layer. См рисунок ниже:
В первых одиннадцати слоях будут помещены различные объекты, а в слое действий мы напишем нужный нам код.
Шаг 3
Нажимаем Ctrl + F8 ( или Insert – New Symbol) и создадим графический символ примерно такого вида:
На сцене поместим его в первый кадр первого слоя. Координаты по оси Х = 275, и по оси У = 90.
Шаг 4
Создаем область, где будет отображаться день недели после ввода пользователем интересующей его даты.
Переходим во второй слой и выбираем инструмент Text (T).
Задаем ему следующие параметры:
Обратите внимание на поз. 1,2,3 на рисунке выше. Это означает, что мы выбрали тип текста динамический. Во второй позиции все три кнопки (Selectable, Show Border, и Editable) отжаты. Это говорит о том, что текст в этом случае не будет выделяемым, не будет отображаться граница, и его нельзя будет редактировать. В третьей позиции мы вводим имя переменной message. Вы можете ввести и другое имя, но тогда придется отредактировать и код, но об этом чуть ниже.
Выбранным инструментом рисуем на рабочем поле примерно такую область, как на рисунке ниже:
Шаг 5
Переходим в третий слой. Опять выбираем инструмент Text (T), но на этот раз тип текста выбираем статический. Размещаем слово «День» (без кавычек) над созданным нами в шаге 3 графическом символе примерно следующим образом:
Цвет текста – по Вашему усмотрению. Я выбрал желтый.
Шаг 6
Опять выбираем инструмент Text (T), но на этот раз тип текста выбираем динамический, и примерно так как изображено на рисунке ниже отображаем наш текст. Я выбрал цвет черный, Вы можете изменить по своему вкусу.
Число, которое Вы вводите в это поле может быть любым, но естественно только одно или двузначным. Кнопки Selectable, Show Border, и Editable нажаты. Это сделано для того, чтобы пользователь мог выделить и удалить отображаемый текст, и ввести свою дату. При этом текст будет отображаться в рамке (границе). См. рисунок ниже:
Обратите внимание: кнопки нажаты, и в поле Bind to Variable введено имя переменной day.
Шаги 7- 11
Добавление каждого нового элемента производим на разных слоях.
Повторяем шаги 5 и 6, только в поле Var вводим каждый раз новые имена.
Подробнее:
Далее мы располагаем на синем фоне поля с отображениями месяца и года(для них текст статический), и правее каждого из этих полей вводим по аналогии с шагом 6, поле для отображения чисел (текст динамический) В поле правее текста с отображением годов вводим 4 цифры. Для первого из них задаём имя month, а для второго year. Смотри рисунки ниже:
Шаг 12
Создаем правее всех элементов еще один. На этот раз мы добавим кнопку. О создании кнопок смотри соответствующий раздел уроков. Подробно о том, как создавать кнопку я в этом уроке рассказывать не буду. Думаю, что к этому времени Вы уже имеете представление об этом. А вот о том, какой код мы «прикрутим» к этой кнопке расскажу немного подробнее. По нажатии на кнопку в поле, которое мы создали в шаге 4, должен отобразиться один из семи дней недели. Итак расположим созданную кнопку примерно так как Вы видите на рисунке ниже:
Пока кнопка выделена, открываем панель Action и вставляем код, который Вы видите ниже. Для наглядности я приведу Вам картинку как он отображается, а ниже вставлю текст, чтобы Вы могли его скопировать прямо из урока и вставить в свой файл.
on (release, keyPress "<Enter>")
{
a = int((14 - month) / 12);
y = year - a;
m = int(month) + 12 * a - 2;
d = int(day) + int(y) + int(y / 4) - int(y / 100) + int(y / 400) + int(31 * m / 12);
joao = Math.round((d / 7 - int(d / 7)) * 7);
if (joao == 1)
{
message = "Понедельник ";
} // end if
if (joao == 2)
{
message = "Вторник ";
} // end if
if (joao == 3)
{
message = "Среда ";
} // end if
if (joao == 4)
{
message = "Четверг ";
} // end if
if (joao == 5)
{
message = "Пятница ";
} // end if
if (joao == 6)
{
message = "Суббота ";
} // end if
if (joao == 0)
{
message = "Воскресенье ";
} // end if
}
|
Шаг 13
Мы почти у цели. К этому времени у нас задействовано 9 слоев.
Вот как к этому времени выглядит временная шкала:
Шаг 14
В первом кадре 10 слоя напишем выше созданного в шаге 3 символа текст, который бы пояснял пользователю предлагаемые ему действия. Например: Введите дату…
Шаг 15
В первом кадре 11 слоя напишем ниже созданного в шаге 3 символа текст, поясняющий результат действия. Например: И я сообщу Вам день недели. Это на Ваше усмотрение, так как не имеет принципиального значения, Цвет и размер текста можете выбрать любой. Естественно проследите, чтобы текст введенный в шаге 15, не попал в текстовую область, созданную в шаге 4.
Вот, что к этому времени мы имеем на рабочей области:
Шаг 16
И в первом кадре последнего слоя вставим такой код:
Stage.scaleMode = "noScale";
stop ();
|
Верхняя строка запрещает ролику масштабирование. (вводить или не вводить её - это на Ваше усмотрение). А вот остановить клип в самом начале необходимо.
Нажимаем Ctrl+ Enter и тестируем созданный файл.
Смотреть дальше
