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

[DoomedSoul]

Пример №1

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

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

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

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

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

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height); 
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60); 
var pt1:Point = new Point(0,0); 
var pt2:Point = new Point(0,0); 
var perlinOffset:Array = [pt1, pt2]; 

addEventListener(Event.ENTER_FRAME, onFrame); 
function onFrame(evt:Event):void { 
         perlinOffset[0].x +=1; 
         perlinOffset[1].y +=0.1; 
         bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset); 
         backImg1.filters=[disp]; 
}

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

Пример №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

// -----------------------------------------------
// Water Reflection Effect
// -----------------------------------------------
import flash.display.*;
import flash.geom.*;
import flash.filters.*;
myBitmap = new BitmapData(390,293,false,0);
pt = new Point(0,0);
mpoint = new Point(0,0);
myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);
water_mc.myList = new Array();
water_mc.myList.push(myDispl);
water_mc.filters = water_mc.myList;
i = 1;
this.onEnterFrame = function()
{
filterList = water_mc.filters;
offset = new Array();
offset[1] = new Object();
offset[1].x = i;
offset[1].y = i/8;
myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);
filterList.mapBitmap = myBitmap;
water_mc.filters = filterList;
i++;
}

Пояснения к коду:
Строки 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

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