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]

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    initialize="init()">
    <mx:Script>
        <![CDATA[
            import flash.filesystem.File;
            import flash.data.SQLStatement;
            import flash.data.SQLConnection;
            import flash.data.SQLResult;
            import flash.events.SQLEvent;
            import flash.events.SQLErrorEvent;

            //Serves as your connection to the SQLite Database
            private var dbConn:SQLConnection;
            //Holds SQL Syntax, i.e, "CREATE TABLE…"
            private var dbStatement:SQLStatement;
            //Shows the path to where the SQLite database is stored
            private var dbFile:File;

            private function init():void{
                //call the Open Database function
                openDB();
            }
            private function openDB():void{
                //The link to your new database named whatever you want
                dbFile = new File("app-resource:/mySQLiteDatabase.db");
                dbConn = new SQLConnection();
                //Opens the SQLlite dbFile to access db info
                //If dbFile doesn't exist, the "open" method will create it
                dbConn.open(dbFile);
                //Listen for the OPEN SQL event
                dbConn.addEventListener(SQLEvent.OPEN, onOpenDB);
            }
            private function onOpenDB(event:SQLEvent):void{
                //If the OPEN event fired correctly, create the SQLlite db
                if(event.type == "open"){
                    createDB();
                }
            }
            private function onErrorDB(event:SQLErrorEvent):void{
                //Place error handling code here
                trace("sql error occurred")
            };
            private function createDB():void{
                dbStatement = new SQLStatement();
                dbStatement.sqlConnection = dbConn;
                //Create your SQL statement using standard SQL syntax
                //You'll find millions of SQL syntax tutorials by googling SQL
                /*"IF NOT EXISTS" is required or else the swf will throw an error
                saying the table has already been created.*/
                var dbQuery:String = "CREATE TABLE IF NOT EXISTS " +
                        "myTable(myColumn1, myColumn2, myColumn3);";
                //Assign you SQL query to the text property of the SQL statement class
                dbStatement.text = dbQuery;
                //Listen for the SQL result
                dbStatement.addEventListener(SQLEvent.RESULT, onResultDB);
                //Execute the statement
                dbStatement.execute();
            }
            private function onResultDB(event:SQLEvent):void{
                /*Handle the result by checking the getResult()
                method of the SQL statement class*/
                if(dbStatement.getResult() != null){
                    trace("Succesfully opened myTable from mySQLiteDatabase.db!");
                    /*You will now find a file called "mySQLiteDatabase.db"
                    in the bin folder of your project folder. This is where
                    all the SQLite database information will be stored in future tutorials*/
                }
            }
        ]]>
    </mx:Script>
</mx:WindowedApplication>

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