Easily sort an Array of Strings: Longest to Shortest Word

So let’s say you are making some sort of a game or program in Actionscipt 3 that requires you to sort words in order from longest to shortest. for example:

var word:Array = new Array("this", "is", "a", "list", "of", "randomly","chosen","words", "to", "sort");

if you try something like:

trace(word.sort());

you will get the following:

a,chosen,is,list,of,randomly,sort,this,to,words

That’s not what we wanted! A cool little thing that you can do in as3 is write what’s called a ‘compare function’. As I love to do, I have made a simple class with a static function that you call:

package com.frigidfish{

    public class Sort {

        public function Sort() {
            // constructor code
        }

        public static function hiToLow(a:String, b:String):Number {


            if (a.length < b.length) {
                return 1;
            }
            else if (a.length > b.length) {
                return -1;
            }
            else {
                return 0;
            }
        }
    }
}

Now just save the class under your project in the correct folder (ie c:\myproject\com\frigidfish\Sort.as).

then, you can easily sort your array like so:

import com.frigidfish.Sort;

var word:Array = new Array("this", "is", "a", "list", "of", "randomly","chosen","words", "to", "sort");

trace(word.sort(Sort.hiToLow));

The output will now be:

randomly,chosen,words,list,this,sort,of,is,to,a

Yay!

You can use compare functions to tell the built in sort function how you would specifically like your data sorted.

The function takes 2 variables that are passed by the sort function (you don’t pass anything manually to the function. it’s automatic).

Because our array contains nothing but strings, we made up 2 variable names, ‘a’ and ‘b’; both of type string.

the function can return -1, 0 or 1. Depending on the return value, the sort will be affected. Experiment with different sorting methods and see what you can come up with..

For example, to sort low to high (short word to long word in our case) you would just add this function to the Sort class:

public static function lowToHigh(a:String, b:String):Number {


            if (a.length > b.length) {
                return 1;
            }
            else if (a.length < b.length) {
                return -1;
            }
            else {
                return 0;
            }
        }

of course you will also need to call the proper function now when you sort:

trace(word.sort(Sort.lowToHigh));

I hope this helps. Just had to use it in a project myself!

Flash Actionscript 3: Easily Jumble elements of an Array or String

Sometimes in Actionscript you need an easy way to jumble elements of an array or string, such as for a card/word game. I created this simple little as3 class that you can use for just that:

// Usage:
// yourNewString = Jumble.string(yourOldString);
// yourNewArray = Jumble.array(yourOldArray);

package com.frigidfish{

    public class Jumble {

        public function Jumble() {}

        public static function string(s:String):String {
            var a:Array = s.split("");
            var r:String = "";
            a = a.sort(randomize);
            for(var i=0;i<a.length;i++){
                r += a[i];
            }          
            return r;
        }

        public static function array(a:Array):Array {
            a = a.sort(randomize);
            return a;
        }

        private static function randomize(objA:Object, objB:Object):int {
            return Math.round(Math.random()*2)-1;
        }
    }
}

Usage:

import com.frigidfish.Jumble;

var string:String = "abcdefghijklmnopqrstuvwxyz";
var array:Array = ["a","b","c","d","e","f","g","e"];

trace(Jumble.string(string));
trace(Jumble.array(array));

/*
possible output:
zvepdtnhijylarowksqfuxgcbm
e,c,e,d,a,f,g,b
*/

This is a useful couple of tools.. Maybe you could add functions to return the output in different formats? Above all, have fun with Flash Actionscript 3!

Site Moved / Attachments Missing

Hello all,

Just wanted to let everyone know that the site has been migrated to a new server. I was having a lot of problems with hackers and malware on the old hosting provider that was no fault of my own (poor hosting security). We are now up and running.

I would like to mention that many of the example files that are attached to posts are missing. I am working on getting these back up ASAP. Thanks!

Advanced Function Work

In this post I’m going to show you a few more advanced features of AS3 functions. I think you’ll find they certainly help, at least when it comes to coding an API for the general public.

…rest Parameter

The rest parameter is cool little parameter type in AS3. It allows for varying sizes of parameter lists to be passed into functions. Let’s look at a quick example:

public function foo(bar:String, foobar:Object, ...rest):void

In this example, we declare function called foo, which has two defined parameters called bar and foobar, and then as the last parameter we have this thing called …rest. As you can tell, …rest is the rest parameter. The rest parameter is declared by three ellipses or dots (…) and then followed by the parameter’s name. In this case I’ve named it rest, but you could name whatever you like. For example:

public function foo(bar:String, foobar:Object, ...someBigListOfWhoKnowsWhat):void

What does this look like for the person who’s calling the function? Let’s take a look:

foo("bar", {foobar: null}, "some", "Big", "List", "Of", "Strings"):void

As you can see, when we call this function we pass in the two defined parameters, and then comes a big long list of parameters that we didn’t define; this is how the rest parameter works, the user can put in as many parameters as they like. It’s important to note, that the user can also pass in parameters of any type, so you’ll have to do some checking if you want the parameters to be of a certain type.

Now we’ll get onto how you can actually access these parameters passed in. When the function actually starts executing it’s statements, the rest parameter has been converted into an array. So we can access the parameters like this:

public function foo(bar:String, foobar:Object, ...otherParams):void {
trace(otherParams.length);
trace(otherParams[0]);
trace(otherParams.shift());
otherParams.unshift("tom");
}

As you can see, we can perform various array methods on it, access the length property, and access the elements in the array. We could also do a for each or for loop on the array, and so on. But what if we need to pass these parameters on to another function, expecting a rest parameter (not an array) itself? That’s what we’ll discuss next.

Function.apply()

When you define a function, you are creating a Function object. The object itself has a number of handy methods. One of those methods we are going to talk about today, and that it the apply() method.

The apply method allows you to call a function, but pass in the parameters needed as an array. Let’s write some setup code:

public function foo(bar:String, ...otherParams):void {
// bar is a string we need to do some processing on
var bar2:String = bar.replace(/\$\d/, someArray[0]);
}
 
public function bar(foo:String, ...otherParams):void {
// some code to do something with these parameters
}

Now what we need to do is when someone calls foo, we want to do some processing on the bar string as seen in foo(), and then pass on the processed string and all the parameters the …otherParams rest parameter to bar() and return whatever bar() returns. How do we that when, inside the actual function, otherParams is an array (meaning we can’t just go

return bar(bar2, otherParams);

). This is where apply() comes in:

public function foo(bar:String, ...otherParams):void {
// bar is a string we need to do some processing on
var bar2:String = bar.replace(/\$\d/, someArray[0]);
var applyParams:Array = otherParams;
applyParams.unshift(bar2);
return bar.apply(this, applyParams);
}

So what we’re doing that’s different is, creating an array called applyParams; this is the array of parameters to pass to apply(). Then we are adding the processed string (bar2) to the front of the applyParams array. Finally, we are calling the apply method of the bar object (which is a Function), passing in this (this object) and the applyParams array and returning the returned value. The apply method will use the array as the list of parameters for the function and everything will work smoothly. But why do need to pass in the “this” reference? The first parameter of apply, (so far as I understand it) is what object to point to wherever “this” is referred to in the function. Therefore, be careful with that one and take into account where the function is located.

Anyway, that wraps up this post, hope you learnt a thing or two about functions. I could say more, but I’ll leave it at that. Please feel free to post your thoughts below.

Problems with Tween and Using TweenLite

Have you had trouble with Adobe’s Tween class? (Used for so called “easy” ActionScript animation of display objects) I sure have, so I thought I’d write a post about it. When I was first taught how to animate with ActionScript, I had many a lock up and stutter from the Tween class. For awhile I was quite annoyed, seeing the benefit of animation using ActionScript but thinking that it was totally unreliable. Now there are a number of methods to fix the problems with Tween, using Dictionaries, new objects and so on; all of which seemed tedious and time consuming. Thankfully, I found a better solution, third party tweening engines! I’m going to tell you about what I think is the best one, TweenLite.

TweenLite (and the Greensock Tweening Platform) is simple, powerful, fast and reliable. Greensock has many awesome classes, generously available for free, all of which are (so far as I understand) maintained by one person. You can get them at http://www.greensock.com/

I’ll just go through a few features with you now. First of all the TweenLite object has two main methods, to() and from(). With these you can change and object’s properties, from their current value to a new value at a certain rate. from() works similarly; it sets the properties of an object to what you specify, and then moves those properties back to what they were. So you can tween object’s in both directions.

Let’s experiment with to():

import com.greensock.TweenLite;
TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36 });

The first parameter is the object you want to perform a tween on. The second is the amount of time you want the tween to take. And the third is an object literal of properties you want to change. In this case these properties will be moved to the values specified. TweenLite can modify any numerical property of an object, making some really powerful stuff possible.

Next I’ll talk about a few of the special properties, they are: onStart, onComplete, ease, and delay. Here’s a definition of them:

  • onStart – A function that should be called when the tween begins (when its currentTime is at 0 and changes to some other value which can happen more than once if the tween is restarted multiple times).
  • onComplete – A function that should be called when the tween has finished
  • ease – Use any standard easing equation to control the rate of change. For example, Elastic.easeOut. The Default is Quad.easeOut.
  • delay – Amount of delay in seconds (or frames for frames-based tweens) before the tween should begin.

Let’s try and use the ease property first:

import com.greensock.TweenLite;
import com.greensock.easing.*;

TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36, ease: Sine.easeOut });

Note the extra import, we must import the easing classes to be used with the tween. You can use all the standard easing equations, and a few extras to my knowledge.

Now for the rest of those properties:

import com.greensock.TweenLite;

TweenLite.to(object, 1.25, { x: 20, y: 45, alpha: .8, customProperty: 20.36,
   ease: Sine.easeOut,
   onStart: startFunction,
   onComplete: completeFunction,
   delay: 3
});

So this tween will trigger startFunction() when it starts, completeFunction() when it ends, and will wait 3 seconds before starting.

That’s just the tip of the iceberg, but the engine has great documentation, so go to http://www.greensock.com/ and check it out. The purpose of this post was not to rewrite the documentation, but to get your feet wet and show you a better way to tweening.