Flash XML Image Slide Show Action Script 3

Posted by admin

August 23, 2008

Hi, every one. I got many queries to write an article regarding How to create Image Slide Shows. Slide shows also referred as web slideshow or web slide shows can be made using java script and Flash. I prefer Flash action script Image Slide Shows over Javascript image slide shows.

Reason for that is with flash we can have variety of flash animations and effects available in action script api. Also we can make our customized flash animated effects. In java script we are very limited in terms of transitions and effects during the image slide show. Also with flash we can have interactive flash side show and banners. Another benefit of using flash image slide show is we can have text added to the animation.

In this flash tutorial we will learn how to create a basic image slide show in flash action script 3, and the type of applications that can be made by using flash image slide shows and few types of flash slideshows.

In future I plan to write a flash component for Image Slide show. I have attached the flash example and source code with the article you can download it at the link at the end of the article.

There are number of flash slide show or presentation creation software available online. They make life complex. In reality it is quite easy to make you own flash animation.

If you are looking for a customize flash animation, image slide show or any flash application you may contact admin@imaginationdev.com

I will be glad to help you out. If you need any advice you may post comments under this article.

There are number of types of flash animation that can be used in creating flash slide shows or animations.

- Flash 3d Slide Show (slideshow)

- Flash Presentation Slide Show (slideshow)

- Flash Banners Slide Show (slideshow)

- Flash Image Galleries Slide Shows (slideshow)

- Flash Text Slide Shows (slideshow)

- Flash Interactive Slide Shows (slideshow)

- Flash Image Slide Shows with Effects

There are 2 basic styles to make flash image slide shows. Namely dynamic image or picture slide show and static image or picture slide show.

Static flash picture slide show usually consists of some images that are internal to the flash and are embedded in the swf files. They have a benefit that there can be various customized animations that we can have in static image slide shows. The problem is they lack in security. There are numbers of flash de-compilers available which can extract the images and other people might use them.

If you want to have more security in terms of image copy rights its always better to use dynamic image or picture slideshow. Dynamic image slideshow are developed by loading external images at run time through XML.

In my flash picture slideshow tutorial I have used the dynamic approach also in flash action script 3 now its really easy to control animation and transition effects through tween classes.

Also by loading external we have a benefit that we can use flash xml image slideshow as a flash random image slideshow.

Here Goes the code for the Loading and Display and Tweening. I have also attached the source code along with all files at the end of the article.

Code:



////////////////////////////////////////////////////////////////////////
// Imports
////////////////////////////////////////////////////////////////////////

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

////////////////////////////////////////////////////////////////////////
// Variables Initiation and Declaration
////////////////////////////////////////////////////////////////////////

var pic_prev_mc:MovieClip=new MovieClip();
var pic_mc:MovieClip=new MovieClip();
var picInitial_mc:MovieClip=new MovieClip();
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML;
var thumbLoader:Loader;
var index:int=0;
var picArray:Array=new Array();
var timer :Timer=new Timer(1000,4);
var curr:int=1;
var totalPictures:int;
var flag:int=0;
var bitmap:DisplayObject;
var effect:Object=Photo;

////////////////////////////////////////////////////////////////////////
// Function XMl Loading
////////////////////////////////////////////////////////////////////////
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
var httpHeader : URLRequestHeader = new URLRequestHeader(”pragma”,”no-cache”);
var path:String=”Banner.xml”;
xmlLoader.load(new URLRequest(path));

function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
stage.scaleMode = StageScaleMode.EXACT_FIT;
stage.stageWidth= xmlData.Width;
stage.stageHeight=xmlData.Height;
getValues(xmlData);

}// end of Load XML
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR,funcError);
function funcError(event:IOErrorEvent){
trace(”Error occured in XML Loading”);
}
function getValues(input:XML) {
var xmlCategoryList:XMLList = input.children();
totalPictures=input.children().length();
var item:XML;
for each (item in xmlCategoryList) {

loadThumbs();
}
}
////////////////////////////////////////////////////////////////////////
// Function loadThumbs
////////////////////////////////////////////////////////////////////////
function loadThumbs():void {
thumbLoader = new Loader();
thumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.addEventListener(Event.INIT, thumbLoaded);
thumbLoader.load(new URLRequest(String(xmlData.path[index])));//access the thumbnails

function loadThumbProgress(e:ProgressEvent):void {
}
////////////////////////////////////////////////////////////////////////
// Function thumbloaded
////////////////////////////////////////////////////////////////////////
function thumbLoaded(e:Event):void {
for(var i:int=0;i<totalPictures;i++){;
picArray[i]=xmlData.path[i];

}
addChild(picInitial_mc);
picInitial_mc.addChild(thumbLoader.content);
bitmap=thumbLoader.content;
}
function xmlLoadFail(event:IOErrorEvent):void {
trace(”error loading the XML”);
}
}
////////////////////////////////////////////////////////////////////////
// Function Next Pic Loading
////////////////////////////////////////////////////////////////////////

function nextPicLoad(string:String) {
thumbLoader = new Loader();
thumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.addEventListener(Event.INIT, thumbLoaded);
thumbLoader.load(new URLRequest(String(string)));

function thumbLoaded(e:Event):void {
stage.addChild(thumbLoader.content);
addChild(pic_mc);
addChild(thumbLoader.content);
pic_mc.addChild(thumbLoader.content);
bitmap=thumbLoader.content;
//Blinds, Fade, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, or Zoom.
TransitionManager.start(pic_mc, {type:Fade, direction:Transition.IN, duration:1, easing:Regular.easeInOut});
TransitionManager.start(pic_mc, {type:Wipe, direction:Transition.IN, duration:1, easing:Regular.easeIn});

}
function loadThumbProgress(e:ProgressEvent):void {
}

}

////////////////////////////////////////////////////////////////////////
// Function Pic Display
////////////////////////////////////////////////////////////////////////

function picDisplay() {
timer.start();
timer.addEventListener(TimerEvent.TIMER_COMPLETE,funcTimer);
function funcTimer(event:TimerEvent) {
for(var k:int=0;k<pic_mc.numChildren;k++){
pic_mc.removeChildAt(k);

}
if (flag==0) {
flag=1;
removeChild(picInitial_mc);
} else {
removeChild(pic_mc);
}
addChild(bitmap)
nextPicLoad(picArray[curr]);
curr++;

if (curr==totalPictures) {
curr=0;
}
timer.reset();
timer.start();
}
}
picDisplay();
stop();

I have attached the code for free flash image slideshow. you are free to use and modify the code the way you like.

Kindly Let me know about your remarks if this article is being helpful in solving your problem.

Download Sample Project : Image Slide Show Source Code

A running sample can be viewed at the following link

http://actionscript-blog.imaginationdev.com/samples/banner-slideshow/Banner.swf

Action Script 3.0, Action Script Development, flash

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

GOOD ARTICLE. But the link you given for Download project and sample project does not work. Kindly make a note of it.

Flash XML Image Slide Show Action Script 3

Comments

Leave a comment

Popular Articles

Recent Posts

Topics

Archives

Links

Topics