Custom Events

After a while I return to a subject that you certainly come over, again and again... at least I do.

Almost a year ago I made an article on how to make functions callbacks. You can read the article here.

Although I took too long to make a new article on this issue, I prefer this method to the callbacks. The reasons: efficiency and simplicity.

A big difference from normal events in AS3 like Events or MouseEvents is that you have several types of events in these two classes, but you cannot send anything else than... the event itself.

When you make a custom event, you can make it send any type of event defined by you... and as an extra, you can send data too.

So to start, define a new class. I name it CustomEvent (you can make a new folder to separate the classes in your application, just don't forget about the package), and it will extend the Event class in AS3:

package{
    import flash.events.Event;
 
    public class CustomEvent extends Event{
        public function CustomEvent(type:String, data:*=null, bubbles:Boolean=false, cancelable:Boolean=false):void{
        }
    }
}

This is the base skeleton for the class. This will have the same behaviour as the base class Event. The 'type' of event will be determined  by just a unique string constant. You notice that I have included a 'data' parameter in the main constructor, and that this parameter is type '*' which means that it can hold any type of data.
So, the next is the same class with a bit more information:


package{
    import flash.events.Event;
 
    public class CustomEvent extends Event{
        public function CustomEvent(type:String, data:*=null, bubbles:Boolean=false, cancelable:Boolean=false):void{
             super(type, bubbles, cancelable);
             this.data=data;
        }
    }
}

To make this class fully usable by Flash you need to override the clone method. This makes this listener to be forwarded to another listener. The clone method makes a direct copy of the object and returns it.
So, the class with the clone method:


package{
    import flash.events.Event;
 
    public class CustomEvent extends Event{
        public function CustomEvent(type:String, data:*=null, bubbles:Boolean=false, cancelable:Boolean=false):void{
             super(type, bubbles, cancelable);
             this.data=data;
        }


        public override function clone():Event {
return new CustomEvent(type, data, bubbles, cancelable);
}
    }
}

The only thing missing is defining the events names. This can be any name, and are defined as public static strings, like this:


package{
    import flash.events.Event;
 
    public class CustomEvent extends Event{
        public static const EVENT_FIRED:String="Event_Fired";


        public function CustomEvent(type:String, data:*=null, bubbles:Boolean=false, cancelable:Boolean=false):void{
             super(type, bubbles, cancelable);
             this.data=data;
        }


        public override function clone():Event {
return new CustomEvent(type, data, bubbles, cancelable);
}
    }
}


That's it. Our Custom Event class is done. Now, how do I fire this?

As an example the next class will add a button to the display list. Once the user clicks in it, it will fire the 'EVENT_FIRED' event.


package{
    import flash.display.MovieClip;
    import flash.events.MouseEvents;
    import CustomEvent;
 
    public class AddButton extends MovieClip{
        private var myButton:MovieClip=new MovieClip();


        public function AddButton():void{
             this.addChild(myButton);
             myButton.addEventListener(MouseEvent.CLICK, onClick);
        }


        private function onClick(evt:MouseEvent):void {
dispatchEvent(new CustomEvent(CustomEvent.EVENT_FIRED);
}
    }
}


To caught this event you just listen this event as you normally would with any event.

One that is missing explanation is 'how do I send data with this, and how do I get it?'.

Glad you asked.

From the previous example imagine that when you click the button you want to send the string "custom event dispatched".

Replace the dispatchEvent to include this string, like this:
dispatchEvent(new CustomEvent(CustomEvent.EVENT_FIRED, "custom event dispatched");

When you listen to this listener you have to process the event for any data, like this:
...
public var anotherButton:AddButton=new AddButton();
...
anotherButton.addEventListener(CustomEvent.EVENT_FIRED, onAnotherClick);
...
private function onAnotherClick(evt:CustomEvent):void{
     trace(evt.data); //This will trace the string
}

It mihght feel confusing at the beggining but once you get the hang of this you'll throw the function callbacks... your back :)

Cheers.

How to Format Text in Actionscript III

In the last article I've shown you a way to embed fonts in Actionscript. That process implies that you will have to embed the font on your compiled and final SWF file. This means that you final SWF will increase, and in some cases dramatically, because you are making the fonts you want to use available in your compiled code.

At this project that I'm working on, this is something we can't do, due to limitation on the hardware we're using. And beacuse the skinning of the application can change, so the fonts can be changed also.

For this purpose we use font embedding but, the fonts will be stored in external, and dedicated SWF files.

To start this process, a first step is to make a SWF file just for the font:
- Open a new FLA file in Flash;
- Place the following code in the first and empty frame of the timeline:

[Embed(source='ARIAL.TTF', fontName = 'Arial', mimeType="application/x-font", unicodeRange="U+0020-U+007E")]
var arial:Class;


Font.registerFont(arial);

This code is explained in the previous article. So if you came here directly and don't understand what's in here, just go there and see what this means.

This SWF will only have the embed characters you tell on the unicodeRange. So if you use any other characters with this font, they won't appear. So make sure your character range is correct.

Compile the file and place it on your local folder or in a "fonts" folder. In this case I will call it arial.swf.

To use this in your code just to simply something like this:
- In your AS3 class define a new Loader variable to keep to load the font:

private var fontLoader:Loader = new Loader();

- Load the font in the main constructor, or wherever it may suit your needs like this:

fontLoader.load(new URLRequest("sections/swfs/fonts/arial.swf"));

- After this, whenever you want to use the font in a textField you need to use the TextFormat to assign this font and change text appearance, like this:

var myText:TextField=new TextField();

myText.defaultTextFormat = new TextFormat("Arial", 38, 0x2DAAFD, true);
myText.selectable = false;
myText.text = "Hello World!";

NOTE: In the TextFormat, "Arial" is the name you gave the font in the Embed in the font SWF file.


This method makes easier to use and change fonts dynamically, for example defining a font to be used in a textField through an XML file.

Happy coding!

How to Format Text in Actionscript II

Some time ago I posted a way to format text using the fonts available in your system that you should, in the first place, import to your library and then use it on your code.

Meanwhile I had a new project where I was asked to come up with a way to use fonts. This project is to be embeded in a set top box, so there's a limitation about the fonts you can use. That's if the box has any available for you to use.

In this case there's no font I can use, so I have to "install" my fonts on the box in order to Flash to recognize them.
Another limitation is that the software can use a font, and I mean any font, that the Design department comes up with. This means that at some point I can have more or less fonts installed on the system. If we can't install fonts on the box, how can I use fonts as I please?

There's two possible answers for this:

One is using a Flex approach using the Embed tag. In you Actionscipt class, where you define your global variables put something like this:


[Embed(source='ARIAL.TTF', fontName = 'Arial', mimeType="application/x-font", unicodeRange="U+0020-U+007E")]
var arial:Class;

As a brief explanation:
- The source must be a font file already in your local folder;
- The fontName is the name you  will call in your code when you want to use the font;
- The mimeType is just something you have to write in order for the compiler to know that this is a font file;
- The unicodeRange is very important because it gives you the possibility of embedding just the characters you want in unicode. In this case "U+0020-U+007E" means a-Z (a to z in lower and uppercase).


For more details about the characters code to use, visit http://unicode.org/charts/ or http://www.rishida.net/tools/conversion/ that will make the conversion for you.


The var arial:Class must come after the Embed tag so that this font instantiated and can be used in the code you make.

For this you'll have to make a final step, which is: In the constructor of you class, register the font using this line of code
Font.registerFont(arial);

After this whenever you want to use this font just to something like this:

var myTextBox:TextField = new TextField();

myTextBox.defaultTextFormat = new TextFormat("Arial", 38, 0x2DAAFD, true);
myTextBox.selectable = false;
myTextBox.text = "My text in Arial";
addChild(challenge);


The "Arial" in new TextFormat("Arial", 38, 0x2DAAFD, true); is the name you gave to the font in the Embed tag, the rest is size, color and whether is bold or not.

The downside of this method is that if you want to use several fonts, you will have to embed them in the code, which mean that you will have to compile each time you change, add or delete a font from the code.

In my case this has to be more dynamic.

The next article will show how you can embed the font through a separate SWF file with the font in it. Just click here to go there.

Happy coding!

Access modifiers

Hello everyone,

This post is somehow a way to remember some things that might pass you by, specially if you don't use them very often.

Normally when I define my classes, everything is private unless some method or variable must provide values to another class. Even at this point I consider on putting a callback instead of a public value.

But recently I had the need to explain what a "protected" class was.

Well first of all, in AS3, all classes must be declared public, but their methods or variables can be public, private, internal and protected.

So what's the difference between them?

I'll make a brief description of each one. Then you have useful links if you want further explanations.

Public - These are accessible by everyone. Other classes in the same or another package can access these methods or variables.

Private - Only the class can access them. External class can't see them

Protected - These methods and variables are only accessible for subclasses. If you declare a class by inheriting from another with protected methods or variables, this children class can access these. If it's not a children class these methods or variables are inaccessible.

Internal - All methods and variables declared as "internal" are only shared across the same package.

I think is very straightforward, and only depends of what you're doing and how you plan to do things.

The following links can enlighten you a bit more:
Greenthumb
Adobe
Article on Kirupa.com from Senocular

Hope this helps... it did for me ;)

Simple preloader for the Loader Class

I use the Loader class mainly to... well, load an image. It's also used to load external SWF, but at this time, I didn't had the need to use it like that.

My main job, at this point, as an AS3 developer is to produce infographies for a news agency. Some processes ahve change in the way I must now deliver the work, and one big change is that all the assets like images, videos, sounds and xml files, must be in a remote server.

This carries a problem which is a possible lag in time while the SWF tries and loads the assets remotely. You have to take care of this, because the web readers of these infos must have some sort of feedback, or else, nothing happens, and they may think something is broken.

So this time I'll tell you a simple way of making a preloader bar for the Loader class.

Make a simple class to load the image:

package{
     import flash.display.MovieClip;
     import flash.display.Loader;
     import flash.display.URLRequest;


     public class LoadPhoto extends MovieClip{
          private var photoURL:URLRequest;
          private var photoLoader:Loader;


          public function LoadPhoto(url:String){
              photoURL=new URLRequest(url);
              photoLoader=new Loader();
              photoLoader.load(photoURL);
              addChild(photoLoader);
         }
     }
}

This is the minimum to load an image or SWF with the Loader.

If you want to show a progress bar while the data is accessed, you have to draw it. You can add a text field to show the percentage value, but that it's a natural evolution from this progress bar.

Inside the the LoadPhoto function add the necessary code to make a simple line using a Sprite:

progressBar=new Sprite();
progressBar.graphics.lineStyle(3, 0x0000CC); //define thickness and color
progressBar.graphics.moveTo(0,0); //initial point of the line
progressBar.graphics.lineTo(imageWidth, 0); //the line will be on top
progressBar.scaleX=0; //in the beggining the progressBar will be a dot
addChild(progressBar);

Then we have to catch the size of the data that is been received, and of course it's total amount. We have to associate an event to the Loader to catch these values. For that we have to use the ProgressEvent class. So First of all add to the imports block import.events.ProgressEvent.
Then add this line after the end of the LoadPhoto function:

photoLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

Then define a new function that handles this event:

private function progressHandler(evt:ProgressEvent):void{
     progressBar.scaleX=(evt.bytesLoaded/evt.bytesTotal);
}

This last function will receive the loaded bytes and the total byte size, and turn them into a value between 0 and 1, which is what we need to define the scaleX of the Bar. You can later add an event listener to remove the progressBar and show the asset.

In the end the Class with the Loader and a progress bar, will be something like this:

package{

     import flash.display.MovieClip;

     import flash.display.Sprite;

     import flash.display.Loader;

     import flash.display.URLRequest;

     import flash.events.ProgressEvent;

     public class LoadPhoto extends MovieClip{

          private var photoURL:URLRequest;

          private var photoLoader:Loader;

          private var progressBar:Sprite;

          public function LoadPhoto(url:String){

              progressBar=new Sprite();

              progressBar.graphics.lineStyle(3, 0x0000CC); //define thickness and color

              progressBar.graphics.moveTo(0,0); //initial point of the line

              progressBar.graphics.lineTo(imageWidth, 0); //the line will be on top

              progressBar.scaleX=0; //in the beggining the progressBar will be a dot

              addChild(progressBar);

              photoURL=new URLRequest(url);

              photoLoader=new Loader();

              photoLoader.load(photoURL);

              addChild(photoLoader);

 photoLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

         }

         

         private function progressHandler(evt:ProgressEvent):void{

              progressBar.scaleX=(evt.bytesLoaded/evt.bytesTotal);

         }

     }

}

Proxy to read information

Hi,

In a situation where Flash needs to get information from another server, normally a text based information, like XML, there are security issues that need to be overcomed.

If you try to load a URLRequest using a URLLoader object, it will run normally locally, but if you publish it on the net, it won't work. That's because on network the Flash player request a security file to catch the information, from the server it wants to access.

That file is called crossdomain.xml (Maybe I'll do a article about this later), which has to be on the root of the accessed server.

But what if you don't have privileged access to the server and the administrator doesn't want to put that file for you? Probably yesterday I could ask that, but at the time it would involve a lot of people and too much time spent.

So I had to come up with an alternative solution. That solution is by making this request through a PHP (or ASP) script. In my case I'm more comfortable with PHP, and that's what I'm presenting.

It works this way:
1- Flash will make the request, including the url that it wants to access to the PHP file;
2- The PHP file will ask the url given for the information we want to read;
3- Once it gets to the PHP, it will return the information to the Flash.

The PHP won't ask for any crossdomain.xml, so is like someone making the request directly through the address bar of the browser. I read also that there maybe some servers that prevent this mechanism to work, but usually, no. In this case, there's no chance (not that I know of) to get the data unless you can get a privilege to that.

I know that Adobe has a web page with several proxy script for PHP and ASP, but yesterday I couldn't find it, but another did... and I think it's a much better script that the one of Adobe.

So here it is. This code is in http://xmlrpcflash.mattism.com/proxy_info.php

Just copy and paste to a PHP file. Call it "proxy.php" for example.

 
$post_data = $HTTP_RAW_POST_DATA;

$header[] = "Content-type: text/xml";
$header[] = "Content-length: ".strlen($post_data);

$ch = curl_init( $_GET['url'] ); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);

if ( strlen($post_data)>0 ){
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
}

$response = curl_exec($ch);     
$response_headers = curl_getinfo($ch);     

if (curl_errno($ch)) {
    print curl_error($ch);
} else {
    curl_close($ch);
    header( 'Content-type: ' . $response_headers['content-type']);
    print $response;
}


?>

On the Flash side, just make the call has you would normally, like this:

var xmlLoader:URLLoader = new URLLoader();

var xmlData:XML = new XML();

 

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(newURLRequest("proxy.php?url=http://www.infoimafter.com/net/files/xmlinfo.xml"));

In the last line please regard "proxy.php?url=" followed by the url of the data you want to fetch.

After all this it worked very well. I thisnk this also insures that the data will be forced to refresh. I don't know if is that some servers I use, but it seems that sometimes cleaning the browser cache it's not enough to refresh data, being requested the normal way.

Cheers.

Loading and resizing image

This is a simple task to achieve. The AS3 has already a component that does this, but if you want to keep your SWF footprint to a minimum, you must consider this solution.

Nothing to it, but I seem to keep always forgetting, since I don't deal with this problem very often.

But here it is for future reference.

First of all we will be using two classes. One is URLRequest, that will capture the HTTP request for a file with its url. The other is the Loader which is used to load external SWF or image files (PNG, JPG or GIF).

First of all import these two classes:

import flash.display.Loader;
import flash.net.URLRequest;

Then instantiate the Loader class outside any function, because we will need it to resize later on.

private var myLoader:Loader;


Inside the loadImage function instantiate the URLRequest class by giving it the file url you which (the url can be a relative path. In this case there's no need to place the HTTP protocol).


Associate the Loader with this URLRequest, and finally add it to the DisplayList.


private function loadImage(file:String):void{
     var myRequest:URLRequest = new URLRequest(file);
     myLoader = new Loader();
     
     myLoader.load(myRequest);
     addChild(myLoader);
}

loadImage("mypicture.jpg");

If you run this, you will see the image "mypicture.jpg" in the stage.

The next step is to scale the image. Try and write the following lines inside the previous function:

myLoader.width=20;
myLoader.height=40;

What happens? The image doesn't appear. So what's going on?

We are trying to scale an object when the object does not have any contents yet.

We have to listen to the myLoader object to see if it has already load the picture and then we can scale.

Write the previous function like this adding the line in red:

private function loadImage(file:String):void{

     var myRequest:URLRequest = new URLRequest(file);

     var myLoader:Loader = new Loader();

     myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeImage);

     myLoader.load(myRequest);

     addChild(myLoader);

}

Don't forget to add the Event class on the import statements.

The function for resizing by now you should have guessed it:

private function resizeImage(evt:Event):void {

myLoader.width = 45;

myLoader.height = 40;

}

Simple, right?

Happy resizing.