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.

When it comes to his Flash video players, FireCode has created his own, unique style. Just take a look at this slick YouTube video player:

Not only does it include a very cool design, sharing on Twitter and Facebook buttons, but it also supports all video formats that Flash Player can play, streaming and Youtube videos. If you’re tired of that same old video player design that everybody’s been using for years, then you’ve found your match.

Check out Firecode’s awesome Flash video player collection below or visit his portfolio here.

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!

FlashXpert added lot of exciting features to these new releases, like:

• - video ads

• - Share .SWF with friends, embed video or link to the video

• - captions and subtitles

If you want to play with the demos and to find out more about one (or all) of these versions, just click on any of the images and you’ll be redirected to the component’s page.

If you have questions regarding the video players, feel free to contact FlashXpert.

First we are going to work with Flash internal classes, and then we will move on to some popular open-source classes to see the differences between them. This will help you understand how things work and maybe choose what’s best for you.

To download the source files used for this tutorial, click here .

Setup scene

Create a new Flash File (for AS3). The dimensions of the stage should be about 550 x 400. Next we will draw three shapes on the stage, each one converted to a MovieClip with an instance name (look in the picture bellow).

Flash Transitions

First, we have to import the necessary classes.

Code block

import fl.transitions.Tween;
import fl.transitions.easing.*;

The first line is to import the Tween, the second one is to import the Easing classes (used for effects). The constructor of the Tween Class looks like this:

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)

And the actual code looks like this:

Code block

var _flashTransitions:Tween = new Tween(_flash, "x", Elastic.easeOut, 0, 300, 3, true);

It’s a good practice to declare a variable for the tween to have more control.
So far we have initialized our tween, the object parameter is the _flash MovieClip on the stage. We are changing its “x” propriety from its initial position ( 0 ) to the next finish position ( 300 ). Duration is used to set the speed of animation. For this animation we are using Elastic.easeOut easing effect. Another great thing is we can add events listeners to this animation. These are some of the events:
motionChange:  Indicates that the Tween has changed and the screen has been updated.
motionFinish:    Indicates that the Tween has reached the end and finished.

This is how they work:

Code block

import fl.transitions.TweenEvent;
_flashTransitions.addEventListener(TweenEvent.MOTION_CHANGE, MotionChange);
_flashTransitions.addEventListener(TweenEvent.MOTION_FINISH, MotionFinish);
function MotionFinish():void
{
trace("in motion");
}
function MotionChange():void
{
trace("finish");
}

First we’ve added the TweenEvent class, then the event listeners to our tween variable. Test the movie to check everything works as it should.
Caurina’s Tweener
Tweener syntax was created with simplicity of use in mind, while still allowing access to more advanced features. It follows a ‘one-line’ command when creating new tweenings, with no instancing required (as it’s a static Class). Also, there are no initialization methods required by Tweener, other than ‘import’ command.
Let’s see how it looks:
Tweener.addTween(_object:Object, {_parameters:Object});

And the code:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic"});

Our object parameter is _caurina MovieClip. The “x” parameter is the ending point of our tween. Tweener takes the object start position automatically. Next is the speed of the animation and finally the effect we are going to use.
As you see, there is not much difference of what we’ve previously used. Now comes the cool part. Let’s add some events to this animation. All we have to do is add two more parameters.

onUpdate  equivalent to motionChange in Flash
onComplete equivalent yo motionFinish in FLash

We are going to change the tween code like this:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic" onUpdate:CaurinaChange,  onComplete:CaurinaComplete});
function CaurinaChange():void
{
trace("caurina in motion");
}
function CaurinaComplete():void
{
trace("caurina finish");
}

That’s it ! You don’t have to import more classes and write another line of code. Pretty simple and clean.
If you test the movie, you will see the same results.
If you are using the Tweener you should know that it ads extra 8kb to your movie size. If you want to know more about Tweener you just have to take a look at the documentation of this package.
TweenMax / TweenLite
Basically,  Tweenmax and TweenLite are the same. The difference is that TweenMax adds more features to TweenLite. I will focus on TweenLite.
The constructor of the TweenLite looks like this:
TweenLite(target:Object, duration:Number, vars:Object);
And the code:

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut});

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut, onUpdate:TweenLiteUpdate, onComplete:TweenLiteComplete });

A project using TweenLite is going to have an extra 4.7kb added to its size.
Conclusion
If you run all three examples, you will see they all do the same thing. You can change almost every proprety of the object that we want to tween, from position to scaling or alpha. The main difference is that the last two examples are easy to write and clean. If you are going to make a project that doesn’t  need to many effects, it’s better to use TweenLite or Tweener ( it’s a matter of taste and size added to the resulting .swf ). For projects with elaborated effects I suggest using TweenMax as it has some nice extra features.
————————————
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!

The templates are built in AS3 and are XML driven, making it easier for you to customize and personalize it. The clean, organized designs are ideal for a pre-release website, especially if you’re eager to get people’s attention and a future revisit.

Oxylus‘ four templates are organized in two, three and four modules, depending on how much information you want to reveal to your visitors before releasing your complete website.

Two sections

This template has two sections – about and contact – which makes this version perfect for those wanting to publish just the necessary information before releasing the website.

The Coming Soon Mini Template 04 also has two sections, but the difference are the social links located at the bottom.

Three sections

This template has three simple modules: about, gallery and contact.

Four sections

Template no. 3 has four good looking modules, including a gallery where you can include screenshots of your soon-to-be-released website.

Check out Oxylus’ portfolio here for other cool Flash components.

The Right Click Customized Menu, developed by a upv2010, a FC newbie, offers a quick access to the main sections of your website, additional to the site structure. It’s very useful for games or applications where visitors are given the possibility to download images from your website.

Its main functionality is the RightClick script which allows you to access the menu anywhere on the page, by a simple right click. Check out the component’s page to see the demo and its extra features.

CurveMenu Video includes a sliding curve shape video playlist and you can customize the video playback interface to match your company’s image. There are tons of personalized style to choose from.

If you’re eager to find out more about this file’s features and see how you can build your own branded video player, click here.

This pack includes 4 of LambertGroup’s Flash video players and you can now get it at a 52% discount. The players can be set to any size you want by changing its width and height from the configuration XML file, so it can be easily integrated in your projects, HTML or Flash.

What will you get?

1. Cool XML Resizable Video Player FLV / H.264

2. Advanced XML Video Player with playlist and categories – FLV / H.264

3. FLV/H.264/YOUTUBE Video Player with categories and playlist

4. FLV/H.264/YOUTUBE Video Player with Google Analytics, categories and playlist

To find out more about this package, click here.