Делаем заготовку для флеш-календарика в Adobe Flash CS6..

Понедельник, 17 Марта 2014 г. 12:24 + в цитатник

Цитата сообщения jzayka

Прочитать целиком В свой цитатник или сообщество!

По просьбе некоторых ПЧ ,как обещала, сегодня расскажу как сделать заготовку на прозрачном фоне для таких флеш календариков.

В комментариях и на скринах я покажу и расскажу принцип создания таких заготовок.Потом вы сможете их использовать на свое усмотрение,применяя фантазию.Добавлять фоны,украшательства и т.д.
Для урока использована программа Adobe Flash CS6 с применением AS2.
Рассчитан урок на тех,кто знаком с интерфейсом и основными инструментами программы.
Такие заготовки можно сделать в программе SWFQuicker ,принцип тот же.Я специально использовала код AS2,чтобы можно было его применить и в этой программе.
Итак,начинаем.

1.Первое,что мы делаем,открываем программу.
2.Создаем новый документ AS2.
1 (561x431, 58Kb)

3.В Панели Свойства указываем размеры рабочей сцены,цвет.
Цвет может быть любым.При просмотре флеш ролика он не будет виден.
2 (561x431, 68Kb)

4.На временной шкале создадим 3 слоя.
3 (561x431, 67Kb)

5.Переименуем их для удобства работы.
4 (561x431, 72Kb)

Фон-на этом слое будет фон календарика(если хотите на прозрачном фоне ,оставьте его пустым)
Календарь-здесь будет наш календарик.
Скрипт-это код для календарика ,который мы введем в соответствующее поле.
6.Сохраним документ под названием Календарь AS2
5 (561x431, 74Kb)

7.Создадим символ для календарика.
7.1 Открываем на Панели меню-Вставка-Создать символ.
Заполним соответствующие поля:
Имя -календарик
Тип символа выбираем-Фрагмент ролика
6 (561x431, 61Kb)

Открылось окно редактирования символа Календарик
8 (561x431, 61Kb)

8.Создадим в этом окне для календаря на шкале времени 3 слоя.
Число,Месяц,День.
9 (561x431, 54Kb)

9.Делаем активным слой Число(нажать на него инструментом Стрелка)
Активируем инструмент Текст(Т).Создаем текстовое поле.
для слоя число (561x431, 49Kb)

11.В панели Свойства
в окошко"Назначить имя экземпляру"вводим yearBox
11 (314x101, 8Kb)

Внимание! Обязательно внедрить шрифт!
Если шрифт не внедрить,ничего отбражаться в календаре не будет!
Жмем на окошко Внедрить,в открывшемся окне выбираем шрифт.
105 (556x428, 39Kb)

Дальше см. по скрину.
11-1 (431x561, 81Kb)

12.Возвращаемся на временную шкалу символа календарик.
Делаем активным слой Месяц.
На слоях ДЕНЬ и ЧИСЛО поставьте пока замочки(нажать на слое напротив значка замочка),чтобы случайно не перескочить на ненужный слой.
102 (195x99, 7Kb)

13.Активируем инструмент Текст(Т)
Создаем текстовое поле.
Для этого текстового поля размер шрифта установите меньше.
Я поставила 20 пт.
11-4 (561x431, 50Kb)

В Панели Свойства назначаем имя экземпляру monthBox.

14.Возвращаемся к тектовому полю.
Активируем инструмент Текст,кликаем внутри окошка.
В текстовое окошко введите самое длинное название месяца(сентябрь)
Для того,чтобы удостовериться,что оно умещается в окошке .
Потом мы очистим текстовое поле.
106 (236x91, 4Kb)

Cнимаем замочек со слоя День(жмем по замочку-он исчезенет),ставим на слое Месяц.
103 (196x86, 6Kb)

15.Активируем инструмент Текст(T) для создания еще одного текстового поля
Создаем текстовое поле(активный слой на временной шкале День)
В Панели Свойства назначаем имя экземпляру dayBox
104 (314x100, 7Kb)

16.Переключаемся снова на инстумент Текcт(T).
В текстовое окошко(клик внутри окошка) введите самое длинное название дня недели(понедельник или воскресенье)
Так же как и во втором текстовом поле ,мы его потом удалим.
31 (285x77, 3Kb)

17.Снимаем замочки со слоев(жмем на них-они исчезнут)
Так выглядит календарик в поле редактирования.
14 (561x431, 54Kb)

18.Переходим на основную сцену.
15 (306x96, 6Kb)

Активный слой на временной шкале Календарь(нажать на него).
32 (178x74, 4Kb)

19.Идем в Библиотеку.
Там находим символ календарик.
16 (561x431, 74Kb)

20.Перетаскиваем левой кнопкой мыши его на сцену в рабочее поле
16-1 (562x431, 98Kb)

21.Выделяем инструментом стрелка(убедитесь что активный слой календарь)
16-2 (562x431, 75Kb)

22.Выравниваем инструментом Выравнивание.
17 (562x431, 60Kb)

23.Идем в Панель Свойства.Экземляр при этом выделен(синяя рамочка вокруг как в ш.21)
Назначаем имя экземпляру,который мы переместили из библиотеки
content_mc
18 (317x136, 21Kb)

24.Переходим на верхний слой Скрипт
Два остальных закройте замочками.
25.Открываем Панель Действия (Окно-Действия или F9)
Копирум код(очень внимательно и аккуратно) и вставляем его в окно Действия.
Можно скопровать код так же во вложении к посту.
----------------------
код

function d3ClockUpdate()
{
var _loc1 = new Date();
tempHour = _loc1.getHours();
if (String(tempHour).length < 2)
{
content_mc.time1.text = "0" + tempHour;
}
else
{
content_mc.time1.text = tempHour;
} // end else if
tempMinutes = _loc1.getMinutes();
if (String(tempMinutes).length < 2)
{
content_mc.time2.text = "0" + _loc1.getMinutes();
}
else
{
content_mc.time2.text = _loc1.getMinutes();
} // end else if
tempSeconds = _loc1.getSeconds();
if (String(tempSeconds).length < 2)
{
content_mc.time3.text = "0" + _loc1.getSeconds();
}
else
{
content_mc.time3.text = _loc1.getSeconds();
} // end else if
content_mc.time3.text = _loc1.getSeconds();
content_mc.dayBox.text = weekDayLabels[_loc1.getDay()];
content_mc.yearBox.text = _loc1.getDate();
content_mc.monthBox.text = monthLabels[_loc1.getMonth()];
content_mc.passed1.text = int((getTimer() - startTime) / 1000 / 60 / 60 / 24) % 24;
content_mc.passed2.text = int((getTimer() - startTime) / 1000 / 60 / 60) % 60;
content_mc.passed3.text = int((getTimer() - startTime) / 1000 / 60) % 60;
content_mc.passed4.text = int((getTimer() - startTime) / 1000) % 60;
content_mc.line1._rotation = int((getTimer() - startTime) / 1000 / 60 / 60 / 24) % 24 * 6 + 200;
content_mc.line2._rotation = int((getTimer() - startTime) / 1000 / 60 / 60) % 60 * 6 + 260;
content_mc.line3._rotation = int((getTimer() - startTime) / 1000 / 60) % 60 * 6 + 160;
content_mc.line4._rotation = int((getTimer() - startTime) / 1000) % 60 * 6;
} // End of the function
var monthLabels = new Array("Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря");
var weekDayLabels = new Array("Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота");
var d3Clock = setInterval(d3ClockUpdate, 10);
startTime = getTimer();
-----------------------------------
19 (562x431, 132Kb)

Теперь давайте удалим слова из текстовых окон.Они нам не нужны.
Идем в поле редактирования символа календарик(жмем на треугольничек у значка)
22 (230x77, 4Kb)

Активируем инструмент Текст,встаем в окошко с текстом,выделяем мышкой слово -жмем delete
21 (561x431, 58Kb)

То же самое проделываем на слое Месяц.

Если хотите подписать,создайте еще один слой,активируйте инструмент Текст,подпишите.
Проверяем что получилось.
Управление-Тестировать ролик-тестировать ролик
или
Жмем CTRL+ENTER
***

***
Все. Календарик готов.Экспортируем его.

Моей целью было показать и рассказать принцип создания.
Меняя шрифт и цвет,применяя фон,вы сожете сделать свои неповторимые календарики.
Если возникнут вопросы,спрашивайте.Будем разбираться вместе.
Удачи!

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 19 - Делаем «Вечный таймер обратного отсчета» в Adobe Flash. AS3
Часть 20 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
Часть 21 - Делаем заготовку для флеш-календарика в Adobe Flash CS6..
Часть 22 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 1.
Часть 23 - Маска динамическим текстом. Урок для флеш. Action Script 2. Часть 3.
...
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Серия сообщений "Часовая мастерская":
Как сделать часики, рисование циферблатов и часовых стрелок, сборники клипарта на часовую тему
Часть 1 - Как правильно записать код флешки или видео в рамочку для кодов.
Часть 2 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
...
Часть 6 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.
Часть 7 - Шаблон - конструктор часиков для Sothink SWF Quicker.
Часть 8 - Делаем заготовку для флеш-календарика в Adobe Flash CS6..
Часть 9 - Флеш часики с будильником.
Часть 10 - Мои копилочки с Я - ру. Корпуса для часиков. Винтаж. часть1
...
Часть 13 - Флеш заготовки «Цифровые часикидля ваших работ».
Часть 14 - Мои копилочки с Я - ру. Для часиков.
Часть 15 - Флеш приветствие для дневника, изменяющееся в зависимости от времени суток.