How to Become an Animator - Free e-Book

I won't pretend it's not a marketing campaign from AnimationMentor.com, because that is exactly what it is. But if animation is what you like, and you think animation is where you want to end up, then you just may find this valuable.

It's taking about 40 minutes to download so no review of content at present. But at a price of FREE, I'm not complaining.

You can download it here: http://www.animationmentor.com/landing/becomeanimator/ebook.html

Meanwhile, I will add my review later when I have had a chance to read from it

Custom Snow Effect in Flash

Whether or not we get a white Christmas outside, I can make sure I get one in my Flash work any time I like.

Components add to the functionality of Flash, basically making more complex actionscripts available to those of us who lack the time or the knowledge to program them ourselves. The Adobe Exchange is a great place to find components for Flash from MX right through to CS4, some free, some you have to buy.

Free Snow Effect Component

The component I want to tell you about is the free Snow Flash Effect component from FlashWanted by Corso Ria.

Download it here (you will need to get a free Adobe Exchange account):

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1278523

Once downloaded just double click the MXP file and it will automatically install into the Flash components panel.

This particular component works with Flash versions MX 2004, MX 2004 Pro, 8 and CS3 (and maybe CS4 but I haven't tested it), so if you don't have access to the latest version of Flash, this should still work for you. In fact i'll be using MX 2004 to show you how it works since I don't have CS3 on this machine and I can't be bothered to pull the laptop out - it's really easy.

Basic Snow

To kick off you need to open the Components panel, and then open the FlashWanted group. In there you will find a component called "sneg".

Drag "sneg" to the stage and scale it to cover the area you want to be snowy.

Then, with the instance of the "sneg" component you dragged onto the stage selected, you need to open the Component Inspector.

Most of the fields in the Component Inspector are pretty self explanatory, and a bit of experimenting with the settings will give you the effect you want. You can even make the background transparent by changing the alpha setting, allowing you to overlay the snow over other layers.

And that's it.

CTRL+ENTER to test the movie and the snow begins to fall.

Customising the Snow

By default the snow is made up of very small white dots, but you can use your own flake design by using a symbol from your library.

To do this you need to first make a MovieClip to use as a snowflake, and then set it to export for actionscript. Do this by right clicking the symbol in the Library, and choosing the Linkage option.

Then set the identifier, what you type here is what you will also type in the Library Symbol field in the Component Inspector. I used 'flake_mc' as the identifier in mine.

Feel free to test away.

Further Customisation

If you are like me you will always be curious about how far you can push the technology beyond its original or obvious intention. I have seen other snow effect components in use that had more than one type of snowflake and allowed the snowflakes to tumble, or turn, as they fell.

It seemed pretty logical that, if I am specifying a MovieClip as a snowflake, any actionscript within that MovieClip that refers to the clip itself, ought to work. And, I was right.

In the previous step we looked at how the component allowed us to specify a particular MovieClip to use as a snowflake, rather than its own default 'dot'. What this means is that we can actionscript our snowflake MovieClip to apply certain attributes to itself, and this actionscript will work independently for each flake the component places on our stage.

In other words we can make 'intelligent' snowflakes to make up for where the component lacks. While the component takes care of the snow falling, each flake takes care of its own turn speed and appearance etc.

Here's how.

Random Flake Appearance

I am going to cheat a little here, this script will not actually generate random flakes, but what it will do is randomly choose a snowflake design from a selection that you will make.

What I did was make 5 different snowflakes and place each one on a different keyframe within a MovieClip called 'snowflake_mc'. Don't forget to put a stop(); action on each of these keyframes or your flakes will keep cycling through the 5 designs as they fall (which doesn't happen in real life). It's also a good idea to make sure each snowflake on each frame is positioned over the 'centre point' in the middle of the MovieClip symbol.

So what I end up with is a MovieClip called 'snowflake_mc' containing 5 frames, each frame containing a different snowflake design and a stop(); action.

The next stage is to open the symbol we specified in the Component earlier - flake_mc. Inside flake_mc you need to swap the snowflake design with the MovieClip you just made containing 5 flakes. Give this the instance name of 'snowflake_mc'. So what we end up with is a symbol called 'flake_mc' that is set to export for actionscript that contains another symbol called 'snowflake_mc' that contains our 5 flake designs.

Now for the actionscript. This goes on the first frame of 'flake_mc':


/*randomly select which flake design to use */
var flakedes = Math.ceil(Math.random()*5);
/*set flake design to the one selected */
snowflake_mc.gotoAndStop(flakedes);

First we create a variable called 'flakedes' that is a randomly generated number between 1 and 5. we do this because we have 5 flake designs. This then acts as a random flake selector. We generate the number using Math.random, but this only gives us a number between 0 and 1. To turn this into a number between 1 and 5 I multiply it by 5 and then round it up using Math.ceil. (If I rounded down I would get a number between 0 and 4, rounding up guarantees between 1 and 5).

Then we tell the 'snowflake_mc' MovieClip (the one with 5 frames) to gotoAndStop at the frame number we just randomly generated. This then randomly displays on of our 5 flake designs.

Voila! As the component places a new flake on the stage the appearance of the flake is now randomly one of the 5 designs you made.

Flake Tumbling

This requires trickier actionscript (but still easy), but no extra graphics. A pure code solution to flake tumbling. This goes on the first frame of 'flake_mc' beliw the code we already have:

/*Generate a random small number of equal chang of being positive or negative. Positive equates to clockwise rotation, negative anti-clockwise */
var rotfactor = ((Math.random()*4)-2);
/* This function tells the snowflake_mc movieclip within the flake_mc clip to rotate by the rotfactor. */
function snowflakeroll () {
snowflake_mc._rotation += rotfactor;
}
/* this runs the above function every 40 milliseconds. */
setInterval(snowflakeroll, 40);

I wanted the flakes to tumble very slowly, all at different speeds of slowness, and in either direction. So the first part generates a small number, between -2 and 2. A negative number will equate to anti-clockwise tumbling, a positive number clockwise tumbling. We generate this number again using Math.random but this time we multiply the number by 4, to give us a random number between 0 and 4, but then we -2 from that number giving us a random number between -2 and 2.

We use this number as the variable 'rotfactor'.

What we then want to do is use the value of 'rotfactor' as the amount the snowflake will rotate each frame.

However within the MovieClip inside the component onEnterFrame doesn't work. So instead we approximate frames by using setInterval.

setInterval works by calling a function repeatedly, with an interval between each call. If we set the interval small enough it will be as good as calling each frame.

First then we have to write the function, then use setInterval to call the function.

Our function is very simple:

function snowflakeroll () {
snowflake_mc._rotation += rotfactor;
}

First we define the function and give it a name 'snowflakeroll', then we give the function its instructions which in this case is to tell the 'snowflake_mc' MovieClip to change its rotation value by 'rotfactor'. By using += rather than just = we add rotfactor to itself each time the function is called so it gets larger each time thereby increasing its angle of rotation with each call of the function.

Then we just need to call the function using setInterval:


setInterval(snowflakeroll, 40);


We call the function by name, and then we define the interval in milliseconds. In this case 40 milliseconds calls the function frequently enough to creat a smooth rotation animation.

And that's it

And that's it. You're done. You have now got a basic component that simply chucks snow out, to give you random flakes with random tumbling speeds both clockwise and anti-clockwise.

Given all that we have done, I think it safe to assume they don't have to be snowflakes. What other MovieClips could it chuck out, and how could these be scripted? Over to you.

Happy Christmas.

So... do ColorCode (Amber+Blue) 3D glasses work with LCD Projectors?

I said I would test it out, and the verdict is... yes.

At least, it did with the Dell projector I tried it on. While I initially found that there was more ghosting on the projector image when viewed through ColorCode (Amber+Blue) glasses, than my LCD monitor, at least it was 3D.

I have not yet had success with Cyan+Red at all on a projector.

Changing "Video Mode" improves image

The Dell projector I used allowed me to change the "video mode", which is basically a bunch of different colour level presets. I found that in "game mode" the ghosting pretty much vanished even on the projector.

So there you have it.

ColorCode (Amber+Blue) can work with a projector.

Channel-4 3D Week

I was at Sainsbury's today (unusual, but I happened to be near one) and came across a big point-of-sale bin thing with loads of FREE 3D glasses in it. Apparently Channel-4 is hosting a 3D week, which according to my 3D glasses arm will feature "never-seen-before archive footage and continue[s] through the week with loads of awesome 3D films and concerts to enjoy".

Anaglyph TV

Now, the image below (from the C4 website) doesn't look like anything special to the naked eye, but when viewed through the special Sainsbury's glasses will take on a 3D appearance. It is an anaglyph.


To view anaglyphs you need special "3D glasses" that have coloured filters. But there are several different colour combinations around, and you have to make sure you get the right one for what you are watching. You can get Red Blue, Red Cyan (the most popular), Red Green and, as I learned today, Blue Ochre (sometimes called Blue Amber, or Blue Brown).

And guess which ones Channel-4 have opted for?

Blue Ochre of course - which means you probably don't have an old pair of 3D glasses hanging round the house which will work for 3D week. Your "Journey to the Centre of the Earth" glasses will not work, and neither will your "Shark Boy and Lava Girl" pair.

Better get yourself down to Sainsbury's and get some Blue Ochre.

But what's with all the different types?

Why not just stick to one type and have done with it? Simply put, different colour combinations have different benefits. Red Cyan is probably the most popular because it allows the creation of both colour and B&W anaglyphs (as does Red Green). Red Blue only allows B&W and the images are very dark.

But more information on the different types can be found here:
http://nzphoto.tripod.com/sterea/anaglyphs.htm

However, and this was news to me until today, Blue Ochre when viewed in a dark room, has better colour transmission than the others. So this is probably why Channel-4 opted for it. After all, if you want people to think that 3D is more than just a gimmick, it needs to look good.

Blue Ochre not free but very clever

While all the other anaglyph colour methods are pretty much public domain, the Blue Ochre combination is apparently patented. Not the idea of the anaglyph - that has been around for too long, you can't patent that - but according to this website it is the method for converting an image for Blue Ochre is patented:

What makes it patentable (the "secret sauce") is the mathematical formula that modifies the luminance of the right eye record and the luminance and chrominance of the left eye record to best transmit the colour information. The darker brown is necessary for balance, because blue is low luminance.

Whilst I haven't read the patent (http://www.patentstorm.us/patents/6687003/fulltext.html) thoroughly, their process doesn't seem to attempt to determine which point in each image represents each point in the three dimensional scene, so it seems to me that they are effectively presenting a luminance-based stereoscopic pair combined with a flat chrominance image based on the average of the two views.

(http://www.dvinfo.net/forum/archive/index.php/t-128661.html)

Apparently this method was invented at the Technical University of Denmark, and has been branded as ColorCode. More information can be found here: http://www.colorcode3d.com/.

What makes it so clever, and therefore worth paying for perhaps, is explained on their website:

The ColorCode 3-D system is the only in the world to reproduce high quality 3-D Stereo images and movies with full color- and depth information on all display types.

(http://www.colorcode3d.dk/group.asp?group=39)

And I can't argue with this claim. I know from experience that Red Cyan may work on a CRT or TFT monitor, but utterly fail on a projector. You can also get a fair amount of ghosting. If ColorCode (Blue Ochre) can crack this, it will be worth the license fees for TV companies who want good quality 3D without a trace of gimmick.

I will test my new Sainsbury's ColorCode glasses on the LCD projector at work, and if the result is good I will be very impressed and let you know.

Flash Projects #7 - Making a Flash MP3 Player

Finally here is the solution. It turns out you can use NetConnect and NetStream to make an MP3 player in Flash, but only if you encapsulate all your MP3s as FLV files. Not really very helpful since it means converting your MP3 files - it just makes more work.

And busy designers really don't want the job to take longer.

However there is another way to make an MP3 player in Flash, that still gives us all the control we need, but the pausing and playing is just a tad more complicated. But nothing you can't handle I am sure.

The Code

First, here's the code, then I will explain it:


//set default starting position for playback in seconds
var playpoint = 0;
//create sound object
var audio_sound:Sound = new Sound();
//play button
this.play_btn.onPress = function() {
//play the mp3 from the point defined in the variable playpoint
audio_sound.start(playpoint);
};
//pause button
this.stop_btn.onPress = function() {
//define the variable playpoint as the same as the current position, this is given in milliseconds so we divide it by 1000 to convert it into seconds
playpoint = (audio_sound.position/1000);
//stop the playback
audio_sound.stop();
};
this.m1_btn.onPress = function() {
audio_sound.loadSound("track1.mp3", false);
//true = streaming and therefore autoplay, false = not streaming and therefore just sets the file for when you hit the play button.
};
this.m2_btn.onPress = function() {
audio_sound.loadSound("track2.mp3", false);
};


The Explanation

Here goes. First, instead of using NetConnect and NetStream as we did for the video player, we are going to use loadSound. This still gives us a fair amount of control, in some ways more than the NetStream would give us, but it doesn't automatically pause when you play something that is already playing, as NetStream does. So while the rest is no more difficult, just different, pausing and then playing again is slightly more complicated using loadSound.

As with any program, we can only work with the information available, or that we can find out. With the loadSound approach we can find out one very important thing that will help us make a pause/play mechanism - we can find out our current position in the MP3 as it plays. In the code above we do this as follows:


audio_sound.position


Not hard, but on its own it is not a pause/play mechanism. We make it into a pause/play by storing the current position as a variable called playpoint at the time of pause. In effect we remember where we got up to. Then, when we play, we tell it to play from where we left off by asking the variable playpoint to tell us where we got to. As follows:

When pausing:


this.stop_btn.onPress = function() {
playpoint = (audio_sound.position/1000);
audio_sound.stop();
};


First we set the variable playpoint to store our current position. This is actually given in milliseconds so we divide it by 1000 to convert it to seconds - and that's what you see being done here. Then we tell it to stop.

When resuming playing:


this.play_btn.onPress = function() {
//play the mp3 from the point defined in the variable playpoint
audio_sound.start(playpoint);
};

We simply tell it to start, but include the start position as playpoint so it resumes from where we left off.

Isn't that what pausing/playing really is? Stopping, and then starting from where you left off?

The other code is effectively a menu, allowing you to choose which track to listen to. The term false on the end means the track won't play straight away, but will wait for you to press play as well. Change the false into a true and just clicking on the menu will make the track start as well.

Have fun.

eLearning Business Game (Arrays in action)

My last post was all about my array sorting problem. But I thought you might want to see the final product.

It was actually a game I put together to help my new students relax and get to know each other, but then I tweaked it and made it available for anyone to download.

Available here: http://digitalarena.co.uk/teach/markettraders/

The array was used in the part of the game that displays the team's performance as a graph. I needed to find a way to make the graph always fit in the available space. That meant finding the highest score and then working out a scale ratio that I could apply as the graph drew, so it always fit in the graph space.

So what has this to do with arrays? Well... finding out the absolute highest score of each team's highest score meant storing them all in an array and then sorting them (lowest to highest). Then I just had to retrieve the last item in the array to get the highest.

Sorting Numeric Arrays with Actionscript

Just lately I have been having fun with arrays. Of course, I say "having fun", what I mean is having problems. Especially with sorting numerically.

Arrays are really useful, they allow you to store data, select data, order it, etc. You can create them from strings and other variables, and turn them into strings and other variables. All in all, they can be very handy.

I found them handy as part of a game I was writing a couple of days ago. As part of my code I needed to find the number with the highest value out of a choice of 3 numbers. The logical solution was to put all 3 numbers into an array, then sort them numerically, then retrieve the last item in the array (this should, after sorting, be the one with the highest value).

Numeric sorting is not numeric

Let's say we start with the following array:

var my_array:Array = [650,12,86];

Then we sort them numerically:

my_array.sort(Array.NUMERIC); //doesn't work correctly

After this command you might expect flash to order the array as:

12, 86, 650

But what you actually get is:

12, 650, 86

This is because, as the Flash documentation explains, 'Numeric fields are sorted as if they were strings, so 100 precedes 99, because “1” is a lower string value than “9”. '

In other words, the Numeric sort does not sort numerically at all. It sorts alphabetically. Odd sort of numeric, but it can't be helped, we have to find a solution.

Prepending 0s so all values have the same number of digits

Of course this only happens because not all the values had the same number of digits. If the lower values began with a 0 then a numeric (alphabetical) sort would work correctly. So my initial plan was to use an if statement in a for loop to check for 1 digit, 2 digit and 3 digit numbers and prepend (put in front) 0s to make them all the same number of digits as follows:


for (var i = 0; i<finalscores_array.length; i++) {

if (finalscores_array[i]<=9) {

finalscores_array[i] = "000"+finalscores_array[i];

} else if (finalscores_array[i]<=99) {

finalscores_array[i] = "00"+finalscores_array[i];

} else if (finalscores_array[i]<=999) {

finalscores_array[i] = "0"+finalscores_array[i];

} else {

finalscores_array[i] = finalscores_array[i];

}

}


With for loops we can repeat a peice of code until a condition is met. This loop repeats for the length of the array (that's the number of items in the array). It starts by checking how many digits the first array item has. Then depending on how many digits the code prepends 3, 2, 1 or no 0s. On the next repetition it checks the next array item, and so on until all array items have been checked and had the required number of 0s prepended so that they all have the same number of digits, and then the loop ends.

The result is that the original values:

650, 12, 86

become

0650, 0012, 0086.

Now when we sort them numerically, it does put them in the right order:

0012, 0086, 0650.

Leading 0s alter the value (it's a decimal v. octal thing)

Wouldn't it be great if that was the end of your troubles?

The problem is that if we then want to do anything with the values afterwards, like doing anything other than displaying them, we need to remove the 0s we just added. And it is not nearly as easy taking off, as putting on.

The reason we have to remove the leading 0s is because Flash, like lots of other programs, does not treat numbers beginning with 0 as decimal numbers. It treats them as octal. This means that 0650 does not have the same value as plain old 650 (without the leading 0).

0650, as octal, actually has the decimal value of 424.

0650 is in fact a totally different number to 650.

So while prepending leading 0s solves our array sorting problem, it actually changes our values. just because a leading 0 in Flash means it is an octal value, not a decimal value.

Leading 0.0 do not alter the value (it's a less than 1 thing)

But then I realised. Hang on a minute says I (yes, programming problems really can have you doing a good Ben Gunn impression). Hang on a minute says I, Flash handles numbers begining with a 0 all the time. What about 0.1, 0.2 etc. It has no problems with decimal values of less than 1.

And here is my solution. Instead of using my for loop to prepend just 0s, I will use it to prepend 0.0s, as follows:


for (var i = 0; i<finalscores_array.length; i++) {

if (finalscores_array[i]<=9) {

finalscores_array[i] = "0.000"+finalscores_array[i];

} else if (finalscores_array[i]<=99) {

finalscores_array[i] = "0.00"+finalscores_array[i];

} else if (finalscores_array[i]<=999) {

finalscores_array[i] = "0.0"+finalscores_array[i];

} else {

finalscores_array[i] = "0."+finalscores_array[i];

}

}


The result is that the original values:

650, 12, 86

become

0.0650, 0.0012, 0.0086.

Now when we sort them numerically:

my_array.sort(Array.NUMERIC);

It does put them in the right order:

0.0012, 0.0086, 0.0650.

OK, I know that doing this has changed the values too, but at least they are still decimals (not a totally different numbering base). Because they are still decimals it is easily rectified, it's just a case of shifting the decimal point a few places. And we can do this by very simple multiplication...

...just multiply them by 10,000.

0.0012 x 10000 = 12
0.0086 x 10000 = 86
0.0650 x 10000 = 650

So, to finish off, now we have prepended 0.0s to our original values, then sorted them, all I need to do to get the highest value is retrieve the last item from the array, and multiply it by 10000.

var highestscore:Number = (my_array[my_array.length-1])*10000;

The Faster Way

Having made this wonderful discovery, it is good to know that all the code required to debug and investigate the problem is not necessarily needed to apply the solution. Pre-pending using the IF and ELSE IF is only necessary if you want to pre-pend digits to a String (as in converting 650 to 0650). Now that we have discovered that only decimals (as in 0.650) will sort correctly there is a much simpler way to achieve this.

Simply - divide the original number by 10000 (after all, we convert them back by multiplying them by 10000).

for (var i = 0; i<finalscores_array.length; i++) {
finalscores_array[i] = finalscores_array[i] / 10000;
}

I count that as 7 lines fewer code, than the pre-pending method.

That's the difference between what we do to understand a problem and what we do to apply a solution.

And there we have it. Hopefully some of you will find this helpful. Frankly I don't know why numeric sorting doesn't just work. But since it doesn't, here is a cheap and cheerful workaround - in summary:

1. Divide them all by 10000 (so that every number begins "0.")
2. Sort them
3. Multiply them all by 10000 (so you get the original values back)

Happy sorting.