Posts

Build a Image Rotator using ActionScript 3 and XML

Image
We will build a nice image rotator that has a navigation.
The image rotator works like this: the images are rotated at an interval of 5 seconds if the mouse cursor is outside the rotator area, when the mouse is over the rotator the rotation stops; when your mouse it's over one button from the navigation menu the rotator jumps to the corresponding slide.
This is how our image rotator will look. 1. Image rotator project structure.Make a new folder a name it imageRotator, inside create the fallowing folder structure: cssxmlimagesro sorin utilsFor this tutorial we will reuse some classes from a previous tutorial, the CustomButton class and the TextLoader class. You can read more about the classes here: more about CustomButton class and more about TextLoader class.
The utils folder contains the TextLoader class, we will use this class to load the xml file and the CustomButton class, used to add navigation to our image rotator.
If you want to fallow the tutorial step by step dow…

Load multiple images with actionscript 3

Image
In this tutorial we will learn how to load multiple images using actionscript 3 and xml. Let's see how we can do this!
1. Establish the project structure.Make the same folder hierarchy like in the image below:
ro/sorin/utils/ contains the TextLoader class, we will use this class to load the xml file.
If you want to fallow along you can download it TextLoader.as, place the file inside the utils folder.

The other folders are self-explanatory.
2. Creating the xml file structure.The xml file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<images>
<image url="assets/images/img_01.jpg"/>
<image url="assets/images/img_02.jpg"/>
<image url="assets/images/img_03.jpg"/>
<image url="assets/images/img_04.jpg"/>
<image url="assets/images/img_05.jpg"/>
</images>

Every image tag contains the data for one image.
The url is a attribute of the image tag and contains th…

Actionscript 3.0 Xml driven menu.

Image
We will build a menu witch is powered by an xml file; this offers a lot of flexibility because you can add/remove buttons by modifying the xml file and not by modifying the .fla file. The buttons will maintain they down state when clicked. We will not have any code on the timeline, all the code will reside in external classes, so it’s not only an xml driven menu it’s also coded in OOP style. We will use something called optional parameters; they are parameters that have a default value. To better understand this, let look at a simple example.

function sayMyName(name:String = "Sorin"):void {
trace (name);
}
//We have a function with a parameter called name witch has a default value(Sorin),
//if we call the function with no parameter passed to it the output will be Sorin sayMyName(); output: Sorin
//if we call the function with a custom value("Elvis") the function will output Elvis sayMyName("Elvis"); output: Elvis
Here is how the menu looks wit…

ActionScript 3 button that stay in the down state.

Image
In this tutorial we will build a button (in fact is a movieclip that acts like a button and we will not build a button, we will make a menu) that has an over state, an out state and a down state. Like the title says the button will stay in the down state when is clicked (selected) and because the selected button will look different from the others buttons the user will know exactly on what page is.This is how the menu will look: 1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as myButton.fla.2. Insert a new layer (Insert>Timeline>Layer), name the layers beginning from the top: actions and buttons. In the Property Inspector set the frame rate to 30.3. Select the Rectangle tool set the stroke to none, pick a color (I have picked black) and on the buttons layer draw a rectangle. Set the measurements of the rectangle as fallows: width = 170, height = 40. Select the rectangle and press F8 to convert it to a MovieClip. Se…

Scrolling photos loaded dynamically with ActionScript 3.

Image
In this tutorial we will learn how to scroll some photos that we will load dynamically from an xml file and we will scroll the photos using a custom scrollbar. We will use again the Tweener class to add a nice transition. You can add as much photos as you like.For this Flash tutorial we will use the Thumbnail class that we have used in the Photo Gallery tutorial but with some little modification. This is how the final product will look:1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as scrolling_photos.fla.2. Select the Rectangle tool set the stroke to none and the fill to #999999 and on the stage draw a rectangle 110 by 110.Select the rectangle hit F8 to convert it to a MovieClip. Set its name to thumb and set the registration point to center and click Ok.3. Press Ctrl+L to open the Library. Right click on the thumb MovieClip and select Linkage. Select Export to ActionScript checkbox, set the class name to Thumbnail and …

Photo gallery (AS 3.0).

Image
In this tutorial we will build a photo gallery. We will load the paths to the photos from an xml file and will use the Tweener class to add some nice transitions. You can download this class from Google Code download Tweener class. This is how the final product will look:1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as photo_gallery.fla.2. Select the Rectangle tool set the stroke to none and the fill to #999999 and on the stage draw a rectangle 110 by 110.Select the rectangle hit F8 to convert it to a MovieClip. Set its name to thumb and set the registration point to center and click Ok.3. Press Ctrl+L to open the Library. Right click on the thumb MovieClip and select Linkage. Select Export to ActionScript checkbox, set the class name to Thumbnail and click Ok. Select the thumb MovieClip from the stage and delete it.4. Press Ctrl+F7 to open the Components library. Select the UILoader component and drag it to the stage. …

Control sound volume.

Image
In this tutorial we will learn how to control the volume of the sound that we play in Flash.Adding sound to your site can improve the user experience but not offering a way to control the sound could irritate the user and make him go away forever, and we don’t want that. We will build a slider that will help us to increase or decrease the sound volume and will learn how to load mp3s that we import in the Flash Library.1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.2. On the stage draw a rectangle width: 100 px, height: 23 px, color: black and stroke: none. With the rectangle selected press F8 and convert it to a MovieClip. Set its name to track_mc and registration point to top left and click Ok. In the Property Inspector set its instance name to track_mc.3. Double click on the track_mc MovieClip to edit it. Lock the current layer. Insert a new one, double click on its name and rename it slider. Draw a rectangle width: 10, height: 23, c…