Here’s the tutorial overview:

* Step 1: Setup
* Step 2: Loading And Playing A Video
* Step 3: Resizing
* Step 4: Running the code
* Step 5: The Final Touch

Start the tutorial and if you have any problems, just leave a comment. Also, be sure to visit Firecode’s portfolio for other great Flash resources you can use.

There are Flash galleries that only allow you to add a limited number of images, by default. If you want to add an unlimited number of pictures to your gallery and load them in Flash, then there are a few simple steps that will help you do that.

This tutorial will teach you how to load unlimited images using Actionscript 3 and a XML file. The source code is included, so all you have to do is copy&paste a few lines of code and you’re done. Start the tutorial here and let me know if you have any problems.

For other step-by-step Flash tutorials, be sure to visit Firecode’s portfolio.

Photo source

If you like using cool effects in your projects, then this Flash tutorial will help you learn how you can create a magnifying glass effect in ActionScript 3.0.

It’s an easy two-steps tutorial that shouldn’t take you more than 15 minuted to complete. Download the source code and start creating the effect.

Don’t forget to visit Firecode’s portfolio for other excellent tutorials and Flash components.

The cool thing about this gallery is that no Flash knowledge is required for setting it up, since it’s XML driven. Another great feature is that the images will adjust according to the screen resolution.

Use this download link to get the file. Source Code Included!

You will learn 2 methods of scrolling a text:

• using the scrollV propriety of the text fields
• masking the text field

Time to complete: 15 minutes!

Although it`s a very easy to follow tutorial, you need to familiarize yourself with AS3 Event Handling and Loaders because data will be loaded from external sources.

During this tutorial you will learn:

- how using HTML and CSS inside our flash applications can sometimes simplify our work, especially when we are using a large amount of text fields, each one with it’s own formatting.
- how to load external text

To make things even easier, FireCode has also included the source code for you to use in this tutorial.  Head on over to the tutorial section of the website to start.

Time to complete: 20 minutes.

With over 6,000 downloads, this AS3 image scroller has got it going on. Use this download link to get the file and use it in your project. If you like it and want more where that came from, head on over to FWDesign’s profile and check out his huge collection of creative files.

How is this useful? Well, if you want to send a client the link for a specific image, you can do that just like with a regular HTML site.  To see how it works, here are three awesome Flash templates developed by FWDesign that you can use if you are passionate about your business and want it to grown, but don’t have the technical programmer skills to do it yourself.

Flash Template Web Deep Linking

This AS3 Flash template includes galleries, a latest news category where you can also include .swf files throught the text to make it more interactive. A professional XML video player is also available and you can successfully use it to present studies or show your visitors how you can help them.

Exclusive Photo Template – PayPal and Cart – XML Deeplinking

This template is ideal if you want to sell items directly from your website. It includes a cart and also allows users to purchase and pay through PayPal. You don’t need to know how to code to use this template because everything you need can be configured with external XML files.

Exclusive Photo Template – XML Deeplinking Resizable

In case you don’t need a shopping cart, this simpler version of the previous template includes everything from galleries and custom text windows, to customized color theme and HTML formatted text. This is an excellent aquisition for  photographers because you can showcase your work using any type of image format and the gallery will resize and display perfectly no matter the image size or format.

For other excellent Flash templates, visit FWDesign’s portfolio right here and let us know which one’s your favorite.

Click here to download the player and be sure to visit FlashXpert’s portfolio for the complete list of features that his excellent video players include.

You can download the source code here.

Step 1: Preparing the files

The purpose of loading external files is to update our content without having to modify our .fla file and generate a new swf file and upload it each time we decide to change the images or the information about them.

First we will create a folder inside the project’s folder and we will name it images. Inside this folder we will have all our images we want to load. It’s a good idea to have all the images with the same dimensions.

Second, we create an XML file. Using XML is one of the best ways for structuring external content in a logical format that is easy to understand, process, and update. We will name it data.xml. Any simple text editor can create our XML file. The structure of our XML is shown below.

Code block

<?xml version="1.0" encoding="utf-8"?>
<slide DELAY="2">
<image URL="images/1.jpg" DESCRIPTION="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<image URL="images/2.jpg" DESCRIPTION="Nam blandit dictum nibh vel mattis" />
<image URL="images/3.jpg" DESCRIPTION="Cras a magna eu libero sodales luctus nec at nulla" />
<image URL="images/4.jpg" DESCRIPTION="Nulla sed nisi sit amet ante hendrerit ullamcorper id eu neque" />
<image URL="images/5.jpg" DESCRIPTION="Vivamus quis turpis libero." />
</slide>

Copy and paste then save the file.

Now we will create the .fla file.  Open the Flash IDE and go to File, New… and choose Flash File( actionscript 3 ). Press Ctrl+F3 to bring out the swf properties panel and set the values size to 450×370 px.

Save it in the same folder as your XML file and your images folder as BannerRotator.

Step 2: Load and process the XML file

Loading the data from our external xml file will require using the URLLoader and URLRequest classes, while processing it will require using the XML Class. First we will create the variables that we will be using in the entire program.

Code block

var _delay:int = 0;
var _total:int = 0;
var _images:XMLList = null;

Variable _delay will store the amount of data before the image changes to the next image. Variable _total will store the number of images. Variable _ images will store the data about our images.

Now we will prepare the program to load our external XML.

Code block

var _loader:URLLoader = new URLLoader();
_loader.load(new URLRequest("data.xml"));
_loader.addEventListener(Event.COMPLETE, Complete, false, 0, true);

We have declared a _loader variable that will handle the loading of our file. The COMPLETE event tells the program that our XML has been loaded in our variable and it’s ready to be processed.

Code block

function Complete(e:Event):void
{
var _xml:XML = new XML(e.target.data);
_loader = null;
_loader.removeEventListener(Event.COMPLETE, Complete);
}

All the information from our loader will be stored into the local variable _xml. As a good practice we should clear our _loader variable and remove it’s event listener.

Inside our Complete function we will add the following lines of code.

Code block

function Complete(e:Event):void
{
var _xml:XML = new XML(e.target.data);
_loader.removeEventListener(Event.COMPLETE, Complete);
_loader = null;
_delay = _xml.@DELAY;
_images = _xml.image;
_total= _images.length();
}

We will use the @ operator to retrieve the attribute value we need for the _delay variable.  Variable _images will store a list with every node with the image tag. The .length() method will retrieve the number of nodes with the name image tag. Now all our variables are set.

Step 3: Loading the external images

In order to load an image we will use the Loader class. Several instances of this class will be created with a loop and stored inside an array for easy referencing.

Code block

var _loaders:Array = new Array();
function LoadImages():void
{
for (var i:int = 0; i < _total; i++)
{
var _url:String = _images[i].@URL;
var _loader:Loader = new Loader();
_loader.load(new URLRequest(_url));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, ImageLoaded, false, 0, true);
_loaders.push(_loader);
}
}

This loop will cycle through the XML file, extract the URL attribute of every image node,   pass it to a Loader instance and then push that instance into our array. To every Loader instance we attach an event listener that will fire a function once the image has been loaded.

Now we will create our function that will be fired with every image that has been loaded. But before that we will create a variable that it will check how many images have been loaded. Once we got all the images loaded we can start to slide the images.

Code block

var _counter:int = 0;
function ImageLoaded():void
{
_counter++;
if ( _counter ==  _total)
{
SetupSlider ();
}
}

Step 4: Setup the slider

First we’re going to declare some variables that we will need and import some extra classes.

Code block

import fl.transitions.Tween;
import fl.transitions.easing.Strong;
var _next:int = 0;
var _timer:Timer = null;
var _tween:Tween = null;
var _container:Sprite= new Sprite();

Tween class it will be responsible for our animation and Strong it will be our effect class. Variable _next will store the current image id in the array and it will help us to select the next one. In order to have our slides running, we will use the Timer class to have our code executed repeatedly. The _tween variable will be used to store our transition effect. The _container will store our actual image to be displayed.

Let’s modify our Complete function so we can add our _container to the dis.

Code block

Now we will create our SetupSlider function:
[codesyntax lang=“actionscript”]
function SetupSlider():void
{
addChild(_container);
NextImage();
_timer = new Timer(_delay*1000);
_timer.addEventListener(TimerEvent.TIMER, TimerListener);
_timer.start();
}

We will add our container to the diplay list of our swf so later we can add images. the NextImage function will display our first image from the array. Then a timer will count how long until the next image will appear. We are going to set the speed, which is stored in the _delay variable,  at which the Timer intervals are triggered when instantiating the class. The Timer receives its speed in milliseconds, so we have to multiply our speed value by 1000.  Our timer will run its code through a separate event listener. Finally, we need to start the Timer by using the .start() method.

Now let’s create our TimerListener function.

Code block

function TimerListener(e:TimerEvent):void
{
_next++;
if (_next == _total)
{
_next =0;
}
NextImage();
}

Inside this function we set our next image to be displayed. If _next variable will be equal to the total amount of images the _next variable will be reset to start all over.

Finally we got to the part where we build our NextImage function.

Code block

function NextImage():void
{
if(_container.numChildren>0)
{
_container.removeChildAt(0);
}
_loaders[_next].alpha = 0;
_container.addChildAt(_loaders[_next],0);
_tween = new Tween(_loaders[_next],"alpha",Strong.easeOut,0,1,1,true);
}

This function is responsible with displaying the current image set by the TimerListener function.  We check if there are any child objects inside our _container. If there is any we will remove it and clean our container then set the current image alpha to 0 ( making it invisible) so we can add a nice effect to it.  The Tween class will get this image and animate it’s alpha by making it appear slowly.

Now it’s time to hit Ctrl+Enter keys so we can test our movie. If everything is good with our code it should display some images that change after some time.

If everything is ok we should now add some info about the images that are being displayed. We will add a textfield that will contain the image description.

We will create a variable _text that will hold our data. Let’s modify our SetupSlider function by adding the following code.

Code block

var _text:TextField = new TextField();
function SetupSlider():void
{
addChild(_container);
_text.selectable=false;
_text.width = 450;
_text.height = 50;
_text.x = 0;
_text.y = 300;
addChild(_text);
NextImage();
_timer = new Timer(_delay*1000);
_timer.addEventListener(TimerEvent.TIMER, TimerListener);
_timer.start();
}

Then we modify our NextImage function to add the information of the image.

Code block

function NextImage():void
{
if(_container.numChildren>0)
{
_container.removeChildAt(0);
}
_loaders[_next].alpha = 0;
_container.addChildAt(_loaders[_next],0);
_tween = new Tween(_loaders[_next],"alpha",Strong.easeOut,0,1,1,true);
_text.text = _images[_next].@DESCRIPTION;
}

The last line will get the DESCRIPTION attribute of the current image being displayed and add it to our textfield.

Hit Ctrl+Enter key again to test our movie. Each time the image changes our text field will display the description of the current image being displayed.

Note: A working online version should include also a preloader for the images. If they are to big the user should know that an image is being loaded and the program is working correctly.

-----------------------------------------------

FireCode is a promising project created by a couple of passionate Flash developers. Our purpose is  to help you understand how Flash works and show you how to develop or customize your components. We hope you enjoyed this tutorial. Don’t forget to visit our portfolio here and to send us your questions or suggestions!