Posts filed under 'actionscript'

Chumby Widget 002 - Japanese Alphabet!

20080126120743_w810i.jpgJust finished up version 1.0 of the Japanese Syllabary Flash Card for the Chumby. It was approved in its version 0.1 stage last week, but unfortunately, when you update a widget, it has to be approved again for public viewing. Perhaps after the big official Chumby launch there will be different tier developer permissions, some of which would allow for updating already approved widgets without further approval. I guess we shall see about that. So, I expect this one to go public again on Monday. I’ll post the link for the Chumby site page for it once it is up again. In the meantime, you can view a non-configurable version on my site at http://www.plasticstare.com/nihongo/syllabaryflashcard.html. The photo is of a slightly earlier version than the current one, but it looks pretty much the same. The Chumby widget allows you to view Hiragana or Katakana (or random), allows you to choose which of the Romaji and symbol to view first, and allows you choose which character sets you wish to view (and defaults to a,i,u,e,o,ka,ki,ku,ke,ko, and ga,gi,gu,ge,go).

Update: the chumby widget can be found at http://www.chumby.com/guide/widget/Japanese Syllabary Flash Card. Enjoy!

1 comment Sun, 2008 Jan 27, 4:09am

As2Api and RubyScript2Exe (darwinized)

I recently sat down and took a look at as2api, which seems to be the most recommended JavaDoc exporter for actionscript. Once I had everything figured out, it seems to work fine, and I’m sure there are some little nuggets that I haven’t quite figured out yet, which I’m looking forward to figuring out. (read more for the skinny and darwin downloads)

However, for those of you out there in Mac OSX land, I wouldn’t recommend downloading the current version listed on the site for OSX, entitled “as2api-allinone-osx-0.4.sit” in the downloads section. I think that it is missing files, or that it just doesn’t work correctly at all. I would recommend instead downloading the first link for “as2api-0.4.tar”. The downside of downloading this version is that there is no OSX command line executable in there, so you have to run the Ruby script “ruby as2api.rb packages –classpath classpath” which works just fine.

Honestly, I don’t know enough about ANT scripts yet to know if you can run Ruby scripts from an ANT script target, so I used rubyscript2exe, another handy little application to convert the Ruby scripts into a mac command line executable. (Incidentally, and to add a little geek comedy to this post, you have to install the Pascal compiler and compile a piece of the rubyscript2exe library in order to run it…so I had to compile one application in order to create another one…).

Anyway, I have included below 2 downloadables in this post. The first is the command line version of as2api that is compiled from the package that you can download as Ruby code from the as2api site. The down side is that you cannot tweek the css and html templates that are part of that code; the up side is that you can actually use it as a command line executable, which is entitled “as2api_darwin”. You can used it exactly as you would the as2api.rb Ruby script.

PlasticWare Downloadable ::
Darwin Executable of As2Api (JavaDoc for Actionscript) (Sep. 5, 2006)
Download (~4.5mB) :: as2api-0.4.zip

The second downloadable I have included here is the rubyscript2exe download, altered to include the eee_darwin file that I compiled from the pascal source on my mactel laptop in OSX 10.4.7, and repackaged using tar2rubyscript.rb, which was also necessary to get it running properly. I have also included the example hello world script “hello.rb” from the tutorial, which you can use to test the code and make a hello world exe.

PlasticWare Downloadable ::
RubyScript2Exe with eee_darwin for OSX environment (Sep. 5, 2006)
Download (~1.1mB) :: rubyscript2exe.zip.gz

Both of these pieces of software are released by their proper creators under the GNU License, and I have included the source and license for each as well, as posted on their sites. Please download judiciously, the executable for as2api package is 4.5 mb.

7 comments Tue, 2006 Sep 05, 5:55pm

Actionscript Interface Implementation Error

Just to add this to the web search realm, a quick note on a fairly annoying discrepancy in the Flash IDE. When compiling flash movies that utilize interfaces, there is the possibility of getting the following error:

The implementation of the interface method doesn't match its definition.

Despite the fact that MTASC has no problem with it.

*I believe* that it is acceptable according to ECMA script standards to define functions in interfaces by supplying the types of the parameters, rather than the names and types. Compare:

public function moo(Object, String):Void;

vs:

public function moo(cow:Object, foo:String):Void;

The former is handled fine by MTASC; however, when compiled in the Flash IDE, the error “The implementation of the interface method doesn’t match its definition.” is returned for every function defined in the interface that has input parameters. The solution is to define the methods is in the latter example; however, for the Flash IDE to compile without errors, not only do the parameter types have to match, but also the parameters names have to match.

Hopefully that will help someone searching for this error…

Add comment Wed, 2006 Aug 30, 8:01pm

Interfacing in Actionscript

It wasn't until recently that I actually had the occasion where it made/makes a good bit of sense to use interfaces in any of my flash projects. Part of the reason has to do with formerly lacking the time to actually put together projects the right way, under crazy timelines, and part of it has to do with the fact that I'm working on something that needs to stick around for a bit and will possibly be augmented by persons other (and including) myself.

In most flash projects, interfaces are a bit convoluted and require thoughtfully building out to what amounts to an extra class. Most of the time in smaller projects, subclassing "default" classes pretty much gets the job done. To backtrack slightly for those unfamiliar with the term, an interface is an abstract type which is used to designate how classes can be accessed and manipulated. To use the terminology, an interface specifies the interface that must be implemented by a set of classes.

Utilizing Interfaces

Interfaces in actionscript are particularly useful when creating a set of classes that all have the same methods; the interface strictly defines the guidelines that must be followed when creating a new class of this type.

As an example, let us suppose that we are creating a set of shape classes; we will be creating a circle class and a square class. Let us suppose for now that the only method that we want to implement is the getArea() method. Here are our classes:

Actionscript:
  1. class Circle {
  2.    private var __radius:Number;
  3.    private var __type:String = "Circle";
  4.    
  5.    function Circle() {}
  6.    
  7.    public function getArea():Number {
  8.       return (Math.PI * Math.pow(this.__radius, 2));
  9.    }
  10. }

Actionscript:
  1. class Square {
  2.    private var __side:Number;
  3.    private var __type:String = "Square";
  4.    
  5.    function Square() {}
  6.    
  7.    public function getArea():Number {
  8.       return (Math.pow(this.__side, 2));
  9.    }
  10. }

So, both implement the same methods here. We can define an interface for all new shapes that get created, which must all allow for the calculation of their area (note that by convention, interfaces usually begin with the letter "I"):

Actionscript:
  1. interface IShape {
  2.    function getArea():Number;
  3. }

You must then go back and change your class definition line in each of the two classes to

Actionscript:
  1. class Circle implements IShape {

and

Actionscript:
  1. class Square implements IShape {

The interface defines how we can interact with shapes. The big advantage of this when working on projects is that when using environments such as Eclipse with FDT, you can specify that something is an IShape without knowing what shape it is specifically, thereby allowing you to build more flexible projects. In addition, rather than the alternative, which would be to type them as Object, you have a way of typing them that works with syntax checking and code hinting, which saves you time in the long run.

Combining Interfaces with Inheritance

Another handy trick to help when coding is to combine the use of interfaces with inheritance. Let's suppose we want to create a Shape superclass as such:

Actionscript:
  1. class Shape extends MovieClip implements IShape{
  2.    private var __type:String = "Shape";
  3.    
  4.    function Shape() {}
  5.    
  6.    public function getArea():Number {
  7.       return undefined
  8.    }
  9.    
  10.    public function setColor(newColor:Number) {
  11.       theColor = new Color(this);
  12.       theColor.setRGB(newColor);
  13.    }
  14.    
  15.    public function toString():String {
  16.       return ("Shape of type: " + this.__type);
  17.    }
  18. }

So, our definitions would change as such:

Actionscript:
  1. class Square extends Shape implements IShape {

Now we have a few added benefits. Our shapes are now subclassed as MovieClips and Shapes, which means that they can inherit methods from the Shape class. All of our shapes have a __type and all are now MovieClips, so all of them can inherit toString() and setColor().

The cool part about this is that in this case, we now can implement the IShape interface (remember, all classes that implement an interface are required to implement the designated methods) without declaring ones inherited from the superclass unless we choose to do so. This means that we don't have to add toString() and setColor() unless we want to override the ones in the superclass. This is really great when you have several private variables with getters and setters that you want required by the interface, but don't want to have to duplicate and comment in every single subclass.

Another advantage of using interfaces is that, unlike extending superclasses, classes can implement as many interfaces as you want. For example, you could have a set of Shapes that implement an IAnimation interface as well as the IShape interface. Other types of objects could also implement this same IAnimation interface, so you could call the method pulse(cycleDuration) the same way on both types of class, and your code hinting would tell you that the method pulse requires a number input. This is probably the biggest advantage -- being able to type an object as an interface when passing it to another object that wants to treat it as something that has the methods that the interface requires.

Add comment Fri, 2006 Aug 25, 7:02pm

TextMate - Continue Block Comment

The current release of TextMate seems to be missing the capability to allow for the auto continuation of block comments when editing actionscript files. To fix this, you can add a new snippet to the actionscript bundle in the bundle editor.

  1. In TM, go to the menu Bundles/Bundle Editor and choose Edit Snippets...
  2. Open the ActionScript section on the left, and click the "+" button at the bottom left and choose to add a new snippet.
  3. Name the new snippet, such as "Continue Block Comment".
  4. In the text area where is says Syntax Summary, delete the contents, and paste in the following:
    ${TM_CURRENT_LINE/(.*\*\/$)|.*?(\/\*(?!.*\*\/)).*|.*/(?1:
    :
    (?2: )* )/}
  5. Now click the Activation menu below (says "Tab Trigger") and change it to Key Equivalent. Click the field next to it, and hit the key (or the key if you prefer). The return key symbol should show up.
  6. In the scope selector field, type
    source.actionscript comment.block

    - this will set the snippet to just work inside actionscript block comments bounded by "/** */"

You can now close the bundle editor, and while typing in block comments in actionscript files, the return key should drop you to the next line, preserve the indent, and type in an asterisk followed by a space.

2 comments Wed, 2006 Aug 09, 12:31pm

Flickr.Contactr Pre-pre-alpha


FlickrContactr PRE-PRE-alpha
Originally uploaded by intafon.

Started working yesterday on my FlickrContactr application which can be found at my other domain, www.intafon.com. It's kind of fun to play with so I went ahead and made it public, although it is still pretty seriously in a pre-alpha state. I don't think it will blow up your computer, but I suppose there is the possibility that it could crash your browser. Anyhow, I'll be posting updates to it pretty frequently in the next week or so, until I get a good bit of the functionality that I want to put in there implemented. Right now, its just a fun way to quickly view your contacts (and their contacts, and theirs, etc.). See it here :: http://www.intafon.com/flickrcontactr/index.php

Add comment Thu, 2006 Jun 01, 10:27am

Testing Syntax Coloring/ Drawing Class

The following is a drawing class that I've used for the past year or so. I'm kind of using this article to test out various ways of doing syntax coloring in this blog. I use MoveableType, and I'm currently looking for some plug-in that will allow me to automatically publish code in the blog and have it look correct. Unfortunately, the only one I've found so far MTColorer, I wasn't able to get working. There are a few that my friend Mason and I have looked at for WordPress that work pretty well and (like many WordPress things) are easily configurable/hackable and free. The code that I've included below (as well as the other code so far in this blog) is colored using the Actionscript HIghlighter featured on Arul's Blog, which allows you to paste in your code and hit a button to get the styled text. Arul's code does a great job, but you have to visit his site to style your code, and then also provide a download link to the text file of your code if you want to provide just a plain text version. But hey, it works. He notes on the site that there is the possibility of releasing the code once he cleans it up, so maybe there will be something one can post on their own site sometime soon.

As for the code below, it is a simple drawing class that allows you to easily draw a generic box, a hairline box, and a filled rectangle. The main reason, however, that I created the class, is for those occasions where you may need a box that is not filled and is not made up of flash lines. If you've used Flash enough, you know that if you draw a 3 pixel line box, the corners are often rounded looking, which doesn't fly unless that is what you want in your design. I have worked on several projects that were to use photos that needed a "frame" of a certain width. The drawing class drawFrame method basically draws 4 filled boxes to create a rectangular "frame" of a certain thickness, made entirely of "fill" rather than lines, so the corners are nice and sharp. Of the instances where I have used this class, I have used the drawFrame method 90% of the time. Enjoy.

Actionscript:
  1. /**
  2. *  Drawing
  3. *  @author - Ryan Todd
  4. *  PlasticStare PlasticWare Codebase Project (PWCB)
  5. *  This code is part of the PlasticStare PlasticWare codebase project. This work is Copyright (c) 2005 Ryan Todd, all rights reserved.
  6. *  Prior permission of the author is required in order to redistribute the source code or algorithms in a commercial product in any
  7. *  form -- original or derivative, in any programming language. The source code of the equations may be distributed as part of a
  8. *  non-commercial product, provided that redistributions contain the copyright notice:
  9. *
  10. *  This Code is Copyright (c) 2005 Ryan Todd, all rights reserved.
  11. *  This work is subject to the terms in http://www.plasticstare.com/codebase_terms_of_use.html.
  12. *
  13. *
  14. *  AUTHOR :: Ryan Todd
  15. *  AUTHOR SITE :: http://www.plasticstare.com/
  16. *  CREATED :: 2005/10/15
  17. *
  18. *  Drawing - this can be used to draw boxes and sometime in the future, other shapes
  19. *
  20. *  Version :: v.1.0.5.20051015 for Actionscript 2.0
  21. */
  22.  
  23. class com.plasticstare.utils.Drawing{
  24.    
  25.     public function Drawing() {
  26.        
  27.     }
  28.    
  29.     // drawHairlineBox - draws a box at in the specified movieclip with the specified rect and color. the line
  30.     // of the box is of hairline thickness
  31.     public static function drawHairlineBox(_mc:MovieClip,_color:String, _rectArray:Array):Void {
  32.         _mc.lineStyle( 0, Number(_color), 100 );
  33.         Drawing.drawBox(_mc,_color, _rectArray);
  34.     }
  35.    
  36.     // drawBox
  37.     public static function drawBox(_mc:MovieClip,_color:String, _rectArray:Array):Void {
  38.         _mc.moveTo( _rectArray[0], _rectArray[1] );
  39.         _mc.lineTo( _rectArray[2],_rectArray[1] );
  40.         _mc.lineTo( _rectArray[2],_rectArray[3] );
  41.         _mc.lineTo( _rectArray[0],_rectArray[3] );
  42.         _mc.lineTo( _rectArray[0],_rectArray[1] );
  43.     }
  44.    
  45.     // drawFilledBox
  46.     public static function drawFilledBox(_mc:MovieClip,_color:String,_alpha:Number,_rectArray:Array):Void {
  47.         _mc.lineStyle(0,0x000000,0);
  48.         _mc.beginFill (Number(_color),_alpha)
  49.         //
  50.         _mc.moveTo( _rectArray[0],_rectArray[1] );
  51.         _mc.lineTo( _rectArray[2],_rectArray[1] );
  52.         _mc.lineTo( _rectArray[2],_rectArray[3] );
  53.         _mc.lineTo( _rectArray[0],_rectArray[3] );
  54.         _mc.lineTo( _rectArray[0],_rectArray[1] );
  55.         //
  56.         _mc.endFill();
  57.     }
  58.    
  59.     // drawFrame - essentially draws 4 boxes inside the specified rect of the color specified. these boxes
  60.     // align along the inside of the top, bottom, left, and right of the rect and have the thickness (from the
  61.     // rect border to the inner side of the box) specified
  62.     public static function drawFrame(_mc:MovieClip,_color:String, _rectArray:Array, _thickness):Void {
  63.         var topb:Array = [_rectArray[0],_rectArray[1],_rectArray[2],_rectArray[1]+_thickness];
  64.         var botb:Array = [_rectArray[0],_rectArray[3]-_thickness,_rectArray[2],_rectArray[3]];
  65.         var lftb:Array = [_rectArray[0],_rectArray[1],_rectArray[0]+_thickness,_rectArray[3]];
  66.         var rgtb:Array = [_rectArray[2]-_thickness,_rectArray[1],_rectArray[2],_rectArray[3]];
  67.         _mc.lineStyle( 0, Number(_color), 0 );
  68.         _mc.moveTo(topb[0],topb[1]);
  69.         _mc.beginFill(Number(_color),100);
  70.         Drawing.drawBox(_mc,_color, topb);
  71.         _mc.endFill(Number(_color),100);
  72.         _mc.moveTo(botb[0],botb[1]);
  73.         _mc.beginFill(Number(_color),100);
  74.         Drawing.drawBox(_mc,_color, botb);
  75.         _mc.endFill(Number(_color),100);
  76.         _mc.moveTo(lftb[0],lftb[1]);
  77.         _mc.beginFill(Number(_color),100);
  78.         Drawing.drawBox(_mc,_color, lftb);
  79.         _mc.endFill(Number(_color),100);
  80.         _mc.moveTo(rgtb[0],rgtb[1]);
  81.         _mc.beginFill(Number(_color),100);
  82.         Drawing.drawBox(_mc,_color, rgtb);
  83.         _mc.endFill(Number(_color),100);
  84.     }
  85.    
  86. }

Add comment Wed, 2006 May 31, 9:08am

Hierarchical Menu Traversal for the Ppl

Well, as it was the most productive part of my day today, I decided to go ahead and impart it to the web. I'm sure there are plenty of examples out there...but I might as well use it as a tutorial for those who might need it. Its not rocket-science, but for those who haven't really used it before, its kind of foreign.

[*NOTE: for the code below, you may want to click the permalink link at the bottom of the article - I haven't had time yet to set up my style sheets to have this look correct (i.e. some of the code is getting cut off on the right)...]

A co-worker had a friend who was looking to traverse hierarchical menu data and print it out in PHP and needed a quick thought-jump-start, so I gave him the following algorithm. The code I've included below is actually more in AS 2.0 format, but its just the syntax that differs from PHP.

The idea is that there is a heirarchical menu sort of like this:

Menu 1
Submenu 1
Subsubmenu 1
Subsubmenu 2
Submenu 2
Menu 2
Menu 3

...and this menu is currently bundled into an object array (for my example) that could have been parsed from XML. My example below gives each menu a "value," which is the text of the menu, such as "File" and also gives each menu a menu of its own, called here by name as "children."

An example of this menu in object syntax is as follows:

CODE:
  1. [
  2. {value:"Menu1",children:
  3.         [
  4.         {value:"Submenu1",children:
  5.                 [
  6.                 {value:"Subsubmenu1",children:[]},
  7.                 {value:"Subsubmenu2",children:[]}
  8.                 ]
  9.         },
  10.         {value:"Submenu2",children:[]}
  11.         ]
  12. },
  13. {value:"Menu2",children:[]},
  14. {value:"Menu3",children:[]}
  15. ]

Basically, the challenge for most people is just making that leap to get their head around how to traverse any number of submenu levels, since in the structure above, any submenu item can have its own submenus. The key to doing this lies in using a recursive function call (if you are unfamiliar you can just look up "recursion" on Google or Wikipedia). What the recursion allows you to do is define a situation in which the function calls itself with a new set of data, which is perfect for our hierarchical menu object. Basically we want to print the menu values out, but if a menu has submenus, then we also want to print them out (and perhaps indent them). The AS 2.0 code for this is as follows:

Actionscript:
  1. // printMenus :  recursive function for printing the menu
  2. function printMenus (clist, prefixString) {
  3.         for (var n:Number=0;nlength;n++) {
  4.                 print (prefixString + "•" + clist[n].value);
  5.                 if (clist[n].children.length>0) {
  6.                         printMenus( clist[n].children,(prefixString + "     "));
  7.                 }
  8.         } // end for loop
  9. }
  10.  
  11. // now print it
  12. printMenus(myMenuList, "");

Please note that above I am using a hypothetical function called "print" to do the printing. In Flash, you could just use "trace" instead of "print" to see the results. Basically, the function is called, and the menu list (myMenuList here would be perhaps the object from above) and an initial indent of "" is passed in. As the menu is printed out, it checks to see if there are any menu children. If there are, the function calls itself again, this time with an augmented indention string. The function as it runs basically "drills down" the structure as far as it finds objects with children. I will say, however, that one needs to be careful how they use this in Flash, as I believe it still has a limit for the number of recursions that can be performed in a given period of time. Also, importantly, the variable "n" used as the index in the for loop must be scoped locally so that each time the function calls itself, a different local instance of a variable "n" gets used to do the loop. Hope this helps someone out there...

Add comment Mon, 2006 May 15, 5:05pm

Creating a True MovieClip Sub-Class

My friend Alan and I had talked about this about 6 months ago. Suppose that you want to have an AS 2.0 Class that extends MovieClip, and you would like to "instantiate" as a movieclip in some location in your flash movie. It would be great to be able to call that class in the same way that you can call MovieClip.createEmptyMovieClip(), and have a new movieclip instance that is in fact, a class that extends MovieClip.

Originally, the way that I had been doing this was to first create a class that extends MovieClip such as this ::

Actionscript:
  1. class com.plasticstare.SpaceInvader extends MovieClip {
  2.         function SpaceInvader():Void{
  3.                 trace("All your base...");
  4.         }
  5. }

Then, I would create an empty movieclip symbol in the library of my .fla file, and give it a linkage id, and then in the linkage associate it with the AS 2.0 class of my choosing, or in this case, com.plasticstare.SpaceInvader.

There are a few problems with this beyond the fact that it seems a bit laborious to have to do this. When compiling code in MTASC, for example, you have to create a special little class to make sure that any .swfs that you are publishing as shared libraries actually get the newly compiled code and make a reference to it in your .fla files (or there is probably some other way to do this as well). Otherwise, if you make a change to your class for that linked symbol, you have to publish back out of the Flash IDE again. (And if you have a bunch of them, its a real pain.)

I stumbled upon another way of doing this today when checking out something else in the Flash LiveDocs. Someone had contributed the code below in its original form, and I've since made a couple of tweeks - one to fix a major flaw.

Actionscript:
  1. public function createExtendedMovieClip(_constructor:Function, _parent:MovieClip, _depth:Number) {
  2.         if (!_parent) {
  3.                 _parent = _root;
  4.         }
  5.         if (!_depth) {
  6.                 _depth = _parent.getNextHighestDepth();
  7.         }
  8.         var mc:MovieClip = _parent.createEmptyMovieClip("clip_"+_depth, _depth);
  9.         var obj:Object = new _constructor();
  10.         for (var i in obj) {
  11.                 mc[i] = obj[i];
  12.         }
  13.         mc.constructor = _constructor;
  14.         mc.__proto__ = obj.__proto__;
  15.         return mc;
  16. }

The idea would be to use this in your Main.as class or some utility class -- some class that you can reach universally. So, supposed that I have it in my Main singleton class. I would call the function this way

Main.getInstance().createExtendedMovieClip(SpaceInvader,_root);

in order to create a new SpaceInvader clip in the _root. _constructor is simply the name of the class that you want to instantiate, and _parent and _depth are the clip you want it to reside in and at what depth. (the latter 2 parameters as you see are optional) Using this code, you can just create any new Class that extends MovieClip and instantiate it as a MovieClip instance on the stage on the fly, without creating any special linked symbols in the library.

3 comments Wed, 2005 Dec 21, 10:08pm

AS 1.0 MovieClip Extensions

I decided to re-release this list of prototype functions for actionscript 1.0 that augment the feature set of the MovieClip class. To use, simply add #include "as/MovieClipExtensions.as" (if you are keeping the ".as' files in a directory called "as") to the actionscript on frame 1 of your movie. They are a bit rough and not so commented, but they work none-the-less. I have since replaced/updated them with newer AS 2.0 classes and methods. Notable methods included are ::

  • MovieClip.prototype.setPos :: handy for setting the position to an x,y coordinate
  • MovieClip.prototype.hideMe
  • MovieClip.prototype.showMe
  • MovieClip.prototype.loadWithFade :: for loading jpgs and fading them in
  • MovieClip.prototype.crossFadeTo :: for crossfading clips
  • MovieClip.prototype.roundCoords :: for use with pixel fonts - rounds to nearest integer coords
  • MovieClip.prototype.linearAnimate :: for doing linear animations of clip properties

Version 1.5

Download :: movieClipExtensions.zip

Add comment Fri, 2005 Mar 18, 10:48pm


Site Decryption

info = { PlaIns: "the section of the PlasticStare site, the digital external brain-repository of Ryan Todd, whose brain otherwise occupies space in San Francisco, CA", ryota: "mungified version of ryan's name", haikuBio: "robotic from birth. hears sounds - listens to music. makes pixels act." }

Calendar

July 2008
S M T W T F S
« Jun    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Posts by Month

Posts by Category