AS3 snippets

How to Format Text in Actionscript III

2012-01-17T10:01:00.000Z

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

2012-01-17T09:39:00.002Z

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

2011-08-25T09:30:00.000+01:00

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

2011-06-17T17:38:00.000+01:00

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

2011-06-06T12:55:00.000+01:00

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

2011-05-12T14:46:00.000+01:00

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.

Usability: Click and Drag cursor

2011-01-06T12:39:00.001Z

Although it's a common feature in many flash applications a little feedback for users is always welcome... specially when you have a "click and drag" situation.

Recently I came across this request for an infography for a client. I make the infography, but the application didn't have a feedback for the user that that area was meant to be draggable, only a small phrase stating that.

I agreed that this would make sense and made the change.

To substitute the regular Windows mouse icon with one of your own, you must first import the class that controls the mouse UI options, like this:

import flash.ui.Mouse;

This class let's you use two important features for mouse icon... the hide and show options.

If you put it like this:

Mouse.hide();

The mouse icon will disappear, although the mouse still works, but you don't know where it is.

The reverse option will be the show option, like this:

Mouse.show();

You must import also the MouseEvent class, to set the listeners later:

import flash.events.MouseEvent;

Now that we have our hide and show options, how can you make a custom icon and make it follow the mouse position?

Making it simple you have to add a listener for the mouse position, but this is made indirectly, since we are going to listen for any mouse move, and then see where it is.

Making an EnterFrame event can be costly specially if you're application has many pictures or video, like the one I had to make, so we're listening for any mouse move, which is triggered when... you guessed it... the mouse is moved.

First of all, make a movieclip with the icon you wish to appear, and place it in the library with a export actionscript name. I will call it MyLibraryCursor (remember that when making the movieclip, the "plus" sign indicates where will be the click spot for the mouse).

Make a new object with this Library Class:

public var myCursor:MyLibraryCursor;

Then on the init() function of your main class, define your new object, along with two important options:

myCursor = new MyLibraryCursor();

myCursor.mouseEnabled = false;

myCursor.mouseChildren = false;

mouseEnable tells flash if this object receives mouse behaviours. Usually that's a problem when you have many movieclips on the stage, where you can have problems with object focus (this will not disable mouse events).

mouseChildren is put there to prevent event bubbling. Has you know AS3 has a great feature, but sometimes difficult to control and understand, which is the propagation of events between children of a display object (bubbling). This prevents it from happening (a typical case of this is when you have a text box with text, and the mouse is only active when you pass by the line of a letter).

Next we will add the mouse movieclip to the stage:

addChild(Global.myCursor);

Make the "windows" mouse disappear:

Mouse.hide();

And then listen to the MOUSE_MOVE to make it follow the mouse:

this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

This calls the mouseMoveHandler function which will move the custom icon to the mouse position:

public function mouseMoveHandler(evt:MouseEvent):void

{

myCursor.x = evt.stageX;

myCursor.y = evt.stageY;

}

And that's it, the basics for replacing the windows cursor, for one of you're own.

Possibly in a future post I will explain other option for this, cleaning a bit the behaviours about this.

You can make a Global class to easy the control of the mouse behaviour if you have to hide, show and turning off and on, between different display objects across your application... this maybe will to go for a later post.

Cheers.

MouseButton and HandCursor

2010-12-19T15:09:00.002Z

Every now and then you may need to use a Sprite or MovieClip with a EventListener. And chances are that 99% of these times it will be a MouseEvent, since these objects are easy to place in custom classes and build an entire interface with Actionscript... at least that will be 100% of the times for me ;)

So in these cases you don't want to make Button objects, but still be able to feedback the user that in "this" object contains an action with the mouse.

Well simply placing three lines of code you can show your user the hand cursor (like it appears in a web page), and have the behaviour of a button. Furthermore the third line prevents the hand cursor not to be active if the button has text in it. Those lines go like this:

var button:MovieClip = new MovieClip();
button.buttonMode = true;
button.useHandCursor = true;
button.mouseChildren=false;
addChild(button);

Cheers

How to count number of lines in a TextField

2010-10-12T15:18:00.001+01:00

I was facing this dilema to correct a game were in the textfields the text can have 1, 2 or 3 lines. Depending on the number of lines I wanted to center the text vertically so that when it had only 1 line, it would append a new line "\n" before the text.

This only applies to normal dynamic textfields, not TFL. These have their own methods to center text both horizontally and vertically... much easier.

There's a property called numLines, but this only states that the chosen TextField will have an x number of lines that you specify, you can't use it to return the number of text lines that you see.

So you have to make another type of calculation, and the textfield must be multiline.

var myHeight:Number = myText.height; //store the height of the textfield

myText.multiline = true; //don't need to do this, if it is in the properties panel
myText.wordWrap = true; //same as above

myText.height = myHeight; // here is the trick, try removing this line
trace("DYNAMIC TEXTFIELD HAVE "+myText.maxScrollV+" LINES");

Cheers

Time lapse for FLVPlayback

2010-10-12T00:42:00.000+01:00

This is one of those cases when the Adobe documentation is rare, or doesn't help much.

I had a hard time figuring out how to place a bar that would grow along with the playback of a movie in the FLVPlayback component.

First make a custom MovieClip with a rectangle (it can be another shape, but usually rectangles are best for these) and give it a name: myPlayhead

You must have already the FLVPlayback component on stage, with a given name. I will name it: myFLVplayback

For the script we will need to import a class to do this: VideoEvent. This class has several events you can use to get info from the FLVplayback when playing video (http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/fl/video/VideoEvent.html)

import flash.video.VideoEvent;

//The movie doesn't start
myFLVPlayback.stop();

//Rewinds automatically if the video is stopped or it reaches the end.
//By default it's false
myFLVPlayback.autoRewind=true;

//Adds the listener for each time the playhead updates it's position

myFLVPlayback.addEventListener(VideoEvent.PLAYHEAD_UPDATE, videoHandler);

function videoHandler(evt:VideoEvent):void{
var totalSeconds:Number = myFLVPlayback.totalTime;
var elapsedSeconds:Number = myFLVPlayback.playheadTime;

var percent:Number=Math.round((elapsedSeconds/totalSeconds)*100);

   //The custom seekBar will change it's size according the the percentage
   //of the played movie
seekBt.progressMc.scaleX=percent;
}

Cheers

Custom controls for the FLVPlayback video component

2010-10-12T00:09:00.000+01:00

This time I had to help a friend that needed to play some videos in a fancy interface.

The problem was that he didn't want the buttons that Flash provides for video playback, and wanted some flexibility towards mouse events, i.e., beeing able to hide or show the buttons with custom events or mouse events.

For now I will tell how I changed the controls.

First of all you need to make some custom MovieClips for the buttons. One MovieClip per button.

(this is valid for actionscripting the interface, or placing the components directly on stage)

Place the FLVplayback component in the stage and give it a name: myFlvplayback

Place the buttons where you want on the interface, and give them a name: playBt, pauseBt, stopBt,... and so on.

Now the script. You have to associate the buttons to the video component, stating what each button will do, like this:

myFlvplayback.playButton=playBt;
myFlvplayback.stopButton=stopBt;
myFlvplayback.seekBar=seekBt;
myFlvplayback.pauseButton=pauseBt;

That's it. If you run the movie, you'll see that this is enough to custom controls for this video component.

A further step is to make a custom interface with the all buttons inside a single MovieClip. Then you can make your custom autohide function with some MouseEvents.

Cheers

Logical XOR

2010-09-02T17:53:00.001+01:00

Flash doesn't have a logical XOR, only a bitwise XOR. That means that you can only do bitwise operations, or swap number and attribute the result to a variable.

Well I needed a Boolean XOR, like the one with Truth Tables that we know from logical programming. Well this little function takes care of this:

public function xor(lhs:Boolean, rhs:Boolean):Boolean {

return !( lhs && rhs ) && ( lhs || rhs );

}

Cheers,
Leonel

Fullscreen... and back

2010-09-01T17:10:00.000+01:00

To get your stage into full screen you must do in two steps. The first is to set your stage display state in ActionScript. The other is to allow this scaling in the HTML page.

First of all, place a MovieClip in the stage, by code, or directly in the stage. Give it a instance name.
I will cal mine: fullScr

Associate with fullScr an event listener to catch a mouse event to execute the full screen:

fullScr.addEventListener(MouseEvent.CLICK, handleMouseClick);

Write the handleMouseClick function that will set the display state of the stage. This function will detect the current display state, and change it accordingly. If the display state is NORMAL, it will set it to FULLSCREEN. Otherwise it will be NORMAL again:

private function handleMouseClick(me:MouseEvent):void
{
   if (stage.displayState == StageDisplayState.NORMAL) {
   try{
   stage.displayState=StageDisplayState.FULL_SCREEN;
   }
   catch (e:SecurityError){
   //if you don't complete STEP TWO below, you will get this SecurityError
   trace("an error has occured. please modify the html file to allow
   fullscreen mode");
   }
   }else {
try{
   stage.displayState=StageDisplayState.NORMAL;
   }
   catch (e:SecurityError){
   //if you don't complete STEP TWO below, you will get this SecurityError
   trace("an error has occured. please modify the html file to allow
   fullscreen mode");
   }
}
}

If you have a video component like FLVPlayback, when you hit fullscreen, this component will take over the screen because it is on top of everything else. To prevent this add this line:

myPlayer.fullScreenTakeOver=false;

Cheers,
Leonel

Datagrid with image and events

2010-08-18T11:15:00.000+01:00

At my company I'm making an application that has many datagrids to manage information that comes from external XML files. Many are related to one another, and some of them are meant to choose online documents, that will be used by chosen users (also in datagrids). One of the requests was to be able to choose a document in the dataGrid and preview the document.

The first question was, what type of visual aid would there be for the user to see that "you can click here to preview the document"?

Since this is a Flash application, there was not much sense to use text aids, like a link in HTML, so I wanted to place an icon for the user to click.

The next question is: How do you place an image in a dataGrid cell?

Not a trivial one to answer, since the Adobe documentation is not very clear in some aspects, and is incomplete in most cases, and this is one of them.

You can change the cell rendering option using the cellRenderer class. But how do you do it?

After long research over the internet, most users and cases are documented in AS2 using the mx.core.UIComponent. In AS3 is the fl.core.UIComponent, but I stumbled in poor documentation.

So searching a bit further I discovered an example from Adobe itself, and it's in this webpage:
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3/

I tried to adapt this solution to my problem, and it looked promising, since it was in AS3, and it was exactly what I wanted. Guess what? No errors, but it didn't work either. I changed all variables, made the associations right, but some new classes, new MovieClips in the library... but nothing worked.

Adobe forums... nothing!

Finnaly, I found forum entry in Kirupa.com, and the user EssencLord, presented a simple solution to overcome this problem. His solution was exactly whath I was looking for.

1. Make a separate class and give it a name that will identify it has a cell renderer class. I called it MCCellRenderer, because it will use a MovieClip with an icon inside, to be displayed in the dataGrid:

package src{

import fl.controls.listClasses.CellRenderer;

import flash.utils.getDefinitionByName;

public class MCCellRenderer extends CellRenderer {

public function MCCellRenderer():void {

var instance = new (getDefinitionByName("eye")); // Create Instance of "eye"

this.addChild(instance); // Add this instance to the CellRenderer

instance.name = "eye"; // Name this new instance

// Position Movie in Cell

instance.x += 18;

instance.y += 10;

}

2. Then in the main class, associate this class with the cell you want in the dataGrid:

var verCol:DataGridColumn = new DataGridColumn("Ver");

verCol.cellRenderer = MCCellRenderer;

If you want to associate a MouseEvent with that particular cell, you can do it like this:

1.Add an event listener do the datagrid:
MyDataGrid.addEventListener(MouseEvent.CLICK, onClickCell);

2. And here's and function that will detect which cell was clicked, and react accordingly:

function onClickEvent (E:Event){
// if a record is selected
if (eventGrid.selectedIndex != -1)
{
// Check if user clicked on the Info Icon CellRender of the selected Row
var Row = eventGrid.selectedIndex;
// get selected row
var Col = eventGrid.getColumnIndex("Ver");
// the column of cells with MCCellRenderer
if (E.target == eventGrid.getCellRendererAt(Row, Col))
MyFunction ();

}
}

Keep it simple

Function Call Back

2010-08-13T11:42:00.003+01:00

This is very handy feature when programming in AS3.

Imagine that you make a AlertBox class, that when called, it makes a custom Alert message. Imagine then, that you can put 1, 2 or 3 buttons, according to the message type.

If you want to reuse this class in several projects, it's a good idea to tell the different buttons what or where to return when it's pressed.

That's were the Function Call Back enters. After a couple of hours and some search in the web, I came up with a solution, which I want to share.

It's very simple.
First declare in your class a variable that will keep the function reference later on, like this:

private var callBack:Function;

Then when you instantiate the Class, one of the arguments, of the constructor or function, will keep the function name, like this:

createAlert(..., callback){
...
}

Finally inside the constructor or function, you have to attribute the argument to the variable you defined earlier, like this:

callBack=callback;

Then place this variable as a call of some event, like this:

button1.addEventListener(MouseEvent.CLICK, callBack);

... and that's it.

If you want to call the call back function with arguments, instead of a event, just call this way:

typeOfMessage=1;

callback(typeOfMessage);

Cloning arrays

2010-05-30T15:42:00.001+01:00

On the other day I had the need to copy an Array. It was not the first time, but this time I had to make a temporary copy of another array, and put some new data in it and make some calculations.

In this process my need to change the original Array, was none.

The problem is that if you make something like this:

var myArray:Array=new Array("Blue", "Yellow");
var myCopyArray:Array=new Array();

myCopyArray=myArray;

... it works to some extent. You can also do this with concat or slice commands.
This method makes a shallow copy, which means that the copy only stores the reference to the original values, that is, it only stores the memory reference where the values are stored. This means that if you change one of the arrays, the other will change also... This was not what I meant.

I needed to make a hard copy of the array, change it, without changing the original. During the research, I found this generic solution presented in a webpage by Adobe at the following link:
https://www.adobe.com/livedocs/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000092.html

As always I transcript the code to here and make a brief explanation.

So the function looks like this:

import flash.utils.ByteArray;

function clone(source:Object):*
{
    var myBA:ByteArray = new ByteArray();
    myBA.writeObject(source);
    myBA.position = 0;
    return(myBA.readObject());
}

Basically what this does is it goes to the memory and gets what is stored in the place where the original Array is referenced. To get the original data and not the reference, it uses the ByteArray class and stores the data in the myBA:ByteArray object. The ByteArray class insures that it copies whatever is stored in the original Array, i.e, Numbers, String, DisplayObjects, whatever...

Pretty handy...

How to erase a element in a Array

2010-05-21T16:06:00.001+01:00

I came across this problem recently.

The Array has some methods, and the most common are PUSH, that lets you put an element in a Array. This element will go to the end.

And then you have the POP method, but this only gets the last element in a Array.

Now the question is "How do I delete an element giving the position for that element"?

It's a bit trickier, and it's done using another method called SPLICE.

The syntax is:
splice(startIndex:int, deleteCount:uint, ... values)

This means:
- startIndex -> Initial position were you want to delete. It's the index position of the Array;
- deleteCount ->This is how many elements you want to delete, that includes the index position you specified in startIndex. If you say 1, then it will delete the index position that you've specified. If you say 2, then it's the index position, and the next element... and so on.

As an example:

var myList:Array=new Array("Blue", "Red", "Green", "Black,"White");

myList.splice(2,2);
trace(myList); //Blue, Red, White

//Green is Index number 2, and then deletes two elements including Green, which are Green and Black

Instantiate an SWF as a Class

2010-05-04T10:26:00.000+01:00

At the company where I work we add the need to make several SWF that needed to come up, in different timings and according to user navigation. But since we wanted to keep the final application as light as possible, we had the need not to instantiate all the external swf at once.

After some research we found and implemented the following solution: instantiate external swf's as separate classes:

package{
  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.net.URLRequest;
  import flash.display.Loader;

  public class Load extends MovieClip
  {
   var storeLoadedObject:Class; //Self explained ;)
   var loader:Loader;

   public function Load():void{
   loader=new Loader();
   loader.load(new URLRequest("example.swf"));
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeObjForEdit);
   }

   public function completeObjForEdit(evt:Event):void{
   var className:String="com.gameRoot"; //Document class of loaded file
   storeLoadedObject=loader.contentLoaderInfo.applicationDomain.getDefinition(className) as Class;
   makeLotsOfCopies();
   }

   public function makeLotsOfCopies():void{
   for(var i:uint=0; i<20;i++){
   var copy:MovieClip=new storeLoadedObject();
   addChild(copy);
   copy.x=i*5;
   copy.y=i*5;
   }
   }
  }
}

And that's it.

Video smoothing in AS3

2010-04-25T23:33:00.002+01:00

This is an issue I found that has made serious difficulties to developers about video playback. If you have a video file in flv format, and it has a size that is smaller than the stage where you want to show it in, Flash pixelizes the video. This is the default behaviour of Flash when playing video.

There's a workaround but it's a direct one, as it was in AS2.

In AS2 you would do like this:

myVideoObject.smoothing = true | false

In AS3 you have to get to the "smoothing" in other way. Like this:

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

 Where videoLoader is the FLVPlayback component that you insert with ActionScript.

How to load an external SWF

2010-04-12T11:48:00.002+01:00

This is how you can load an external SWF, using the progress event to make some sort of preloader.

import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;

function startLoad() {
   var mLoader:Loader = new Loader();
   var mRequest:URLRequest = new URLRequest(“MouseActions.swf”);
   mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onCompleteHandler);
   mLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgressHandler);
   mLoader.load(mRequest);
}

function onCompleteHandler(loadEvent:Event) {
   addChild(loadEvent.currentTarget.content);
}

function onProgressHandler(mProgress:ProgressEvent) {
   var percent:Number = mProgress.bytesLoaded/mProgress.bytesTotal;
   trace(percent);
}

startLoad();

XML loading class

2010-01-19T19:11:00.000Z

This article is about loading xml data, on files or webservices. Sometimes, some projects require that you must read lots of information that are scattered throught many xml files or webservice. This class will help you not to recode every time you must read such type of information. Instead you only have to read the data acording to the response you receive.

So if you use this class, you just need to instatiate an object and call the file/webservice. Instantiate a new object for each file/webservice.

This code was copied from the website: http://www.mediareason.com/blog/?p=20

package com.func
{
import flash.net.URLLoader
import flash.net.URLRequest
import flash.xml.XMLDocument;
import flash.errors.*
import flash.events.*
public class LoadXML
{
private var loader : URLLoader;
private var mainXML : XML;
public function LoadXML() {
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("http://.../test.xml"));
}
private function onComplete(evt:Event)
{
try
{
mainXML = new XML(loader.data)
trace(mainXML);
} catch(e:Error)
{
trace("Error: " + e.message)
return;
}
}
}
}

Decimal to Fraction

2009-11-05T17:13:00.001Z

This class will be very handy to transform a decimal number to a fraccion. This was taken from forum entry in Actionscript.org and the user "rondog" converted a AS2 class to AS3. This is one more place where you can get it.

package com.lookmum.util
{
    public class Fraction
    {
        private static var it         :Number = 0;
        public static var iterationLimit:Number = 10000;
        public static var accuracy    :Number = 0.00001;
        
        public function Fraction()
        {
            
        }
        
        private static  function resetIt():void
        {
            it = 0;
        }
        
        private static  function addIt():Boolean
        {
            it++;
            if (it == iterationLimit)
            {
                trace('error : too many iterations');
                return true;
            }
            else
            {
                return false;
            }
        }

        public function getFractionString(num:Number):String
        {
            var fracString:String;
            var fracArray:Array = getFraction(num);
            switch (fracArray.length)
            {
                case 1 :
                    fracString = num.toString();
                    break;
                case 2 :
                    fracString = fracArray[0].toString() + '/' + fracArray[1].toString();
                    break;
                case 3 :
                    fracString = fracArray[0].toString() + ' ' + fracArray[1].toString() + '/' + fracArray[2].toString();
                    break;
            }
            return fracString;
        }
        
        public function getFraction(num:Number):Array
        {
            var fracArray:Array = new Array();
            var hasWhole:Boolean = false;
            if (num >= 1)
            {
                hasWhole = true;
                fracArray.push(Math.floor(num));
            }
            if (num - Math.floor(num) == 0)
            {
                return fracArray;
            }
            if (hasWhole)
            {
                num = num - Math.floor(num);
            }
            var a:Number = num - int(num);
            var p:Number = 0;
            var q:Number = a;
            
            resetIt();
            
            while (Math.abs(q - Math.round(q)) > accuracy)
            {
                addIt();
                p++;
                q = p / a;
            }
            fracArray.push(Math.round(q * num));
            fracArray.push(Math.round(q));
            return fracArray;
        }
    }
}

Instantiate from library by class name

2009-10-26T18:52:00.001Z

This maybe is one of the best hints for any as3 developer.

You have several objects in the Library, and some of them have sequenciall names, like "obj1", "obj2", "obj3"... and so on.

Normally if you want to instanciate an object from the library you would do like this:

var obj1:obj1=new obj1();

var obj2:obj2=new obj2();

...

What do you think... tedious, right? and not eficient, at all.

One of the solutions is to use the flash.util class that as a method called getDefinitionByName, wich can help a lot on this sort of thing.

By the upper example you just need a FOR cycle to instantiate all the objects. Imagine that I have from obj1 to obj5, this is how I would do it:

import flash.util.*;

private function instObj():void{

  for(var i:Number=1; i<6; i++){

    var name:String="obj"+i;

    var object = new (getDefinitionByName(name) as Class)();

    addChild(object);

}

}

Generalize Methods

2009-10-25T00:12:00.001+01:00

This one I saw in the "Actionscript 3 Cookbook" by Joey Lott, Darron Schall, Keith Peters and published by O'Reilly. Although it's on the first chapter of the book, it may come handy most of the times.

This recipe applies when you have a method and you want to use it several times, but with slightly different numbers of arguments, like calculating the average number. You can calculate the average between 2 numbers, or maybe, 7.

Lets make a example:

public function average (num1:Number, num2:Number):void{
   trace("The average number is: "+(num1+num2)/2;
}

You call this method like this:

average(3,6);

The answer will be:

The average number is: 4.5

So how can I call the average method with a different number of arguments?

In the first place, you don't specify the number of arguments you put in the method, when you define it.
Then, you must have a cycle inside the method, that will read all the arguments when you call it.
Do it like this:

public function average():Number{
  var sum:Number=0;

  for(var i:Number=0; i
   sum+=arguments[i];
  }

  return sum/arguments.length;
}

The keyword arguments will retrieve the number and the value of the arguments that you place when you call a method.

then call the function like this:

var value:Number=average(2,3,4);

or

var value:Number=average(5,6,7,8,9,10);

This is a nice feature

How to Format Text in Actionscript

2009-10-16T15:22:00.006+01:00

This time I will post a snippet about how to format text in a textfield that is placed dynamicaly in the Stage.

Firstly you must insert the TextField on the stage. For that you need to place these two line in order to import the class that controls the TextField object in AS3. The second import, will import the class that control the appearence of TextFields:

import flash.text.TextField;
import flash.text.TextFormat;

Next you need to create the TextField and place it in the DisplayObject list:

var myText:TextField = new TextField();
addChild(myText);

Next you can tell Flash if the user can select the text, and if you want some border around the TextField:

myText.selectable = false;
myText.border = false;

Next you can tell if the TextField is autosizable, that is, if the text inside is to be dynamic, maybe you need the TextField to stretch or shrink, according to the text value. You can even tell if the autosize is to the right, center or left:

myText.autoSize = "center";

Now we're ready to format the contents of the TextField. For that you need to create a TextFormat object that will be associated to the TextField later on.

Create the TextFormat object:

var myFormat:TextFormat = new TextFormat();

Define the font face you want to use. Then you can define if the text is to bold, underline or italic:

myFormat.font = "Myriad Pro";
myFormat.bold = true;

Give it some colour:

myFormat.color = 0xFF0000;

Change the size:

myFormat.size = 12;

Finally associate the TextFormat to the TextField:

myText.setTextFormat(myFormat);

Happy Texting...

AS3 Sandbox

2009-10-06T16:48:00.020+01:00

Flash has some issues towards using foreign information, that is, you have an SWF file that has to access an external XML file, or other type of file. When this type of error occurs, you will get (if you have the Flash Player Debugger) a sandbox violation.

You have two ways to solve this... one that requires PHP or ASP, or any other script language knowledge, and the other requires that you have access to the source server (the one that has the information that you require).

This example will be to retrieve XML data, for example, a WebService.

1. By PHP, ASP or other script language (I will focus on PHP)
In order to do this you have to establish a "proxy" file, wich is, a file that will retrieve the data for you.
It works this way: In the same directory where the SWF file is you have to put a PHP (or ASP, or...) file that has a command to get the information. This is very simple.

In the SWF side:

function loadNews():void {
   var loader:Loader = new Loader();
   xml_NwsLoader.addEventListener(Event.COMPLETE, loadXMLNews, false, 0, true);
   xml_NwsLoader.load(new URLRequest("http://example.com/proxy.php"));
}

Notice that I will not call the XML file but a PHP one.

In the PHP side you must put a simple address call to get the data you want.

You can always look for a example and download files for Coldfusion, PHP, ASP and Java Servlet at this URL
http://kb2.adobe.com/cps/165/tn_16520.html

2. Using crossdomain
For this technique is supposed that you have access to the server where the XML file, or webservice is.

You must put a file at the server root called crossdomain.xml

You can see examples of this in detail in the Adobe site
http://kb2.adobe.com/cps/142/tn_14213.html

Cheers.

Strings and Arrays

2009-08-17T10:57:00.004+01:00

Continuing my last message about "String operations" some more usefull functions to use with strings. These allow you to receive a all string and separate them into data chunks that you can put in a array. It's usefull if get data like a cvs file, where all data is separated with a comma, ou semicollom(;)

var rainbow:String="red;orange;yellow;green;cyan;blue;violet";

1. Split string into an array using the (;)

trace(rainbow.split(";"));

var colourArray:Array=rainbow.split(";");

This will split the string in all the colors that are separated by the ";" symbol, and put them in a array

2. Split string a few times only

trace(rainbow.split(";",3));

var colourArray:Array=rainbow.split(";",3);

This will do the same as above, but limited to three splits

========================================

There's another operation that is even more powerfull... the combination of Split with Join.

This allow you to search for a word in text and replace it with another

1. To remove a repeating word in text

var rainbow:String="red then comes orange then comes yellow then comes green then comes cyan then comes blue then comes violet";

rainbow=rainbow.split(" then comes ").join("");

trace(rainbow);

2. Replacing words

var rainbow:String="red then comes orange then comes yellow then comes green then comes cyan then comes blue then comes violet";

rainbow=rainbow.split(" then comes ").join(";");

trace(rainbow);

String operations

2009-08-17T10:25:00.004+01:00

Dealing with String sometimes gets you wonder "How can I split this?", "Can I extract that?".

Well, AS3 has some pretty function that manage to do this, but sometimes, the documentation gets you wonder how practical it is.

So here are some examples for common operations with Strings:

My string:

var myString:String="Always speak the truth, think before you speak, and write it down afterwards.";

==============================================

1. Show the first character

var fstChar:String=myString.charAt(0);

2. Output the first 6 characters

var sixChar:String=myString.substring(0,6);

3. Output from the sixth character

var fromSixth:String=myString.substring(6);

4. Slice the string from the 8th to the 12th character (basically will to the same has the substring)

var eigthToTwelve:String=myString.slice(8,12);

5. Search for a word and output it's position

var search:String=myString.search("truth");

6. Convert all letters to lower case

var lowerCase:String=myString.toLowerCase();

7. Convert all letters to upper case

var upperCase:String=myString.toUpperCase();

8. Length of a string

var howBig:Number=myString.length;

9. Concatenation... or adding something to the string (String are not like numbers, you can't add an "a" to a "b", so the operation "a"+"b" will result in "ab")

10. Replacing text with other text (this might get trickier)

var rplcText:String=myString.replace(myString.substring(0,6),"sometimes");

(this will replace the word "Always", wich is between character 0 and 6, and replace it with the word "sometimes")

Hope it helps someone.

Welcome

2009-08-17T10:09:00.000+01:00

Hi everybody,

I thought of creating this blog, mostly because there are small pieces of code, that can be recycled to different situations.

We all can find some pieces of code and keep a bookmark for the web page that contains it, but sometimes it's not praticall to have scattered pages with the code we need, and some pages, will eventually, be offline or disappear.

So with this in mind I'me creating this blog to help me, and all of you that will find some of the snippets usefull.

Althought it's called "AS3 Snippets", wich is main programming language that I use, it's not exclusive to it. If you think some sort of snippet will be usefull to everyone, please email it to me, to include.

Thank you.