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.

The community’s cry for a simple guide that would quickly go over some of the most felt changes from AS2 to AS3 has been heard.  Adobe has recently added a new resource to the ActionScript Center called the ActionScript 3 Migration Cookbook.

There you will find a quick introduction to migrating to ActionScript 3.0 from ActionScript 2.0.  It is targeted at designers and developers who have some experience scripting content within Adobe Flash CS4 Professional. It does not require an understanding of object-oriented programming.

Along with this resource of common AS2 code into AS3 conversions is a a downloadable PDF version which basically takes this section of the Devent site and dumps it into a portable version. Overall, this is a nice guide that can provide that helping hand during the first stages of the migration over to AS3.

Download the ActionScript 3 migration cookbook

While not all our paths to learning ActionScript 3.0 are the same, the resources that are provided to us are. Some like taking that direct dive into it and learn from their mistakes. Others would prefer to learn through someone else’s following. I have compiled a list of the 10 books that may possibly help you learn and/or expand your knowledge of ActionScript 3.0.

Learning ActionScript 3.0: A Beginner’s Guide

Written for those of you new to ActionScript 3.0, the book describes how ActionScript and Flash work, giving you a clear look into essential topics such as logic, event handling, displaying content, migrating legacy projects to ActionScript 3.0, classes, and much more. You will learn important techniques through hands-on exercises, and then build on those skills as chapters progress.

Essential ActionScript 3.0

ActionScript 3.0 is a huge upgrade to Flash’s programming language. The enhancements to ActionScript’s performance, feature set, ease of use, cleanliness, and sophistication are considerable. Essential ActionScript 3.0 focuses on the core language and object-oriented programming, along with the Flash Player API. Essential ActionScript has become the #1 resource for the Flash and ActionScript development community, and the reason is the author, Colin Moock.

Object-Oriented ActionScript 3.0

Object-oriented programming (OOP) is something that is usually considered a black art for hardcore programmers, not a topic of conversation for Flash developers. However, when adobe introduced ActionScript 3.0 to the mix, it changed everything. ActionScript 3.0 is much more powerful than previous versions, allowing Flash developers to produce robust object-oriented applications.

ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques

Now that ActionScript is reengineered from top to bottom as a true object-oriented programming (OOP) language, reusable design patterns are an ideal way to solve common problems in Flash and Flex applications. If you’re an experienced Flash or Flex developer ready to tackle sophisticated programming techniques with ActionScript 3.0, this hands-on introduction to design patterns is the book you need.

The ActionScript 3.0 Quick Reference Guide

This guide is designed specifically to help Flash designers and developers make the leap from ActionScript 2.0 to the new object-oriented ActionScript 3.0 quickly and painlessly. Formatted so you can find any topic easily.  ActionScript 3.0 Quick Reference Guide explains: Object-oriented programming (OOP) concepts, such as packages and classes ActionScript 3.0 features and player enhancements that improve performance.  Workflow differences between ActionScript 2.0 and ActionScript 3.0 including tools, code editing, component sets,etc.

ActionScript 3.0 Bible

ActionScript has matured into a full-fledged, object-oriented programming language for creating cutting-edge Web applications, and this comprehensive book is just what you need to succeed.  If you want to addinteractivity to Flash, build Flex applications, or work with animation — it’s all here, and more. Packed with clear instruction, step-by-step tutorials, and advanced techniques, this book is your go-to guide to unlock the power of this amazing language. Learn the basics, apply object-oriented programming, and more.

The ActionScript 3.0 Migration Guide: Making the Move from ActionScript 2.0

In this essential and timely guide, ActionScript expert Kris Hadlock speaks squarely to the many thousands of ActionScript 2.0 users who need to make the leap right away. The ActionScript Migration Guide covers all of the major changes in ActionScript from version 2 to 3. The book explains the most important and fundamental changes in ActionScript drawing comparisons between the two languages both visually and contextually.

Foundation ActionScript 3.0 with Flash CS3 and Flex

This book covers all the essential techniques from the ground up, allowing you to get up and running quickly and easily. Starting with the fundamentals, youll learn about using ActionScript objects, manipulating sound and video, and harnessing the power of regular expressions and XML.  The book concludes with two case studies to consolidate what you’ve learned and to introduce some more advanced techniques.

ActionScript 3.0 Cookbook

Each code recipe presents the Problem, Solution, and Discussion of how you can use it in other ways or personalize it for your own needs, and why it works. You can quickly locate the recipe that most closely matches your situation and get the solution without reading the whole book to understand the underlying code.  Solutions progress from short recipes for small problems to more complex scripts for thornier riddles, and the discussions offer a deeper analysis for resolving similar issues in the future.

Foundation Actionscript 3.0 Animation: Making Things Move!

The material inside this book covers everything you need to know to harness the power of ActionScript 3.0. First, all the basics of script-based animation and setting up an ActionScript 3.0 project are covered. An introduction to object-oriented programming follows, with the new syntax, events, and rendering techniques of ActionScript 3.0 explained, giving you the confidence to use the language, whether starting from scratch or moving up from ActionScript 2.0.

With all the recent developments with 3rd party libraries being supported in AS3, I am still shocked to see people still asking the question “Why ActionScript 3.0?”.  I simply do not get it as AS3 presents so many more pros than cons.

It is almost as if ActionScript 3.0 is the monster in the closet that some people would rather just avoid then confront.   For those who have migrated over, we have found out that it is not the infamous monster in the closet.  Instead, it turned out to be a hanging sweater casting a monstrous shadow.

For those still asking themselves the question of  “Why ActionScript 3.0?”, check out this parody video on the topic.  Cracks me up every time!

Dynamic mask objects have been key to many Flash project’s success. When it comes to migrating over from AS2 to AS3, you’ll find that things have changed as the method “setMask()” in AS2 is now a property called “mask”. In this next edition of the Moving From AS2 to AS3 series, I will be comparing the two solutions and offering an efficient solution to creating dynamic masks using AS3.

Comparing AS2 to AS3

Setting masks dynamically using ActionScript 2.0

myMC.setMask(maskObject);

Setting masks dynamically using ActionScript 3.0

myMC.mask = maskObject;

So as you can see the syntax hasn’t changed much, however, personally I feel that AS3′s implementation is a bit more literal making it easier to understand.

Creating your masking objects as Sprites

While in ActionScript 2.0 there was no better of a solution than to create your masking object as a MovieClip. With the introduction of the Sprite object in ActionScript 3.0, creating your masking objects as Sprites is a far more efficient solution.

Since a mask object does not require a timeline, using a Sprite instead of a MovieClip simply makes more sense. Below is an example where a Sprite is used in place of a MovieClip:

// Create mask

var maskObject:Sprite = new Sprite();

maskObject.graphics.beginFill(0xFF0000);

maskObject.graphics.drawRoundRect(myMC.x, myMC.y, 453, 290, 20);

addChild(maskObject);

// Apply mask

myMC.mask = maskObject;

Download Example File

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.

Managing depths in AS2 was pretty annoying and time consuming. You’d spend so much time dedicating depth ranges for MovieClip groups, but in the end the limitations of AS2 really got the last laugh. Who’s laughing now?

Improving upon handling depths

With the introduction of Flash Player 9 and ActionScript 3.0, Adobe created an easy and powerful way to add, remove, and change MovieClips on the screen. It’s is called the display list.

Understanding the Display List

Basically, the role of the display list is to handle managing where your MovieClips are placed in depth when visually adding them to the Flash stage. To learn more on this topic, the Yahoo Flash Developer has a thorough introduction article to understanding the display list.

What happened to swapDepths and getNextHighestDepth?

The swapDepths and getNextHighestDepth methods no longer exist in ActionScript 3.0. Instead you would rely using the DisplayObjectContainer methods associated with a MovieClip added to the display list.

Swapping depths using AS2

function arrangeBoxes():Void
{
for (var i:Number = 0; i < 3; i++)
{
//Attaching the MC from th library for the duration of the loop
var box:MovieClip = this.attachMovie("box", "box" + i + "_mc", this.getNextHighestDepth(), {_x: ((i * 80) + 100), _y: 100});
var boxColor:Color = new Color(box);
boxColor.setRGB(Math.random() * 0xFFFFFF);
box.onRollOver = function():Void
{
//Focused box will achieve to the next highest depth
this.swapDepths(this._parent.getNextHighestDepth());
}
}
}
arrangeBoxes();

If you noticed in the AS2 solution, we are basically making the interacted object obtain the next highest depth available on the stage. Sounds correct and automated but there is nothing really stopping this from reaching a depth of 9999 with only 3 objects on stage. Basically, this is no where near an efficient solution to depth swapping.

Swapping depths using AS3

function arrangeBoxes():void
{
//For loop will create and place three boxes onto the stage
for (var i:int = 0; i < 3; i++)
{
var boxColor:ColorTransform = new ColorTransform();
boxColor.color = (Math.random() * 0xFFFFFF);
//Define a new box to be added to the stage
var box:Box = new Box();
box.x = ((i * 80) + box.width);
box.y = 100;
box.transform.colorTransform = boxColor;
box.buttonMode = true;
box.addEventListener(MouseEvent.MOUSE_OVER, swapMyDepth);
this.addChild(box);
}
}

function swapMyDepth(evt:MouseEvent):void
{
this.setChildIndex(Box(evt.target), (this.numChildren – 1));
}

arrangeBoxes();

I am just amazed at how much easier and efficient the swapping depth syntax appears in AS3. In the case of ActionScript 3.0, this solution literally swaps the depth of targeted objects. There is no “false advertising” of swapping depths.

Overall, there is very little left for the designer/developer to manage when dealing with object depth. One less headache to deal with. Phewww!

Download source

Feedback:

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.

There seems to be this misconception that adding ActionScript in the Timeline will not be supported when using AS3. FALSE!!! If you are migrating over from AS2 to AS3, adding ActionScript in the Timeline is probably the least of your concerns.

The concept of inserting ActionScript to control or trigger animations has not changed from AS2 to AS3. While inserting all of your ActionScript code throughout the Timeline is not recommended, doing so will not break any functionality.

There are many other misconceptions dealing with migrating over from AS2 to AS3. Mike Chambers recently spoke on this topic at FlashCamp in London. Unfortunately like most, I was not able to be there. However, Mike has made the slideshow of his presentation available for download. You can see it below.

Feedback:

If you are currently trying to make that switch from AS2 to AS3, what’s stopping you?  What’s keeping you up at night? I would love to hear from you if somthing is keeping you up at night.

In a previous tutorial, I demonstrated a simple solution to loading an external sound file. In that example, the mp3 file that had been loaded begins to play automatically. While this might be fine in some cases, you probably would want more control over the sound being imported.

For example, being able to stop or pause then play again might be a good place to start.   In this tutorial, I will be demonstrating how to play, stop, and pause sounds using AS3 once you have the sound loaded into Flash.

Playing a sound

Playing a sound using AS3 is a simple as calling the play() method of the defined sound object. Previously in AS2, you would have called the start() method so not much different in this area.

soundClip.play();

Stopping a sound

Stopping a sound using AS3 is accomplished by calling the stop() method of the defined sound object. This is exactly the same way you would be able to handle it using AS2.

soundClip.stop();

Pausing a sound

This is where pausing a sound using AS3 is quite different from using AS2. As it stands now, there is no method to automatically pause a sound using AS3. Instead, you must populate an optional parameter of the play() method.

It allows you to play the sound using an offset value that is passed in from a stored variable. Below is an example of accomplishing this.

//Stores the position of the "playback head"
var pausePosition:Number = sndChannel.position;
sndChannel.stop();

//When ready to resume playback, call this line
sndChannel = soundClip.play(pausePosition);

Putting it all together

Now it is time to integrate all three.  I have provided an example that puts all three of these control functionalities into good use.  The example is sessentially a simple music player with toggle functionality.

Preview example

Download source

Subscribe to the RSS Feed to stay updated on future tutorials on using sound in AS3.

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.

Filtering data XML data using AS2 has to be one of the most sought out features when dealing with XML-driven Flash projects. Being able to automatically grab certain relevant information without manually searching each and every XML node and/or attribute.

What if we were given the ability to create filters that will automatically pull the information needed from XML nodes and/or attributes. But wait we can’t do that, right? Right, that is until the birth of ActionScript 3.0.

Another new feature in AS3 is the ability to filter and display only the data you are interested in. With this, you can dynamically filter XML nodes and attributes.

Filtering XML Node Values

Let’s say you wanted to pull all the of the books that were paperback. You can now create a function that scans each XML’s node or attribute value and returns which node would qualify with the given query. See the example below in which outputs the books in which are paperback.

Note: I am using this XML file in the example.

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();
//Filter out all of the books with a "Paperback" cover
var  paperBackList:XMLList  =  bookInput.book.(coverType == "Paperback");
trace(paperBackList);
}

Filtering XML Attributes

Not only can you filter XML node values but you can do the same to XML Attributes values. In the a previous post , Loading XML Data, I created and included an attribute labeled “ISBN” which would be available within each book node. If you wanted to return a list of books that matched a certain value, it would go something like this.

Note: I am simply replacing the ParseBooks function from the code above

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();
//Filter out the book with a matching ISBN number
var  closeMatchList:XMLList  =  bookInput.book.(@isbn == "978-0596526948");
trace(closeMatchList);
}

As you can see, there isn’t much of a difference with filtering by XML node values or attribute information. Filtering can provide such a dynamic form of functionality to any Flash project: big or small.

Download Source

I’d love to hear from you.  What do you think of this new functionality when dealing with XML data?

Feedback:

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.

Subscribe to the RSS Feed to stay updated on future tutorials on using XML in AS3.

Sound has become a key addition to many Flash projects: offline and online. In many cases, integrating sound can actually amplify the final results of a project. However, in many other cases sound should not even be a topic for discussion.

Loading external sound into your Flash projects using AS2 is a fairly easy task.  Using AS3 to load external sounds is just as simple.  I am going to quickly go over how to load an external sound file using AS3 in comparison to AS2 syntax.

Loading external sound using AS2

//Create a new sound object
var song:Sound=new Sound();
//Load the external sound file
song.loadSound("song.mp3",true);
//Once loaded play the sopund file
song.onSoundComplete=function() {
	song.start();
}

Loading external sound using AS3

//Create an instance of the Sound class
var soundClip:Sound=new Sound();
//Create a new SoundChannel Object
var sndChannel:SoundChannel=new SoundChannel();
//Load sound using URLRequest
soundClip.load(new URLRequest("song.mp3"));
//Create an event listener that wll update once sound has finished loading
soundClip.addEventListener(Event.COMPLETE,onComplete,false,0,true);
function onComplete(evt:Event):void {
	//Play loaded sound
	sndChannel=soundClip.play();
}

What is the difference?

Event model consistency

Loading external sound and playing it using AS3 is quite similar to that of AS2 syntax. The key difference between the two would have to the new event model integration that AS3 brings to the table.

Introducing Sound Channel

One other difference is the declaration and use of a Sound Channel. The SoundChannel class is used to create a separate channel for each new sound played. By placing each sound in its own channel, you can work with multiple sounds but control each sound separately.

Conclusion

Overall, the changes between AS2 to AS3 in loading external sound are not far off from each other. However, AS3 does introduce a boat load of new features and classes that allow for creative uses of sound in your Flash Projects. Some of the other new features include: visualizing sound data, reading ID3 Metadata, and transformation of the sound files.

Download Source

Subscribe to the RSS Feed to stay updated on future tutorials on using sound in AS3.

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.