Урок по созданию реалистичных волн во флэше

Урок по Флэш

кликайте на картинки, чтобы увидеть их полный размер


РЕАЛИСТИЧНЫЕ ВОЛНЫ (ПРИВЬЮ) ТУТ!

Начнём с того, что найдём картинку с закатом, типа этой:

Сохраним её как sky.jpg

После чего, октрываем её в фотошопе, идём в Edit – Transform > Flip vertical. Сохраняем перевёрнутую картинку как “water”

Размер каждой из наших картинок - 406x172 px,.

Теперь, открываем программу Флэш (Flash) и создаём новый документ размером 400x330 px.

Нажимаем Ctrl+R (импорт), и импортируем картинку sky.jpg. Помещаем её в верхнюю часть нашего документа, и убедившись что картинка выделена - нажимаем F8, превращаем её в movie clip, и называем sky_mc. Это обязательно!

Создаём новый слой, нажимаем снова Ctrl+R, импортируем картинку water.jpg, помещаем её под картинкой “sky”, точно так же, нажатием F8 переводим картинку в movie clip, и называем её water_mc. Слой помещаем под слой с небом.

Создаём новый слой, и за пределами документа рисуем прямоугольник, закрашиваем его градиентом от белого к чёрному. Убедимся что он выделен, и производим ту же процедуру F8, переводим картинку в movie clip, и называем её gradient_mc.

Теперь, кликая на каждую картинку - проверяйте их названия в этой строке:

После чего, создаём новый слой, нажимаем F9, и в появившемся окошке вставляем этот скрипт.

var w = water_mc._width;
trace(w);
var h = water_mc._height;
ripple = new flash.display.BitmapData(w, h);
ripple3 = new flash.display.BitmapData(w, h / 2);
ripple2 = new flash.display.BitmapData(w, h / 4);
ripple1 = new flash.display.BitmapData(w, h / 4);
gradient = new flash.display.BitmapData(ripple.width, ripple.height);
gradient.draw(gradient_mc, new flash.geom.Matrix(1, 0, 0, 1, 0, 0));
gradient_mc._visible = false;
offset3 = new flash.geom.Point(0, 0);
offset2 = new flash.geom.Point(0, 0);
offset1 = new flash.geom.Point(0, 0);
speed1 = -0.300000;
speed2 = -0.600000;
speed3 = -1.200000;
pt = new flash.geom.Point(0, 0);
rect = new flash.geom.Rectangle(0, 0, ripple.width, ripple.height);
this.onEnterFrame = function ()
{
offset1.y = offset1.y + speed1;
offset2.y = offset2.y + speed2;
offset3.y = offset3.y + speed3;
ripple3.perlinNoise(0, 15, 1, seed, true, true, 1, true, [offset3]);
ripple2.perlinNoise(0, 10, 1, seed, true, true, 1, true, [offset2]);
ripple1.perlinNoise(0, 5, 1, seed, true, true, 1, true, [offset1]);
ripple.copyPixels(ripple1, r1rect, r1pt);
ripple.copyPixels(ripple2, r2rect, r2pt);
ripple.copyPixels(ripple3, r3rect, r3pt);
ripple.merge(gradient, rect, pt2, 127, 127, 127);
dMap = new flash.filters.DisplacementMapFilter(ripple, pt, null, 1, 100, 100, "WRAP");
water_mc.filters = [dMap];
};
r1rect = new flash.geom.Rectangle(0, 0, ripple1.width, ripple1.height);
r2rect = new flash.geom.Rectangle(0, 0, ripple2.width, ripple2.height);
r3rect = new flash.geom.Rectangle(0, 0, ripple3.width, ripple3.height);
r1pt = new flash.geom.Point(0, 0);
r2pt = new flash.geom.Point(0, ripple1.height);
r3pt = new flash.geom.Point(0, ripple1.height + ripple2.height);

Вот и всё!!!

РЕАЛИСТИЧНЫЕ ВОЛНЫ (ПРИВЬЮ) ТУТ!

Исходник в виде файла формата*.fla можно скачать тут.


Copyright © http://megatutorials.blogspot.com