Archive for May, 2008

I was really happy when I found out how to do proper fade outs of MovieClips containing other MovieClips, but I am even more happy now because I found how to do it in ActionScript 2. I don’t know why but I was thinking that blendMode was something new that came in Flash 9, but I actually knew it came with Flash 8 at the same time that filters came in. I woke up when my colleague told me he and to roll back an animation from Flash 8 to Flash 7 and had to loose the blendModes because of that.

The way to do it is really similar than in ActionScript 3, it’s actually way easier but more prone to errors (if you mispell “layer” the compiler won’t tell you):

First, it was way bigger than I first thought because applications have way more possibilities to break than normal websites. I never thought this would take as much quality insurance as it did, every time we would think it was done, someone would find a bug. Another thing I didn’t foresee was all the Event managing and making sure every part of the application was getting the right message at the right time. Now I really understand what a framework like PureMVC can do for you, plus the nice features you can add that are not so hard to implement like undos.

Second we also had a lot of trouble with the hosting. We are not the main agency for Home Depot Canada, so we once we were done with our files, we had to hand them over to the other agency and they really screwed up. I won’t list every thing that is not working properly, but I list this one, the back button was supposed to work to some extent, but now it doesn’t… for no reason. I knew there would be complications from having two agencies working together, but I didn’t think there would be so much.

All in all, we came up with a really nice product, actually the website I’m the most proud of to this date. So get out there, and start Thinking in Colour!

Where I work we have these kind of workshops that are given by the employees. I was mandated to give a presentation entitled Advanced Flash, but it is not really going to be advanced; more like intermediate. I am basically going to introduce ActionScript 3, Tweening using TweenLite, Events, Linking symbol to a class, using the document class, loading an image, loading an XML and maybe speak about setIntervals and setTimeout versus Timer. I thought I would make this blog post my actual presentation notes so that it would help also people reading my blog.

My objective after this workshop is that the people attending it will be able to open Flash files I did using ActionScript 3 and find what they are looking for and also understand mostly the mechanics in the project. I did the presentation on May 13th and it went well for the most part, the biggest trouble was because we where on a projector with a resolution of 1024×768 and I am used to have 2 22 inch monitors (I hate the way Flash CS3 handles its panels).

Difference between ActionScript 2 and 3

First I want to mention difference between ActionScript 2 and 3. Mostly in the properties of a MovieClip, there used to be properties called _x, _y, _rotation, _visible, _alpha, _width, _height. Now these properties have been renamed to x, y, rotation, visible, alpha, width, height. The alpha property now goes from 0 to 1 instead of 0 to 100. If you want an alpha of 60% you do this: alpha = 0.6. Last thing, you cannot put ActionScript on MovieClip anymore, only on a frame in the timeline or in a class (external AS file). This will help prevent searching for ActionScript code for hours.

I am used to MovieClip, but what are Sprites?

Sprites are just a toned down version of a MovieClip. Sprites don’t have timelines, so you can’t use function like gotoAndPlay() and stop(). Why use them? Well since they don’t have a timeline and the timeline associated functions they also take less memory, so they should always be used whenever you don’t need the timeline. More on Sprites later.

Making things move, TweenLite for everything

One of the biggest building block in all of my projects is TweenLite. Nearly every swf or external class I use will have TweenLite in it. Here is a tutorial on how to use TweenLite. If you run one of my swf files if something moves it has 90% chance that TweenLite is making it move. I also use it for fade in, fade out transitions, button rollovers and music fade out.

A simple button using Sprites

Here is how I would do a simple button using Sprites and TweenLite. First draw a rectangle on the stage. Then convert it to a symbol, click export for ActionScript, in the base class field put flash.display.Sprite instead of flash.display.MovieClip. That is how you can create Sprites using Flash CS3. Now give the newly created Sprite a variable name of rectangle. Put the following code on the first frame on your movie (you will have to have downloaded TweenLite before you can do this):

Document class where is it?

Loading an image

Loading an image is quite simple, you have to use a class named Loader which is a DisplayObject. Just as for the button, you have to add a listener to the object to know when the file as totally loaded. Loader are special in the way that you don’t attach the listener directly to the Object. You do it like this: myLoader.contentLoaderInfo.addEventListener. The Loader is the only class that behaves this way.

Loading a XML

Loading an XML is similar to loading an image except that you use the URLLoader class instead of the Loader class. The URLLoader class doesn’t have the weird event behavior so you attach the listener directly to the object.

Preloading

Preloading a swf file or an image is exactly the same thing. I always make my preloader external to the file I am loading. There is another way of doing this by doing the preloader in the first 2 frames of a swf file. The advantage of doing an external preloader is that it will start at zero if you exported symbols in the library for ActionScript. Basically we take the code we had for loading an image and we add the listener and the handler function for the PROGRESS event.

setIntervals and setTimeout VS Timer or TweenLite.delayedCall

In ActionScript 3 it is not good practice to use setIntervals and setTimeouts but they are still available if you really need them. It is better to use the Timer class, but I never really use it, instead I use TweenLite to make stuff move, ENTER_FRAME for setIntervals and TweenLite.delayedCall for setTimeouts. Here is an example of how to use TweenLite.delayedCall:

I was searching for a function to generate random Strings either in AS2 or in AS3 but I couldn’t find any so I made my own using code from a typewriter effect, but I can’t seem to find the page anymore. I use this code when I load dynamic content from php and such and I don’t want flash to cache my request. Here is an ActionScript 2 version of the code:

import net.zedia.utils.StringUtils;
trace(StringUtils.generateRandomString(4));//for a random string of 4 characterstrace(StringUtils.generateRandomString(4, "ROGER"));//for a random string of 4 characters using only the following letters: ROGER

MXNA is back and it is now called feeds.adobe.com. It also runs way faster. I was wondering when they would change the url that contained Macromedia to something containing Adobe instead and it looks like that time is now. I am really happy it is back up because I felt all alone not knowing what the Flash community was doing. I’ll read you tomorrow feeds.adobe.com!