Monthly Archives: January 2008

12 Great Ways to Learn ActionScript 3 in Flash

Want to learn a bit about Adobe Flash Professional and programming with ActionScript 3? You might find this list of resources helpful for getting started, or if you find you’ve gotten stuck, it might give you some places for new information you’ve never encountered. Though the list below isn’t fully comprehensive, it provides a wide variety of ways to learn about Flash and AS3.

  1. All documentation available in the Flash Pro product is available online on Adobe’s website, including many parts that may be downloaded in PDF form (if that’s your preference). For those that are new to programming, or maybe if you just need a bit of help learning about classes and objects, check out Getting Started with ActionScript in the documentation.

  2. Adobe provides a lot of great articles on their website. Be sure to check out the Flash Developer Center and the ActionScript Technology Center, which are both a part of the larger Adobe Developer Connection.

  3. Consider the ActionScript 3.0 API Reference a must-have tool for looking up properties, functions, styles, and events for all of the classes available natively in Flash Player and included with Flash Professional. Unlike other documentation that you might only read when you’re starting out, this resource will be useful almost everyday that you work with Flash and AS3.

  4. Many articles online discuss the differences between ActionScript 2 and ActionScript 3. For example, Emmy Huang has a quick overview of new AS3 features in Tips for learning ActionScript 3.0. Another article by Gary Grossman and Emmy Huang you might want to check out is simply titled ActionScript 3.0 Overview. Also, be sure to look at the ActionScript 2.0 Migration document to see what functions and classes have been changed, moved, or removed. When changes exist between AS2 and AS3, this document often includes instructions for how you should change your approach.

  5. Many online forums are dedicated to Flash and ActionScript where you can ask questions and learn from others. I frequently visit the ActionScript.org forums. Another you might consider checking out is Kirupa’s Forum, which has a popular thread created by senocular called ActionScript 3.0 Tip of the Day. There are many more forums out there, so be sure to spend a couple of moments with your search engine of choice to find them.

  6. Similarly, mailing lists are a good source of information for learning about Flash and ActionScript and for asking questions when you run into trouble. Rather than going to a forum in your browser, you send and receive community messages through your email client. Flashcoders has always been a popular list. The Mail Archive provides an alternative online view of flashcoders content.

  7. Join a local Flash user group or consider starting your own. Typically, Adobe user groups meet once a month, and they offer tutorials and presentations by local experts or special guests from the worldwide community. These guests tend to work with Flash in the trenches for companies large and small. From time to time, you might even get to meet a real Adobe employee who can offer excellent insights into the products they develop or promote. For more information, check out the Community section in the Flash Developer Center (and try the Flex Developer Center too).

  8. Learning from instructional videos seems to work well for many new developers. Lynda.com offers many hours of video focused on Flash CS3 and ActionScript 3 for a low subscription price. Lee Brimelow‘s site gotoAndLearn offers free video tutorials about Flash too. The Flash category on Adobe TV offers a wide variety of videos for all skill levels. You might also want to check out Colin Moock’s Lost ActionScript Weekend, an 11 hour training video that covers object-oriented programming in AS3 available thanks to O’Reilly and Adobe.

  9. Current and upcoming books that focus on Flash and ActionScript 3 include the following:

  10. Go to conferences like Adobe MAX or more local or free events like FlashCamp, Latin Flash Tour, ApolloCamp, and the OnAIR Bus Tour. These events frequently include hands-on sessions where instructors walk you through the basics step by step, and you’ll meet experts and fellow learners alike. If a conference seems expensive, consider asking your boss if your company can help cover the cost. Companies often don’t mind paying for tickets and travel to these sorts of events if what you’ll learn will directly benefit your work.

  11. Read other people’s source code. One of the best ways to learn to be a developer is to see how others do things. Try to understand how their code works, and take a few moments to change things and experiment with it. If you’re not exactly sure where to start, you might want to view the source code for the user interface components in Flash CS3. On my PC, those class files are located here:

    C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\Common\Configuration\Component Source\ActionScript 3.0\User Interface

  12. Finally, you’ll discover that the blogging community centered around Flash is quite strong and innovative. Be sure to visit the Adobe XML News Aggregator and Fullasagoog. Each of these sites provide a central point for many Flash and Adobe-related blogs. Use them to discover your favorites.

The list above should provide you with hours of reading (and viewing) material about Flash Pro and ActionScript 3. Looking to to learn Flex too? Check out my post 10 Great Ways to Learn Flex.

ActionScript errors don't display in Flash Player 9.0.115 when using ExternalInterface

UPDATE: It appears that if you set ExternalInterface.marshallExceptions to true, the errors will be re-enabled.

Here’s a third ExternalInterface bug I discovered while developing the YUI Charts. When you call an ActionScript function from JavaScript, and an error is thrown by Flash Player, the standard error popup in the debug version of Flash Player will not display. This bug only appears in Flash Player 9 Update 3 (version 9.0.115), and it does not affect earlier versions.

This problem affected me on multiple occasions while I was using the beta version of Update 3 from Labs (though I only discovered it after the release) and again just a couple of days ago. I have trouble reproducing or tracking down certain bugs that others report because errors during calls from JavaScript simply fail silently on my machine like if I had the release player.

Let’s look at a simple example application below. When the constructor runs, it exposes the displayError() function to JavaScript. This function does nothing more than throw an error. The constructor then calls a flashReady() function through ExternalInterface to notify the HTML page that the SWF is finished loading.

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;

	public class ExternalInterfaceActionScriptError extends Sprite
	{
		public function ExternalInterfaceActionScriptError()
		{
			ExternalInterface.addCallback("displayError", displayError);
			ExternalInterface.call("flashReady");
		}

		public function displayError():void
		{
			throw new Error("This error will not display in 9.0.115!");
		}
	}
}

The flashReady() function in JavaScript appears below. The ${application} is simply the replacement token used by Flex Builder HTML templates for the object/embed id in the page.

<script type="text/javascript">
	function flashReady()
	{
		${application}.displayError();
	}
</script>

If you have Flash Player 9.0.47 debug installed, an error will be displayed. If you have 9.0.115 installed, you will see nothing. Once again, I intend to submit the bug to Adobe so that it may be fixed in an upcoming release of Flash Player. If you’ve found any Flash Player bugs, and you can reproduce them, always be sure to let Adobe know. It may not help immediately, but you’ll be thankful when they’re fixed in the future.

Some legal variable names cannot be passed from ActionScript to JavaScript

Let me tell you about another Flash Player ExternalInterface bug I encountered recently while working on the YUI Charts. When passing an Object from ActionScript to JavaScript, make sure your variable names don’t require quotes. Let me explain with a quick example.

This is legal ActionScript, but the variable name requires quotes because it has a hyphen:

var test:Object = { "legal-name" : "hello!" }; //just fine!

This code will throw a compiler error:

var test:Object = { legal-name: "hello!" }; //error!

Now, let’s look at a quick little class I built.

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;

	public class ExternalInterfaceVariableNames extends Sprite
	{
		public function ExternalInterfaceVariableNames()
		{
			var test:Object = { "legal-name": "hello!" };
			ExternalInterface.call("fromFlash", test);
		}
	}
}

The HTML document in which we’ll embed this SWF will have the following simple JavaScript function:

<script type="text/javascript">
	function fromFlash(value)
	{
		console.log(value);
	}
</script>

Note: The function console.log() is used to display text in the Firebug console a lot like trace() is used in ActionScript to debug in Flash authoring or Flex Builder.

When I try to run my simple SWF, the following error is displayed in the Firebug console:

missing : after property id
[Break on this error] try { __flash__toXML(fromFlash(({legal-name:"hello!"}))) ; } catch (e) { "

What exactly is that showing us? Basically, for ExternalInterface to work, Flash Player places some code into the document. The important part of the code in the error is this:


{legal-name:"hello!"}


Look familiar? Just like ActionScript, JavaScript requires variable names with hyphens to be quoted. Bug confirmed. Of course, I'm submitting this bug to Adobe so that it can be fixed in a future version. Make sure you always report bugs you find in Flash Player, and try to include test cases whenever possible!