Archive for May, 2008

Again on BlendMode (this time in AS2)

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):

1
my_mc.blendMode = "layer";

That’s all there is to it.

, , ,

No Comments


My first RIA

Two weeks ago we launched a website that I am real proud of: Home Depot Think in Colour. It was the first RIA that I programmed (if you don’t count my favicon editor) and man did I sweat doing it.

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!

, , ,

5 Comments


My intermediate Flash presentation

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.

1
TweenLite.to(rectangle, 1.5, {x:300, y:300, alpha:50, tint:0x0000ff});

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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import gs.TweenLite;
 
rectangle.buttonMode = true;
rectangle.mouseChildren = false;
 
rectangle.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
rectangle.addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
rectangle.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
 
function handleMouseOver(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0xFF0000});
}
 
function handleMouseOut(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0x0000FF});
}
 
function handleMouseDown(event:MouseEvent):void{
  trace ("this is the mouse down event");
}

This method works fine in most cases but when you have multiple buttons, you have to copy and paste all 14 previous line of code and that makes a lot of overhead. That is exactly why we use classes.

Taking that simple button and make it a class

The following code is exactly like the code we put on the timeline before but written as a class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package net.zedia{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import gs.TweenLite;
 
  public class MySimpleButton extends Sprite{
    public function MySimpleButton(){
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
    }
 
    private function handleMouseOver(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0xFF0000});
    }
 
    private function handleMouseOut(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0x0000FF});
    }
  }
}

Here is how you would then use this class :

1
2
3
4
5
6
7
8
9
import net.zedia.MySimpleButton;
 
var mySimpleButton1:MySimpleButton = new MySimpleButton();
var mySimpleButton2:MySimpleButton = new MySimpleButton();
 
mySimpleButton2.y = 100;
 
addChild(mySimpleButton1);
addChild(mySimpleButton2);

In this example both buttons will have rollOvers and rollOut implemented.

Document class where is it?

1
2
3
4
5
6
7
package {
  import flash.display.Sprite;
  public class Main extends Sprite {
    public function Main(){
    }
  }
}

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.

1
2
3
4
5
6
7
8
9
10
11
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.load(new URLRequest("slide1.png"));
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
 
var XMLLoader:URLLoader;
 
XMLLoader = new URLLoader(new URLRequest("myXML.xml"));
XMLLoader.addEventListener(Event.COMPLETE, handleLoadedXml);
 
function handleLoadedXml(event:Event):void{
  var xml:XML = new XML(event.target.data); // or var xml:XML = new XML(XMLLoader.data)
  trace (xml.rooms.room[0]);
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import flash.display.Loader;
import flash.display.Event;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);
myLoader.load(new URLRequest("main.swf"));
 
function handleProgress(event:ProgressEvent):void{
  var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100)
  trace (percent);
}
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

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:

1
2
3
4
5
6
7
8
9
import gs.TweenLite;
 
TweenLite.delayedCall(3, startAnim);
 
function startAnim():void{
  trace ("animation started");
}
 
TweenLite.killDelayedCallsTo(startAnim);

, , ,

2 Comments


generate random Strings in AS2 or AS3

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:

1
2
3
4
5
6
7
8
9
function generateRandomString(newLength:Number):String{
  var a:String = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  var alphabet:Array = a.split("");
  var randomLetter:String = "";
  for (var i:Number = 0; i < newLength; i++){
    randomLetter += alphabet[Math.floor(Math.random() * alphabet.length)];
  }
  return randomLetter;
}

For the ActionScript 3 version of it I made some optimizations and I created a class with the static method in it here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
package net.zedia.utils{
  public final class StringUtils{
    public static function generateRandomString(newLength:uint = 1, userAlphabet:String = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"):String{
      var alphabet:Array = userAlphabet.split("");
      var alphabetLength:int = alphabet.length;
      var randomLetters:String = "";
      for (var i:uint = 0; i < newLength; i++){
        randomLetters += alphabet[int(Math.floor(Math.random() * alphabetLength))];
      }
      return randomLetters;
    }
  }
}

here is how you use it:

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

Cet article en Français

, , ,

28 Comments


MXNA is back!

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!

,

1 Comment