First steps with 3D in Flash
March 24th, 2011
Building 3D games and apps in general might look like a big step for developers, who did only 2D programming before. The aim of my 3D tutorial series is to show you, that it’s pretty straightforward to start thinking in 3 dimensions.
(Try CubeRotator app)
As a 3D programmer you usually combine following things together:
- View/Scene
- Camera
- 3D objects
- Materials
- Lights
- Shadows
- Physics
- Animations
- Shaders
- e.g. 800×600 rectangle
- primitives (Cube, Plane, Sphere)
- models (imported from file via Collada, 3DS, etc.)
- 3D objects are placed in a 3D container
- color fill
- textures/bitmaps
- environment materials and other advanced or intelligent materials
- Directional
- Point light
- Omni light
– little programs that can change visual look of models by changing geometry (vertex shader) or pixels on a material (fragment shader), shaders are very widely used in 3D programming and you can use Adobe Pixel Bender 3D to create them
All currently available Flash 3D engines are slightly different in terms of API, but learning one over the another doesn’t take long – differences are mainly in the features and speed of development – some provide less features, but it’s easier to work with them, others are more powerful, but take more time do something. All in all – pick the one that suites you most:
- Away3D
- Alternativa 3D
- Flare3D
- Sophie3D
- Yoghurt3D
- Minko
(some of them have Molehill versions already available)
Let’s create a simple scene with a red box, watching it from top – visible as a square.
Alternativa 3D 7.6 code: (run example | source)
public function Alternativa1() { camera = new Camera3D(); camera.view = new View(stage.stageWidth, stage.stageHeight); camera.z = -500; // zoom out addChild(camera.view); container = new Object3DContainer(); container.addChild(camera); cube = new Box(); cube.setMaterialToAllFaces(new FillMaterial(0xFF0000)); container.addChild(cube); stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); } protected function onEnterFrame(event:Event):void { camera.render(); }
Away3D 4 Broomstick (Molehill): (run example | source)
public function Away1() { view = new View3D(); view.camera.z = -500; // zoom out addChild(view); // add to the sprite container = new ObjectContainer3D(); view.scene.addChild(container); // add to scene cube = new Cube() cube.material = new ColorMaterial(0xFF0000) container.addChild(cube); // add to container stage.addEventListener(Event.ENTER_FRAME, onEnterFrame); } protected function onEnterFrame(event:Event):void { view.render(); }
Flare3D code: (run example | source)
public function Flare1() { scene = new Scene3D(this); scene.camera.setPosition( 0, 0, -50 ) // zoom out cube = new Cube(); cube.setMaterial(new FlatColorMaterial("red",0xFF0000)); scene.addChild(cube); // see that there is no need for calling render() in Flare3D }
As you can see, it’s basically same approach, just with little differences. Of course more differences come with more code written, just pick one that is better for you.
Try adjusting camera position:
Open CubeRotator (simple app, that helps you understand how position and rotation work)
Away3D code:
view = new View3D(); view.camera.z = -500; view.camera.y = -350; view.camera.x = -350; view.camera.rotationX = 45; view.camera.rotationY = 0; view.camera.rotationZ = -45; addChild(view); // add to the sprite
*Note that all frameworks are slightly different with +/-
*For instance in Flare3D camera.rotationX will be -45, not 45. In Alternativa you will be setting a radian value.
We will do more stuff in the next tutorial. Loading models, rotations, camera hovering, lights, materials, and so on. I will keep these tutorials short, but focused on particular issues.
Examples and Sources
Videos of 3D Flash Molehill in Action
February 28th, 2011
Tanki Online 2.0 by Alternativa Platform
Zombie Tycoon by Frima
Play online: http://molehill.zombietycoon.com/ (Requires Flash Player Incubator Build)
Ultimate Race by Flare 3D
MAX Racer Multiplayer by Alternativa Platform
Play online: http://www.alternativaplatform.com/en/demos/maxracer/ (Requires Flash Player Incubator Build)
Ostrova Online by Alternativa Platform
Metro 2033 by Alternativa Platform
Molehill/Away3D 4.0 Fluid Simulation
Demo available here: http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html (Requires Flash Player Incubator Build)
Away3D & Evoflash – Disconnected
Fractal Tree by Away3D
Flash Player 10.2 beta with StageVideo on Labs
December 1st, 2010
Great news everyone!
Flash Player 10.2 beta is now available to download. It features lot of great stuff including StageVideo, which dramatically reduces CPU costs and renders video on GPU.
Read the blog post about FP 10.2 by Thibault Imbert about it.
Get it here: http://labs.adobe.com/technologies/flashplayer10/
Tutorial: Getting started with StageVideo on Adobe Developer Connection
Building P2P Multiplayer Games at Adobe MAX 2010
November 12th, 2010
The recording of my session from Adobe MAX 2010, where I briefly explain some tips and tricks I’ve learned during MAX Racer development.
Link to session recording (better view, with navigation)
Available on Adobe TV as well:
Slides (PDF) available for download here.
Libraries and other sources will follow.
3D video in Flash Player (like in a cinema)
November 8th, 2010
I think this is one of the news, which got a little bit lost in all the MAX news.
Next to awesome StageVideo, which can run 1080p video ~0% CPU on Windows desktop PC and 8-10% CPU on new MacBook Air, which can display even 4K video, we had a demo preview at the Adobe Booth, where you could watch a real 3D movie running in a preview of possible future Flash Player.
Well, as you can see it’s hard to take a picture of 3D video, I guess, you just need to believe me, but pssst, it’s reeeally stunning! 
Read the rest of this entry »
