“Easily create two sided 3D DisplayObjects and flip card effects using Flash Player 10 and the new 3D API …”

PaperSprite Demo

I’ve made a couple of small improvements to the PaperSprite class:

  1. The visible face of the plane is updated automatically only when required. This saves on processing load and also means you can just set up the PaperSprite and not have to worry about anything else, just tween the crap out of all its properties and it won’t mind one bit. (Thanks to Jesse for the pointers re. using stage.invalidate for this process)
  2. The back face is now automatically flipped horizontally, so text and graphics are no longer mirrored and will display correctly
  3. I’ve changed the logic which sets the dynamic registration point for the pivot. This should now correctly line up the front and back faces of the 3D plane, regardless of where their individual registration points are.

Also, some people have asked how to use it, so here is a really quick example to get you up and running with PaperSprite if you are not familiar with using classes and are using the Flash IDE to compile your movie:

  1. First, download the PaperSprite class and put the soulwire folder in the same directory as your FLA or source code.
  2. Then paste this code into the main timeline of your FLA:

// Import the PaperSprite class

import soulwire.display.PaperSprite;

/*
Create a new PaperSprite:

If your front and back faces already exist, you can pass them straight
into the constructor, like so:

myPaperSprite = new PaperSprite( myFrontMc, myBackMc );
*/

var myPaperSprite:PaperSprite = new PaperSprite();

/*
Optionally specify a pivot point, in this example the centre is used
(this is also the default so there is no need to set this normally).

To pivot around the top left use:
myPaperSprite.pivot = new Point(0,0);

or for bottom right:
myPaperSprite.pivot = new Point(1,1);

and so on...
*/

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

// Centre it on the stage

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

/*
Set the front and back faces:

These can be any type of DisplayObject, for example, to use a MovieClip
from your library use:

myPaperSprite.front = new MyLibraryClip();
*/

myPaperSprite.front = createSprite(0x66FF00);
myPaperSprite.back = createSprite(0xFF3399);

// Add the PaperSprite to the display list

addChild ( myPaperSprite );

// This method just creates coloured boxes for the demo

function createSprite (colour:uint):Sprite
{
	var mySprite:Sprite = new Sprite();
	mySprite.graphics.beginFill ( colour );
	mySprite.graphics.drawRect (0,0,100,100);
	mySprite.graphics.endFill ();
	return mySprite;
}

// Listen for the enterFrame event

addEventListener ( Event.ENTER_FRAME, spin );

/*
Move and rotate your PaperSprite in any way you want - it will
update it's visible face automatically!
*/

function spin ( event:Event ):void
{
	var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
	var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;

	myPaperSprite.rotationY += (mX - myPaperSprite.rotationY) / 40;
	myPaperSprite.rotationX += (mY - myPaperSprite.rotationX) / 40;
}

Publish the movie and you’re all done!

Background

Flash Player 10’s new 3D capabilities are a much welcomed and exiting addition, and although their implementation at first seemed a little obtuse after using libraries such as Papervision3D, Adobe’s implementation is beginning to make a lot more sense to me. Rather than being handed a complete 3D library, developer’s have been given the necessary building blocks to use 3D, or 2.5D with less ‘hacks’ and arguably better performance where it matters.

Time will tell, but I personally think this will be a positive development for existing frameworks like Papervision and Sandy, because whilst Flash can now natively handle certain tasks like triangle drawing, 3D matrices etc – implementing cameras and shaders, loading and building meshes and so on is something which developers will still require. If this can plug neatly into Flash Player’s capabilities and possibly yield increased performance then all the better.

In more basic situations though, the ability to rotate a DisplayObject around its X, Y and Z axis, as well as finally having a Z property, is useful for adding basic 3D effects, even if your project doesn’t require anything more sophisticated than that.

But this is where some gaps begin to arise. Z sorting, for example, will be required, and Ralph Hauwert (a member of the Papervision3D team) has already written a useful script for this.

Two Sided DisplayObjects

Another common use for Flash Player 10’s 3D capabilities is to create double sided sprites or planes, than can be rotated to reveal alternate content on either side. Again, I would have expected this to be a new property of DisplayObjectContainer, so that front and back could be passed to it as DisplayObjects. This isn’t the case though, so it requires some minimal work around.

Lee Brimelow demonstrated one approach to this, which was to monitor the rotation of a DisplayObject, and swap the visible faces accordingly (Jesse Freeman also used this technique). This works great in many cases, however it doesn’t give the desired results when the parent DisplayObject is off centre and therefore subject to the perspective of the 3D environment. It also means that if you are rotating the DisplayObject around multiple axis then the calculations required get slightly more complex.

The Solution

As ever, the wise and prolific Senocular came to the rescue. He described a technique whereby 3 points are placed on the surface of the DisplayObject, and by determining the winding direction of these points when translated from 3D to 2D space; one is able to determine which way the DisplayObject is facing. Because this is relative to the perspective used to produce this transformation, the result is true to the point of view of the user.

Senocular published his helper class which will return a Boolean value indicating whether a given DisplayObject is front facing or not, and so I wish to stress that all credit is his for his solution and wonderfully clear explanation of the process.

I did feel that it might be beneficial though to wrap this up, along with other functionality, into a class which solved the double sided DisplayObject issue, and so I introduce the PaperSprite class (I chose to call it PaperSprite so that it isn’t confused with Sprite3D if you use another 3D library).

How to use PaperSprite

Creating a two sided Plane using PaperSprite is simple:

import soulwire.display.PaperSprite;

var mySprite:PaperSprite = new PaperSprite();

// Any type of DisplayObject can be used for each face
mySprite.front = new Sprite();
mySprite.back = new Bitmap( myImage );

So you can use any DisplayObject for the front and reverse sides; MovieClips, Sprites, Bitmaps, Shapes, Loaders etc. These can also be set via the constructor

Another property of PaperSprite is whether is updates it’s display automatically. If true, once the PaperSprite is added to the stage it will update its visible face autonomously, however if you have a more general render loop where you’re controlling your 3D scene from, you can set this to false and then call the update method when calculating the visible face is required:

Thanks to Jesse Freeman for suggesting a method to limit unnecessary calls to the update method. By overriding the setters for the position and rotation properties and using stage.invalidate(), then listening for the render event (Event.RENDER), the calculations needed to determine the visible face of the PaperSprite need only be made if one or more properties have been changed and if the PaperSprite needs to be rendered. Therefore there is no longer a need for autoUpdate, everything is handled internally by the PaperSprite class. Cheers Jesse! :)

…The other useful feature is the pivot property. By default, a PaperSprite will pivot (rotate around) its centre point, which will be automatically calculated for each face depending on its respective dimensions. Alternatively, if you want the PaperSprite to rotate around the top left corner, bottom right, or indeed any point on its surface, you can set the pivot property, which is a Point object and requires 2 normalised values, representing the fraction of the width and height of the PaperSprite at which you want to place the pivot.

So to set the PaperSprite to rotate around its centre (this is set by default) you can use:

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

And its Top Left corner:

mySprite.pivot = new Point( 0.0, 0.0 );

And its top centre:

mySprite.pivot = new Point( 0.5, 0.0 );

And so on!

You can also access its isFrontFacing property at any time:

if ( mySprite.isFrontFacing )
{
	doSomethingGood();
}

An finally, removing the front or back face from its display list (or indeed not defining one at all) will cause the PaperSprite to display the available face at all times, essentially giving it the default behaviour of a one sided Sprite.

Download the PaperSprite class

Again, this is really just a glorified augmentation of Senocular’s solution to finding the front facing side of a DisplayObject in 3D. All credit should go to him for creating such an elegant solution. I built this class in order to simplify its use and provide the extra functionality needed to quickly start working with a two-sided DisplayObject.

Download: PaperSprite Class & Demo
Posted on 30 Dec 2008
107 Comments
11 Trackbacks

Meta

Double Sided 3D Plane in FP10 was posted on December 30th 2008 in the category Code / Actionscript 3.0, Code, Flash, Lab, Open Source and tagged; , , , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 401 Unauthorized in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

108 Responses to Double Sided 3D Plane in FP10

1 7 8 9

Leave a Reply

Pingbacks / Trackbacks

  1. 5 years ago Senocular’s Two Sided 3D Clip

    [...] technique. The class is worth checking out – it’s nicely designed… read more about it here. This entry was posted in 3D, MovieClip and tagged actionscript, cross product, flash, polygon [...]

  2. 4 years ago 3D Cards in Flash « Bird In The City.com

    [...] Link Filed under: 3D, AS 3.0, Flash Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments on this post ) [...]

  3. 4 years ago MARK/SAM » Blog Archive » Really Cool Two Sided 3D

    [...] found this test on Soulwire. It is an extension of papervision written by Soulwire called PaperSprite. It’s unique [...]

  4. 4 years ago Flash 10 3D example | dehash

    [...] December 23rd, 2009 | Author: dehash 3D Flash Player 10 example and code using PaperSprite and the new built in 3D instead of PaperVision. The output is similar to similar to the [...]

  5. 4 years ago 14lox blog » Blog Archive » New site update

    [...] that was essential for my project. While researching, I stumbled across Soulwire’s great PaperSprite class, which solves this problem by allowing you to add DisplayObjects, one to the front and one on to [...]

  6. 3 years ago Flash vs HTML5+JavaScript Libraries: And Don’t Forget The Tables « Nookeen Media

    [...] OK!nteractif made this section of a website for Musee de la Civilisation (Quebec). Also, I like this class of rotating objects – outstanding job! You can make such a cool animation with this technique. By saying NO to [...]

  7. 3 years ago flashVT » GameJam II: Cards are flipping and shuffling

    [...] cards are now flipping and I added some shuffling for testings. Thanks to soulwire for the PaperSprite class. Next up, limiting to 2 flips per turn and checking [...]

  8. 3 years ago I cannot (will not) use TLF text fields in Flash CS5 | harveyline blog

    [...] before releasing them to my website. (I recently replaced a Papervision component with the PaperSprite Class from SoulWire, thereby saving [...]

  1. Rey 3 years ago

    Hi Soulwire!

    Dude, thank you so much for the tool! I have been trying to replicate the example you have on the page but have been pulling my hair out for two days trying. Do you have the source available publicly anywhere? Thanks again bro!

    Reply to this comment

  2. Adrian Parr 3 years ago

    Hi Justin,

    Do you think V2 is on the horizon?

    You mention “I need to update this class as there are a few little bugs and improvements, so I’ll be sure to include this feature.” It would be great if you incorporated the nullifying of the matrix3D into the class, or provide a public method that we could call manually that removed the blurriness (if the PaperSprite is not rotated in any way).

    Cheers,

    Adrian

    Reply to this comment

    1. Soulwire 3 years ago

      Hi Adrian,

      I’ve fixed some bugs and improved performance and will definitely add the null Matrix3D feature.

      Keep an eye on: https://github.com/soulwire/SoulwireAS3Framework/blob/master/src/uk/co/soulwire/display/PaperSprite.as

  3. Martin Harvey 3 years ago

    Very, very, nice.
    I was using Papervision to create flippable two-sided planes in CS3 using loaded SWFs for the plane images. This added about 64kb to the overall SWF file size.
    I also experimented with Away3D, which I think rendered the plane better but added 128kb.
    I recently upgraded to CS5 (late to the party a usual) and implemented this class to acheive the same effect which adds about 4kb!
    I parent the child SWF to the root display list to get best fidelity and only parent the SWF to the PaperSprite duting the ‘flip’.

    Thanks to you and Professor Senocular

    Martin

    Reply to this comment

  4. Antony 3 years ago

    Hi Justin,

    I’m new to Flash 3D Tools, AS3, and importing classes, so please pardon my ignorance, but I’ve been struggling with both the “single sided back reversed post card” and “z-order not respecting z-space” issues for a couple weeks now and hope your solution will solve it.

    The reason why I ask is that I am building fairly complex 3D objects on the stage without using an engine such as Papervision3D or Away3D.

    What is not clear is how do I use PaperSprites in the Flash IDE? When I create a PaperSprite in AS3 can I manipulate it as I would any other symbol within my Library?

    For example, will it appear in my Library to add to stage as a reference or nest in a new MovieClip? Will I be able to position it using the Property Inspector, 3D Rotation, and 3D Translation Tools? Will I be able to duplicate it within the Library and simply swap out instances of front and back? Or will I have to hand code each one manually?

    Are you aware of any video tutorials that take advantage of both this and SimpleZSorter? If not, would you like to create one?

    Thank you,

    Antony

    Reply to this comment

  5. michael 2 years ago

    isFrontFacing stops working correctly when assigning a personal perspective projection to the sprite’s parent.

    Reply to this comment

  6. TomTom 2 years ago

    Hi guys ! First, thanks for this class, very usefull ! This is the second i use it, but this time i really needed the blur to disppear, so i search solutions and i found that we can fix this issue by adapting the scaling of the displayobjects “front” and “back”… so i applied it the “alignFaces” function as followand it works… hope that will help some of you…

    private function alignFaces():void
    {
    var position:Point;
    var registration:Point;
    var bounds:Rectangle;
    var xfactor:Number;
    var yfactor:Number;

    if( _front )
    {
    _front.x = 0;
    _front.y = 0;

    registration = new Point( Math.round(_front.width * _pivot.x), Math.round(_front.height * _pivot.y) );

    bounds = _front.getBounds( this );
    registration.x += bounds.x;
    registration.y += bounds.y;

    position = globalToLocal( _front.localToGlobal( registration ) );

    _front.x -= Math.round(position.x);
    _front.y -= Math.round(position.y);

    xfactor =_front.width/(_front.width+1);
    yfactor =_front.height/(_front.height+1);
    _front.scaleX=xfactor;
    _front.scaleY=yfactor;
    _front.z=0;
    }

    if( _back )
    {
    _back.x = 0;
    _back.y = 0;

    registration = new Point( Math.round(_back.width * _pivot.x), Math.round(_back.height * _pivot.y) );

    bounds = _back.getBounds( this );
    registration.x += bounds.x;
    registration.y += bounds.y;

    position = globalToLocal( _back.localToGlobal( registration ) );

    _back.x -= Math.round(position.x * _back.scaleX);
    _back.y -= Math.round(position.y);

    xfactor =_back.width/(_back.width+1);
    yfactor =_back.height/(_back.height+1);
    _back.scaleX = -xfactor;
    _back.scaleY = yfactor;
    _back.z=0;
    }

    Reply to this comment

1 6 7 8