09:15 

Урок Adobe Flash - водная рябь, анимированная вода, анимация воды ActionScript

DoomedSoul
This will destroy you... Quiet
Пример №1

Этот урок для тех, кто хочет воспроизвести реальное движение на поверхности воды - "рябь на воде".

В этом уроке используется Action sсript

Вот такой результат должен получиться:







Открываем Флеш, выбираем Action sсript 3.0
Импортируем заранее подготовленную картинку.

File - Import to stage
Центрируем картинку с помощью вкладки Align при необходимости.
Даём название нашему слою с картинкой. Дважды щёлкаем на слое и пишем image. Затем конвертируем нашу картинку в символ. Нажимаем F8 и пишем название backImg1 Далее нам нужно ввести имя в Instance, что на в кладке Properties Следите что имена были точно как нас скринах - это важно!!! Создаём новый слой и называем его actions.
В итоге у вас должно быть два слоя вот с такими названиями и располагаться они должны вот в таком порядке.
Нажимаем мышкой на первый кадр во вновь созданном слое и жмём F9
Вводим код


Всё готово! Нажимайте Сtrl+Enter и тестируйте мувик 15


Пример №2 (идентичный первому с небольшими различиями)
Realistic Flash Water Effect

Мы создадим эффект водной поверхности в Adobe Flash, используя Actionscript. После выполнения данного урока вы сможете применить его к любому изображению или собственной фотографии.
С помощью данного урока вы создадите такой эффект:





Нам понадобится эта картинка:

урок. Реалистичная поверхность воды. *

Шаг 1. Свойства документа.
Откройте Adobe Flash и создайте документ со следующими настройками (Modify > Document):
Размер: 390x293 аналогично размеру используемой фотографии)
Frame Rate: 30 fps (количество кадров в секунду)

Шаг 2. Импортирование фото и подготовка его.
Импортируйте файл lake_img.jpg на сцену. File > Import > Import to Stage...
Выделите фотографию и используя панель Align (Window > Align) отцентрируйте ее. Убедить что кнопка To Stage нажата и нажмите кнопки выравнивания как на скриншоте ниже:

урок. Реалистичная поверхность воды. *

На временной панели назовите этот слой Water. Создайте новый слой с помощью кнопки Insert Layer. Назовите новый слой Land & Sky (см. ниже):

урок. Реалистичная поверхность воды. *

Правый щелчок по фотографии в появившемся меню выберите Break Apart

урок. Реалистичная поверхность воды. *

Возьмите инструмент Lasso и выделите верхнюю часть фото (ту, которая останется неизменной - небо и землю).

урок. Реалистичная поверхность воды. *

Копируйте выделенную часть фотографии. Вставьте скопированное на слой Land & Sky с помощью команды paste it into place (Edit > Paste in Place)
Теперь вверитесь на слой Water и конвертируйте начальное изображение в MovieClip (Modify > Convert to Symbol). Назовите его: water_mc

урок. Реалистичная поверхность воды. *

На панели свойств Properties дайте мувиклипу instance name - 'water_mc'

урок. Реалистичная поверхность воды. *

Пришло время Actionscript.

Шаг 3. Создание эффекта с помощью Actionscript.
Создате новый слой над слоем Land & Sky и назовите его Actionscript.

урок. Реалистичная поверхность воды. *

Выберите первый кадр на временной шкале и откройте панель ActionScript - Window > Actions. Введите следующий скрипт:



CODE




Пояснения к коду:
Строки 1 - 4: Импортируем необходимые классы Actionscript.
Строка 7: Создадим объект BitmapData с с пиксельным массивом, размером с нашу картинку.
Строка 11: Используем класс DisplacementMapFilter для смещения пикселей изображения (деформация картинки).
Важные параметры:
1 параметр - это наш Bitmap Object, объявленный в 7 строке.
Последние 2 параметра - множители деформации по осям Х и У.
Пока оставьте их. Позже поиграетесь с анимацией меняя данные параметры.

строки 13 - 15: Применяем фильтр DisplacementMapFiler к нашему клипу water_mc. /Или так:/

Строка 17: Определим процедуру, запускающуюся с частотой кадров (30 в секунду).
Строки 19 - 23: Подготовка к применению метода perlinNoise (шум по алгоритму Перлина) с различным ежекадровым сдвигом точек.
Строки 24 - 26: Применяем метод perlinNoise к нашей Bitmap data.
Важные параметры:
Параметр 1; Частота воздействия по Х оси.
Параметр 2: Частота воздействия по У оси.
Параметр 3: Число октав. Увеличение числа = б`oльшая детализация и повышенная загрузка процессора.
Последний параметр (сдвиг). Меняет точки сдвига для октав, по осям Х и У.


Сохраните и протестируйте вашу анимацию.
Присоединённые файлы
Присоединённый файл
 water_effect.rar ( 32.01к )
запись создана: 27.10.2011 в 13:25

@темы: Flash, IT, Дизайн, Урок

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

This will destroy you... Quiet

главная