Flash Speaks Actionscript

Struggling to get our foot off the ground with getting more intimate with ActionScript 3.0?

Doug Winnie has kicked off a series, ActionScript 1:1, which is designed for animators and designers using Flash CS4 who want to take their work to the next level but need some guidance adding custom interactivity using ActionScript 3.0.

These videos are aimed at Flash Designers looking to strengthen their knowledge of ActionScript 3.0.  We all have to start somewhere when learning to use ActionScript 3.0 and this series is great way to get that train moving along.

Below are all the episodes in the series.  You can also find Doug’s videos as a channel on Adobe TV and iTunes.  Enjoy!

Welcome to ActionScript 3

Doug Winnie gives an overview of his new series in which you will learn the fundamentals of ActionScript 3.0. Get up and running in Flash Professional using ActionScript 3.0.

Working with the Actions Panel

Understand how to use the Actions panel and use the trace statement. Doug Winnie walks you through the code to control objects created in Flash.

Accessing Object Parameters

Doug Winnie demonstrates how to access properties of an object such as size and location by using instance properties with ActionScript, sending messages to the output console.

Changing Object Parameters

In order to manipulate objects, Doug Winnie uses the assignment operator in ActionScript 3.0 to instantaneously overwrite values initially assigned in Flash.

Exploring Named Library Assets

Dive deeper with the Library panel and learn more about how to name instances on the stage, and how to use the Linkage panel to name objects in the Library panel.

Adding Named Objects to the Stage

In this video, Doug Winnie teaches you how to use ActionScript to dynamically add objects to the stage using code and the DisplayStack.

Working with Comments

You can use comments to document your ActionScript code for other Developers to use. Doug’s tutorial sums up the benefit of building up good coding practices.

Fundamentals of Functions

Doug Winnie provides an introduction to functions and explains how to efficiently use them in ActionScript by grouping commonly used tasks together as a named function.

Accepting Values in Functions

Doug continues his tutorial on how to efficiently use functions with ActionScript. With functions you can customize their functionality by assigning parameters and values.

Returning Values from Functions

Doug Winnie wraps up his lesson on functions by explaining how to retrieve results for the output panel with the return statement.

Mathematical Operators

Doug Winnie teaches the basics of calculating mathematical operations in ActionScript code, including commonly used shortcuts to save coding time.

Order of Mathematical Operations

In this video, Doug Winnie reviews how Flash calculates math based on a specific order of operations.

Events and MouseEvent Handlers

Discover the power of events and how you can quickly and easily build event handlers. In this episode, Doug covers how to use events to build interactivity with the mouse.

Create a Timer

Using your advanced knowledge of ActionScript, Doug Winnie walks you through on how to combine time events with event listeners to create and control time-based events.

Create a Clock

See Doug build a clock in Flash using ActionScript to manipulate objects’ properties and add mouse and timer events. Everything you’ve learned from his tutorials is combined into one project.

Last week’s announcement of Adobe’s releasing of the new AS3 Facebook API definitely brought upon a cheerful buzz within the Flash/Flex community. So, now that there is a new look to the AS3 Facebook API, I am sure many of you would like to take a deeper look into how you can take advantage of this new library in your Flash/Flex projects.

In this video, Daniel Dura shows you how to use Flex Builder to develop your first Flash application on the Facebook Platform using the ActionScript 3.0 Client Library for Facebook Platform API.  The video is about 12 minutes long and if you’ve got the time you should definitely check it out.

Thanks to the Adobe Gods for making the lives of so many Flash developers much less complicated when dealing with XML Data. XML and AS2 just did not get along very well. It was one of those situations where there was a love/hate relationship.

Love was there when you’ve hacked yourself an impressive solution that simple works well, but that hate returns when it was time to change the XML structure. Going back and rerouting the paths to the correct XML nodes was just painful.

It’s funny because I did not foresee a brighter day for dealing with Flash and XML data. Those brighter days have now finally come with the newly added XML classes that will basically do all the work for you.

The XML libraries have been completely overhauled in AS3. These new changes provide a much more seamless XML integration that is based on the web standards of E4X.

What is E4X?

E4X (ECMA for XML) is the current World Wide Web Consortium standard for reading and writing XML documents, and greatly reduces the amount of code and hoop-jumping required to communicate with XML. It allows you to treat XML objects like any other object with familiar dot syntax, and provides additional shortcuts for traversing XML trees.

By providing the support for E4X, the amount of code and maneuvering in and out of XML nodes is greatly reduced and easier to understand.

In the examples below, I will first demonstrate the AS2 integration of loading XML data followed by the AS3 comparison.

Loading XML data using AS2

//Load XML Data
function loadXML(loaded) {
	if (loaded) {
		var xmlNode=this.firstChild;
		var total:Number=xmlNode.childNodes.length;
		//Creating the arrays needed for storing off the XML data
		var bookInfo:Array=new Array(total);
		var isbnNum:Array=new Array(total);
		var subNum:Array=new Array(total);
		for (var i:Number=0; i<total; i++) {
			//Storing off the ISBN values into an array
			isbnNum[i]=xmlNode.childNodes[i].attributes.isbn;
			//Storing off each parent's(book) children count
			subNum[i]=xmlNode.childNodes[i].childNodes.length;
			bookInfo[i]=new Array(subNum[i]);
			trace("ISBN = "+isbnNum[i]);
			trace("Book Info:");
			for (var j:Number=0; j<subNum[i]; j++) {
				//Store the book info of all the books into a 2D Array
				//Thie is the path to the desired xml nodes
				bookInfo[i][j]=xmlNode.childNodes[i].childNodes[j].firstChild.nodeValue;
				trace(bookInfo[i][j]);
			}
		}
	} else {
		trace("Error loading XML");
	}
}
//Required syntax
xmlData=new XML  ;
xmlData.ignoreWhite=true;
xmlData.onLoad=loadXML;
xmlData.load("book-list.xml");
stop();

Loading XML data using AS3

var xmlLoader:URLLoader=new URLLoader  ;
var xmlData:XML=new XML  ;
//Adding an event listener to notify when loading is completed
xmlLoader.addEventListener(Event.COMPLETE,LoadXML);
//Load the XML file
xmlLoader.load(new URLRequest("book-list.xml"));

function LoadXML(e:Event):void {
	xmlData=new XML(e.target.data);
	ParseBooks(xmlData);
}

function ParseBooks(bookInput:XML):void {
	//Creating an xml list that will store the book info
	var books:XMLList=bookInput.book.children();
	//Creating a xml list that will store the book's ISBN number
	var bookAttributes:XMLList=bookInput.book.attributes();
	//Extract the data from the populated XML lists
	for (var j:int=0; j<bookAttributes.length(); j++) {
		var bookISBNNum:XML=bookAttributes[i];
		trace("ISBN = "+bookISBNNum);
	}
	for (var i:int=0; i<books.length(); i++) {
		var bookInfo:XML=books[i];
		trace(bookInfo);
	}
}

What’s the difference?

The Use of XML Lists

A XML List is a list use to store specific XML nodes or attributes. The way I see it XML Lists are basically arrays formatted for dealing with XML data. This eliminates the need of creating all multiple arrays to store your data for further use – the XML List will do it all for you. If we wanted to, we can save off the an individual list for the author and book title by simply creating an XML List and filtering the specific node data. See code below.

Returning any or all of the XML data

Filtering and storing off any or all XML data becomes a more natural process.

//This xml list stores all of each book's data
var bookChildren:XMLList = bookInput.Book.children();
//This xml list will only store the author's info
var authorList:XMLList=bookInput.book.author;
//This xml list will only store the title's info
var titleList:XMLList=bookInput.book.title;

No need to define ignoreWhite to true

WithinAS3 there is not a need to define the ignoreWhite state to true. By default this is automatically set to true. Makes sense right!

Overall, you can see that loading XML data into Flash is as seamless as can be. No more headaches on trying to get your XML file to work for you. There’s more to the new XML classes than what you see on this page and I plan to touch on more of it in the next few days. If you are in need of additional resources, check out the ones below.

Additional Resources:

• Using XML in Flash CS3/AS3
• AS3 E4X Rundown
• ActionScript 3 XML Basics

Download Source

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.

Keyboard interactivity within the new AS3 environment has changed from its predecessor, AS2. With the changes to the button press in AS3, you’d might expect the Keyboard event calls to receive no easier treatment in how you use them. You’d might even think they are more difficult to integrate and understand, however, personally they seem much easier and simplified to use.

The key difference between Keyboard events within AS3 is consistent event handling of the listeners. In AS2, you would have to create an object within the same level of expected interactivity, then attach it to a new event listener. See Below.

Keyboard Events in AS2

var keyListener:Object=new Object();
keyListener.onKeyDown=function():Void
{
 trace(Key.getCode());
};
Key.addListener(keyListener);

Keyboard Events in AS3

stage.addEventListener(KeyboardEvent.KEY_UP,traceKeyPress,false,0,true);
function traceKeyPress(evt:KeyboardEvent):void {
 trace(evt.keyCode);
}

As you can see above, we are basically attaching the Keyboard event listener to the stage so that we can get access to it at all times via runtime. Both examples accompish the same result just with fewer lines of code. Isn’t it lovely!

A mini-example of Keyboard interactivity in AS3

I have taken the liberty of creating a simple example of integrating Keyboard interactivity into a Flash project. The example demonstrates the tracking of the keyboard key codes and checks to see if the up, down, left and right arrows are being pressed.

Download the example .fla

Preview the example .fla

I hope this helps in your migration over into  AS3.  If there is something in particular you want to add or see with the Moving From AS2 to AS3 series, feel free to contact me via the contact page.

You will often need to make a decision in your ActionScript, choosing to do one thing under one situation, and another thing under a different situation. The use of conditionals is a great way to accomplish this and can very well be your most used ActionScript solution. However, how you use your conditionals will make a big difference on how your ActionScript is read by others or even as you revisit it a month from now.

What are conditional statements?

With the use of conditional statements, you can simply test to see whether if an action occurred or is met, then you can execute the following ActionScript. If that condition is not met, you can either take an action or chose to do nothing. I am not sure if that will totally get the concept across but an example will definitely help you understand it a bit more.

Two ways on going about using conditional statements is with the use of the If/Else if/Else statement and the Case and Switch statement.

Using if/else if/else

if (color=="blue") {
 trace("The color is blue");
} else if (color=="red") {
 trace("The color is red");
} else if (color=="green") {
 trace("The color is green");
} else {
 trace("The color is black");
}

As you see a color is being checked for and it will continue checking until a color is matched. If there is not a matching color then it will go with the color “black”. While this will get the job done, as you add more colors and more actions within each check, it can get pretty messy and hard to read as your project grows. Now lets take a look at the same scenario using a case and switch statement.

Using case and switch

switch (color) {
 case "blue" :
 trace("The color is blue");
 break;
 case "red" :
 trace("The color is red");
 break;
 case "green" :
 trace("The color is green");
 break;
 default :
 trace("The color is black");
}

With the use of a case and switch statement, you can easily determine what action needs to be met. (color) Every possible value of the color is then checked until the action has been met. Also, the addition of the break() makes switch an efficient alternative to a more complex series of multiple if statements. Each break line prevents any following instructions from executing. Overall, it is a much easier way to read a longer conditional statements.

Switch vs If/Else if: Which one do I use?

There really is no “right or wrong” way to use Switch versus If/Else if statements. However, I guess the best advice is to consider ActionScript legibility and simplicity.

Check out Adobe’s documentation to learn more about conditional statements.

Which do you prefer and why?

With all the changes that came with ActionScript 3.0, a few new Timeline properties were introduced with the hope that any Flash animator, designer or developer would come to appreciate. The lack of exact control or knowledge of where you area on the Timeline or scene gets a bit irritating when you do not want to stick with static frame numbers.

For example, let’s say you want to know the amount of labels within a specific MovieClip or simply would like to find out what the name of the last label of a specific MovieClip is. In ActionScript 2.0, this would be damn near impossible.

Within ActionScript 3.0, there are a few more properties you can tap into that will allow you to have more control over the Timeline. Also, not knowing where you are in relation to a frame label along with not knowing what frame number your labels reside on are a thing of the past. Thank god!

Below are examples of these new Timeline properties.

Return the current label within a MovieClip

Return a list of all the labels within a MovieClip

Return a frame label’s frame number and name

Check how many labels are within a MovieClip

Determine what the last frame label of a specific MovieClip is

Check the frame number of where a frame label resides

Conclusion:

There are many creative ways to put these new AS3 Timeline properties to to work for you.  How you plan to do so is up to you.  Personally, I am relieved to know that they will be there to serve me when their number is called.

For more info on this topic, check out Adobe’s documentation on the new AS3 Timeline properties.