SWCs and FlashDevelop

I'm thinking my Bits of Blender episodes are really cutting into my blogging time! But I thought I'd put a note out on my latest development approach in FlashDevelop for Flash/ActionScript 3 projects.

Previously, I'd set the main class as the Document class. Then I would set the parent class of Symbols to a corresponding ActionScript 3 class. I'd turn off the automatic declaration of variables so that it would force me to declare them in the class. This was nice because I would have a reminder at the top of the class that there were named instances in the symbol. I'd also add a "//MC" after the declaration as another reminder why I had those members set to "public" (I'd also set "//MC" as one of the tasks so I could quickly find all the named instances on the stage).

But for a recent project, I decided to go with compiling in FlashDevelop instead of Flash. When I'd used FlashDevelop for some Flex work last year, I was always impress with how quickly it compiled. Flash seems to take much longer. I think it may be because FlashDevelop uses the Flex compiler which is doing incremental compiles and Flash is always compiling everything (I'm guessing). So instead of working in Flash, my main Flash class is not running in Flash. Instead, I'm bringing all of my Flash assets in via an SWC. This gives me the advantage of compiling straight in FlashDevelop (and not having it switch to Flash, in fact Flash does not even have to be running). Plus, my compiles are faster. But there is one downside, now instead of my Flash symbol extending an AS3 class, I'm having my AS3 class extend the symbol. This means any named instances in the class are in the symbol instead of in the AS3 class, so I no longer have that reminder of the declaration at the top of the class. The instance is still declared and still appears in the code completion, but it just does not feel quite as good. Overall, though, this approach weighs in feeling like a better way to go.

Reflection in ActionScript 3

I'm not a big fan of the old eval() function in earlier versions of ActionScript. As of ActionScript 3, it is no longer supported. For the most part, that is a very good thing. My buddy, Jason, is migrating from AS2 to AS3 and he found himself looking for the eval() function. He came to me and asked me about it, I replied "you mean the evil() function?".

The problem with eval() is that you were executing code that was being created at runtime, meaning there's no chance of the complier helping you catch errors. He showed me the code he was working on and --usually-- you can solve the lack of eval() through a better architecture. As I looked at his program, I realized he had a pretty elegant solution. Re-architecting would take a good deal of time and not necessarily yield as elegant result. Java has quite a few classes for dealing with reflection, so I figured (given how similar AS3 is to Java) there must be some similar classes. As it turns out, the pickings are pretty minimal... but there were enough to come up with a nice, dynamic solution to his problem.

In the flash.utils package, there are a number of public functions. The one we were looking for (before we even knew it) was getDefinitionByName(). This function takes a string that is the name of a class, an returns the class object for it. With the class object, you can then create an instance of the class. Here's a simple example you could run in the Flash IDE:

var myClass:Object = getDefinitionByName("Symbol1");
addChild( new myClass() );

It assumes you have a Symbol named "Symbol1" that is exported for ActionScript. If you are doing this in Flex or inside an external class file, remember to import the flash.utils package. The danger of runtime errors still exists, but it is more limited now in that you can create classes and not just execute and arbitrary chunk code on the fly like you could with eval().

Audio Display List?

The Flash 9 player using ActionScript 3 (for Flex or Flash), has an internal structure called a display list. Items in the display list, will be shown, items not in it will not be shown. So if you load an external SWF, it will not be visible until you add it to the display list. Once it is in the display list, it'll receive events (like MouseEvents, KeyboardEvents, ENTER_FRAME, and so on). That's nice, because you can load it and display it at will.

But what about a SWF that also contains audio? As it turns out, there is no audio equivalent to the display list. Once a SWF containing audio is loaded, it will begin to play and you'll hear the audio, whether or not you're displaying it. To stop the audio, listen for Event.INIT on the loaderInfo in the Loader object. Event.INIT fires when the first frame is loaded so you can call stop() it to prevent the playback head from moving forward in the timeline.

FlexBuilder vs FlashDevelop

I've been using both FlexBuilder and FlashDevelop at work lately. I'm a long time FlashDevelop user, so I've a little bias towards it. Lately, I've been trying to look at FlexBuilder with regards to its strengths. I've found that if I am doing a lot of MXML coding, FlexBuilder is a better tool. You have a class view of the MXML and it is good about hinting for MXML attributes. If you need to do absolute positioning, FlexBuilder also wins because of it's WYSIWYG editor.

But when it comes to ActionScript 3 coding, I'd much rather be in FlashDevelop. FlashDevelop's code hinting is much more powerful, for example it does NOT require you to type exactly the right characters. It's a breeze to jump around to declarations of code as well as nice features for creating getters/setters, promoting local variable to member variables, and creating event handlers. The look and feel of FlashDevelop is also nice, it launches and runs quickly. It has good defaults, a user-friendly UI, and good choices for fonts (I guess that could fall under "good defaults"). FlashDevelop is also free.

Sandy and Blender

Click on the above image to see a Flash animation. I modeled figure above in Blender, exported to ActionScript 3 using Dennis Ippel's Python script, and then rendered it in Flash using Sandy. It was coded using FlashDevelop. All done with open source!

Flash Mouse Wheel Shortcuts

Here's some Flash CS 3 shortcuts I just discovered while exercising my curiosity, they are pretty useful:

Shift-MW moves the playback head to the next/prev
Ctrl-MW move the playback head to the first/last frame
Ctrl-Shift-MW zooms the view

Buttons, Symbols, and Filters

I just spent another couple hours of my life tracking down a bug in Flash CS3 that turned out to be... drum roll...

If you put a drop shadow on a symbol that is inside of a Button, the movie will freak out without giving any sort of error messages.

Well, at least it wasn't as bad as Friday's LoaderContext problem. Right now I'm also investigating some bizarre behavior with embedded fonts on dynamic fields, more on that when I know more.

Favorite ActionScript 3 and Flash 9 Books

I was just writing someone about my favorite ActionScript 3 and Flash 9 books and thought it might be worth elaborating on in the blog. These are not all my AS3 books by any means, but they are my favorites. You may also be interested in these if you're doing Flex development. I do have opinions on Flex books, but that's another blog.

• ActionScript 3.0 Game Programming University - This may be the most fun way to get your feet wet in AS3 and Flash 9 if you're already experienced with Flash. Especially if you prefer to look at complete examples to learn from. You can also use the numerous examples to build upon instead of starting from scratch. Plus, it is Flash-oriented where many of the ActionScript books are Flash-neutral. The book has great support with an accompanying website with demos of the games you can play, as well as a forum to interact with the author and other readers.
  
• Foundation Actionscript 3.0 Animation: Making Things Move! - Another fun and great way to learn AS3 programming. This book is Flash neutral, so you can do it from a text editor with the Flex SDK compiler, FlashDevelop, FlexBuilder, or Flash. While his examples are not complete games like the above, they are small, useful examples. He also gives a good intro to AS3.
  
• Essential ActionScript 3.0 - If you plan to write AS3 code, this book is a must to have.
• Flash CS3 Professional Advanced - This is a great intro to Flash 9 with AS3, probably my favorite all-purpose Flash book, I review it here. This book will effectively bridge your Flash 8 and AS2 knowledge to Flash 9 and AS3. It has very clear explanations and illustrations.
  

Flash Object Drawing

When I first saw the Flash 8 feature Object Drawing, I thought it was just automatically grouping the object (like with the Group command), so I dismissed it. I dismissed it for a whold version! Last night in Flash CS3 (Flash 9), I turned Object Drawing on for my little boy, and then noticed when he moved the cursor near the edge of the object that the curve on the cursor appeared!

After a quick test I realized that groups were indicated with a bounding box that was closer to a cyan color where the object bounding box was a darker blue. It is very cool that the objects are still modifiable in the standard Flash manner of pulling out curves, corners, or corner points, yet they do not merge with the shape below, it's like having the best of both worlds... being able to use Flash's very natural feeling vector drawing tools, but have the result be modifiable in a way that is more similar to traditional vector tools like Illustrator. I don't see this technique replacing the old Flash way of drawing, but supplementing it so I don't have to rely on moving back and forth between layers so much.

It is easy enough to break apart objects with Ctrl-B, just as you would Symbols or Groups. But how can you make them from a non-object? After cruising through the menus, I was clueless. So I resorted to using the online Help (the equivalent of driving and stopping to ask for directions, IMO). The stop was useful, to make an object select Modify > Combine Objects > Union. Whoo hoo! The only thing that was missing was a shortcut to make a union. Since I don't really using the Group command, it was a quick decision to switch the use of Ctrl-G to make objects instead of groups.

Interacting with Flex in Flash

I was trying to bring a Flex 2 SWF into Flash CS3 and interact with it. I was able to load the Flex swf without a problem but when I tried to access a public property or function I'd get the following error:

ReferenceError: Error #1069: Property hello not found on
_Main_mx_managers_SystemManager and there is no default value.

So I did the natural thing and Googled it before spending time figuring it out :)
Unfortunately, my search came up empty :(

Looking into the docs class mx.managers.SystemManager gave me the clue I needed. To get at the actual application, I needed to get to the first child of the loaded content. The compiler was unhappy with calling getChildAt() on the content object, so I cast it into an Object along the lines:

var flexApp:Object = (loader.content as Object).getChildAt(0);
trace(flexApp.hello);

That did the trick!

Populating a TextField before it exists

A friend of mine posted the following Flash problem the other day:

I tell a movie clip to go to a frame. I want to put something in text fields on that frame, or set some property of some movie clip on that frame. But if I gotoAndStop, and then on the next line of AS try to set something, I get an error. I need to wait for the frame to start, or the objects on the frame don't exist yet. So I have to put a function call on the frame to call a second function to do the setting later on.

The is quite messy. Surely there has to be a better way.

I came up with the following solution, which I think is fairly elegant. You make a symbol with a TextField in it. Set the symbol to extend from a class which has a public static variable you can set, then when the symbol is instantiated later it uses that class variable in the constructor. This works because the class is loaded when you reference it, it doesn't matter that an instance of the class does not yet exist.

The static variable could be an object so you can better identify what value should be populated. You can get the instance name in the constructor to determine which property of the object in the class variable to use. Here's an example of the class:

package {
import flash.display.MovieClip;
import flash.text.TextField;
public class JRNTextField extends MovieClip{
 // should use a getter/setter
 public static var mytext:Object = new Object();
 public function JRNTextField(){
  textInSym.text = JRNTextField.mytext[this.name];
 }
}
}

In frame 1:

JRNTextField.mytext.asdf = "hello";
JRNTextField.mytext.qwer = "goodbye";

In frame 2:

stop();

Frame 2 has two instances in the timeline of a symbol that extends the JRNTextField class.

The symbol contains a dynamic TextField that is named "textInSym".

The instances on frame 2 are named "asdf" and "qwer". As hoped, they get
populated with "hello" and "goodbye", respectively.

Keyframes, MovieClips and Listeners

In Flash CS3... Say you have a MovieClip instance named "my_mc" on frame 1 and add an event listener and you then create a keyframe in frame 2.

If you move that keyframe in frame 2 to another layer, it no longer has the listener. This action creates a new instance of that symbol

If you move the keyframe in frame 2 to frame 3 and insert a blank keyframe between the two, it no longer has the listener because this action also results in a new symbol instance on frame 3.

If you swap a different symbol, it no longer has the listener (not a surprise).

BUT... If you keep the keyframe in the same layer and don't swap the symbol, the instance still has the event listener. Keyframing on the same layer without breaks retains the same symbol instance.

I suppose not that surprising once I think about it, that by moving the symbol instance to a new layer the result is a different instance of the same symbol. A quick trip through the debugger confirmed this.

MovieClip Identifiers

Here's something interesting I found in Flash CS3 using ActionScript 3. Say you have the following:

Frame 1:
trace(this.hasOwnProperty("my_mc");
trace(my_mc);

Frame 2:
A MovieClip instance named "my_mc"
trace(this.hasOwnProperty("my_mc"));
trace(my_mc);

The output is:
true
null
true
[object MovieClip]

So Flash assigns the property identifier "my_mc" to the current timeline's instance at the start of the movie, before the actual instance occurs on the stage. Then when it does, that property is populated with a reference to the instance. I assume the identifier is created at compile time.

Getting back the hand cursor in AS3

As I migrate from Flash ActionScript 2 (AS2) to ActionScript 3 (AS3), I'm always finding little differences. In AS2, if you set the onPress event of a MovieClip to a value, your MovieClip will then cause the cursor to switch to the hand cursor when you mose over it. I found in AS3, you need to manually set two properties to get this effect (thanks Colin!):

myClip_mc.buttonMode = true;
myClip_mc.useHandCursor = true;

That's kind of a drag if you have already created a movie with dozens (or more!) of clickable MovieClip instances. I'd done just that so I was hoping I was missing some global way getting back this functionality easily. There wasn't... so I made one :)

Below is a class that extends from MovieClip, and in its constructor it sets the two properties I'm looking to be set:

package {
import flash.display.MovieClip;
class ClickableMovieClip extends MovieClip {
 function ClickableMovieClip():void {
   this.buttonMode = true;
   this.useHandCursor = true;
  }
}
}

So all I had to do was go into my library and set the Base Class of each of the Symbols I knew I wanted clickable in my movie. One weird thing I found: after typing that in to the base class field, I needed to click the check mark next to it, it you just clicked "OK" then it'd give you an error.

Flash Scenes

One thing that I never used with Flash is the Scene feature. I was always aware of it, I'd just never needed it. Plus, scenes don't get much of an buildup from the online help (the emphasis in bold I added):

• Scenes can make documents confusing to edit, particularly in multiauthor environments. Anyone using the FLA document might have to search several scenes within a FLA file to locate code and assets. Consider loading content or using movie clips instead.
  
• Scenes often result in large SWF files. Using scenes encourages you to place more content in a single FLA file, which results in larger FLA files and SWF files.
  
• Scenes force users to progressively download the entire SWF file, even if they do not plan or want to watch all of it. If you avoid scenes, users can control what content they download as they progress through your SWF file.
  
• Scenes combined with ActionScript might produce unexpected results. Because each scene Timeline is compressed onto a single Timeline, you might encounter errors involving your ActionScript and scenes, which typically requires extra, complicated debugging.
  

Not exactly a ringing endorsement for scenes!

I've been doing some Savvy Development, following the Allen Interactions way, using Flash. While I was working on the media prototype in Flash, the media prototype is developing the look of the piece. I was getting frustrated with doing different screens for the app and was about to switch to Photoshop to just do a static bitmap representation of the screens. Then I decided to try the scene feature. WOW! Did that make doing different screens easy! In the Scenes panel you can give the scenes meaningful names and keep it open to quickly switch between scenes. Then I saw the Duplicate Scene and things got even easier!

Now I wouldn't recommend them for the final developing the final product, but I would for when you need to develop a series of screens rapidly. If you're not using them, you should give it a try.

Self-portrait in Flash

In the spirit of the Old Masters (who often did self-portraits for practice), I did this as an exercise to improve my Flash illustration skills. I initially did two self-portraits, one on each weekend, then last week I merged the best qualities of each.

This piece made it into the CartoonSmart.com student gallery. Click on my image above to see the Flash version on my website. The Flash version is under 15KB in size, smaller than the JPG above.

Sizing Flash

Sometimes you'll see Flash movies which fill the entire browser window. If you make the window larger or smaller, the Flash movie scales proportionately. Even though I use this feature, I always forget where you set it. For the record, it is set on the HTML tab when you chose File>Publish Settings... Set the Dimensions field to Percent and the Width and Height fields to 100 percent.

Adobe CS3 Rant

I try to stay positive with my blog, this is really my first big rant. But I had such a bad experience, I had to blog it.

I had been looking forward to the Adobe Creative Suite 3 (CS3) upgrade for a month (or more). When the Design Premium version finally arrived, I excitedly tried to install it. After going through the entire install routine (between one to two hours), it failed. I tried again, and again it failed at the end. The next night I searched the web for solutions, called Adobe and tried two more times, both failing. The next day I called Adobe again and this time they finally knew what the problem (and solution) was, which is here. So it took five installs which cost me two and a half evenings (not to mention stress).

I've used Adobe products since early 1987. I'm very disappointed with this experience. If you read the tech note I linked to, you'll see that the problem was the Flash 8 Player! How does a problem like this make it through QA? Adobe used to have very good QA. The Macromedia acquisition may be having a bad effect on Adobe.

While I'm ranting... what is the deal with the user interface for the CS3 line of products? While the new features are GREAT, the new UI is cumbersome! Who designed that and thinks it is a good idea? What a waste of screen space. Apparently someone who does not use the products to make a living and has a very large monitor (or two). I've had to spend time creating workspaces that somewhat resemble in function the CS2 and earlier functionality. The Flash CS3 workspace does not bother to remember the location/orientation of the timeline, nor does it remember how much you were zoomed into the stage.

And did someone actually get paid for this branding? It is like a bad (almost generic) version of the Macromedia branding for their products. Colored squares for the program icons. For Illustrator's splash page, it is just an orange box. No more Venus, or even flowers.

One last rant... I'd hoped that they'd improved the Flash to Illustrator conversion. They improved the Illustrator to Flash but it looks like they did NOTHING going the other way, from Flash to Illustrator. As I've posted in the past, I now love doing some types of illustrating in Flash. For creative vector drawing, Flash blows away Illustrator. Don't get me wrong, I couldn't live without Illustrator for most types of graphic illustration. It is a shame Adobe didn't see fit to focus on this aspect of the product line integration.

Well, looking on the bright side, at least these problems are not to the magnitude of the Illustrator 6 to 7 upgrade. Now that was a nightmare! I don't even want to think about it anymore (shudder).

The Little Things Mean Alot

I was working on an animation in Flash the other day. Traditional frame-based animation in Flash is not something I normally do. I was starting to get irritated with having to constantly use the mouse to advance to the next frame so I started looking for a short cut. After looking through the menus and the list of shortcuts you can redefine, I couldn't find anything. I posted to a group of Flash users and within minutes I had two replies... you use the comma and period keys to go to the previous and next frames, respectively. After learning that, I had a vague memory of going through a Flash 2 or 3 tutorial and learning that, could they have been there since v2?

Now let's see if I can help anyone else out with a really obscure key. I've been doing a lot of drawing in Flash recently and I don't know what I'd do without knowledge of the "G" key. When drawing, it is very useful to have snapping on so existing points can be easily connected, aligned, or merged by snapping them together. But often snapping is a problem when you're trying to move to a specific spot. Well if you press and hold the "G" while moving the point snapping will be temporarily disabled. I can say enough how useful this has been. I have to credit the book Illustrating with Macromedia Flash Professional 8 for showing me the light (which I first mentioned here).

Flash Drawing Approaches

It is funny. Sometimes working in Photoshop feels like you can get it done quicker. With a recent Photoshop painting, it is taking a while. Initially, it feels like you are making great progress, but once you get down into the details things slow down.

Flash illustration is more graphic (usually). While vectors can be slower to work with, a graphic illustration will take less time than a more realistic Photoshop painting. I suppose I could do a graphic illustration in Photoshop and see how quick that goes, but the thought of being stuck at one resolution for something that looks like vectors would pain me.

One thing I'm doing in Flash is trying different tecniques for rendering, such as:

• Starting with a rectangle and control-clicking to add points
  
• Drawing with the line tool, then filling, and finally removing the lines
  
• Drawing lines, converting to fills, then reshaping the lines (where necessary)
  
• Painting with the brush with maximum smoothing

The last technique, I am least sold on. You have the least amount of control and the most opportunity to add unnecessary points.

One approach in Flash I haven't really spent time with is creating with the pen tool. After 19 years of Illustrator's pen, it looks similar but doesn't have the same functionality. Plus, using the above techniques has a more natural feel. I do use the pen for certain specific tasks that I'll cover another day.