Flash & AS3 info, source, & experiments
Tools & Utils
AS3 DisplayObject Auto Depth Sorter
3536 days
A common issue I have while creating Flash/ActionScript 3 games is needing to depth sort DisplayObjects based on some property of the display object itself (most often, their y coordinate). I do this so often that, a while back, I created a special class that extends Sprite and automatically handles this for you. I thought it was finally time to share this handy utility class with the world, so here it is.
Example:
For an example, check out the Kung Fu Panda Tales of Po game I worked on. When the characters pass by each other across the “y” plane, they are automatically depth sorted without any extra coding work on my part.
Usage:
var mcContainer:SpriteAutoSorter = new SpriteAutoSorter(); mcContainer.sPropertyToSortOn = "y"; // "y" is actually used by default so this line is not necessary mcContainer.beginSorting();
And that’s it! Now just addChild and removeChild like normal and everything will be handled for you. To save on performance, you should call stopSorting() when it is no longer required. Enjoy!
Become an Internet Ninja Using Chrome’s Search Keywords
1898 days
You know that awesome Google Chrome address bar that doubles as a search bar? Did you know you can quickly tell it what website you want to search without taking your hands off of the keyboard?
In my Google Chrome search bar, if I want to search a specific website, I just type one of the following strings, followed by a space, followed by my query:
i Google Images v Google Video m Google Maps > Google: I'm Feeling Lucky yt YouTube w Wikipedia a Amazon t Browse Twitter discussions imdb imdb.com
So, if I wanted to search for the word “flower” in a Google Image search, I would just type “i flower” in the search bar and press Return.
Settings these keyboard shortcuts up is very easy. Launch Chrome, and then open up Preferences. Then click on the Manage button:
Then, double click on any Search Engine you’re interested in, modify the “Keyword”, and you’re officially an internet ninja!
Using a Mac? Check out these must-have Quick Look plugins
21010 days
It has been about year since I switched from Windows to Mac and I thought I would release a series of articles that discusses my workflow and the vital tools that I have discovered along the way.
Today, we talk about one of the best features of Apple’s OS: Quick Look. Highlight any file, press the spacebar, and instant preview! The lack of this feature is my biggest complaint whenever I switch back to a Windows OS. Unfortunately, there are a few file types that are either not supported, or else not supported as well as they could be. Enter Quicklook Plugins.
First off, here’s how to install them:
http://www.quicklookplugins.com/how-to-install/
And here are my favorite plugins:
- .as files using QLEnscript.qlgenerator
- .xml files with coloring using colorxml.qlgenerator
- .zip, .tar, .targz, .7z and others using Archive.qlgenerator
- .flv files using flv.qlgenerator (requires the free Perian component to be installed)
Flashplayer and AIR Benchmark Test app
21734 days
I’m currently using the Flashplayer in more of an embedded system configuration. We’re evaluating multiple hardware configurations to decide what hardware to use and we’re also evaluating multiple version of the Flashplayer to decide which Flashplayer to use. So I made a quick open source test app to help with this evaluation. It allows you to compare animation performance between an EnterFrame animation vs a Tweener animation vs a Timeline animation. You can also apply various effects to see how they impact things. Since scaling can skew results, the app is designed to run at a specific resolution, but it is easily scalable to whatever resolution you wish to test (and steps are included in the source).
The results have been rather bewildering at times. Depending on the hardware (and I think the OS as well), I have seen filter effects drastically decrease the performance, drastically increase the performance, I have seen full screen mode have great impact or no impact, I have seen the AIR version help the performance and hurt the performance, and just about everything inbetween. Crazy! Anyway, tell me what your hardware/OS/Flashplayer version combination are, and what sort of results you get in the comments.
Usage:
It should be fairly straight forward. Just drag the sliders to add a new ball that is animated in the specified method. You can click on the top half or bottom half of the DiagnosticStats window (thanks Mr. Doob!) to increase or decrease the max fps. Use the + or – keys to increase/decrease the maximum # of balls allowed. In the AIR version, press Q or X to quit and click and drag the background to move it around.
Demo | Source | AIR | AIR Source
Automatic Flash X,Y Wireframe Preview
01892 days
At the company I work for we use Functional Specification documents for any new Flash game that we make. Before any of the developers start any coding, the design team puts together a simple frame by frame Flash file to make it easy to see what things will look like in the various states of the game. This will eventually become screen shots put into the spec. There will be an additional section put into the spec that includes all of the top-left and center x,y coordinates for each MovieClip on the stage during each frame. That was usually a tedious part of the job that none of the designers liked doing. When they brought this to my attention, I decided to make a quick script to do this for them. Here are the results:
USAGE:
- Copy and paste the code into frame 1 of any Flash file
- Make sure all objects that you want wireframes for are Symbols (for some reason, the x,y is off if they aren’t)
- Run the swf
- Use the arrows keys to change frames
- Use space bar to toggle wireframe view
- You may press the space bar multiple times to get new random colors
- You can click and drag on the x,y text to move it to a new location
SAMPLE:
FlashDevelop 3 Beta review
02179 days
On Tuesday (May 22, 2007), Mika Palmu, Philippe Elsass, and Nick Farina made an alpha release of the next installment of my favorite ActionScript editor, FlashDevelop. Somehow, I missed that they released the beta last night!
I tip my hat to the guys that made it. Considering it’s a free editor, it’s pretty darn good. I have a few rants and items on my wish list that I’ll get into in a moment; but all in all, these guys could easily sell this product and yet they offer it for free. I’m surprised Adobe hasn’t hired them to save their horrible IDE in Flash CS3 (yeah, yeah, it’s improved… but for a company of their size and the number of years that Flash has under its belt, it should be significantly better than it is). Anyway, if you like and actively use the product, you should support them. If you are still using the Flash IDE to write your code, please, make your life easier and install FlashDevelop.
There is finally expanded keyboard shortcut support to allow utilization of keys such as ALT and PageDown.
Viewing multiple code files simultaneously in a split screen mode is even easier which can be seen here:
The Find & Replace is much better than it was in v2, but I wish it had a “replace within selection” option…
The code snippets have all been moved to individual external files. The best part is that they are now language specific! This means that I can have two different snippets, with the same name, but with completely different functionality depending on the language that I’m currently working in. There are a few $(EntryPoint) parameter oddities within snippets, but I expect they will fix this before the final release. Unfortunately, my biggest desire for FlashDevelop, more than anything else, still hasn’t been implemented. That is support for custom snippet parameters that can be changed in a popup dialog on the fly with default values. The SE|PY ActionScript IDE (also a great editor done by Alessandro Crugnola) has offered this feature for quite a while. See the screen shot below for how it works:
Configuring many FlashDevelop settings (but not all) or installed plugins is much easier with the new settings GUI:
The code completion is outstanding. The crash recovery seems to work fairly well (but I noticed a couple of oddities). The new integrated browser works okay, but it is in dire need of forward and back buttons (I wouldn’t even use this browser if it weren’t for the one click access it has to the online FlashDevelop documentation wiki).
All in all, FD is still my favorite (free) AS editor, and FD3 is a nice next step. If they add support for custom snippets, I would be as happy as Google was to locate E.T.
FLV Video Player Review
22194 days
I had reason to run a downloaded flv file on my local system today. I tried three different players in the following order:
- Flash Video Player by FlashGuru
- Apollo Flash Video Player by Mutationevent.com,
- FLV Player 1.3.3 by Martijn de Visser
The first two both installed just fine, but when I double clicked my .flv file, the respective player started up and then nothing happened. So I moved on from those players in about 30 seconds.
The third player by Martijn de Visser installed easily and played my flv file when I double clicked on it first try! It has a nice, very simple interface, with a couple of basic features (such as zoom 1x, 2x, load file, load url, etc). The player certainly is lacking in advanced features and the author is aware of this and created a spot to post your wishlist for v2 features. However, that was back in April ’06 and he hasn’t blogged much since then, so the project might be abandoned–I can’t tell. Either way, this basic player serves its purpose well. Download it here:
ig:Syntax Hiliter review
02216 days
by Nate Chatellier
in Tools & Utils
Well, it was fairly easy to setup with two minor complications. First, the installation instructions said extract the zip file into the wp-content/plugins directory, upload, and wallah. However, extracted folder is called “iG-Syntax Hiliter” which contains the folder “ig_syntax hiliter plugin.” It is actually this second folder that needs to reside in the plugins folder in order to work. The second hiccup was that when I tried to activate the plugin, it was looking for the “ig_syntax_hilite” folder in the plugins directory as well. Unfortunately this folder was in the plugins/”ig_syntax hiliter plugin” folder so I had to copy it over.
After these changes, everything worked fine. It was easy to use and configure from the wp-admin–>Options screen. Here’s what the code looks like:
[as]package
{
import flash.display.Sprite;
/**
* Test class
*
* @author Nate Chatellier
*/
public class MyTestClass extends Sprite
{
protected var _bMyVariable:Boolean;
/**
* Constructs the MyTestClass object.
*
* @param bMyVariable This is MY variable!
*/
public function MyTestClass(bMyVariable:Boolean)
{
_bMyVariable = bMyVariable;
} // END CONSTRUCTOR
} // END CLASS MyTestClass
} // END PACKAGE[/as]
I’m not the biggest fan with the default look. I may try to play with the settings or I may evaluate different highlighter options depending on whether I feel it’s needed. More soon…
WordPress ActionScript 3 Syntax Highlighter
02216 days
by Nate Chatellier
in Tools & Utils
So I was going to continue with the AS 3 network programming discussion and realized I don’t yet have any AS3 syntax highlighter setup. I’d hate to make you read code that didn’t look pretty 
. I was considering FlashTextEditor, dp.SyntaxHighlighter, or ig:Syntax Hiliter, although I think I’m leaning toward the latter. Any Suggestions?