[Note: I just released version 1.1 of ASExpander. http://www.bit-101.com/blog/?p=1627 . This post is still worth reading for background and usage, but check out the other one for the latest version.]
There’s been a lot of talk about AS3 being “hard“. A lot of it stems around the fact that its is more verbose than AS1 or AS2. It just takes a lot more typing to do things that were really simple in earlier versions of Actionscript.
I’ve been using Flash CS4 a LOT lately, for spiking ideas, doing quick visual experiments, etc. In fact, the vast majority of stuff on my other site, Art from Code, is created directly in Flash CS4 right on the timeline.
So of course, I find myself typing a whole lot of the same few lines of code over and over (and over). The obvious solution was to use a snippets panel. Lee Brimelow has a nice one. http://theflashblog.com/?p=336
But that didn’t quite fit my workflow – making sure the panel is open, grabbing the mouse, clicking the item you want in the list, clicking the copy to clipboard button, clicking back in your code in the right place, and pasting.
One of the comments there mentioned that functionality like in Text Expander would be nice. I thought about it for a minute and realized that wouldn’t be too hard to do. And so I bring you ASExpander.
ASExpander is a simple JSFL command script. Save the following in your commands directory as ASExpander.jsfl:
[as]map = new Object();
map[“&meta”] = “[SWF(width=800, height=800, backgroundColor=0xffffff, frameRate=31)]”;
map[“&stage”] = “stage.align = StageAlign.TOP_LEFT;\nstage.scaleMode = StageScaleMode.NO_SCALE;”;
map[“&resize”] = “stage.addEventListener(Event.RESIZE, stageResizeHandler);\nfunction stageResizeHandler(event:Event)\n{\n\ttrace(\”stage resize\”);\n}”;
map[“&bitmap”] = “var bmpd:BitmapData = new BitmapData(800, 800, false, 0xffffff);\nvar bmp:Bitmap = addChild(new Bitmap(bmpd)) as Bitmap;”;
map[“&enterFrame”] = “addEventListener(Event.ENTER_FRAME, enterFrameHandler);\nfunction enterFrameHandler(event:Event):void\n\t\n}”;
map[“&mouseDown”] = “stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);\nfunction mouseDownHandler(event:MouseEvent):void\n{\n\ttrace(\”on mouse down\”);\n}”;
map[“&mouseUp”] = “stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);\nfunction mouseUpHandler(event:MouseEvent):void\n{\n\ttrace(\”on mouse up\”);\n}”;
map[“&mouseMove”] = “stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);\nfunction mouseMoveHandler(event:MouseEvent):void\n{\n\ttrace(\”on mouse move\”);\n}”;
map[“&keyDown”] = “stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);\nfunction keyDownHandler(event:KeyboardEvent):void\n{\n\ttrace(\”on key down\”);\n}”;
map[“&keyUp”] = “stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);\nfunction keyUpHandler(event:KeyboardEvent):void\n{\n\ttrace(\”on key up\”);\n}”;
map[“&loop”] = “for(var i:int = 0; i < 10; i++)\n{\n\ttrace(i);\n}";
map["&2loop"] = "for(var i:int = 0; i < 10; i++)\n{\n\tfor(var j:int = 0; j < 10; j++)\n\t{\n\t\ttrace(i, j);\n\t}\n}";
_doc = fl.getDocumentDOM()
_tl = _doc.timelines[_doc.currentTimeline];
_layer = _tl.layers[_tl.currentLayer];
_frame = _layer.frames[_tl.currentFrame];
script = _frame.actionScript;
for(key in map)
{
script = script.split(key).join(map[key]);
}
_frame.actionScript = script;[/as]
Then, I HIGHLY recommend assigning a shortcut key to this command. I assigned Command-E, which overrides "Edit Symbol", which I never use anyway.
Now I can just type:
&enterFrame
hit Cmd-E, and I have an enter frame listener set up. Notice that my hands never left the keyboard!
It's easy to add your own snippets. Just give it a token and text:
[as]map["token"] = "text to replace token with;";[/as]
If you're not a coder, get one to write some useful snippets for you and put them in string format. They'll know what to do.
I've gone with an ampersand (&) prefix just to avoid possible conflicts with other code in the script. You might have a "enterFrame" in your code that means something, but probably not a "&enterFrame". But that's not built into the command at all. If you don't like the ampersands, change them to %s or *s or !s or just use straight text if you are brave.
Anyway, hopefully this makes AS3 a tiny bit less painful for a couple of people. Let me know if it helps.
Where to save ASExpander.jsfl? Adobe’s live docs [http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00003800.html] says, in:
boot drive\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS3\language\Configuration\
but I don’t have “Flash CS3” folder in my Application Data\Adobe folder! 🙁
This is excellent. Thanks! Is there any way to get this to work within an open .as file? This only works within the actions panel on a frame in the timeline.
Hi,
Great jsfl 🙂
Funny thing, I’ve written some basic abbreviation support for Flex
recently ( based on eclipse monkey plug-in ).
I wonder how much access to AS editor we have trough jsfl – beacause if we could acces
current currsor position etc. much more sophisticated abbreviation support could be written.
The one I’ve mentioned for exp. expands “pr f go int” ( after key shortcut ) to
protected function go() : int {
return null;
}
and so on…
The main difference is that I’m not replacing string in whole code but rather
in the currently edited line ( so no prefixes are needed ).
“And so I bring you ASEXpander.”
Wha?? A sex pander??
Hassan, that seems right. Are you sure you have CS3 installed as your user name? What’s in the Adobe folder?
Will, as is, it will only work with the actionscript on the current frame of an open document (fla). Not sure if they’ve yet added JSFL support to access script documents.
jkozniewski, yeah, you can only get the actionscript on a frame as a string, unfortunately. So no cursor position or anything cool like that.
senocular. LOL. classic. didn’t even see that coming! The capitalized X must have been a freudian slip. fixed. 🙂
Here’s a couple more I added:
map[“&embed”] = “[Embed(source=\”sourcefile\”)]\nvar theClass:Class;”;
map[“&click”] = “btn.addEventListener(MouseEvent.CLICK, onClick);\nfunction onClick(event:MouseEvent):void\n{\n\ttrace(\”on click\”);\n}”;
Brilliant! I mean, somewhat crude, when compared to, say, TextMate’s snippets or TextExpander, but what a great way to work with what you have. Making lemonade, I’d say. This will bring some amount of integrity to coding on the timeline, for when those times occur.
awesome as it is, for what you’ve done so far, it would be even better if we could at somthing like tabbing references, to jump to the variable names or inside the function… this could be a feature of ASExpander 2.0 dont you think?
How did I not think of that?! Thanks – I’m sure I will be using this forever more, I’m always using this feature in TextMate.
Dru, Micahel, I’m thinking it might be possible to add a bit more functionality by popping up a XUL based panel. I’m not sure if I would use that kind of functionality, but if people are into it, I might explore it.
One problem is that as it is the script gets rid of you actions panel history, so I’ve changed:
_doc = fl.getDocumentDOM()
_tl = _doc.timelines[_doc.currentTimeline];
_layer = _tl.layers[_tl.currentLayer];
_frame = _layer.frames[_tl.currentFrame];
script = _frame.actionScript;
to:
script = fl.actionsPanel.getText();
and:
_frame.actionScript = script;
to:
fl.actionsPanel.setText(script);
fl.actionsPanel.setSelection(script.length,0); // This part stops it highlighting everything by moving the cursor to the end
Still doesn’t work in .as editor though – I’ll continue playing around.
Awesome! This almost emulates the tab shortcuts in TextMate.
James, wow. I didn’t actually know about getText, setText, and setSelection. I might be able to do a lot more with this now.
This is great, is there anyway of making it work with .as files? At the moment is seems it only works with actions registered to a frame on your timeline.
thanks in advance