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

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 < PARTS_SIZE.y; i++ ) {
				for ( var j:int = 0; j < PARTS_SIZE.x; j++ ) {
					var part:MovieClip = new MovieClip()
					part.graphics.beginFill( 0xff0000 )
					part.graphics.drawCircle( 0, 0, MASK_PART_SIZE )
					this.addChild( part )
					part.x = stepX - 0.5 * stepX + stepX * j
					part.y = stepY - 0.5 * stepY + stepY * i
					part.scaleX = 0
					part.scaleY = 0
					_parts.push( part )
					//Создаем твины анимации размера для каждой части маски и помещаем их в массив для будущего доступа к ним.
					var tweenScaleX:Tween = new Tween( part, "scaleX", Back.easeOut, 0, 1, TWEEN_TIME, true )
					tweenScaleX.stop()
					var tweenScaleY:Tween = new Tween( part, "scaleY", Back.easeOut, 0, 1, TWEEN_TIME, true )
					tweenScaleY.stop()
					_tweens.push( new Array( tweenScaleX, tweenScaleY ) )
				}
			}
		}
 
		//Функция запуска / перезапуска анимации всей маски.
		public function Show():void {
			_currentPart = 0
			for ( var i:int = 0; i < _tweens.length; i++ ) {
				_tweens[i][0].rewind()
				_tweens[i][0].stop()
				_tweens[i][1].rewind()
				_tweens[i][1].stop()
			}
			_timer.reset()
			_timer.start()
		}
 
		//Функция запуска анимации отдельной части маски.
		private function ShowPart( e:TimerEvent ):void {
			_tweens[_currentPart][0].start()
			_tweens[_currentPart++][1].start()
 
			//Если анимации всех частей запущены, то таймер останавливается.
			if ( _currentPart == PARTS_SIZE.x * PARTS_SIZE.y ) {
				_timer.stop()
			}
		}
 
	}
}

Теперь вернемся в наш *.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 < bitmapDatas.length; i++ ) {
	bitmaps.push( new Bitmap( bitmapDatas[i], "auto", true ) )
	var superMask:SuperMask = new SuperMask( new Point( 550, 400 ) )
	this.addChild( superMask )
	this.addChild( bitmaps[i] )
	bitmaps[i].mask = superMask
	masks.push( superMask )
}
 
//Показываем текущую картинку.
ShowCurBitmap()
 
//Добавляем слушатель клика мыши.
stage.addEventListener( MouseEvent.CLICK, Click )
 
//Функция клика мышкой. Показывает слудующую картинку.
function Click( e:MouseEvent ):void {
	if ( ++curBitmap == bitmaps.length ) {
		curBitmap = 0
	}
	ShowCurBitmap()
}
 
//Функция отображения следующей картинки.
function ShowCurBitmap():void {
	for ( var i:int = 0; i < bitmaps.length; i++ ) {
		if ( curBitmap == i ) {
			this.addChildAt( bitmaps[i], this.numChildren )
			masks[i].Show()
		}
	}
}

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

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

Исходник: 

Внимание!

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

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

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

Подробнее