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

The ActionScript 3.0 Programming Short Cut gives the simplest examples of the most common tasks in Actionscript: Display programming, loading images, creating buttons, controlling depth, formatting text, etc. Because this is a “shortcuts” pdf, the pdf doesn’t overload you with explanations or examples. Instead it gives you enough to get started and then allowing you to experiment with different variations and ideas of your own. I think it’s a great jumping off point to familiarize yourself with the general workflow of Actionscript 3.0. The learning curve in Actionscript 3.0 may be a little steeper than 2.0, but once you learn how everything fits together with these examples, tackling new more difficult programming problems becomes second nature because Actionscript 3.0 is generally written as expected.
If you’re completely new to programming, you’d probably be better off finding a beginner’s Actionscript book as this doesn’t explain much of the “why” of programming, but it definitely shows the “how”. If you’re familiar with another programming language (especially one based on the ECMAScript standards), this pdf ought to teach you enough to get coding in Actionscript in no time. Also, if you’re familiar with Actionscript 2.0 and you’ve never worked with classes, this is for you. Lastly, if you’ve worked with Actionscript 2.0 and worked with classes and design patterns, there is some very important information (packages, internal, static, events, etc.) covered in the pdf, but nothing that you couldn’t quickly figure out by reading the Flex or Flash CS3 documentation or examples.

<?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>

There is so much information packed into this book, it’s hard to sum it all up. Basically, if you have an actionscript question from TextFields to XML or loading video to gradient fills it will be answered in this book.

Probably the best part about this cookbook is how well organized it is. You’ll have no trouble finding the term you’re looking for in the table of contents or in the index if it’s something a little more specific. The answers fully answer the question without going on too many tangents. Sometimes it feels like they overexplain some of the examples because the example actionscript code can usually speak for itself.

I have a love/hate relationship with some of their answers because they choose to create a set of custom classes to solve some of the common problems. I appreciate how much time it saves to download their classes and then use their customs methods, but it almost feels like it’s cheating to teach that you’re supposed to use one of their custom classes to code correctly.

There seems to be some inconsistencies in the quality of the explanations as well. I imagine it’s because there are three different authors contributing to the book. Some of the examples are brilliant, while others seem barely adequate. For example, the sound chapter has excellent examples of adjusting volume, pan, and pulling sounds out of the sound spectrum (which is a very exciting addition to Actionscript 3!) which wraps up with a three page spread of code showing a full mp3 application with everything you might want to do with it. On the other hand, there’s the File Management chapter which seems choppy and mashed together and lacks a full package example showing a how all the code fits together.

Whatever way you look at it, there is a lot of value to this book. I know there’s code in the book that I will only use once or twice, but I’m glad to know that it’s there when the time comes to look it up. Although much of this information is available online, you will definitely save yourself hours of time by having this book handy on the shelf to pull out and quickly find the recipe you’re looking for. Although not perfect, I still feel like this book deserves 5 stars because it stands out above the rest of the Actionscript books out there.

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

Let me just start by saying before I picked this book up I had already played around with Flex 2 enough to build fully functional RIAs. Based on my years of Flash experience and from simply poking around with the help files and I thought I had learned how things were “supposed” to work with Flex 2. Boy was I wrong.

This book taught me the true essentials of Flex 2: data binding, proper use of containers, navigation, states, printing, and a lot more. Each time I would read a new chapter, I would have to stop and say, “Wow, it’s that simple?” And developing Flex 2 RIA really is simple, I just had no idea so I always took the long, complicated Actionscript route instead of taking full advantage of what the Flex 2 components have to offer.

I admit that I’m in love with Flex 2 and I feel that part of what makes this book so great is the subject matter. Granted, it doesn’t teach many advanced topics or explore creative ideas, but it does teach you what you need to know. I guess that’s why they call it the “Essential Guide”. After reading this book from front to back, my efficiency for developing RIAs has increased one-hundred fold because I now have a firm understanding of the simple stuff.

This book is well-written and has plenty (but not too many) screenshots to accompany the step-by-step walkthroughs. I also found the book to be well-organized and have a nice flow to it where it doesn’t hit you with loads of information until you’re prepared for it. Basically, if you look at the table of contents, you can rest assured that you’ll understand each one of those topics by the time you’ve finished reading the chapter. Don’t skip ahead to the end though, you might ruin the ending :)

I can’t really comment much on the Coldfusion or Charting chapters as I don’t have ColdFusion and I don’t have a Charting license, but I’ll just go on faith that they work as explained.
If you’re just starting out with Flex 2, this book will help you build a good foundation for developing any project you’ll work on in the future.

If you’ve been working with Flex 2 for awhile already, this book may still be able to help you out by showing you some of the simplified ways of doing things that you may have missed (just like I did).

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

View SimpleStates.mxml

Video Preview
This video shows how after you create your custom component, you can add them into the application through drag n’ drop. You’ll see the drag n’ drop method automatically create a namespace called “ns1″ which points at the “MyComponents” folder. You’ll also see how making changes to custom components (naming the title “My New Panel”) automatically reflects in multiple instances of your custom component in your application.

View CustomComponents.mxml
View PanelOne.mxml (Remember, this is inside of the “MyComponents” folder)

The Six Steps
1. Create a new folder in your project (this menu pops-up when right-clicking on your project folder)

Continue reading “Creating Custom Flex Components in 6 Steps”