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

Вторник, 18 Марта 2014 г. 23:12 + в цитатник

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

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

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

В предыдущем посте от 16 Марта была допущена неточность в написании урока.
Огромное спасибо BAT за подсказку.
Ошибку исправила.Прошу прощения за причиненное неудобство.

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

В комментариях и на скринах я покажу и расскажу принцип создания таких заготовок.Потом вы сможете их использовать на свое усмотрение,применяя фантазию.Добавлять фоны,украшательства и т.д.
Для урока использована программа 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
***

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

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

Рубрики:

Флешки/уроки,программы