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

Мероприятия, проводимые 2 февраля во Всемирный день водно-болотных угодий (World Wetlands Day), призваны обратить внимание общественности и Правительств различных стран мира на ценность водно-болотных угодий для поддержания устойчивого развития нашей планеты. Поддержим же наши болота, создав веселую музыкальную открытку.

Наша музыкальная открытка будет выглядеть так:

Кликните на нее. Открытка откроется и заиграет музыка. Кликните еще раз. И они закроется и музыка играть перестанет. Если вам она нравится, а она вам нравится, то давайте же сделаем её как можно скорее!

Для создания открытки вам понадобится FlashDevelop и библиотеки TweenLite и PaperVision3D. Так же вам понадобится три картинки для каждой страницы открытки и звуковой файл, который будет играть при открытии.

Создайте новый ActionScript 3.0 проект во FlashDevelop. В папку проекта "lib" положите библиотеки TweenLite и PaperVision3D. Создайте в папке проекта папку "audio" и положите в нее звуковой файл. Создайте также папку "images" и положите в нее три картинки. Вот что должно у вас получиться:

Теперь нам осталось написать код для класса "Main" и для класса "Card".

Файл "Main.as" для класса "Main" уже существует. Откройте его и напишите в нем вот такой код:

package {
import com.greensock.TweenLite;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import org.papervision3d.view.BasicView;

//Задаем размеры, ФПС и цвет фона флэшки.
[SWF ( width = 450, height = 450, frameRate = 30, backgroundColor = 0x009933 )]

public class Main extends Sprite {
//Наша открытка.
private var _card:Card;
//Флаг открывания и закрывания открытки.
private var _switch:Boolean = false;
//Внедрение мелодии открытки.
[Embed(source = "../audio/sound.mp3")] public const EmbedSound:Class;
//Звук нашей открытки.
private var _sound:Sound = new EmbedSound();
//Звуковой канал.
private var _sChannel:SoundChannel;

//Конструктор.
public function Main():void {
//Если главный класс добавлен на сцену, то запускаем инициализацию.
if ( stage ) {
Init();
}
//Иначе ждем, когда главный класс будет добавлен на сцену.
else {
this.addEventListener( Event.ADDED_TO_STAGE, Init );
}
}

//Инициализация.
private function Init( e:Event = null ):void {
//Удаляем ненужный слушатель.
this.removeEventListener( Event.ADDED_TO_STAGE, Init );
//Создаем открытку.
_card = new Card( stage );
_card.buttonMode = true;
//Слушаем клик по открытке.
_card.addEventListener( MouseEvent.CLICK, Click );
}

//Клик по открытке.
private function Click( e:MouseEvent ):void {
//Если _switch = true, то закрываем открытку.
if ( _switch ) {
//Закрываем открытку.
_card.Close();
//Выключаем звук.
_sChannel.stop();
_sChannel = null;
}
//Иначе открываем открытку.
else {
//Открываем открытку.
_card.Open();
//Включаем звук.
_sChannel = _sound.play( 0, 100 );
}
//Сохраняем новое значение флага.
_switch = !_switch;
}
}
}

Теперь рядом с файлом "Main.as" создайте файл "Card.as" и напишите в нем вот такой код:

package {
import com.greensock.TweenLite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Stage;
import flash.events.Event;
import flash.geom.Point;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.QuadrantRenderEngine;
import org.papervision3d.view.BasicView;

public class Card extends BasicView {
//Объект Stage.
private var _stage:Stage;
//Главный контейнер открытки, в котором лежат все страницы.
private var _cardContainer:DisplayObject3D;
//Контейнер, в который помещается первый лист открытки, состоящий из двух страниц.
private var _firstPageContainer:DisplayObject3D;
//Первая страница. Титульная.
private var _firstPage:Plane;
//Вторая страница с рисунком.
private var _secondPage:Plane;
//Третья страница с текстом.
private var _thirdPage:Plane;
//Материалы, содержащие изображение страниц.
private var _material1:BitmapMaterial;
private var _material2:BitmapMaterial;
private var _material3:BitmapMaterial;

//Внедрение картинок.
[Embed(source = "../images/page_1.jpg")] public const Page_1:Class;
private var page1:Bitmap = new Page_1();
[Embed(source = "../images/page_2.jpg")] public const Page_2:Class;
private var page2:Bitmap = new Page_2();
[Embed(source = "../images/page_3.jpg")] public const Page_3:Class;
private var page3:Bitmap = new Page_3();

//Размер страниц.
private const _SIZES:Point = new Point( 480, 640 );
//Количество сегментов 3Д плоскостей, из которых состоят страницы.
private const _SEGMENTS:uint = 3;
//Время анимации открывания картинки.
private const _TWEEN_TIME:Number = 0.3;

//Конструктор.
public function Card( stage:Stage ) {
//Добавляем открытку на сцену.
_stage = stage;
_stage.addChild( this );

//Создаем главный контейнер и рамещаем его.
_cardContainer = new DisplayObject3D();
_cardContainer.x = -_SIZES.x * 0.5;
//Создаем контейнер для первого листа открытки.
_firstPageContainer = new DisplayObject3D();
//Помещаем главный контейнер на сцену.
this.scene.addChild( _cardContainer );
//Помещаем контейнер первого листа в главный контейнер.
_cardContainer.addChild( _firstPageContainer );

//Создаем материалы.
_material1 = new BitmapMaterial( page1.bitmapData, true )
_material2 = new BitmapMaterial( page2.bitmapData, true );
_material3 = new BitmapMaterial( page3.bitmapData, true );

//Создаем 3Д плоскость первой страницы и позиционируем.
_firstPage = new Plane( _material1, _SIZES.x, _SIZES.y, _SEGMENTS, _SEGMENTS );
_firstPage.x = _SIZES.x * 0.5;
_firstPage.z = -0.5;
//Помещаем первую страницу в контейнер первого листа.
_firstPageContainer.addChild( _firstPage );

//Создаем вторую страницу.
_secondPage = new Plane( _material2, _SIZES.x, _SIZES.y, _SEGMENTS, _SEGMENTS );
_secondPage.x = _SIZES.x * 0.5;
_secondPage.rotationY = 180;
//Помещаем в контейнер первого листа.
_firstPageContainer.addChild( _secondPage );

//Создаем третью страницу.
_thirdPage = new Plane( _material3, _SIZES.x, _SIZES.y, _SEGMENTS, _SEGMENTS );
_thirdPage.x = _SIZES.x * 0.5;
_thirdPage.z = 0.5;
//помещаем в главный контейнер открытки.
_cardContainer.addChild( _thirdPage );

//Чуть приближаем камеру к центру.
this.camera.z = -800;
//Задаем корректную обработку 3Д объектов, чтобы не было видно щелей между полигонами.
this.renderer = new QuadrantRenderEngine( QuadrantRenderEngine.CORRECT_Z_FILTER );
//Запускаем отрисовку.
this.startRendering();
}

//Функция открытия открытки.
public function Open():void {
TweenLite.to( _cardContainer, _TWEEN_TIME, { x:0, rotationY:10 } );
TweenLite.to( _firstPageContainer, _TWEEN_TIME, { rotationY:160 } );
}

//Функция закрытия открытки.
public function Close():void {
TweenLite.to( _cardContainer, _TWEEN_TIME * 3, { x:( -_SIZES.x * 0.5 ), rotationY:0 } );
TweenLite.to( _firstPageContainer, _TWEEN_TIME * 3, { rotationY:0 } );
}

//Обработка перемещения камеры относительно мышки.
override protected function onRenderTick( e:Event = null ):void {
super.onRenderTick( e );

this.camera.x = 2 * ( _stage.width * 0.5 - _stage.mouseX );
this.camera.y = -2 * ( _stage.height * 0.5 - _stage.mouseY );
}
}
}

Готово! Теперь компилируем. И у нас получается веселая музыкальная открытка, как и обещал. До новых встреч. :)