Создаем приложение для презентаций с помощью TweenLite

В этом уроке мы рассмотрим несколько интересных и важных вещей и создадим удобное приложение для просмотра мини-презентации на Flash средствами as3.

В этом уроке мы:

• Рассмотрим использование графики Flash-файла и и ее связь с as-классом.


• Изучим создание программной анимации средствами класса TweenLite

1. Для начала создадим начальную сцену.
Создадим файл Presentation.fla с размерами 480х360.
Создадим два символа, с помощью которых мы будем листать слайды.

Для того, чтобы позднее обращаться к ним из базового класса приложения, нужно создать из них собственные классы. Для этого в свойствах объекта (или при создании символа) пропишем следующие настройки:

И для левой кнопки аналогично — класс Left. Теперь, когда мы создали классы Left и Right, мы сможем обратиться к ним позже при написании кода.
Так будут располагаться кнопки на сцене:

Символы кнопок остались в библиотеке, поэтому мы можем их со сцены удалить, так как позже мы добавим их программно.

2. Сейчас нам нужно выбрать картинки для самой презентации. Я выбрал несколько картинок размерами, равными размерам сцены, показывающие различные времена года (доступно в конце поста). Нужно поместить их в одну директорию, мы будем использовать класс Loader, чтобы загрузить их в приложение. Имена — удобные для добавления с помощью цикла: pic1, pic2, pic3, pic4.

3. Теперь пришло время создания кода приложения. Рассмотрим его по шагам.
Presentation.as:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import com.greensock.*;

	public class Presentation extends Sprite {
		private var left:Left;
		private var right:Right;
		private var slides:Sprite;
		private var picture:Loader;
		private var buttons:Array;

		public function Presentation():void {
			createSlides();
			createButtons();
		}

		private function createButtons():void {
			left = new Left();
			left.x = 12;
			left.y = 180;
			left.alpha = 0.4;
			right = new Right();
			right.x = 468;
			right.y = 180;
			right.alpha = 0.4;
			addChild(right);
			addChild(left);
		}
		private function createSlides():void {
			slides = new Sprite();
			for (var i:int=1; i<=4; i++) {
				picture = new Loader();
				picture.load(new URLRequest("pic"+i+".jpg"));
				picture.x = -480+480*i;
				slides.addChild(picture);
			}
			addChild(slides);
		}
	}
}

Сохраним и запустим. Видим, что загрузилась первая картинка и создались кнопки листания.
На этом шаге: создали и импортировали необходимые пакеты (про пакет com.greensock ниже), создали метод конструктор, в котором вызвали функции, создающие кнопки и ленту картинок.
Мы создали для кнопок собственные классы, которые расширяют класс Sprite, поэтому мы имеем право добавить их на сцену при помощи метода addChild(). Только это уже будут не пустые контейнеры, а графика. Изменим им свойство alpha до 0.4.
Теперь посмотрим на метод createSlides(). Он циклом подгружает картинки и добавляет их одна за другой в контейнер для слайдов slides. Заметим, что с помощью цикла можно удобно загрузить и поставить на нужное место картинки одинакового размера.

4. Теперь перед нами стоит цель осуществить плавную анимацию. Мы знаем, что приемлемо с этим делом справляется класс Tween. Однако в таком случае нам снова придется создавать новые экземпляры класса, прописывать длинные параметры. Если приложение почти полностью состоит из использования плавных переходов, появлений, то, конечно, такой выход не подойдет.
Что же делать в таком случае? Сейчас создается множество различных пакетов для создания программной анимации, таких как TweenLite, TweenMax, Tweener и др., как платных, так и бесплатных. Остановимся на одном — рассмотрим пакет TweenLite и убедимся, что с ним создавать анимацию гораздо проще.
Ясное дело, что этот пакет не включен в основные пакеты Flash IDE, поэтому нам нужно подключить их самим. Скачать пакет можно на оффициальном сайте (версию для as3).
Для того, чтобы начать использовать этот пакет, нужно дать знать о нем самой среде выполнения. Разархивируем скачанный архив куда-нибудь (я рекомендую поместить классы TweenLite в папку с установленным Flash, чтобы в последствии не терять их), а затем открыть параметры Flash (Edit-Settings). Теперь в категории ActionScript открыть "Параметры AcionScript 3.0...".

В поле "Исходный код" необходимо добавить полный путь к той папке, куда вы поместили папку из скачанного архива.
Дело сделано, и теперь флеш знает, какие классы импортировать, если в коде написать такую строчку: import com.greensock.*

5. Рассмотрим использование этого пакета. Чтобы создать программную анимацию, нужно вызвать метод to класса TweenLite:

TweenLite.to(целевой объект, время анимации в секундах, {изменяемое свойство:величина,
ease:Эффект замедления});

Основное преимущество этого пакета — то, что однократным вызовом метода можно анимировать сразу несколько свойств, например:

TweenLite.to(object, 1, {x:150, y:150, alpha:0});

В этом примере объект за одну секунду переместится в заданные координаты и исчезнет.

6. Теперь применим этот пакет в нашем приложении. Обновленный класс Presentation.as:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import com.greensock.*;

	public class Presentation extends Sprite {
		private var left:Left;
		private var right:Right;
		private var slides:Sprite;
		private var picture:Loader;
		private var buttons:Array;

		public function Presentation():void {
			createSlides();
			createButtons();
		}

		private function createButtons():void {
			left = new Left();
			left.x = 12;
			left.y = 180;
			left.alpha = 0.4;
			right = new Right();
			right.x = 468;
			right.y = 180;
			right.alpha = 0.4;
			addChild(right);
			addChild(left);
			buttons = new Array(left, right);
			buttons.forEach(buttonsListener);

		}
		private function createSlides():void {
			slides = new Sprite();
			for (var i:int=1; i<=4; i++) {
				picture = new Loader();
				picture.load(new URLRequest("pic"+i+".jpg"));
				picture.x = -480+480*i;
				slides.addChild(picture);
			}
			addChild(slides);
		}
		private function buttonsListener(element:*, index:int, arr:Array) {
			element.addEventListener(MouseEvent.MOUSE_OVER,selectItem);
			function selectItem(e:MouseEvent):void {
				TweenLite.to(element, 1, {alpha:1});
			}
			element.addEventListener(MouseEvent.MOUSE_OUT,unselectItem);
			function unselectItem(e:MouseEvent):void {
				TweenLite.to(element, 1, {alpha: 0.4});
			}
			element.addEventListener(MouseEvent.CLICK, clickItem);
			function clickItem(e:MouseEvent):void {
				if (index==1) TweenLite.to(slides, 1, {x:slides.x-480});
				if (index==0) TweenLite.to(slides, 1, {x:slides.x+480});
			}
		}
	}
}

Для удобства назначения анимации и действий мы используем метод работы с массивом forEach(), который применяет указанные действия ко всем элементам массива. В массиве buttons хранятся две кнопки: влево и вправо. При наведении срабатывает анимация появления, при отмене наведения — анимация затухания. При клике идет разветвление в зависимости от номера элемента массива, на который был произведен щелчок. Если индекс 0 (кнопка "влево"), то двигаем ленту картинок вправо, если индекс 1, то наоборот.
Запустим. Теперь при наведении на кнопки они плавно выделяются, при клике движутся картинки.
Однако сейчас созданное приложение полно серьезных недочетов (например, выход за пределы, остановка при быстром нажатии).

7. Окончательный вариант.
Смысл блокировки анимации таков: если показана 1 картинка, то возможно прокрутить только вправо, а если показана последняя картинка, то доступная только кнопка "влево". Для этого введем переменную currentPicture, которая по модулю будет обозначать номер показанной картинки, и также служить уникальным счетчиком для свойства в классе TweenLite. В слушателе для нажатия на кнопку мы добавили пару условий для блокировки прокрутки в предельных моментах.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import com.greensock.*;

	public class Presentation extends Sprite {
		private var left:Left;
		private var right:Right;
		private var slides:Sprite;
		private var picture:Loader;
		private var buttons:Array;

		private var currentPicture:int = -1;

		public function Presentation():void {
			createSlides();
			createButtons();
			trace(currentPicture);
		}

		private function createButtons():void {
			left = new Left();
			left.x = 12;
			left.y = 180;
			left.alpha = 0.4;
			right = new Right();
			right.x = 468;
			right.y = 180;
			right.alpha = 0.4;
			addChild(right);
			addChild(left);
			buttons = new Array(left,right);
			buttons.forEach(buttonsListener);

		}
		private function createSlides():void {
			slides = new Sprite();
			for (var i:int=1; i<=4; i++) {
				picture = new Loader();
				picture.load(new URLRequest("pic"+i+".jpg"));
				picture.x = 480 * i;
				slides.addChild(picture);
			}
			slides.x = -480;
			addChild(slides);
		}
		private function buttonsListener(element:*, index:int, arr:Array) {
			element.addEventListener(MouseEvent.MOUSE_OVER,selectItem);
			function selectItem(e:MouseEvent):void {
				TweenLite.to(element, 1, {alpha:1});
			}
			element.addEventListener(MouseEvent.MOUSE_OUT,unselectItem);
			function unselectItem(e:MouseEvent):void {
				TweenLite.to(element, 1, {alpha: 0.4});
			}
			element.addEventListener(MouseEvent.CLICK, clickItem);
			function clickItem(e:MouseEvent):void {
				trace(currentPicture);
				if (index == 1 && Math.abs(currentPicture) != 4) {
					currentPicture--;
					TweenLite.to(slides, 1, {x:currentPicture*480});
				} else if (index==0 && Math.abs(currentPicture)!=1) {
					currentPicture++;
					TweenLite.to(slides, 1, {x:currentPicture*480});
				} else {
					TweenLite.to(slides, 0.5, {x:-480});
					currentPicture = -1;
				}

			}
		}
	}

}

Запустим — все прокручивается, без багов. Если нажимать чуть быстрее, то картинка все равно приходит нужная.
[swfobj src="http://cyber-page.ru/wp-content/uploads/2011/04/Presentation1.swf"]

Этим примером мы убедились, что использовать пакет TweenLite гораздо удобнее, чем встроенный класс Tween. Исходник.