PaperSprite

PaperSprite - это небольшой класс на ActionScript 3.0 от Justin Windle, который позволяет быстро и удобно создавать двусторонние DisplayObject-ы (мувиклипы, спрайты и т.д.). Сам класс доступен для скачивания с сайта http://blog.soulwire.co.uk. Там же имеются примеры применения PaperSprite (на эти примеры и будем опираться).

Для чего нужен PaperSprite? Лучше всего рассмотреть этот вопрос на примерах.

Пример 1. Вращаем обычный DisplayObject (MovieClip):

Пример 2. Вращаем PaperSprite:

Пример 3. Вращаем PaperSprite, у которого разные лицевая и обратная сторона:

Обратите внимание на то, что происходит с текстом из первого примера. Если мувик располагается к нам лицевой стороной, то текст читается правильно. Но если этот же мувик повернуть к нам обратной стороной, то читать текст нам будет очень неудобно :-) А вот во втором примере, где используется PaperSprite, такой проблемы уже нет. Текст будет всегда отображаться правильно.

Ещё интереснее 3-й пример. В нём на каждой стороне PaperSprite располагается самостоятельное изображение. Одно изображение - на лицевой стороне объекта. Совсем другое изображение - на обратной стороне PaperSprite.

Как работать с PaperSprite? А работать невероятно просто.

Код ActionScript 3.0:


/*
импортируем сам класс PaperSprite
*/
import soulwire.display.PaperSprite;
/*
Создаём экземпляр PaperSprite.
В качестве параметра передаём ему два DisplayObject-а (в данном случае используются мувиклипы).
Первый мувиклип будет лицевой стороной PaperSprite, а второй мувиклип - обратной стороной.
*/
var paperSprite:PaperSprite = new PaperSprite(new Mc1(),new Mc2());
/*
Устанавливаем для PaperSprite координаты.
*/
paperSprite.x = stage.stageWidth / 2;
paperSprite.y = stage.stageHeight / 2;
/*
Добавляем PaperSprite в список отображения.
*/
addChild(paperSprite);
/*
Вращаем PaperSprite.
*/
addEventListener (Event.ENTER_FRAME, onEnterFrames);
function onEnterFrames ( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;
	paperSprite.rotationY += (mX - paperSprite.rotationY) / 40;
	paperSprite.rotationX += (mY - paperSprite.rotationX) / 40;
}

Тоже самое можно написать немного другим образом:


/*
импортируем сам класс PaperSprite
*/
import soulwire.display.PaperSprite;
/*
Создаём экземпляр PaperSprite.
*/
var paperSprite:PaperSprite = new PaperSprite();
/*
Создаём лицевую сторону PaperSprite.
*/
paperSprite.front = new Mc1();
/*
Создаём обратную сторону PaperSprite.
*/
paperSprite.back = new Mc2();
/*
Устанавливаем для PaperSprite координаты.
*/
paperSprite.x = stage.stageWidth / 2;
paperSprite.y = stage.stageHeight / 2;
/*
Добавляем PaperSprite в список отображения.
*/
addChild(paperSprite);
/*
Вращаем PaperSprite.
*/
addEventListener(Event.ENTER_FRAME, onEnterFrames);
function onEnterFrames( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;
	paperSprite.rotationY +=  (mX - paperSprite.rotationY) / 40;
	paperSprite.rotationX +=  (mY - paperSprite.rotationX) / 40;
}

То есть у каждого экземпляра PaperSprite есть свойства front и back, которые отвечают за лицевую и обратную сторону данного PaperSprite.

Если вы будете применять PaperSprite, то, скорее всего, будете применять к нему вращение (а, иначе, как пользователь увидит обратную сторону объекта!). Поэтому надо знать, как управлять вращением PaperSprite. Для этого PaperSprite имеет специальное свойство pivot. Свойство pivot устанавливает точку, вокруг которой будет вращаться данный PaperSprite.


/*
импортируем сам класс PaperSprite
*/
import soulwire.display.PaperSprite;
/*
Создаём экземпляр PaperSprite.
В качестве параметра передаём ему два DisplayObject-а (в данном случае используются мувиклипы).
Первый мувиклип будет лицевой стороной PaperSprite, а второй мувиклип - обратной стороной.
*/
//var paperSprite:PaperSprite = new PaperSprite(new Mc1(),new Mc2());
var paperSprite:PaperSprite = new PaperSprite();
/*
Создаём лицевую сторону PaperSprite.
*/
paperSprite.front = new Mc1();
/*
Создаём обратную сторону PaperSprite.
*/
paperSprite.back = new Mc2();
/*
Устанавливаем для PaperSprite координаты.
*/
paperSprite.x = stage.stageWidth / 2;
paperSprite.y = stage.stageHeight / 2;
/*
Назначаем опорную точку.
*/
paperSprite.pivot = new Point(0.5,0.5);
/*
Добавляем PaperSprite в список отображения.
*/
addChild(paperSprite);
/*
Вращаем PaperSprite.
*/
addEventListener (Event.ENTER_FRAME, onEnterFrames);
function onEnterFrames ( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;
	paperSprite.rotationY += (mX - paperSprite.rotationY) / 40;
	paperSprite.rotationX += (mY - paperSprite.rotationX) / 40;
}

Обратите внимание, что опорная точка задаётся не в абсолютном, а в относительном значении. Поэтому, если вы захотите, чтобы PaperSprite вращался относительно своего верхнего левого угла, то передайте свойству pivot значение Point(0,0), а если относительно нижнего правого угла - Point(1,1).

В приведённых выше примерах в качестве сторон PaperSprite выступали мувиклипы. Но можно использовать не только класс MovieClip, но и другие классы, наследующие от DisplayObject. Например, ниже приводится вариант кода с использованием экземпляров класса Bitmap.


import soulwire.display.PaperSprite;

var paperSprite:PaperSprite = new PaperSprite();
/*
В качестве лицевой и обратной стороны PaperSprite назначаем экземпляры класса Bitmap.
*/
paperSprite.front = new Bitmap(new MyBitmap1());
paperSprite.back = new Bitmap(new MyBitmap2());

paperSprite.x = stage.stageWidth / 2;
paperSprite.y = stage.stageHeight / 2;

paperSprite.pivot = new Point(0.5,0.5);

addChild(paperSprite);

addEventListener (Event.ENTER_FRAME, onEnterFrames);
function onEnterFrames ( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;
	paperSprite.rotationY += (mX - paperSprite.rotationY) / 40;
	paperSprite.rotationX += (mY - paperSprite.rotationX) / 40;
}

Результат будет примерно следующим: