3D video flip tutorial now live

I just uploaded the new tutorial that shows you how to make the 3D video flip application that I showed in a previous post. Now there are probably much better ways of doing Z sorting. But for only two objects you can get away with something basic like I show in the tutorial. I’m working on getting a general purpose Z sort class written by someone with low-level 3D knowledge. Stay tuned on that.

Lee


Commentary

  1. Curt says:

    Hi lee, the link in you post is pointing to the wrong id, should be 91 not 90 ;)

  2. freq says:

    Nice tutorial!
    Why not use
    con.setChildIndex(con.tclip, con.numChildren-1);

  3. This is very nice, thanks. I made a flip as well, but only by using
    the Tweener class. When you follow the link you can see it.

  4. Lee, when I open the FLA file for the tutorial I get an unexpected file format error. Is this because it was created in CS4 ?

  5. TheGreyMan says:

    Oops! Hey, Lee, just thought I should let you know that the link to GTAL should be http://www.gotoandlearn.com/play?id=91 not http://www.gotoandlearn.com/play?id=90

  6. Stu says:

    Great tutorial Lee – thanks.

    However, I was just beginning to think that my struggle with the AS2/AS3 transition was getting easier and then all of a sudden you dropped a clanger on my lap…no {}’s in IF statements? lol. oh. I obviously missed that one.

    Nice tutorial anyway, you made it look very straightforward

  7. Tom Cipriano says:

    That’s really cool. Can’t wait to receive my copy of CS4 to test this out.

  8. Lee, everything looked solid except the continuous ENTER_FRAME. I know you could add/remove the listener when the clicks happen but I’m curious if there is an event for rotating?

    (fyi, being lazy…busy and don’t wanna pull the docs) hehe.

  9. lee says:

    @Xander yes you need CS4.

    @Stu You could always ignore {} if there is only one line. I guess I should have mentioned that.

    @John Yeah this code is good for a demo but you should try to optimize it as much as possible for production use.

  10. HowardE says:

    Nice tut Lee! I did the same thing but instead of using addChild I turned on and off the alpha which seemed easier for me.

    For instance if rotationY > 90 alpha = 0; else if rotationY < 90 alpha = 1;

    Check it out:

    http://www.howarde.com/stopGo.html

    Cant wait for a Z sorting class!

  11. Steve says:

    @lee couldn’t you just have tweener go 90 degrees, flip the sides then do another 90?

  12. lee says:

    @Howard Yes you could do that too. I would use visible=false though to avoid mouse event issues.

    @Steve The only problem with that is that you can’t use a custom easing type across the two separate animations. If you used linear for both it probably would work.

  13. nachosaenz says:

    Very nice!

  14. Steve says:

    @lee oh. this is true. does Tweener have an “onHalfway” event or something? thatd help the problem too..

  15. @Lee Is CS4 backwards compatible with all my CS3 files? And is it still
    possible to use your snippets tool ?

  16. lee says:

    Where are people getting trial versions? I’ve been twiddling my thumb waiting for that email notice…

    Creative Suite 4 applications don’t accept serial number after using them in trial mode (CS4)
    ISSUE
    When you enter the serial number after having used Adobe Creative Suite 4 or any of the Creative Suite 4 applications in trial mode, the serial number is rejected, showing you a red cross.
    http://kb.adobe.com/selfservice/documentLink.do?micrositeId=MS_Customer&externalID=kb407142

  17. 3dfactor says:

    You can always limit the rotation with the modulus

    SafeAngle = angle % 360

    this will always return numbers from 0 to 360 and will start over if it is higher.

  18. Anthony says:

    My question is would it be possible to get a CS3 version of this tutorial?

  19. rich griffin says:

    I’m a bit confused. Does 3DFlip use the SimpleZSorter? Also, I’ve tried following the 3DFlip tutorial in CS4. I cannot get it to work. Can anyone share a fully working FLA? Or is this not the venue to ask. Thanks all. Lee you rock.

  20. lee says:

    @Rich No this does not use the SimpleZSorter. It was not available at the time. But I would have used it :-) .

  21. rich griffin says:

    Hmm… :) Any clever folk want to add SimpleZSorter to Lee’s 3DFlip to allow for multiple videos – add SWFAddress 3.1, Google Analytics for Flash, etc….. whew! Getting ahead of myself.

    Well. I’d still love to get a fully working FLA with associated components in a nice ZIP file…

    But thanks for all the great knowledge sharing Lee. That’s the most compelling sort of evangelism.

  22. Mitch says:

    Good clear tutorial.

    Had some fun using the techniques covered to create a viewer for some photos of mine:

    http://gnitsuk.110mb.com/PhotoSurface/PhotoSurface.html

  23. sean says:

    great tutorial and good functionality! i got this thing to work right out of the box but has anyone noticed that the video scrubber works on enter frame yet after the video comes back into view the scrubber still shows the correct progress but it is no longer dragable. anyone else tried to tackle this issue as well?

    happy holidays! (working as always) :)

  24. Jon says:

    Hi!

    Great tutorial but im having issues when importing this movie into a moviclip in another movie, than the buttons on the videoplaybackcomponent stops working after the flip. Ive also come accross this problems with other movies that uses the caurina tweener. Im new to as3 so im probably cauzing it myself but i dont know.

    the thing is that it works when i import it directly to the stage in my main movie but if i import it to a movieclip it doesnt work correctly. The same happens to a blurscroll im using, example can be found here http://www.jonwalstedt.se/flash/3d here the scrollwheel works but the draggable slider doesnt work when its imported to a moviclip in another movie. what am i missing? shouldnt the movie thats getting imported work without having to be adapted for the main movie? any help i can get is much appriceated!

  25. Atul says:

    Hi Mitch

    I saw your photos and those are really very beautiful. Can you please let me know how you have given the nice effects to those photos? I really like that effect. Thank You!

  26. oopshey says:

    hi, thank for the tutorial,.. it will be my class subject…
    best regards

  27. Tim says:

    Hey!

    Very nice tutorial Lee, thanks!

    I’m having a problem with a “blur” effect applying whenever I flip my image.
    Any clue where this comes from? :s

    I mixed your tutorial and this one : http://www.flepstudio.org/forum/flash-cs4-tutorials/3550-rotationx-rotationy.html

    Maybe that’s why?

  28. JimW says:

    Thanks for this tutorial, but I’m having the same problem as Sean, in that once the video flips back, the scrubber is no longer draggable. I was flipping my own movie that contained draggable sprites and have the same exact problem. It will still respond to a click, just not draggable.

    At first I thought it was my understanding of events and handlers, but am now thinking there’s some kind of bug. I’ve wasted a lot of time on this already, so if anyone has any ideas on what might be going on, I’d love to hear..

    Jim

  29. Sean says:

    Back again and still haven’t figured this one out yet. To go along with JimW’s addition here i also created my own controls to see if that would eliminate the problem but unfortunately the issue is exactly the same. i did though however come up with an immediate solution until this answer is solved… just use the scrubber as a marker for vid progress and comment out or delete the code that allows the user to drag the scrubber. this isn’t the best answer yet the end user won’t ever have the chance of noticing the problem as well :)

  30. JimW says:

    I found that the element being rotated can remain draggable, even after being rotated, by not using startDrag() and just dealing with the drag on your own. Must be a bug in startDrag().

  31. gordee says:

    I guess nobody will check these comments much now but here’s hoping… I tried to load the 3DFlip.swf into a loader object inside a papervision which site which is a Flex project and it just doesn’t work.
    I know that I can do it in papervision but its wrecking my head not knowing why it wont work. All other swf’s loaded in have no issues. All the assets are in the same directory. Is there some issue with using FLVPlayback component in a Flex project?

    curious….

  1. [... I just uploaded the new tutorial that shows you how to make the 3D video flip application that I showed in a previous post. Now there are probably much better ...]

  2. [... I just uploaded the new tutorial that shows you how to make the 3D video flip application that I showed in a previous post. Now there are probably much better ...]

Leave a Comment