Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st February 2010

Flash Week | Day #1 – Dynamic navigation menu’s with Papervison 3D

19

19. Interactive3DSceneEvent
The Interactive3DSceneEvent can be seen as the MouseEvent for Papervision. It is pretty simple to translate over, as the event types are similar in name to those of the MouseEvent. The only thing to remember when using the Interactive3DSceneEvent is that instead of using OBJECT_CLICK for the MouseEvent.CLICK, use OBJECT_PRESS. OBJECT_CLICK can be very unpredictable, always use OBJECT_PRESS. The scene object is the stage for Papervision and we must add the planes to the scene before we can see them. The startRendering function starts the onRenderTick function in the Base class, which handles all the native Papervision animation. It’s basically just an ENTER_FRAME event handler.

plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, clicked);
plane1.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, clicked);
plane2.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, clicked);
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, over);
plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, over);
plane2.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, over);
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, out);
plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, out);
plane2.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, out);

scene.addChild(plane);
scene.addChild(plane1);
scene.addChild(plane2);
startRendering();
TweenLite.to(plane, .5, {alpha:1});
TweenLite.to(plane1, .5, {alpha:1, delay:.5});
TweenLite.to(plane2, .5, {alpha:1, delay:1});
}

protected override function onRenderTick (e:Event = null):void
{
var rotY: Number = (mouseY – centerY) / centerY * 200;
var rotX: Number = (mouseX – centerX) / centerX * 200;
camera.x += (rotX – camera.x) / 10;
camera.y -= (rotY + camera.y) / 10;
super.onRenderTick();
}
public function clicked(e:InteractiveScene3DEvent):void
{
trace(e.target.name);
switch(e.target.name)
{
case “homeButton”:
navigateToURL(newURLRequest(“http://www.artbycg.com”), “_blank”);
break;
case “aboutButton”:
navigateToURL(new URLRequest(“http://www.kreativeking.com”), “_blank”);
break;
case “contactButton”:
navigateToURL(new URLRequest(“http://www.artbycg.com/qvp”), “_blank”);
break;
}
}
public function over(e:InteractiveScene3DEvent):void
{
current = e.target as Plane;Acrion
viewport.buttonMode = true;
var obj:MovieClip = MovieClip(MovieAssetMaterial(current.material).movie);
TweenLite.to(obj, .4, {frame:20, ease:Back.easeIn});
}
public function out(e:InteractiveScene3DEvent):void
{
current = e.target as Plane;
viewport.buttonMode = false;
var obj:MovieClip = MovieClip(MovieAssetMaterial(current.material).movie);
TweenLite.to(obj, .4, {frame:1, ease:Back.easeOut});
}
}
}

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    4 Comments »

    • Riniel said:

      this is a really bad tutorial, its half written and the files don’t even work…very disappointed.

    • dave said:

      Complete waste of time. Im sorry, and I appreciate time and effort has gone into this, but from section 15 onwards, it is just baffling.

      For somone new to Flash, but with some understanding like me, there is no explanation of setting out the 3 buttons next to each other, as it looks when finished. I dont know much about coding, so I ask myself if maybe hidden somewhere in that code, it does it for you, who knows?

      The explanations are not very in depth at all- at one point you say “Right-click and convert to symbol. Name it ‘aboutMat’”, but you dont say what symbol to create- is it a movie clip, or a button- how are we supposed to know, we are learning your step by step tutorial! I believe it was a movie clip, but dont know for sure, as we are in the process of making dynamic buttons! Wouldnt have hurt to have just written what sort of symbol. To some, it may be screamingly obvious, but this is a tutorial to learn, and those with less experience are likely to attempt these projects.

      Both the FLAs provided from the download were empty, so had nothing to compare with. What a shame, as the finished product looks amazing.

    • deniz said:

      i hope u make a video of this when ur making it.. so we,new to flash, can understand it easier. when there is no photo of what u explain, then its not possible to understand it almost..

      but thanks again for this perfect workout.. it looks great.

    • Lauren said:

      I have a book with this tutorial in it. The book doesn’t do a great job explaining things and is like half complete. I came to this site thinking the whole tutorial was here but it’s not. So basically I wasted an hour learning almost nothing new and I have no idea how to make what I got so far into the finished piece.

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields