ClickPopMedia » Beginner

Creating an XML Gallery with ActionScript 3.0

Paul — Thu, 15 May 2008 02:37:28 +0000

For any dynamic Flash project, XML will be a powerful tool. One of the most common examples (and one of the simplest) is a picture gallery like the one I have here:

Images came from http://www.stockvault.net/

I will be talking about how to use Flash and XML to make a simple, yet superfly, gallery.

So, let us start off by looking at my XML file’s structure:

dir="//url/Photos/">
id=‘0′ file="photo_7030_20070301.jpg" width=‘500′ height=‘375′>
Cute Puppy! Who couldn’t love that face?
>
id=‘1′ file="photo_4095_20070301.jpg" width=‘500′ height=‘375′>
Three Friendly Cats.
>
id=‘2′ file="photo_4281_20070301.jpg" width=‘500′ height=‘375′>
The Terror of the UnderSofa!
>
id=‘3′ file="photo_6257_20070301.jpg" width=‘500′ height=‘375′>
Bored? Let’s play catch!
>
id=‘4′ file="photo_6882_20070301.jpg" width=‘500′ height=‘377′>
It may be natural, but this picture still feels weird to me.
>
id=‘5′ file="photo_7241_20070301.jpg" width=‘500′ height=‘375′>
My cats hate the snow.
>
id=‘6′ file="photo_7538_20070507.jpg" width=‘500′ height=‘622′>
LOOK IT'S HTML!!!]]>
>
id=‘7′ file="photo_7915_20070609.jpg" width=‘500′ height=‘371′>
Skinny cats are OK too.
>
>

XML is very simple to understand if you know anything about HTML’s tag structure. The XML document has a root tag that has an attribute dir=”//url/Photos/”. Every tag has to be closed within it’s own level of the tree. Our gallery tag is closed at the bottom of the document with . This means that all the tags are elements inside the gallery element (both open and close tags combined make up an element).

Our tags have several attributes, such as the images file name and it’s pixel demensions. Inside each element we have a short comment about the image that will be displayed in a TextField in our Flash movie.

One important thing to notice here is that if you want to have HTML in your TextField then you need to tell the code that something is a string containing HTML and not more elements. We do this with a special bracket HTML GOES HERE ]]> Isn’t that GREAT! That right there probably made this whole tutorial worth while (that was a problem that took me a long time to solve).

OK, now that we’ve looked at the XML we need to make it work with ActionScript 3. In Adobe Flash CS3 I created a new AS3 FLA doc and a new AS doc. In the FLA I simply created some very basic MovieClips for my left and right arrows and I placed a TextField at the bottom of my stage (which I set to 600 X 700 with a black background). After naming my instances and setting up the Document Class linkage I was done with the FLA side of thing and the rest is ActionScript.

Our Document Class has to extend MovieClip so we take our first steps thusly:

public class Main extends MovieClip {
public var currentImg:Number;
public var lastImg:Number;
public var xml:XML;
public var loader:Loader;
public var xmlLoader:URLLoader;

public function Main() {
loader = new Loader();
addChild(loader);

xmlLoader = new URLLoader(new URLRequest("//url/gallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

left_mc.stop(); //Need to stop the arrows from flickering
right_mc.stop();
}
}

In our constructor we are initializing our Loader which will contain the loaded images and we are loading our XML document. When the XML doc is done loading, the function parseXML will handle the content.

protected function parseXML(event:Event):void {
left_mc.addEventListener(MouseEvent.MOUSE_UP, nextImg);
left_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
left_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);
right_mc.addEventListener(MouseEvent.MOUSE_UP, prevImg);
right_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
right_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);

xml = new XML(event.currentTarget.data);
lastImg = xml.img.length() – 1;
currentImg = 0;
loadImg();
}

I’ve recently gotten into the habit of using protected functions rather then private functions. There is only one difference between the two and that’s that private anything won’t be inherited by child classes.
In this function I set the MouseEvents for the arrows because if the XML failed to load, there would be no reason for the arrows to work.

Alright, so I saved my XML tree in the var xml for ease of use later. I also saved the number of images in my XML doc using the length() method. Something to know about the length method is it will only tell you how many elements there are of that tag type at that level. For example, if I were to have child elements inside my img elements that would not affect the return value of xml.img.length(); It’s only telling you how many img elements are children of gallery (gallery is accessed with the var xml directly).

protected function loadImg():void {
loader.x = (stage.width – Number(xml.img[currentImg].@width))/2;
loader.y = (stage.height – 50 – Number(xml.img[currentImg].@height))/2;
loader.load(new URLRequest(xml.@dir + xml.img[currentImg].@file));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFin);
}
protected function loadFin(event:Event):void {
textDisp_TF.htmlText = xml.img[currentImg];
}

In that first function I’m just going to focus on the one line with the URLRequest. In order to traverse an XML tree you need start with the base. Your XML var (in our case it’s called xml) points to that base (in this case the base is gallery). So when we want to access the attribute dir in the tag gallery, we need to type xml.@dir and this will return “//url/Photos/”. The ‘@’ symbol denotes that it’s an attribute and not an element (tag).

Getting the file name is just one step further. currentImg is a Number variable that stores which image we are on. Thinking of our XML var as something similar to a bunch of nested arrays we can see how you might access a specific file name with xml.img[currentImg].@file This says we want the file attribute in the [currentImg] (first second so forth) img element which is in our base element. There are quite a few ways of finding what you need in an XML doc and you can learn more about them here.

In the second function we are displaying the text from within our XML img element. Here we aren’t accessing any attributes or anything, this is where we get the content between the open and close tags.

Finally we have the arrow MouseEvent handlers:

protected function arrowOut(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(1);
}

protected function arrowOver(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(2);
}

protected function nextImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg < lastImg)? currentImg + 1 : 0;
loadImg();
}

protected function prevImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg > 0)? currentImg – 1 : lastImg;
loadImg();
}

Once again I’m using the less obvious form of the if..else statement.

if(num>5) {
num = 5;
}else {
num = 0;
}
//OR, THIS NEXT PART DOES THE SAME THING
num = (num>5)? 5 : 0;

Well that’s about it for this level of a gallery. You can make galleries look really nice with fade transitions between images, small loading animations for larger images, scrollable thumbnail selection menu… etc.

Here is a downloadable source of my example file (images not included… get them here): XMLGallery.zip

Intro to ActionScript 3.0 Tweening

Paul — Tue, 11 Mar 2008 01:12:49 +0000

I am going to talk about how to animate using Tween objects in ActionScript. Tween objects are enormously useful. They can change any numeric property of any object over time.

For example one of the most common uses of Tween objects in ActionScript is to fade an image out as another fades in. The advantage of using a Tween object to do this instead of any of your other options is

1.) it is easy to understand
2.) it is the easiest to code
3.) it generally looks the best.

It’s fairly easy to write a bit of code that will change the X position of a movieClip by 2 every frame, but that will be very linear and boring. Also when does it stop? and how? You would have to create a lot of if() statements that just take forever to think through and would make your code harder to read. (VQ: lots of nested if statements are usually a thing to avoid)

With a Tween object you can use Easing methods. In the example that follows I used the Easing method Regular.easeInOut to start the motion with a little acceleration and then bring it to a stop in the same way.

If the motion of the dot gets annoying you can stop or start it again at any time by clicking on the Flash movie.

Notice how the motion is almost natural at the ends. It doesn’t just stop and turn around. The code used to create this motion is simple and short:

package classes {
import flash.display.MovieClip;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*; //I like to import them all so it’s easy to play with later.

public class Oscillator extends MovieClip{
/*These constants allow me to change the tween without
digging through my code to find it. It’s just good practice*/
private const ANCHOR1:Number = 5;
private const ANCHOR2:Number = 565;
private const TIME:Number = 1.5;

private var myTweenX:Tween; //ALWAYS declare tweens as globals or properties

public function Oscillator() {
myTweenX = new Tween(this, "x", Regular.easeInOut, ANCHOR1, ANCHOR2, TIME, true);
myTweenX.start();
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, yoyoTween);
}

//Yoyo simply runs the Tween in reverse. And then reverse of the reverse (forward).
private function yoyoTween(event:TweenEvent):void {
event.currentTarget.yoyo();
}
}
}

I would recommend downloading the source code for this movie at the bottom of the post and playing with some of the other Easing methods such as, Elastic, Strong, Bounce, Back, and None.

Alright! Before you go off and try to use Tweens all over the place I need to tell you about the most common mistake people make when using Tween objects. You must ALWAYS declare you Tween variables as globals (outside of any function) or properties (outside of any method).

If ever I see someone complaining about their Tween being buggy and cutting out halfway through the animation (and I see that complaint a LOT) it’s because they declared and ran their Tween from within a function or method. What happens (and this doesn’t ALWAYS happen, but it will eventually) is that the function finishes running before the Tween does. Then the Flash Run-Time Environment cleans up the memory (called garbage collecting) and your tween gets deleted! before it finishes. This might not happen while you are testing it yourself, but it will happen eventually while someone else is using it.

If you have Adobe Flash CS3 then you should type the word “Tween” in the ‘action’ panel then right click it and pick the bottom option on the drop down menu ‘View Help’. That will show you the EXCELLENT help files on tweens that come along with Flash. I’m just trying to introduce you to an incredibly useful tool… there really isn’t too much to teach about how to use it. You just need to play and experiment with it yourself.

You can also download my code for the Flash movie example earlier here: Oscillator Source

Putting ’static’ to good use.

Paul — Mon, 03 Mar 2008 23:00:34 +0000

I’m going to talk about how to build a simple 4 function calculator using static variables and meathods in Flash ActionScript 3.0. This is my first tutorial, so if you have questions or comments, I would appreciate them and will do what I can.

First of all we want to think through how this is going to work. I wanted two types of buttons; The digit buttons (1, 2, 3…) and the operator buttons (+, -, =…) and so I created 2 simple MovieClips that are almost the same as my base and then assigned them custom classes which I planned to make later.
The buttons are just a simple gray box with rounded corners (which doesn’t matter… make it whatever you want) and a small textField with instance name “btnKey” (which does matter, at least for my code).
None of that goes on the stage. I want to add everything to the stage with code so that it’s a simple matter of giving them instance names and passing them their initial values.Just to give ourselves something to work with I filled in the basics of our button classes

package classes {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

public class BaseDigitBtn extends MovieClip {
private var num:Number;

public function BaseDigitBtn(numP:Number) {
this.num = numP;
btnKey.text = String(numP);

mouseChildren = false;
buttonMode = true;

stop();
addEventListener(MouseEvent.MOUSE_UP, OnRelease);
}

private function OnRelease(event:MouseEvent):void {
/****I will decide what happens here later****/
}
}
}

I pretty much use the same code for both BaseDigitBtn and BaseFuncBtn, only one receives a string var while the other receives a number.

…

public function BaseFuncBtn(disp:String, strP:String) {

this.str = strP;

btnKey.text = disp; mouseChildren = false;

buttonMode = true;

stop();

addEventListener(MouseEvent.MOUSE_UP, OnRelease);

}

…

Now if we want we can write the code to put these buttons on the stage. It’s only a few lines of code really that are copied and pasted till I’m blue in the face then with little added changes in each:

/**Importing my 3 custom classes**/

import classes.BaseDigitBtn;

import classes.BaseFuncBtn;

import classes.Calc; //I will talk about this class in a second… just hold on.Calc.clearField(); //I needed to initalize some variables

/*************Creating all my button instances*********************/

var Btn1:BaseDigitBtn = new BaseDigitBtn(1);

var Btn2:BaseDigitBtn = new BaseDigitBtn(2);

var Btn3:BaseDigitBtn = new BaseDigitBtn(3);

var Btn4:BaseDigitBtn = new BaseDigitBtn(4);

var Btn5:BaseDigitBtn = new BaseDigitBtn(5);

var Btn6:BaseDigitBtn = new BaseDigitBtn(6);

var Btn7:BaseDigitBtn = new BaseDigitBtn(7);

var Btn8:BaseDigitBtn = new BaseDigitBtn(8);

var Btn9:BaseDigitBtn = new BaseDigitBtn(9);

var Btn0:BaseDigitBtn = new BaseDigitBtn(0);

//The first peram in the following declerations is what is displayed on the

//button. The second peram is the name of the opperator.

var BtnA:BaseFuncBtn = new BaseFuncBtn("+", Calc.ADD);

var BtnS:BaseFuncBtn = new BaseFuncBtn("-", Calc.SUBTRACT);

var BtnM:BaseFuncBtn = new BaseFuncBtn("X", Calc.MULTIPLY);

var BtnD:BaseFuncBtn = new BaseFuncBtn("/", Calc.DIVIDE);

var BtnE:BaseFuncBtn = new BaseFuncBtn("=", Calc.EQUALS);

var BtnC:BaseFuncBtn = new BaseFuncBtn("C", Calc.CLEAR);

var BtnPN:BaseFuncBtn = new BaseFuncBtn("+/-", Calc.POS_NEG);

var BtnDec:BaseFuncBtn = new BaseFuncBtn(".", Calc.DECIMAL);

/*****************Placing those buttons on the stage******************/

for(var i = 1; i < 10; i++) {

addChild(this["Btn" + i]);

this["Btn"+i].x = 10 + ((i-1)%3)*50;

this["Btn"+i].y = 10 + (int((i-1)/3))*34;

}

addChild(BtnA);

BtnA.x = 160;

BtnA.y = 10;

addChild(BtnS);

BtnS.x = 160;

BtnS.y = 44;

addChild(BtnM);

BtnM.x = 160;

BtnM.y = 78;

addChild(BtnD);

BtnD.x = 160;

BtnD.y = 112;

addChild(BtnE);

BtnE.x = 110;

BtnE.y = 112;

addChild(Btn0);

Btn0.x = 60;

Btn0.y = 112;

addChild(BtnC);

BtnC.x = 10;

BtnC.y = 112;

addChild(BtnPN);

BtnPN.x = 110;

BtnPN.y = 146;

addChild(BtnDec);

BtnDec.x = 60;

BtnDec.y = 146;

/**********A cheap (not the best, but good enough for us) easy way to keep the display refreshing******/

addEventListener(Event.ENTER_FRAME, OnEnterFrame);

function OnEnterFrame(event:Event):void {

digitDisplay.text = Calc.getDispNum(); //returns a string

}

So, now that we’ve made all the basic buttons, it’s time to get into the heart of this calculator. Everything happens in one class I called Calc.
First of all I want to explain that I usually like to make public static constants for a lot of my strings that I want to use as a parameter because it makes it easier to debug if you make a typo. You saw them being used when I created the instances of my operator buttons and here they are being declared in my Calc class:

package classes {

public class Calc {

/*****Useing these makes debuging easier and is good practice****/

public static const ADD:String = "add";

public static const SUBTRACT:String = "subtract";

public static const MULTIPLY:String = "multiply";

public static const DIVIDE:String = "divide";

public static const EQUALS:String = "equals";

public static const CLEAR:String = "clear";

public static const DECIMAL:String = "decimal";

public static const POS_NEG:String = "positive/negative";

public static const SQRT:String = "sqrt";

public static const SQUARE:String = "square";

public static const POWER:String = "power";

public static const BACK:String = "back"; public static var isActive:Boolean; //Used to tell me what to display, the total or the number being entered.

public static var activeNum:Number; //The number being entered.

public static var decVal:Number; //Used to place the next decimal at the Nth place.

private static var total:Number;

private static var activeFunc:Function; //Points to the opporator function currently active.

public function Calc() { //This constructor isn’t really used.

clearField();

}

public static function clearField():void { //Resets the calculator.

total = 0;

activeNum = 0;

isActive = false;

decVal = -1;

activeFunc = addition;

}

/*This meathod is called from the BaseFuncBtn class and is passed

the operator name of the key. Value received should be one of the

public constants declared earlier in this class.*/

public static function funcKey(str:String):void {

switch(str) {

case "add":

equals();

activeFunc = addition;

break;

case "subtract":

equals();

activeFunc = subtraction;

break;

case "multiply":

equals();

activeFunc = multiplication;

break;

case "divide":

equals();

activeFunc = division;

break;

case "clear":

if(isActive){ //If you made a mistake while entering a number, this will forgive you a little.

isActive = false;

activeNum = 0;

}else {

clearField();

}

break;

case "equals":

isActive = true; //Set to ‘true’ so you can repeat the last opperation over and over.

equals();

break;

case "decimal":

if(decVal < 0)

decVal = 0;

break;

case "positive/negative":

if(isActive){

activeNum *= -1;

}else {

total *= -1;

}

break;

default:

trace("Something went wrong. String was: " + str);

}

/*Called from the stage and is used to display the current values*/

public static function getDispNum():String {

if(decVal < 0){

if(isActive){

return(String(activeNum));

}

return(String(total));

}else {

/*If decVal is >= 0 then isActive WILL be true, so this code

here isn’t all needed. But, it’s not hurting anything either…

The computer was rounding decimals off weird (i.e. instead of 2.3

it would have something like 2.300000012) so I need .toFixed() for

the active number being entered.*/

if(isActive){

return(String(activeNum.toFixed(decVal)));

}

return(String(total.toFixed(decVal)));

}

private static function equals():void {

if(isActive){

total = activeFunc(total, activeNum);

isActive = false; //Set to ‘false’ so you can change your mind about the next opperation without re-calculating

decVal = -1;

}

private static function addition(num1:Number, num2:Number):Number {

return(num1 + num2);

}

private static function subtraction(num1:Number, num2:Number):Number {

return(num1 – num2);

}

private static function multiplication(num1:Number, num2:Number):Number {

return(num1 * num2);

}

private static function division(num1:Number, num2:Number):Number {

return(num1 / num2);

}

Notice that almost everything in that class is STATIC. This is so we don’t have to create an instance of the class to use them. For example, in my OnEnterFrame function I used digitDisplay.text = Calc.getDispNum(); The digitDisplay is an instance of a textField that I put on the stage, while Calc is just my class.

The last thing that needs to be done is entering a little bit of code that needs to be run when you click a button. That was some fun code to come up with (not really):

/******In the BaseDigitBtn class********/

private function OnRelease(event:MouseEvent):void {

/*This just resets the active number before the next opperation. I don’t

want to erase the old active number till the last second so that I can

repeat the last opperation by pressing equals again.*/

if(!Calc.isActive){

Calc.activeNum = 0;

}

if(Calc.decVal < 0){

if(Calc.activeNum >= 0){

Calc.activeNum = Calc.activeNum * 10 + num;

}else {

Calc.activeNum = Calc.activeNum * 10 – num;

}

}else {

if(Calc.decVal < 20)

Calc.decVal++; //Decimals are annoying.

if(Calc.activeNum >= 0){

Calc.activeNum = Calc.activeNum + (num / Math.pow(10, Calc.decVal));

}else {

Calc.activeNum = Calc.activeNum – (num / Math.pow(10, Calc.decVal));

}

Calc.isActive = true;

}

/************And in the BaseFuncBtn class**********/

private function OnRelease(event:MouseEvent):void {

Calc.funcKey(str);

}

A quick explination of the BaseDigitBtn’s OnRelease function and then we are done:
Entering numbers on a calculator always places the new digit to the far right. That is easy to take care of by multiplying by 10 to shift what you have to the left and then adding your new number… untill you try to enter decimals. With decimals you have to divide by the next highest power of 10 for every spot you move to the right and this can cause some rounding errors. I take care of that in Calc.getDispNum(); with the .toFixed() which will cut it off and not show the 12,000,000th of a unit that it’s off.

You can download the source files for this tutorial here: Calculator Flash Source

It shouldn’t take long at all to add a square root operator key or sin/cos/tan keys. Try it yourself.