jQuery Inspired Actionscript Library

So the other week while I was fooling around with flash, I decided to make something. It was nothing really, just a good way for me to learn how to use the Actionscript language. I got generally far when I realized: "some of the things in this language annoy me. I wish there could be a jQuery for actionscript." And so on that wish, I made a jQuery for actionscript.

Admittedly, I don't think it's as good as jQuery. It doesn't deal with multiple movie clips / arrays as sleek as a fashion as jQuery does, but it does a good enough job. Also, as far as extending the library... I just don't know if Actionscript has that kind of flexibility anymore.

You might be thinking: "how could actionscript NOT have that flexibility? Actionscript and javascript both follow the ECMAscript standard!" Well, that is true, but you need to consider how both languages are programmed. With javascript, you are forced to prototype objects because certain browsers understandings of the language's standard (*cough IE*). In actionscript, you don't have this problem. One might say that actionscript is homogeneous because Flash will always understand it in the same way. Also, prototyping in actionscript has been deprecated to more useful class and interface structures. The fact that prototyping is no longer used in actionscript means that you can't quaintly extend the functionality of objects like you can in javascript. Oh well.

Nevetheless, on to an example:

import flash.external.ExternalInterface;
var curr_anchor;
function getAnchor(anchor:String) : Void
{
    if(curr_anchor != anchor && anchor != '')
    {
        $('movie1,movie2,movie3').each(function(){
            $(this).hide();
        });
        $('movie'+anchor).show();
    }
    curr_anchor = anchor;
}
ExternalInterface.addCallback("getAnchor", null, getAnchor);
function toggleAnchor(anchor:String, fn:Function) : Void
{
    if(curr_anchor != anchor)
    {
        ExternalInterface.call("toggleAnchor", anchor); 
        fn.apply(null, [anchor]);
    }
}
var i:Number;
for(i = 1; i < = 3; i++)
{
    $($(_root).movieClip('movie'+i)).set({
        _x: 10,
        _y: 30
    }).hide().text({
        _name: 'movie_text'+i,
        _x: 0,
        _y: 0,
        _width: 100,
        _height: 100,
        text: 'Page '+i,
        size: 30,
        color: 0x000000
    });
    $($(_root).movieClip('button'+i)).set({
        _x: 20 * i,
        _y: 10,
        _i: i
    }).click(function(){
        toggleAnchor(this._i,function(z){
            getAnchor(z);
        });
    }).text({
        _name: 'button_text'+i,
        _x: 0,
        _y: 0,
        _width: 10,
        _height: 13,
        text: i,
        color: 0x000000,
        size: 10
    });
}

You might recognize that code from a previous article about accessible flash. Well, ignore all of the ExternalInterface stuff and concentrate on the $() function and how functions can be chained together just like in jQuery.

Why bother with this library? It simplifies a lot of things:

  • The ancestry of movie clips is cached for quick access later on by only referring to a movie clip by it's name and not needing to precede it with any of its parent movie clips / levels.
  • Create movie clips with $.movie() and text fields with $.text(). Levels are dealt with automagically!
  • Dealing with text fields is especially easy. The TextField and TextFormat objects are merged for quick use when creating a text field.
  • $.load() is overloaded to work as an onLoad handler as well as to load an XML file.
  • Effects! $.moveTo(), $.fadeTo(), $.scaleTo(), $.rotateTo()! These all work with intervals so that they will always go the same speed, regardless of the movie's FPS.
  • Looping! As said before, not as advanced as jQuery, but even so: $('movie1,movie2,movie3') access 3 cached movie clips! You can loop over those with $.each() after!
  • Built in quick event handlers! $.load(), $.hover(), $.click(), $.data(), $.xml() as well as $.loader() to deal with loaders and $.bind() to bind functions to events.
  • Concise code. This inherent with the jQuery style of chainability.
  • $.get(), $.set() and $.attr(), all quick setters / accessors to movie clips, text fields, XML nodes, etc! (as well as the vanilla object that the library encompases)

So, enough for me plugging in, here are the links for you to check out the code and to download the library.


Comments


Comment