This blog has moved to a new location! http://iqandreas.github.com/

Thursday, February 11, 2010

Optimize AS3 for speed - Bitmap filters reply

I originally posted this as a reply to a comment on MichaelJamesWilliam's blog entry "Learn how to Optimize your AS3 Code". The spam catcher kept refusing to submit it (I'm guessing because of all the links), so I reposted the reply here.



kustrle February 11, 2010 at 7:51 am
I was sure pixel perfect collision detection already first check if two objects are overlaping. Is there any way of reducing lag that comes from glow, blue, etc without photoshop? Since we lose flexibility there too. If we want to change glow to other color later it will be much harder. Can we tell flash to convert those objects to some kind of bitmap picture and then forgot about all filters? Great tutorial!


@kustrle - Yes, it is possible to save the "filtered" version of DisplayObjects as BitmapData and use that the entire time.

Tuesday, February 9, 2010

The Language Reference at the tip of your fingers!

There is no question or dispute about it,
If you want to be a good ActionScript developer, you need to learn how to use the ActionScript 3.0 Language Reference. (Unless you have decided to do all your coding using only primitives...)
I'll write a guide on how to use the language reference some time in the future, but until then, it still needs to be convenient and easy to get to. I will show you how to save the language reference to your hard drive (faster than loading it in from the internet, and then it's also available when you are offline!), and then add it to your bookmarks toolbar.

The end result will look something like this:



I will be using FireFox (version 3.5.7) running on Windows XP. It should be fairly straightforward, and pretty much the same for any browser or operating system, but if you have any difficulties, leave a comment. If you have gotten this to work in a different operating system or browser, please share your results.


Step 1 - Find and download the ActionScript reference from Adobe's website

The newest version of the language reference can be found at:
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/index.html

Note that Adobe often throws around and rearranges their site, so if that should happen, this site will always link you to the most up to date version of the language reference:
http://tinyurl.com/ykacx95


About at the bottom of the page of the online reference, it should say something like "Download a standalone ZIP file version of this reference, including its own local search for offline use, here:" with a link to the ZIP. The current link is as follows:
http://help.adobe.com/support/documentation/en/flash/10/ActionScript3LangRef.zip

Save that ZIP file (about 6MB) to your desktop, and proceed to step 2...



If you are using Flash CS3, the online version of the language reference can be found here:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

I can't seem to find a downloadable ZIP, however, if you installed CS3 correctly, the language reference should already be stored on your computer in the following directory:
C:\Documents and Settings\All Users\Application Data\Adobe\Flash CS3\en\Configuration\HelpPanel\Help\ActionScriptLangRefV3\index.html


If you are using any other version of ActionScript (such as AS2, Flex, FlashLite etc), the entire list of avialable language references can be found at:
http://www.adobe.com/devnet/actionscript/references/
However, it seems that only the Flex Language Reference and the Flash CS4 Language Reference can be downloaded as ZIP files. Sorry. :(



Step 2 - Extract the ZIP file to an appropriate location

If you can't do this one on your own, you have more to worry about than learning ActionScript.

You can extract the directory to any place that is convenient for you, however, if you decide to move it later you will need to redo the entire procedure, so choose wisely!

Some recommended directories:
c:\Documents and Settings\All users\Documents\AS3 Language Reference\
c:\Documents and Settings\All users\Application Data\Adobe\AS3 Language Reference\
c:\Program Files\Adobe\Flash CS4\AS3 Language Reference\
c:\Program Files\Adobe\AS3 Language Reference\
c:\Program Files\Mozilla Firefox\AS3 Language Reference\
c:\Programming\Flash\Language References\AS3 Language Reference\
c:\AS3 Language Reference\

I will be using the first option for this tutorial as it will be the least likely to be overwritten in case any programs update.


If you are using CS3, play it safe and keep the language reference in the directory where you found it. If you want to have it elsewhere, make a copy.



Step 3 - Add "index.html" and "all index pages"


EDIT: For some reason the context menu option "Open selected links in new tabs" seems to have disappeared, so in order to continue the tutorial you need to install one of the following add-ons:
Linky - https://addons.mozilla.org/en-US/firefox/addon/425
Multi Links - https://addons.mozilla.org/en-US/firefox/addon/13494
Snaplinks - http://snaplinks.mozdev.org/installation.html

For this example, I will be using "Linky", but you are free to use whatever plugin you prefer.


In the directory you downloaded the language reference to, open the "index.html" file into FireFox (or whatever browser you are using).

The site's url should say something like
file:///C:/Documents%20and%20Settings/All%20Users/Documents/AS3%20Language%20Reference/index.html

And you should see a page like this

The main index page for the ActionScript 3.0 Language Reference

To begin, bookmark "index.html" and rename it to "Main Page" or something and place it in a new bookmark folder named "AS3 Language Reference".

For convenience, I added the bookmark folder directly to the "Bookmarks Toolbar", but you can keep them hidden away in the plain old bookmarks menu if you prefer.


Next we will be adding a "search feature" (more like an index with CTRL+F) Remove the "index.html" text from the url bar and hit enter. This should bring up the folder contents in FireFox with the following url:
file:///C:/Documents%20and%20Settings/All%20Users/Documents/AS3%20Language%20Reference/


Select all the links you see from "all-index-A.html" to "all-index-Z.html", right click the selection, and (at least in Linky) choose "Open selected links in tabs". After a while, you should have 27 new tabs opened. You can close down the "folder view" so it doesn't get included when bookmarking.


Go to "Bookmarks > Bookmark all Tabs..." or hit "CTRL+SHIFT+D". Choose where to store these bookmarks, and name the folder for them something like "Search". It may take a few seconds, but once the bookmarks are saved, you can close down those pages. This is easiest by just closing and reopening the window, but if you have TabMix Plus plugin installed, there is a very handy "Close other tabs" option.

Linky - open selected links in tabs

Save all tabs as bookmarks

A quick alphabetical index of classes, properties, and functions is now available in your bookmarks


For the next steps, you will be repeating this procedure quite a bit.

Also, if it makes it easier, you can add the root folder where the language reference is stored as a bookmark as well (I named mine "Browse Folder")



Step 3 - Add the packages


Next we will be adding the following packages as sub folders of the bookmarks menu:
adobe.* (only a few files)
air.* (if you don't develop in AIR at all, you can ignore this one)
fl.* (Flash components)
flash.* (All the actual class files - this one is the most important!)

This part is the one that takes the longest. Unless you have a trusty army of Oompah Loompahs to do the job for you, prepare to take out at least half an hour in bookmarking them all. If you have a short attention span, bookmark them small parts at a time over time.

In any order you like, start by opening one of the subfolders with the matching package name, and in most folders, you will need to open an additional sub-folder package.

I'm going to start with "flash.accessibility" (in folder "flash\accessibility\") and start working down the list in alphabetical order until the entire flash directory is added.

Use Linky to open the list of classes into your tabs


Keep doing this to all 4 folders (and their respective subfolders) until you get an organization something like this in your bookmarks toolbar:

Browsing for the documentation for flash.display.MovieClip


Wohoo!! Almost done... (After all that you probably don't want to see another bookmark again, but bear with me. It is definitely worth it and VERY convenient once it's done!)



Step 4 - The global package and Appendix



There are several classes just laying their in the main folder that don't have a package. You could add them directly to your bookmarks toolbar, or you can group them into a new "global" folder to avoid clutter.

Better organized global classes and functions bookmarks

I found, the easiest way to track down all global classes, instead of guessing which ones are classes and which ones are just HTML pages, open the page named "class-list.html". It will contain a list of all the global functions and classes.

Note that even though the classes are organized into separate HTML files, the global functions are all stored in one single HTML file (named "package.html"). So, instead of selecting all links on the page, only select the classes, and bookmark them. After that, go back and bookmark "package.html". If you have any use for it, you can also bookmark "package-classes.html", which is basically a list of all classes and functions in the top level package.

You can even add the pages "operators.html", "statements.html", and "specialTypes.html".


Finally, the Appendix ("appendix.html") contains pages such as a list of errors and what they mean, some AS2 to AS3 migration help, and other information. You can either add this single page and bookmark it, or select all outgoing links and bookmark those instead, creating a subfolder named "Appendixes".


The only page left is "conventions.html", and unless you will be checking on it every few days, I wouldn't bother adding it as most of the Language Reference conventions are quite self-explanatory anyway.



Last thoughts



So, that's it. If you did everything right you should have a bookmarks menu which is easy to navigate around in, and has really helped me at times.



An added bonus is that if you start typing in something in the address bar, FireFox will automatically recommend pages in your bookmarks.
Firefox will auto-complete any text you type in with a class in the language reference from the bookmarks if a match is found


I'll create a post in the near future which better uses the "search" ability of the language reference, but that is yet to come.