Serious/Fast Flash Development (with free tools)

So you want to get serious about making flash movies and games? Great! The way to get good is with fast iteration. What I mean by "iteration" is the time it takes to make a change to your game, build the game, test your game and decided if you need to make another change.

For the most part, it's easy to iterate with flash, you just test your movie and there you go. What I'm talking about is more advanced flash movies. I'm talking about passing parameters from the page to your swf (mygame.swf?var1=1&var2=2), calling javascript from your swf (ExternalInterface), and swf's getting loaded in other swf's (and you can pass params to the child swf).

Basically, there comes a time when just running the movie on your computer isn't good enough and the only way to really test your swf files is by uploading them to a server and viewing them in a browser connected to the web. After all, isn't that how your audience is going to see it?

So let's not waste time. Here are the things you'll need to know in order to iterate quickly when building flash movies/games.

Note: you'll need a copy of Flash, but everything else I'm about to mention is free.

Step 1: Debugging Flash Over The Web:

[ ] Start by downloading and installing the major web browsers. FireFox, IE and Safari --no whining! --get them all, just because you like one better than the others doesn't mean your viewers agree with you. When you test your movies, be sure to test them in all the major browsers.

[ ] Next, Uninstall Your Flash Player:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14157

[ ] Now Install The *Flash Debugger* (follow the link and scroll down some. Get *both* versions for your OS, meaning, get the pluging for IE and for FireFox)
http://www.adobe.com/support/flashplayer/downloads.html

[ ] Configure Flash Debugger log file. This log file is the major reason we installed the flash debugger. Follow the directions at this link:
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=logging_125_04.html

Note: I had to create the "Logs" directory, I'm not sure if you'll have to do the same or not.

[ ] Make a shortcut to this Logs folder and place it in a location that's fast and easy for you to get to (Desktop, etc)

[ ] make a batch file to delete the log. In Windows you'd to this by opening notepad and adding this line:
rm flashlog.txt
and then saving the file IN THE Logs folder as "deleteflashlog.bat". Now, when you double click deleteflashlog.bat, it will delete the log file (thus resetting the log for you).

(maybe someone will be kind enough to comment on how to make a similar script for the Mac?)

[ ] make a shortcut to this deleteflashlog script. Again, put it in a fast/easy place to locate (I put mine directly on the window's task bar, then I right clicked on it and changed it's icon to an "X")

Okay, just to recap, you have all the major browsers and the Flash Debugger installed and configured to save a log file. What does that mean? Well, it means when you view pages with flash movies on them, all the "trace()" commands will get printed to the log file. So now you can debug print movies when they are actually live and on the page. It will also pop up error messages from time to time, which is annoying but WAY more helpful than silence.

PS: next time you're looking at a .fla file's publish settings, you'll notice there are check boxes to suppress trace and debugging... now you know why. If you're printing out important info, you're making it very easy for people to hack your swf. So when you're done debugging, turn that stuff off.

And Finally, the best debugger in your toolbox:
[ ] download and install Firebug because it's frigging awesome!
https://addons.mozilla.org/en-US/firefox/addon/1843

Yes, you will be using FireFox to do most of your testing. Why? Two reasons. 1) because it has firebug (I can't explain the ins and outs of firebug, you just got to play with it. It's full of awesome.) and 2) because we can set up the cache to clear really easily in FireFox, but not in the other browsers.

One of the most annoying problems with trying to test your movies in a web browser is that they all cache your swf files. Then no amount of refreshing or hitting F5 or ctrl+F5 or any of that crap will force the browser to reload the swf you *know* you just changed.

All of the browsers have a way to clear the cache, or "delete the history", or "delete temp files" or whatever they choose to call it. However, FireFox let's us specifically say what we want to clear and not clear when we ask it to drop the cache AND it has a hot key to do it.

[ ] in FireFox, go to "Tools" > "Options..." Next click the "Privacy" tab at the top, then in the Private Data area, click the "Settings" button.
[ ] in the pop up, turn OFF all the check boxes EXCEPT "cache". Make sure "cache" is checked. Click ok
[ ] In the "Private Data" area, uncheck the "ask me before clearing private data", then click OK to close the options dialog.

Now look in the "Tools" menu and you'll see "Clear Private Data" but more importantly you'll see the hot keys to press.

Now, whenever you upload a new version of your swf to the web and you want to force FireFox to update it, just press shift+ctrl+del then f5. This is sooo much faster than digging through menus and clicking "yes, I really mean it!" buttons over and over again.

FURTHER MORE, let me spell out the workflow.

• change your swf
• copy the swf to your server
• click the shortcut to delete your flashlog file
• hit ctrl+shift+del
• hit f5
• there's your *latest* movie and it's sending trace commands to a fresh log file that you can pop open and examine.
  

Step 2: writing the code faster

Of course, you should have Flash on your computer. I won't ask how you got it, but I do advise buying a copy since I have friends who work at Adobe.

[ ] download/install Flash Develop
http://www.flashdevelop.org

This is a pretty snazzy dev environment for Actionscript files. It has auto-complete and syntax highlighting.

[ ] In Flash Develop, be sure to set syntax menu to as3 or whatever version you're using, or it will give you auto-complete for the wrong set of library functions and keywords.

[ ] Note, In Flash Develop, you can hit F6 to tell Flash to build and test your movie.

[ ] Next, download the Tweener AS libraries
http://code.google.com/p/tweener/

Tweener: it makes it so easy to tween from code. It's like realizing you're allowed to run while everyone else seems to be walking. Checkout some of the syntax online, or just google around and you'll see. It's amazing what you can do in one line. Here's an example:

import caurina.transitions.Tweener
Tweener.addTween(myDispObj, {y:10, time:3, delay:1, transition:"linear", onComplete: myFunction});

so that's "animate myDispObj's y variable to 10 in 3 seconds. but wait 1 second before starting and call myFunction when you're done". That transition:"linear" is laughable when you see all the possible transition types you have to choose from (http://hosted.zeh.com.br/tweener/docs/en-us/)

the best part, the parameters are mix and match. So you can have a call like this:
Tweener.addTween(myDispObj, {y:10, time:3});
or
Tweener.addTween(this, {time:3, onComplete: myFunction});

It's awesome. Just get it and play with it :)

Final Tips

Just in case you're logging into some still control panel for your website and uploading files via some slow web-based file manager.... I want to clue you in on the word "ftp" and the name "FileZilla". If you don't know what those are, please google them. Using an ftp is sooo much faster for uploading files to your website.

And while I'm talking about searching the web... keep in mind that there are many many great things to read on AS3 and flash.... but there are many more useless things to read.

When searching for help, start your searches with "adobe as3".
Ex: "adobe as3 loader"

this will usually get you the api docs and live docs on Adobe's site, which are pretty handy.

Also, if your version of Flash Develop doesn't have find in files, you might want to download "Crimson Editor". Find in Files is a coder's best friend. (but I think Flash Develop 3 has it, so no worries)

If you want to see the flashlog.txt file as it's updating, you can download Cygwin (which is a linux shell) and then use the linux tail command. (I'll leave an example some other time... I'm exhausted... til then, please google them)

Final workflow:

• Make changes in Flash Develop.
• Hit F6 in Flash Develop (build movie)
• Copy new swf to server (Filezilla or some ftp)
• Click deleteflashlog short cut
• Hit ctrl+shift+del in FireFox (clear cache)
• Hit F5 in FireFox (reload page)
• See latest version of your movie
• Examing log file if needed.

When you get used to it, it's "tap a key", "drag a file", "click a button", "tap a shortcut", "tap a key". Or tap, drag, click, tap, tap.

Okay... I think I've said plenty. I hope you found it helpful!
~Danny