Часы цифровые. Анимация секундного таймера. Урок 2.Jorjorych

   Будем создавать исходники (заготовки) цифровых часиков для анимирования и дальнейшего использования в работах. Забудьте о том, что в первом уроке создавали часики на главной сцене (монтажном кадре). Создавать часики будем в отдельных фрагментах роликов (мувиках).

Правило полезное: всегда создавайте папку проекта и в ней поместите весь необходимый материал для работы: изображения, коды и прочее. По ходу можно будет что-то новое добавлять.

1. Создаём новый документ AS3 по умолчанию (550*400, 24 кадр/сек.).

2. Идём по пути: Вставка > Новый символ > фрагмент ролика. Даём имя ролику: "Секунда" > ОК.

Картинки увеличиваются по клику.

;

3. Теперь по знакомому, надеюсь, пути первого урока. Напоминаю: Создать текстовое поле, но только для двух цифр, дать имя "time" (без кавычек), внедрить шрифт. И на слое скрипта вписать скрипт (или "3. Только секунды" из вложения):

addEventListener(Event.ENTER_FRAME, clock);
function clock(e:Event):void {
 var date:Date = new Date();
   var sec = date.getSeconds();
  
    if (sec<10) {
      sec = "0"+sec;
     }
 time.text = sec;
}

   В принципе, мало отличий от первого урока: создали только секундный таймер и не на сцене, а в отдельном ролике. А вот этот ролик "Секунда" автономный, существует сам по себе в библиотеке и умеет считывать секунды, можем его использовать независимо в различных амплуа. Чтобы увидеть что это за мувик перенесите его на монтажный кадр и запустите тестирование - Ctrl +Enter.

Секунды побежали?!  Замечательно!

Теперь мувик можно анимировать на временной шкале на главной сцене (монтажном кадре): переместить, менять размер, прозрачность, цвет... Иногда это можно сделать, но не совсем то, что нужно. Будем делать анимацию в новом мувике (фрагменте ролика).

Удалите мувик со сцены - выделить и нажать Delete. Он останется в библиотеке.

4. Создаём новый ролик по знакомому уже нам пути: Вставка - Новый символ - фрагмент ролика. Или проще: на вкладке "Библиотека" внизу, первая иконка - создать символ. Даём название, например, Сек_аним1. И переносим сюда ролик "Секунда".

5. Возвращаемся на монтажный кадр и перемещаем из библиотеки сюда новый ролик "Сек_аним1". Слой переименовываем соответственно: двойной клик на название и пишем также "Сек_аним1". Названия не важны, просто для удобного ориентирования что-где-откуда.

6. Создаём новый слой для фона, хватаем левой кнопкой мыши и перемещаем под слой "Сек_аним1". Называем "Фон".

7. Импортируем на слой "Фон" картинку для фона: Файл - Импорт - Импортировать в рабочую область (или в библиотеку, потом переместить на слой). Проще нажать одновременно клавиши Ctrl и R. Так же импортируем сердечко для фона секундного ролика. Все материалы есть во вложении.

Для фона я взял кадр из замечательного анимированного

коллажа Веры_ВАТ.

8. При необходимости выравниваем картинку по центру монтажного кадра.

9. Редактируем секундный таймер (слой "Фон" закрыли замочком)::

       - двойной клик на символ "Сек_аним1" на монтажном кадре

       - Оказались в редакции ролика. Создаём ещё один слой, перемещаем под имеющийся ("Секунда"), назовём "Сердечко". Из библиотеки на этот слой переносим изображение сердечка. Инструментом "Свободное преобразование", удерживая клавишу Shift для пропорционального масштабирования, уменьшаем сердечко, а с помощью стрелок на клавиатуре устанавливаем его под цифрами в нужной нам позиции. (Всё на скринах ниже, увеличение по клику).

       - Выделяем оба элемента, проведя нажатой левой клавишей мыши над ними от верхнего левого до правого нижнего угла.

10. Стали на первый кадр и перемещаем ролик (это "Сек_аним1_1") на нужное нам место, уменьшаем, поворачиваем - всё делаем с помощью инструмента "Свободное преобразование", помогаем поместить куда нужно стрелками на клавиатуре

11. На временной шкале на 24-м кадре кликать ПРАВОЙ кнопкой мыши и "Вставить ключевой кадр"!    

12. Между кадрами 1-24 клик правой кнопкой и выбрать "Создать классическую анимацию движения".

13. Стали на 24-й кадр, увеличиваем сердечко примерно по размерам рисованного на фоне, стараемся совмещать их, опять помогают стрелочки на клавиатуре. Можно деформировать ролик ... Заодно открываем панель "Свойства", > Цветовой эффект > Стиль , выбираем "Альфа канал" и задаём курсором примерно 50% прозрачности - удобнее увидеть совмещение.

14. Разместили, убираем Альфа канал на "Ноль". Это всё для 24-го кадра. Теперь у нас сердечко с секундным таймером будет изменяться покадрово от полной видимости и малого размера на первом кадре до большего размера, но полной прозрачность на 24-м кадре. А 24 кадра потому, что это количество кадров в секунду нашей флешки.

   Тестируем флешку, не уходя из редакции ролика, то есть не переходя на монтажный кадр: Нажимаем одновременно

Ctrl  и  Enter на клавиатуре

Если что-то не так, редактируем, меняем размер, положение, (если ролик на 24-м кадре переместить в другое место, секунды будут "бегать" туда). Если нормально, то ...

15. Создаём ролики "Минута" и "Часы" по аналогии с пп. 2 и 3 данного урока, только коды из вложения, соответственно, для минуты и часов (4 и 5 скрипты). Используйте фильтры для  роликов...

   Но это Вам самостоятельное задание.

   Должно получится подобное флешки из шапки урока.

   Сохранить ролик: Файл > Экспорт > Экспортировать ролик.

В комментариях, кроме благодарности, сообщайте об успехах, проблемах, а также отвечайте советами другим, если Вам удалось решить чью-то проблемку. И пожелания, замечания, конструктивную критику!

Успеха Вам!

До встречи в следующих уроках!

 Вложение: 4921839_urok_2.rar

Серия сообщений "МАСТЕРСКАЯ ФЛЕШ AS3.":
Часть 1 - Мастерская флеш открыта! Добро пожаловать!
Часть 2 - Часы цифровые. Урок 1.
Часть 3 - Часы цифровые. Анимация секундного таймера. Урок 2. 

Метки: Уроки флеш Цифровые часики Анимация флеш