Создание плавного появления картинок.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
ProcXel.A
Описание: 

Сегодня мы научится создавать эффект плавного появления картинок.

Чтобы посмотреть, как выглядит эффект, кликните пару раз на демонстрационный swf-ролик и вы увидите, как картинки плавно сменяют одна другую. И сейчас я вам расскажу, как это сделать.

Для начала вам понадобится несколько картинок. Скачайте их откуда-нибудь или возьмите свои старые фотографии.

Теперь создайте новый *.fla файл размером 500 х 400. И импортируйте в библиотеку свои картинки. Затем каждую картинку в библиотеке прилинкуйте с своему классу.

Теперь напишем совсем немного кода. Для нашего крутого эффекта нам понадобится супер маска! Поэтому создадим файл SuperMask.as рядом с *.fla файлом и скопируем в этот файл код класса нашей супер маски:

package {
import fl.motion.easing.Back;
import fl.transitions.Tween;
import flash.display.MovieClip;
import flash.events.TimerEvent;
import flash.geom.Point;
import flash.sampler.NewObjectSample;
import flash.utils.Timer;

public class SuperMask extends MovieClip{

//Таймер для запуска анимации размера частей маски.
private var _timer:Timer = new Timer( 40, 0 )
//Массив частей, из которых состоит маска, и которые появляются по очереди.
private var _parts:Array = []
//Твины анимации изменения размера частей маски.
private var _tweens:Array = []
//Счетчик текущей части маски.
private var _currentPart:uint = 0
//Размеры, которые должна покрывать маска.
private var _sizes:Point
//Количество частей маски по оси х и у.
private const PARTS_SIZE:Point = new Point( 25, 20 )
//Время анимации изменения размера каждой отдельной части маски.
private const TWEEN_TIME:Number = 1
//Размер части маски (Радиус круга)
private const MASK_PART_SIZE:Number = 30

//Конструктор.
public function SuperMask( sizes:Point ) {
//Записываем размеры, которые должна покрывать вся маска (Размеры сцены)
_sizes = sizes
//Назначаем слушатель на таймер.
_timer.addEventListener( TimerEvent.TIMER, ShowPart )

//Считаем расстояния между частями маски.
var stepX:Number = _sizes.x / PARTS_SIZE.x
var stepY:Number = _sizes.y / PARTS_SIZE.y

//Создаем части маски.
for ( var i:int = 0; i

Теперь вернемся в наш *.fla документ. И на главной линии времени в первом кадре напишем вот такой код:

import flash.geom.Point;
import flash.display.Bitmap;
import flash.events.MouseEvent;

//Массив с картинками.
var bitmapDatas:Array = [new Image_1(), new Image_2(), new Image_3(), new Image_4()]
//массив с битмапами.
var bitmaps:Array = []
//Массив с масками.
var masks:Array = []
//Счетчик текущей картинки.
var curBitmap:uint = 0

//Создаем битмапы и помещаем их на сцену. Так же создаем маски, помещаем их на сцену и назначаем битмапам.
for ( var i:int = 0; i

Теперь нам осталось протестировать ролик и убедиться, что всё работает так, как и было задумано! Теперь класс с этой супермаской можно использовать где угодно и когда угодно. До новых встреч.

П.С.: Если у вас возникли какие-то трудности, то напишите об этом на нашем форуме. И обязательно получите ответ. :)

Исходник: 

Внимание!

Вы можете изучить все секреты flash анимации всего за 3 недели! Перейти из разряда новичка в разряд опытного пользователя даже без посещения дорогих курсов и чтения толстенных талмудов.

110 видео уроков,

в превосходном качестве помогут пройти, Вам, терни flash анимации самым быстрым и легким путём! +ActionScript 3.0

Подробнее