Create a Compiled Clip to Reduce Clutter in Flash

Sometimes when you are delivered an animation to put into your flash project, it contains quite a lot of messiness in the library.

A quick way to resolve that issues is to make a ‘compiled clip’ before adding the animation to your project.

First, open the project with the animation in it and select the entire animation.

Right click the frames and select ‘copy’

Next, create a new symbol (ctrl-f8)

Name the symbol, then checkmark export for actionscript. select OK.

right click on the first keyframe in this new symbol, and click paste. This will paste the entire animation into the new symbol.

Now, click the box in the bottom of the timeline called ‘select multiple frames’. Make sure to drag out the selector to cover your entire animation. Once you have done that, select EVERYTHING on your stage, and move it to the zero x and y positions.

Next, go back out of your animation and right click the newly created clip in the library. Select ‘Convert to Compiled Clip’.

This creates a new clip that you can simply copy and paste into your project without needing any of the other assets. Much cleaner!

Only one movie clip to deal with the entire animation!

How to ‘smooth’ an FLV / F4V video for Scaling

Have you noticed that your embedded Flash video looks like crap if you scale your flash file up or down?

A lot of people don’t realize this, but you can actually apply smoothing to flash video, just as you can to a bitmap image.

All you have to do is apply the following Actionscript 3 code to your video clip instance:

for example, say your video clip instance is called ‘video’

video.getVideoPlayer(video.activeVideoPlayerIndex).smoothing = true;

That’s it! Now you can scale your flash video along with your other graphics. If you plan to scale up, be sure to use a video with a greater resolution than you need, so that you can get the best results. Scaling down will just simply work.

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!

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.

How to Pad a Number with Zeros + Simple Counter

At some point using Actionscript you may need to display a number that must always occupy a predetermined number of character spaces. An example would be a rolling game timer with a 5 digit display. For example, when the timer hits 33 seconds, the digits would display like so: 0 0 0 3 3

It is very simple to pad your number to whatever length of characters you would like.

package com.frigidfish.utils{

public class PadZero {

public static function convert(inputNumber:Number,numberOfDigits:int):String {

var paddedString:String=inputNumber.toString();
while (paddedString.length < numberOfDigits) {
paddedString = "0" + paddedString;
}
return paddedString;
}
}
}

Save this as3 class to a folder relative to your flash document /com/frigidfish/utils/PadZero.as

Here is an example usage:

import com.frigidfish.utils.PadZero;

trace(PadZero.convert(33,5));
// traces 00033

I use this little converter all the time with customized timers and counters.

If you would like a simple example of a timer, you could do something like this:

// Simple Counter
// Add 4 text boxes to the stage.
// Name their instances from left to right:
// digit0, digit1, digit2, digit3

import com.frigidfish.utils.PadZero
import flash.utils.Timer;
import flash.events.TimerEvent;

var counter:int = 0;
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, addOne);
timer.start();

function addOne(event:TimerEvent):void{

counter ++;

if(counter &gt; 9999) counter = 0;

var t:String = PadZero.convert(counter,4);

digit0.text = t.charAt(0);
digit1.text = t.charAt(1);
digit2.text = t.charAt(2);
digit3.text = t.charAt(3);
}

You could make custom digits with your own artwork to spice up your timer. Have fun experimenting with Flash Actionscript 3!