ффект отражения на шкале времени. Урок 7.Jorjorych

Вот  урок   по созданию отражения во флеш по скрипту в AS3. Но такой эффект можно создать на шкале времени в АФ или других программах (Сотинк ...). Была просьба и вот мой рассказ об этом:

Клик на цветок!

Все скрины в таблице под текстом, есть всплывающие подсказки с номерами, скрины увеличиваются по клику.

1. Загружать картинки в рабочую область: Ctrl+R, выбрать картинки, открыть - в примере 4 штуки (скрин 1)

2. Клик правой кнопкой мыши по выделенным картинкам - распределить по слоям

3. Клик на пустое место, чтобы снять выделение и разместить фотки как задумали (скрин 2)

4. Преобразовывать картинки в фрагменты ролика: правой кнопкой поочерёдно по каждому экземпляру на поле и выбрать "Преобразовать в символ - фрагмент ролика (скрины 3,4)

5. Выделить все экземпляры мувиков на сцене - выделятся и кадры нижних четырёх слоёв на временной шкале. Теперь правой кнопкой по любому из четырёх выделенных кадров на временной шкале и копировать кадры (скрин 5)

6. Клик правой кнопкой по кадру слоя 1 (он пустой) и вставить кадры (скрины 6,7)

7. Перемещать слои, размещая их попарно: клик левой кнопкой на слой и, удерживая, переместить к паре Образовали четыре пары слоёв. Нижний слой в каждой паре будет отражением вышележащего экземпляра (скрин 8)

8. Ставим замки на всех слоях, кроме первого (нижнего, можно закрыть и глазки), на нём продолжим работу. Отражение должно быть перевёрнуто по вертикали (зеркальное отражение) и смещено на какое-то расстояние, в нашем случае, вниз. Для этого выделим изображение на нижнем слое первой пары (png.1), идём в меню "Модификация" и выбираем "Преобразовать" - "Отразить сверху вниз" (скрин 9)

9. Отразили по вертикали, теперь перемещаем вниз на необходимую позицию. Экземпляр выделен, идём в "Свойства" > "Цветовой эффект" > "Стиль" > "Альфа канал" и задаём значение прозрачности, например 25% (скрин 10)

10. Закрыли замки первой пары (можно и глазки, чтобы не мешало), открываем глазки второй пары (png.2), замок снимаем только на нижнем слое и повторяем действия пунктов 8 и 9 (скрин 11). Не хватает места в кадре: или перемещаем до нижней границы поля, либо через границу, либо увеличиваем размеры монтажного кадра - по Вашему плану-проекту!

11. Продолжаем аналогично пп 8-10 для пар 3 и 4. В итоге получили экземпляры цветов с отражениями (скрин 12)

12. Есть статическая картинка, требуется анимация! Будем анимировать появление (проявление) цветка и отражения его в течении двух секунд (или Ваш вариант). В примере 24 кадра в секунду, для двух секунд нужно 48 кадров. Кликаем на 48-й кадр верхнего слоя (png.4), затем, нажав и удерживая =Shift=, кликаем на 48-й кадр самого нижнего слоя (png.1). Выделился столбец кадров. На любой кадр из этого выделенного столбца кликаем правой клавишей мыши и выбираем "Вставить ключевой кадр". (скрины 13, 14)

13. Выделите все слои: клик на самый верхний, затем, нажав и удерживая =Shift=, кликать на самый нижний. Теперь правой кнопкой мыши кликать на любой кадр любого слоя и выбрать "Создать классическую анимацию движения" (скрины 15, 16, 17)

14. Курсор временной шкалы ставим на первые кадры анимации, открываем замки слоёв по очереди, например, сверху и, выделив на сцене (монтажном кадре) экземпляр идём в !Свойства" ... задаём непрозрачность =0=. Закрыли замок слоя, переходим на следующий (ниже), сняли его замок, выделили на сцене экземпляр и задали непрозрачность =0=. И так на всех (восьми) слоях. Выполнив это действо, на первом кадре на сцене чисто - !Всё пропало! Но если передвигать курсор по временной шкале к 48-му кадру увидите проявление изображений и их отражений. Можно тестировать =Ctrl+Enter= (скрины 18, 19)

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

15. Начнём сверху: пара =png.4= это первый цветок, оставляем как есть. Второй цветок находится на паре слоёв =png.2=. Поступаем следующим образом: нажать и удерживать =Shift=, кликать на первый кадр верхнего слоя =png.2=, затем. не отпуская =Shift=, кликать на последний кадр нижнего слоя =png.2=. Таким образом выделили все кадры этой пары слоёв. Теперь хватаем за выделенные кадры левой кнопкой и перемещаем их вдоль линейки шкалы вправо так, чтобы первые ключевые кадры оказались на 48-м или дальше (скрин 20, 21)

16. Третий цветок это пара слоёв =png.3=. Выделяем аналогично п. 15 и перемещаем примерно на 96-й или дальше на линейке времени (скрин 22)

17. Выделяем и перемещаем пару =png.1= где заканчивается линейка предыдущей пары (скрин 23)

Получилась линейка на 190 кадров.

18. Выделяем столбец кадров на 190-м кадре верхних шести слоёв: клик на 190-й кадр верхнего слоя, затем нажать и удерживать =Shift= и нажать на 196-й кадр нижнего слоя пары =png.2=. Клик на выделенные кадры и "Добавить кадр"! (скрин 24, 25)

19. На участках с пунктиром нажимаем правой кнопкой мыши и удаляем анимацию. Повторяем на всех слоях с пунктиром (скрин 26, 27) Анимация готова! Она будет бесконечно повторяться.

20. Остановим анимацию после одноразового проигрывания: поверх всех слоёв создаём новый слой для скрипта, на 190-м кадре этого слоя  (или конечном кадре, если у Вас их другое количество) кликаем правой кнопкой мыши и вставим ключевой (или пустой ключевой) кадр. (скрин 28)

21. Открываем панель "Действия и прописываем:    stop();   (скрин 29)

22. Самый нижний слой не несёт в себе полезной информации, это отражение четвёртого, верхнего цветка, которого не видно. Удалим его, на его место создаём новый слой и поместим на него (в первый кадр) фоновое изображение

На этом остановимся сегодня. Используя данный алгоритм можно создавать различные эффекты отражения, теней движущихся экземпляров ...

Принимаю вопросы по расшифровке непонятных моментов. Сообщайте, пожалуйста, об ошибках и неточностях, отредактирую.

 Вложение: 4966034_otrazhenie.rar

Серия сообщений "МОИ УРОКИ. ":
Часть 1 - Создание флеш-альбома "Листалка" в программе FLIP Flash Album Deluxe 2
Часть 2 - Наложение футажей в фотошопе на временной шкале.2-й урок
...
Часть 41 - Вот такое слайд шоу!
Часть 42 - FLIP Flash Album Deluxe 2.2 Portable.
Часть 43 - Эффект отражения на шкале времени. Урок 7. 

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

Метки: Уроки флеш Анимация на шкале времени во флеш создание отражения предметов во флеш