AL MA TE RI Understanding Flash3D Flash programmers have always enjoyed a freedom of expression unparalleled by other programming platforms. And with the release of CS4, Adobe has propelled that freedom of expression into the 3rd dimension. GH TE D But 3D didn’t start with AS3. Flash developers were experimenting with 3D long before. And applications like Papervision3D formalized these endeavors into a robust object-oriented class structure.
Part 1: Getting Started But before you get started it’s important that you understand the coordinate system you’ll be rendering your objects in. It’s a little different to the way you learned it in math class, and well worth reviewing. 3D Coordinates in Flash 10 Understanding the Flash coordinate system is vital to rendering in Papervision3D or CS4. With the transition to Flash Player 10, every ActionScript display object has a z property.
Chapter 1: Understanding Flash3D In addition, in Flash 9 the coordinate origin (0,0) is not located at the center of the screen, but at the upper left corner of your screen. This becomes an issue when working with the asymptotic vanishing point, and you’ll learn how to adjust for this later in this chapter. Building a 3D Flash 9 Engine in 18 Lines of Code In this example, you’re going to build a 3D engine based on perspective scaling in just 19 lines of code.
Part 1: Getting Started Figure 1-2 Creating the illusion of depth (or 3D) using perspective scaling is sometimes referred to as 2.5D. Another term used to describe perspective projection is 2.5D. The term is usually used with computer graphics, especially video games, where a computer system uses 2D computer graphics to visually simulate 3D computer graphics. In Flash, you use the z perspective scale to create a perspective projection onto the Flash x, y screen.
Chapter 1: Understanding Flash3D From the law of similar triangles, it follows that h H fl fl z By cross-multiplying, you get the scaling equation: Scale fl h fl z H That’s all there is to its derivation, but examining the equation reveals an interesting phenomenon: a singularity (blow up) in z. As z approaches –fl your equation’s denominator goes to zero and your scale blows up to infinity.
Part 1: Getting Started scale as z > fl, scale > infinity 1 as z > infinity, scale > 0 1/2 Inversion z fl z 0 z fl z z fl is a singularity at vanishing point Figure 1-4 The curve above is very similar to the gravitational or electrical potential curves found in physics. And it further suggests that a size scaling force field could be constructed by taking the differential of the scaling equation. But that’s beyond the scope of this book.
Chapter 1: Understanding Flash3D In Chapter 2, you’ll find out how to obtain the Papervision3D classes and how to drill down and examine its code. This particular code snippet is found in the org/papervision3d/camera folder. if(screen.visible = ( focus + s_z > 0 )) { s_x = vx * m11 + vy * m12 + vz * m13 + view.n14; s_y = vx * m21 + vy * m22 + vz * m23 + view.n24; //perspective scaling in Papervision persp = fz / (focus + s_z); screen.x = s_x * persp; screen.y = s_y * persp; screen.z = s_z.
Part 1: Getting Started The typical flow of such a program involves first initializing the program and then using a listener to loop through a scripted animation routine. The whole process can be divided into three parts: initialize, listen and loop: Initialize: Steps 1.3 Initializing an AS3 program can be a little overwhelming at first. The question that most people ask is how do I know what imports to bring in? There is no magical pool of knowledge that can help you.
Chapter 1: Understanding Flash3D ❑ Call the method addEventListener to listen for an event ❑ Name the event you want to listen for ❑ Name the function you want to execute when the event occurs So in the code below, you want to iterate your animation periodically. This can be done using the enter frame event listener or a timer. In this case, you’ll listen for the enter frame event. Each time a frame event occurs the function onEnterFrame is called, as shown in step 4.
Part 1: Getting Started import flash.display.Sprite;//imports sprite class var zposition:Number = 0;//z position var myAngle:Number =0;//Angle of ball var fl:Number = 300; //focal length var ball:Sprite = new Sprite();//instantiates ball sprite ball.graphics.beginFill(0xFF0000);//Assign a ball color ball.graphics.drawCircle(0, 0, 40);//draws your ball at 0,0 ball.graphics.endFill();//ends the fill addChild(ball);//adds the ball to the stage addEventListener(Event.
Chapter 1: Understanding Flash3D Vanishing at the origin (0, 0) Adjusted Vanishing Point (stageWidth/2, stageHeight/2) Figure 1-6 The stage class is very useful in positioning your Flash objects and will be addressed in more detail in the next chapter. Adding a Camera Along with 3D comes the concept of a camera. Theoretically a camera is just a point in 3D space that acts as a point of view of that space. Changing the position of your camera lets you change your view in your 3D world.
Part 1: Getting Started In CS4 the perspective scaling and rotation are automatically built into Flash. It’s still important to know the concepts above when working with Flash 10 (that’s why they were included), but it’s just not necessary to do all this work. To illustrate the point, rebuild your spiraling 19 line animation engine in CS4. Using CS4 (3D Flash 10 Engine in 13 Lines of Code) Using CS4 you only need 13 lines of code to create the same animation that took 18 lines above.
Chapter 1: Understanding Flash3D Using the Big 3 Fundamental to 3D graphics and physics are three fundamental motions: translation, rotation and scaling. All motions (at least for Newtonian motion) can be broken down into combinations of these three motions. You can apply these 3D transformations all at once using a Matrix3D object. You can rotate, scale, and then move an object by applying three separate transformations or more efficiently by using one Matrix3D transformation.
Part 1: Getting Started The parametric equations for a torus are: x=(c+a*cos(v))cos(u) y=(c+a*cos(v))sin(u) z=a*sin(v) where c is the donut radius, and a is the tube radius. And u is the parameter that takes you around the larger radius (the donut) and v around the smaller tube radius as shown in Figure 1.7. Z tube radius a u V C donut radius Figure 1-7 You now use these equations to create a parametric path on your torus. What you want to do is have your graphical element spiral around the torus.
Chapter 1: Understanding Flash3D Creating a Parametric Particle System (Torus Worm) In the previous section, you learned how to get a single element orbiting a torus using the parametric equations of a torus. Here, you multiply that single element by 100 and create a parametric particle system, which orbits (or worms around) your torus. You get a more formal treatment of particles in the “Gaming” section of this book.
Part 1: Getting Started particles_ary[i].alpha method to change the alpha of each particle based on their ith position. Center the particle system on the stage by adding CenterX, and CenterY to the particle x, y positions. for(var i:uint = 0; i < particles_ary.length; i++) { //ball parametric orbit x var newAngle:Number=myAngle+i/20; particles_ary[i].alpha=1/(i+1)+.2; particles_ary[i].x = (100+60*Math.cos(2*newAngle))*Math.cos(newAngle/ 4)+CenterX; //ball parametric orbit y particles_ary[i].
Chapter 1: Understanding Flash3D var myAngle:Number =0;//Angle of ball //Add Multiple Particles function updateStage():void { //Draw a Ball var ball:Sprite = new Sprite //Assign a random ball color ball.graphics.beginFill(Math.random()*0xffffff); //draws your ball at 0,0 ball.graphics.drawCircle(0, 0, ballRadius); ball.graphics.endFill();//ends the fill //Add ball to the stage addChild(ball); //Push the ball into a particle array particles_ary.
Part 1: Getting Started Flint-Particle-System (at http://flintparticles.org/), a robust open source project found on Google Code, which can be used to create impressive particle systems for Papervision3D. However, the particle landscape is changing. Having a native 3D and pixel bender with the release of CS4 greatly simplifies the process of building particle systems in 3D (as shown in the code above).
Chapter 1: Understanding Flash3D But in CS4 there’s a problem with this. When using the sorting algorithm (above) you sort the elements on the z-axis internal to the container. But when the container is rotated the objects rotate with it and are no longer sorted correctly. Essentially, there are two z values: z inside the container and z outside the container. To sort these correctly, you must sort with respect to the z axis outside your container.
Part 1: Getting Started 3D Rotation To rotate x, y, z points in 3D space you use the following equations: xnew = xold*cos(angleZ) - yold*sin(angleZ) ynew = xold*sin(angleZ) + yold*cos(angleZ) xnew = xold*cos(angleY) - zold*sin(angleY) znew = xold*sin(angleY) + zold*cos(angleY) ynew = yold*cos(angleX) - zold*sin(angleX) znew = yold*sin(angleX) + zold*cos(angleX) There are actually two ways to rotate elements in Papervision3D; using the preceding matrix equations or using quaternions.
Chapter 1: Understanding Flash3D The conversion between radians and degrees and vice-versa is given below: Radians = Degrees*PI/180 Degrees = Radians*180/PI Although these conversions are very simple, you use them all the time. Creating a Carousel and Image Ball Two of the most popular navigation devices created using Papervision3D are the carousel and image ball. As done in the torus worm example, you’ll treat the planes in the carousel and image ball as particles.
Part 1: Getting Started Figure 1-10 Finally the display container is rotated based on mouse movement using a simple mouseX displacement algorithm. function myonEnterFrame(event:Event):void { myDisplayObject.rotationY += (CenterX - mouseX) * .01; sortParticles(); } The complete carousel code is listed here: //imports classes import flash.display.DisplayObject; import flash.display.Sprite; import flash.display.Stage; import flash.geom.
Chapter 1: Understanding Flash3D plane.rotationY = -360 / numOfParticles * i + 90; plane.alpha=1; particles_ary.push(plane); numVar++; //Start Looping if(numVar==numOfParticles) { addEventListener(Event.ENTER_FRAME, myonEnterFrame); addChild(myDisplayObject); myDisplayObject.rotationX=0; myDisplayObject.x=CenterX; myDisplayObject.y=CenterY; } } //Sorting function sortParticles():void { particles_ary.sort(particleZSort); for(var i:int = 0; i < particles_ary.length; i++) { myDisplayObject.
Part 1: Getting Started You must orient the planes to the correct angles so that they uniformly hug the sphere as shown in Figure 1.11. plane.rotationX=phiTilt[i]; plane.rotationY=-j*thetaStep[i]; For this particular example the vectors for the plane positions and angles were obtained from Flash & Math (http://www.flashandmath.com/).
Chapter 1: Understanding Flash3D //The vertical angle between circles. var phiStep:Number=30; var phiTilt:Vector.=new Vector.(); phiTilt=Vector.([-90,-60,-30,0,30,60,90]); //radius of the Sphere var radius:Number=180; //Stage Center var CenterX:Number = stage.stageWidth/2; var CenterY:Number = stage.stageHeight/2; //Place Particles on the Stage var i:int; var j:int; var tStep:Number; var pStep:Number=phiStep*Math.PI/180; for(i=0;i<7;i++){ tStep=thetaStep[i]*Math.
Part 1: Getting Started (continued) myDisplayObject.addChildAt(particles_ary[k] as Sprite, k); } } function particleZSort(particle1:DisplayObject, particle2:DisplayObject):int { var zpos1:Vector3D = particle1.transform.matrix3D.position; zpos1 = myDisplayObject.transform.matrix3D.deltaTransformVector(zpos1); var zpos2:Vector3D = particle2.transform.matrix3D.position; zpos2 = myDisplayObject.transform.matrix3D.deltaTransformVector(zpos2); return zpos2.z - zpos1.
Chapter 1: Understanding Flash3D ❑ Weight is the concept most forgotten in animation. Animation software doesn’t know how much something weighs. Communicating weight to your audience requires that your animated character shows strain when it picks up something heavy. An execution of squash and stretch principle is illustrated in Figure 1.12. It shows a bouncing ball squash and stretch as it hits the floor. As the ball approaches the floor, both shadow and ball stretch.
Part 1: Getting Started 3.0. The ActionScript is then copied to your clipboard and you can paste this code wherever you want. If you try this with the bouncing ball example (shown above) you get the following code: import fl.motion.AnimatorFactory; import fl.motion.MotionBase; import flash.filters.*; import flash.geom.Point; var __motion_Ball_16:MotionBase; //Is there animation running, if not start it if(__motion_Ball_16 == null) { import fl.motion.Motion; __motion_Ball_16 = new Motion(); __motion_Ball_16.
Chapter 1: Understanding Flash3D Here’s how the code is put together: ❑ The code starts by bringing in a number of imports that set up the animation framework. ❑ The code uses an ‘if ’ statement if(__motion_Ball_16 == null) to determine if animation is running or not. If it isn’t, it imports all the necessary parameters needed to get the animation going. The name Ball comes from the name of the movie clip in your Flash Library.
Part 1: Getting Started So what’s a Collada File? Essentially, it’s an XML document that holds the parameters of your 3D model. It’s designed to be both human readable and platform independent. Its incorporation into Papervision3D as the primary way to bring in 3D models may have been premature. Not because there’s anything wrong with the Collada platform, but because most 3D modeling programs don’t export a version of Collada that works with Papervision3D.
