ASExpander : making AS3 in CS3/4 easier

Nov 02 2008 Published by under Extensibility, Flash

[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.

21 responses so far. Comments will be closed after post is one year old.

  • Hassan says:

    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! 🙁

  • Will says:

    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.

  • jkozniewski says:

    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 ).

  • senocular says:

    “And so I bring you ASEXpander.”

    Wha?? A sex pander??

  • kp says:

    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. 🙂

  • kp says:

    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}”;

  • Dru says:

    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.

  • Micahel says:

    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.

  • kp says:

    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.

  • ASExpander: Code-Snippets in Flash…

    Keith Peters hat ein hilfreiches Skript für den ActionScript-Editor in Flash geschrieben. Es funktioniert so: Man gibt einen Stichwort ein (z.B. &enterFrame) und drückt anschließend einen Tastaturshortcut. Das Stichwort wird nun durch ein hinter…

  • 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.

  • Lee Brimelow says:

    Awesome! This almost emulates the tab shortcuts in TextMate.

  • kp says:

    James, wow. I didn’t actually know about getText, setText, and setSelection. I might be able to do a lot more with this now.

  • […] the comments of my last post, James Thompson kindly pointed out that fl.actionsPanel has getText() and setText() methods, not to […]

  • […] noticed a post by Keith Peters this morning where he created a JSFL script for the Flash IDE that would allow almost similar functionality as tab shortcuts in Text…. This means that you can type shortcuts like “&mousedown”, then use a keyboard shortcut you […]

  • […] http://www.bit-101.com/blog/?p=1620 http://www.bit-101.com/blog/?p=1627 This entry was posted on Monday, November 3rd, 2008 at 9:19 am and is filed under Extensibility, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  • […] ASExpander : making AS3 in CS3/4 easierSnippets for CS3/CS4. […]

  • […] ASExpander is a JSFL extension created by Keith Peters for Flash CS3/4 that allows you to integrate a ActionScript snippet functionality into your existing Flash workflow.  ASExpander allows you to store your existing or new ActionScript code snippets into an external file and then map it to a command of your liking.  There are no limits to the amount or type of snippets stored. […]

  • Mart says:

    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