SideDetector Class by Thibault Imbert

While I was writing the 3D chapter for the Flash Player 10, I wanted to offer a clean solution for detecting which face of a DisplayObject is currently shown when rotated in 3D. Instead of working with the rotationX or rotationY properties which can be limitating, the viewable side of the DisplayObject can be determined through its normal. I came across Trevor solution which is very smart and compact and decided to create a little wrapping class called SideDetector (renamed to avoid confusion :) ) which is dispatching an Event.FACE or Event.BACKFACE event when the DisplayObject viewable side has changed.

This way, you can modify the DisplayObject state and map any texture you want. The cool thing is that this class also works with DisplayObject's created and animated through the IDE.

The code is very simple :

var detector:SideDetector = new SideDetector ( myMC );

detector.addEventListener ( FlippedEvent.FLIPPED, onFlipped );

function onFlipped ( e:FlippedEvent ):void
{
myMC.gotoAndStop ( e.position == SideDetector.FACE ? 1 : 2 );

// re-flip the bitmap on that frame so that it does not look reversed
if ( e.position == SideDetector.BACKFACE ) myMC.getChildAt(0).scaleX *= -1;
}

Here is a little demo :

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.

Sources available here.

Comments (17)

  1. Jloa wrote::

    Wow, Thibault u r the ‘king’. As always clan, nice, short and very useful. Awesome class. Thx.
    Btw where did Didier go? Haven’t seen any works from him since long.

    Wednesday, January 14, 2009 at 3:16 am #
  2. Clint wrote::

    Here i was expecting some sort of webcam facial recognition.

    Very nice all the same

    Wednesday, January 14, 2009 at 4:32 am #
  3. hbb wrote::

    sorry, I thought the face recognition….. :”P

    Wednesday, January 14, 2009 at 5:25 am #
  4. Thibault Imbert wrote::

    Hi Jloa,

    I’m happy you like it !
    Didier is very busy right now working on different projects as a technical director. Don’t worry he will post some really cool stuff soon ! ;)

    Hi Clint and hbb,

    Sorry for the confusing name, I think I will rename it ;)

    Thibault

    Wednesday, January 14, 2009 at 11:27 am #
  5. Zarate wrote::

    Thanks very much I think I’m going to use this very soon!

    Merci!

    Wednesday, January 14, 2009 at 11:50 am #
  6. Mattias wrote::

    Face recognition would have been sweet

    Wednesday, January 14, 2009 at 12:08 pm #
  7. gropapa wrote::

    c est vrai qu au titre on se dit: ça y est tranquilement “pendant qu il écrivait son chapitre sur la 3d”… il nous a pondu une classe de reconnaissance faciale (un truc du genre)… :)
    en tout cas c cool ;)

    Wednesday, January 14, 2009 at 12:37 pm #
  8. gropapa wrote::

    au passage en lisant ton code il m est revenu à l esprit combien il était difficile d utiliser les méthodes localToGlobal et globalToLocal, en tout cas c est un bon exemple a étudier. Merci

    Wednesday, January 14, 2009 at 12:40 pm #
  9. Was hoping on face recognition too, but nice class anyway!
    Cheers.

    Wednesday, January 14, 2009 at 1:18 pm #
  10. Ak wrote::

    Maybe SideDetector would be a better name ?

    Wednesday, January 14, 2009 at 1:58 pm #
  11. Thibault Imbert wrote::

    Hi Ak,

    Yes ! Just renamed it, better like that ;)

    Thanks,

    Thibault

    Wednesday, January 14, 2009 at 2:06 pm #
  12. Zeh wrote::

    Hah, I thought it was about Face Detection too.

    Anyway, if anybody’s interested in that, the Spark project guys “ported” part of OpenCV to AS3, so it does Face Detection. I haven’t tested the speed yet though, and it’s all in japanese:

    http://www.libspark.org/wiki/mash/Marilena

    Click on the link below “sample”.

    Wednesday, January 14, 2009 at 5:40 pm #
  13. Thibault Imbert wrote::

    Hi Zeh,

    Thanks for the link ;)

    Thibault

    Wednesday, January 14, 2009 at 5:47 pm #
  14. Jesse Freeman wrote::

    I had made my own attempt at this http://flashartofwar.com/2008/11/16/two-sided-plane-fp-10/ but it had a few issues if you placed it into another sprite at an offset. Justin over at Soul Wire improved it greatly http://blog.soulwire.co.uk/flash/actionscript-3/two-sided-planes-in-flash-player-10/. It works along a similar principle but he added in stage.invalidate to make it more efficient. I like your event update, looks like simple 3d animations are getting really interesting thanks to the updates in Flash Player 10. Keep up the good work!

    Thursday, January 15, 2009 at 2:43 am #
  15. Jloa wrote::

    Dah, can’t wait 2 c what certainly Didier is workin’ at ^_^

    Thursday, January 15, 2009 at 3:16 am #
  16. Thibault Imbert wrote::

    Hi Jesse,

    Yes, the cool thing about this class is that it can easily be used with any DisplayObject animated and rotated on the Flash CS4 timeline.

    Yes, simple 3D is made easy with FP10, that’s a really cool addition for simple 2.5D effects !

    best,

    Thibault

    Thursday, January 29, 2009 at 4:18 am #
  17. Arnaud wrote::

    Hey Thibault, very impressing codes,if only you knew how many hours you saved me :)
    I’m pretty new in AS3 and tried to use your codes but I can’t seem to find a way to have the movieclip automatically rotate on itself without having to call it via Onclick?
    Is it possible to do it using onenterframe?

    thanks a lot and keep up the good work

    Friday, June 11, 2010 at 4:46 am #

Trackbacks/Pingbacks (2)

  1. Weekly Shared Items - 16. January, 2009 « toxin 2.0 on Friday, January 16, 2009 at 10:01 am

    [...] SideDetector Class [ by Thibault Imbert ] [...]

     
  2. Weekly Shared Items - 16. January, 2009 « toxin 2.0 on Friday, January 16, 2009 at 10:01 am

    [...] SideDetector Class [ by Thibault Imbert ] [...]