Flex Your AS: Flex 3, Adobe Air, Flash CS3, and Actionscript 3.0 Video Tutorials

How to position a plane:

1. Optional: Create more planes
2. Position the planes by setting the x, y, or z property of the plane
3. Optional: Spin the plane

[flv:http://flexyouras.com/tutorials/Papervision3D/05_Positioning_Planes/05_Positioning_Planes.flv 632 532]

How to spin a camera:

1. Change the Camera3D to a FreeCamera3D
2. Use the yaw(), pitch(), or roll() camera methods in your ENTER_FRAME handler
3. Render the scene

[flv:http://flexyouras.com/tutorials/Papervision3D/04_Spinning_The_Camera/04_Spinning_The_Camera.flv 632 532]

How to rotate a plane in Papervision3D using the yaw() method

What to watch for:

1. Make the plane global
2. Add a listener for ‘Event.ENTER_FRAME’ (previously known as onEnterFrame) with a callback to loop3D
3. Use the yaw() method of the plane to rotate 5 degrees each time ‘loop3D()’ is called
4. Render the camera
5. optional: Make the color material ‘double sided’ if you want to see both sides of the plane when it rotates

[flv:http://flexyouras.com/tutorials/Papervision3D/03_Rotating_A_Plane/03_Rotating_A_Plane.flv 612 508]

How to add a plane with a color material to a Papervision3D scene:

What to watch for:

1. Create a color material
2. Create a plane (and apply the color material)
3. Add the plane to the scene

[flv:http://flexyouras.com/tutorials/Papervision3D/02_Adding_A_Plane/02_Adding_A_Plane.flv 604 508]

This video tut is the first in a series of Papervision3D tutorials.

In this tutorial we will create an empty Papervision3D scene:

What to watch for

1. Create a container, a scene, and a camera
2. Center the container on the stage
3. Render the camera

(I’m using FlashDevelop so all classes will be automatically imported. As you can see towards the end, I accidentally import a class which I have to delete.)
[flv:http://flexyouras.com/tutorials/Papervision3D/01_Setting_Up_The_Scene/01_Setting_Up_The_Scene.flv 604 508]

What to watch for

1. When embedding the font, the source= line is the path to the font in relation to your project folder. In this case, the font is in the root of the project folder sitting alongside EmbeddingFonts.mxml. That’s why I only had to write ‘MICKEY.ttf’.
2. private var mickeyFont:Class; is only there so the compiler will link in the font.
3. The ‘fontName’ (‘mickey’) within the embed tag has to be the same as the ‘fontFamily’ within the style tag.
4. The name of the style inside the style tags (‘mickeyStyle’) is what you use to reference the style from the ’styleName’ property of your component.

View the EmbeddingFonts.mxml
Download the MICKEY font (originally from dafont.com)

A short example outlining the use of dispatchEvent to send an event from a custom component to the main application (this video assumes you know the basics of creating custom Flex components :

View the CustomComponentEvents.mxml
View the myPanel.mxml

Here are the basics of getting a movieclip out of the library and onto the stage using a custom Actionscript class. The key point is to import the linkage name you assigned the movieclip in the library (in this case, “Box”) to make it accessible in within the class. You can then assign whatever properties you want to it (in this case, x and y):

Download the .fla
Download the Document Class

This video shows the basics of setting up a Document Class for your Flash CS3 .fla:

Download the .fla
Download the Document Class

Video Preview
This video shows a simple Flex states example where buttons on two different panels switch between “state1″ and “state2″.

View SimpleStates.mxml