Урок "ВОДОПАД"
|
|
Бродяга | Дата: Воскресенье, 13.11.2011, 19:59 | Сообщение # 1 |
Почтальон Печкин
Сейчас: На суше
| Урок ВОДОПАД (Анимация маски)
Для начала нам понадобится изображение водопада.
С помщью Фотошопа отделяем воду и сохраняеям в формате *.png (Portable Net Graphick) с поддержкой прозрачности.
Теперь запускаем Флеш. Создаем новый флеш-файл по размерам картинки с водопадом. У меня 240х400.
Импортируем в библиотеку наши картинки (картинку с водопадом и воду).
File -> Import -> Import to Library... (Файл -> Импорт -> Импорт в библиотеку...)
На сцену из библиотеки перетаскиваем картинку с водопадом. Центрируем ее на сцене. Для этого в палитре Align (Выровнять) нажимаем кнопку To stage, после чего нажимаем на кнопки центрирования по горизонтали и по вертикали.
Создаем новый слой.
На нем располагаем изображение воды, причем так, чтобы вода была смещена на несколько пикселей влево и вниз относительно водопада на первом слое (2-3 пикселя, не больше). Для наглядности:
Создадим третий слой. На нем мы нарисуем маску:
Для начала выберем инструмент "Rectangle (Прямоугольник)" и нарисуем такой прямоугольник на сцене. Цвет не имеет значения, поскольку сама маска не видна. Это только окошко, сквозь которое будет видно все остальное.
Теперь инструментом Selection Tool (Стрелка)(V) отмечаем этот прямоугольник, зажимаем клавишу Alt (для копирования) и пермещаем его ниже. Мы получаем копию его на том же слое.
Повторим эту операцию несколько раз, чтоб получить целый столбик прямоугольников. Для этого нужно несколько раз нажать сочетание клавиш Ctrl+Y (повторить последнее действие)
Щелкаем по первому кадру третьего слоя в тайм-лайне, где располагаются наши прямоугольники. Этим действием мы отмечаем все, что лежит на сцене в этом кадре. Зажимаем Alt и инструментом Selection Tool (Стрелка) (V) копируем нашу графику со смещением влево и вниз.
Повторяем последнее действие (Ctrl+Y) и получаем такую "лесенку".
Щелкаем по первому кадру третьего слоя, отмечая всю графику на этом слое. Жмем F8 (преобразовать в символ). В выпадающем меню указываем имя символа и определяем тип символа Movie Clip (Фрагмент ролика) .
Двойным кликом по символу маски на сцене мы входим в редактирование его свойств. Щелкнем мышкой по 2-му кадру и нажмем клавишу F6 (создать копию ключевого кадра). И с помощью инструмента Selection Tool (Стрелка) (V) сместим маску немного влево (5-6 пикселей)
Мы заставили маску "дрожать". Если сейчас нажать Ctrl+Enter то мы уидим, что прямоугольнички быстро перемещаются над картинкой влево-вправо.
Возвращаемся на редактирование сцены. Для этого нажимаем сюда:
Щелкаем правой кнопкой мышки по первому кадру третьего слоя (там, где расположен символ Maska). Из выпадающего меню выбираем Create Motion Tween (Создать анимацию движения). Цепляем мышкой на тайм-лайне правый край анимации и сжимаем до 8-го кадра. Стоим на 8-м кадре в тайм-лайне, а на сцене премещаем маску вниз так, чтоб самый верхний прямоугольник очутился на месте второго в этой же колонке.
Что, исчез водопад? Не беда, переходим на 8-й кадр на слое водопада и нажимаем F5. То же самое делаем на слое с водой. Тем самым мы продлили время пребывания на сцене водопада и воды.
Ну и наконец: щелкаем правой кнопкой мышки по названию третьего слоя и в выпадающем меню выбираем Mask (Маска).
Жмем Ctrl+Enter и любуемся результатом.
ВОДОПАД
|
|
|
Ирина | Дата: Четверг, 17.11.2011, 10:55 | Сообщение # 3 |
Гость
Сейчас: На суше
| Спасибо за доступный пошаговый урок, как раз для чайника.
|
|
Бродяга | Дата: Четверг, 17.11.2011, 21:05 | Сообщение # 4 |
Почтальон Печкин
Сейчас: На суше
| Ирина, буду рад, если урок окажется полезным. Всегда к Вашим услугам
|
|
|
Бродяга | Дата: Четверг, 17.11.2011, 21:06 | Сообщение # 6 |
Почтальон Печкин
Сейчас: На суше
| Quote (Таисия) Я на скринах увидела замочки на слоях, а ты про них не сказал. Это важно? Таечка, замочки на слоях применяются так же как и в Фотошопе. Я иногда закрываю ненужный мне сейчас слой на замок, чтобы случайно ничего на нем не сдвинуть.
Quote (Таисия) Какая-то капелюшечка булькает только... А покажи мне скрин своей анимации, пожалуйста.
|
|
|
Бродяга | Дата: Вторник, 22.11.2011, 22:35 | Сообщение # 8 |
Почтальон Печкин
Сейчас: На суше
| Цитата Таисия Получилось не очень...
Как по мне, то "очень не получилось"! Или задавай вопросы, Таечка, или внимательно перечитай и повтори урок. Ибо следующий (Морское царство) подразумевает такую же анимацию, которая у тебя (пока) не получилась.
|
|
|
Бродяга | Дата: Среда, 23.11.2011, 13:48 | Сообщение # 10 |
Почтальон Печкин
Сейчас: На суше
| Тая, по-моему ты не поняла, как должна перемещаться маска. Вот ее положение в 1-м кадре и в 8-м:
|
|
Санна | Дата: Среда, 23.11.2011, 13:52 | Сообщение # 11 |
Капитан
Сейчас: На суше
| Юлик, это я поняла вроде... Попробую ещё сегодня. Спасибо. У меня CS5. И немножко не так. Но это поправимо.
Легкая придурковатость снабжает мозг кровью и обеспечивает индивидуальное творческое пространство...
|
|
|
Бродяга | Дата: Среда, 23.11.2011, 15:00 | Сообщение # 13 |
Почтальон Печкин
Сейчас: На суше
| Quote (Таисия) У меня CS5. И немножко не так. Но это поправимо.
Расположение инструментов на рабочем столе — это личное дело каждого
Ну, по скрину я ошибок не вижу. Выложи, пожалуйста, *.fla (исходник).
|
|
Санна | Дата: Среда, 23.11.2011, 15:04 | Сообщение # 14 |
Капитан
Сейчас: На суше
| Вот
Легкая придурковатость снабжает мозг кровью и обеспечивает индивидуальное творческое пространство...
|
|
Бродяга | Дата: Среда, 23.11.2011, 15:38 | Сообщение # 15 |
Почтальон Печкин
Сейчас: На суше
| Ясно теперь. Таечка, во-первых ты неаккуратно сделала "лесенку" — расстояния между прямоугольниками неодинаковые, поэтому видна "сбивка" в конце анимации. Для того чтобы расстояния были одинаковыми, надо было скопировать прямоугольник вниз только один раз, а потом нажимать Ctrl+Y (повтор последнего действия). И еще надо было поиграться со смещением воды относительно водопада. Подобрать правильную дистанцию по вертикали и горизонтали. Но это можно сделать только экспериментально.
Вот, что у меня получилось, когда я чуть подправил твою графику:
Водопад (Тая)
Вот твой исходник (мною подправленый).
|
|