Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML


In this second part tutorial we’re going to add some more features to the slideshow application.

Those would be forwarding and rewinding slides, play and pause the slideshow and linkable slides. If you haven’t read the first part tutorial yet, you should do it before continue. You can read it here.

Requirements

Adobe Flash CS3

Try / Buy

Sample files:

slideshowprt2.zip

Adjust XML structure

To store the link of each slide, we just add it as an attribute to the xml file, or to be more accurate, on the image nodes. We also set the target window of the link, which might be neccesary to set in some cases. So, our xml is looking now like this:

<slideshow>
	<image src="images/fly.jpg" desc="Fly" link="http://www.wikipedia.org" target="_self"/>
	<image src="images/mouse.jpg" desc="Computer mouse" link="http://www.google.com" target="_blank"/>
	<image src="images/country.jpg" desc="Country" link="http://www.thetechlabs.com" target="_self"/>
	<image src="images/rope.jpg" desc="Rope" link="http://www.amazon.com" target="_blank"/>
	<image src="images/flower.jpg" desc="Flower" link="http://www.adobe.com" target="_self"/>
</slideshow>

Adding new objects

Since we know, how the xml looks like, we can move on to the knew stuff on the stage. In the mcInfo movieclip we’ve added 4 new buttons. Pause/Play and Forward/Rewind, which will later be assigned to event listeners. On the main stage is a invisible button as big as the size of the slides which will be used to open the links defined in the xml.
Alright, that’s already enough to go on with the coding part.

Adding new variables

First of all, we need to add some new variables to our script.

To know, if the slideshow is currently playing or paused, we set a flag:

var bolPlaying:Boolean = true;

And we also store the current slide link and target window in a variable:

var strLink:String = "";
var strTarget:String = "";

Init function

This is all we need for the variable. Now let’s take a look about what’s changing in the init function of the slideshow. We added the following two lines at the beginning of the function to prevent the user to click any button as long as the xml file hasn’t been loaded completely:

	mcInfo.visible = false;
	btnLink.visible = false;

We’ve also changed the function that will be called once the slideTimer event is fired. Now the function nextSlide() will be called, which we’ll create later:

	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

On the last line of the initSlideshow() function we add the event listeners for the buttons. The play and button pause event listeners will be assigned to the same function togglePause(). The next and previous button will be asssigned to the nextSlide() and previousSlide() function. And last of all, we connect the invisible link button that covers the slide area with the goToWebsite() function. And since our slideshow will automatically be playing at the beginning, we hide the play button.

	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);
	mcInfo.btnPlay.visible = false;

onXMLLoadComplete function

Once the xml is completely loaded, we need to show the mcInfo and the button link again. So we add the following two line of code to the function onXMLLoadComplete()

	mcInfo.visible = true;
	btnLink.visible = true;

And since our switchSlide() function will now need to have the index number of the slide, we add a zero as the parameter. We’ll explain the changes in the switchSlide() function later.

	switchSlide(0);

NextSlide/PreviousSide function

Let’s take a look at the nextSlide() and previousSlide() functions. They are called when clicking the next and previous button and the nextSlide() function is also called when the Timer event of the sliderTimer has been fired.
The nextSlide() function checks, if there are any slides left to move on. If so, the current switchSlide() function will be called with the next slide index. If there are no more slides left, then the parameter will be zero standing for the first slide.
The previousSlide() function works the same way. If there are slide we can go back, then the switchSlide() function will be called with the previous slide index. If we’re already on the first slide, then we start the slideshow from the last slide with calling the switchSlide() function with the parameter of the total slide count minus one since the array count begins with zero.

function nextSlide(e:Event = null):void {
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	else
		switchSlide(intSlideCount - 1);
}

SwitchSlide function

Since the nextSlide() and previousSlide() functions are now handling the checking for the slides, we can take out this part in the switchSlide() function.
To prevent the user from clicking too fast on the next and previous button, we check, if the tweener is still fading in the slides. If so, we just ignore the action. We’re doing this by adding the following if-statement to the first line of the switchSlide() function.

	if(!Tweener.isTweening(currentContainer)) {

Now we only need to set the new link and the target of it. This will be done exactly the same way as setting the description of the slide.

		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

FadeSideIn function

The fadeSlideIn() function has also a small addition. We check if the slideshow is currently playing and show the number of seconds to the next slide. If the slideshow is paused, we show a status message. The text will be assigned to the lbl_info label.

	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

OnSlideFadeIn function

On the onSlideFadeIn() function we now need to check, if the slideshow is playing. If so, we can start the timer again:

	if(bolPlaying && !slideTimer.running)
		slideTimer.start();

TogglePause function

The togglePause() function will be called when the user clicks on the play and pause button. First, we check, if the slideshow is playing, if so, we show the play button, set the bolPlaying variable to false, change the status message of the lbl_info label to “Slideshow paused” and stop the timer.
If the slideshow is currently paused, we show the pause button, set the bolPlaying variable to true again, show the time to the next slide and restart the timer.

function togglePause(e:MouseEvent):void {
	if(bolPlaying) {
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		bolPlaying = false;
		mcInfo.lbl_loading.text = "Slideshow paused";
		slideTimer.stop();
	} else {
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		bolPlaying = true;
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		slideTimer.reset();
		slideTimer.start();
	}
}

GotToWebsite function

The last function we need to define is the goToWebsite() function. This function will be called once the user clicks on the invisible button. It will check, if the strLink variable is empty or null. If not, the link will be opened.

function goToWebsite(e:MouseEvent):void {
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

We’ve already reached the end of the second part of the slideshow tutorial. We hope that you enjoyed reading it and we appreciate any kind of feedback.

Note

The feature for clicking the invisible button only works, when you’re running the flash on a webserver or in the flash sdk.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:Number =	1;

// flag for knowing if slideshow is playing
var bolPlaying:Boolean = true;
// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// current slide link
var strLink:String = "";
// current slide link target
var strTarget:String = "";
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function initSlideshow():void {
	// hide buttons, labels and link
	mcInfo.visible = false;
	btnLink.visible = false;

	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

	// add event listeners for buttons
	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);

	// hide play button
	mcInfo.btnPlay.visible = false;
}

function onXMLLoadComplete(e:Event):void {
	// show buttons, labels and link
	mcInfo.visible = true;
	btnLink.visible = true;	

	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(0);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";

	// check if the slideshow is currently playing
	// if so, show time to the next slide. If not, show
	// a status message
	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:onSlideFadeIn});
}

function onSlideFadeIn():void {
	// check, if the slideshow is currently playing
	// if so, start the timer again
	if(bolPlaying && !slideTimer.running)
		slideTimer.start();
}

function togglePause(e:MouseEvent):void {
	// check if the slideshow is currently playing
	if(bolPlaying) {
		// show play button
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		// set playing flag to false
		bolPlaying = false;
		// set status message
		mcInfo.lbl_loading.text = "Slideshow paused";
		// stop the timer
		slideTimer.stop();
	} else {
		// show pause button
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		// set playing flag to true
		bolPlaying = true;
		// show time to next slide
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		// reset and start timer
		slideTimer.reset();
		slideTimer.start();
	}
}

function switchSlide(intSlide:int):void {
	// check if the last slide is still fading in
	if(!Tweener.isTweening(currentContainer)) {
		// check, if the timer is running (needed for the
		// very first switch of the slide)
		if(slideTimer.running)
			slideTimer.stop();

		// change slide index
		intCurrentSlide = intSlide;

		// check which container is currently in the front and
		// assign currentContainer to the one that's in the back with
		// the old slide
		if(currentContainer == sprContainer2)
			currentContainer = sprContainer1;
		else
			currentContainer = sprContainer2;

		// hide the old slide
		currentContainer.alpha = 0;
		// bring the old slide to the front
		mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

		// create a new loader for the slide
		slideLoader = new Loader();
		// add event listener when slide is loaded
		slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
		// add event listener for the progress
		slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
		// load the next slide
		slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

		// show description of the next slide
		mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

		// set link and link target variable of the slide
		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

		// show current slide and total slides
		mcInfo.lbl_count.text = (intCurrentSlide + 1) + " / " + intSlideCount + " Slides";
	}
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";
}

function goToWebsite(e:MouseEvent):void {
	// check if the strLink is not empty and open the link in the
	// defined target window
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

function nextSlide(e:Event = null):void {
	// check, if there are any slides left, if so, increment slide
	// index
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	// if not, start slideshow from beginning
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	// check, if there are any slides left, if so, decrement slide
	// index
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	// if not, start slideshow from the last slide
	else
		switchSlide(intSlideCount - 1);
}

// init slideshow
initSlideshow();

Did you enjoy this article?
Share the love
Get free updates and win TTL prizes

Other Posts You Might Like

79 Responses to “Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML”

  1. Jeff says:

    Hi…

    Did anyone manage to get .swf files loaded instead of image files?

    I’m assuming it must be to do with the script below

    function addSlideContent():void {
    // empty current slide and delete previous bitmap
    while(currentContainer.numChildren){Bitmap(currentContainer.getChildAt(0)).bitmapData.dispose(); currentContainer.removeChildAt(0);}

    // create a new bitmap with the slider content, clone it and add it to the slider container
    var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
    currentContainer.addChild(bitMp);
    }

    any help would be appreciated

    thanks

  2. Chachie says:

    Rafael, wondering if you can help me create this code to open in new window instead of turning from home page where you have to hit back to view home page. I would rather have a new window open but can’t figure out how to code it. here is the code:
    fm_button.visible = false;

    // Tweener
    // http://code.google.com/p/tweener/
    import caurina.transitions.Tweener;

    // To make a link to an external page, write label as “Label|URL” in array value
    // EXAMPLE 1: “Flash |http://www..com”
    // EXAMPLE 2: “new window|http://www..com”
    var menu_label:Array = new Array(“WELCOME|http://www..com”, “CONTACT” );
    var total:Number = menu_label.length;
    var center_x:Number = 470;
    var center_y:Number = 800;
    var i:Number = 0;
    var page:Number;
    var main_menu:MovieClip = new MovieClip();
    stage.addChild(main_menu);

    for( i = 0; i < total; i++ )
    {
    var btn = new cp_button();
    btn.name = “cp_btn” + i;
    btn.x = center_x;
    btn.y = center_y;

    btn.scaleX = btn.scaleY = btn.alpha = 0;
    btn.item_no = i;

    btn.cp_button_pic.gotoAndStop( i + 1 );
    btn.addEventListener( Event.ENTER_FRAME, btn_enter );
    btn.addEventListener( MouseEvent.ROLL_OVER, btn_over );
    btn.addEventListener( MouseEvent.ROLL_OUT, btn_out );
    btn.addEventListener( MouseEvent.CLICK, btn_click );

    var each_substring:Array = menu_label[i].split(“|”);
    btn.cp_button_label.fm_label.text = each_substring[0];
    btn.item_url = each_substring[1];
    main_menu.addChild(btn);
    }

    function btn_over(e:MouseEvent):void
    {
    e.target.over = true;
    }

    function btn_out(e:MouseEvent):void
    {
    e.target.over = false;
    }

    function btn_click(e:MouseEvent):void
    {
    var mc = e.target.parent;
    if( mc.item_url != undefined )
    navigateToURL( new URLRequest( mc.item_url ), “_parent” );
    else
    change_page(mc.item_no);
    }

    function btn_enter(e:Event):void
    {
    var mc = e.target;
    if( mc.over == true )
    mc.nextFrame();
    else
    mc.prevFrame();
    }

    function change_page(no:Number):void
    {
    page = no + 1;
    play();
    }

  3. lilien says:

    hi,

    great tutorial. i’m using different sized images and using the current code you can still see the previous image. is there anyway to make sure that each image fades out completely?

    cheers lilien

  4. Ishia says:

    Hey Rafael very nice Tutorials:) Thanks alot. I am using the concept of the first tutorial with some minor changes on my personal website however I am having a problem getting to actually display. I can view the SWF file and it works just fine also the HTML file. The problem is when I embed it into my index file it does not play. Do you have any ideas on why this could be happening. Thanks

  5. Tru says:

    I was just wondering if we can include the ability to read descriptions as html (rather than plain text) I’de like to boldface some of the words in the the XML file.?

    Awesome Tutorial!

    Thanks
    Tru

  6. Tru says:

    Rafael, have you been able to figure out how to remove previous images when new ones have loaded, this would help when images are not identical sizes.

    Tru

  7. Tru says:

    For those wanting to get rid of the current image try this: ==> add currentcontainer.alpha = 0 above its current location as shown below:

    ———————————————————————-

    // change slide index
    intCurrentSlide = intSlide;

    // check which container is currently in the front and
    // assign currentContainer to the one that’s in the back with
    // the old slide below is where I duplicated currentcontainer.alpha = 0
    currentContainer.alpha = 0;
    if(currentContainer == sprContainer2)
    currentContainer = sprContainer1;
    else
    currentContainer = sprContainer2;

    // hide the old slide
    currentContainer.alpha = 0;

  8. Tru says:

    Never Mind the question about the HTML, I was able to get Boldfacing to work using </b> & <b>

  9. Scott says:

    How exactly do you go about changing the image size?
    Also, is there a way to get the image to display in the center of the stage (at least horizontally)?

    Lets say that I want to be able to put images sized 800×533 pixels, what would I change/add to the code?

  10. Mike Peters says:

    Is there a way to modify this code to allow the use of external image locations in the XML file. I want to store all images on a image server website to share across multiple websites

    eg
    http://wwww.image.mywebsite.com/file/tree.jpg

  11. SouthWind14 says:

    I saw another blog review this one a while back and they liked it too. ,

  12. Greg says:

    I’m trying to find a way to create two movieclips that load the same slideshow image. Essentially, currentContainer and a duplicateContainer. So when a new image loads, it is placed in both movieclips at the same time, same fade in, etc…

    My current attempts result in the image being loaded into one movieclip or the other, but not both at the same time.

    Anyone know what needs to be done to achieve this?

    Thanks,

  13. Steve says:

    I got the underneath images to disapear and also center the images. Note I loathe AS as it is so complicated for me, so sure to be a better way to do it…

    I modified the original downloadable source file on this page and made the following modifications. Note:I am not sure if the code lines will wrap here or break to a new line, so correct if necessary…

    replace:

    // reference to the current slider container
    var currentContainer:Sprite;

    with:

    // reference to the current slider container
    var currentContainer:Sprite;
    // reference to the non current slider container
    var nonCurrentContainer:Sprite;

    replace:

    if(currentContainer == sprContainer2)
    currentContainer = sprContainer1;
    else
    currentContainer = sprContainer2;

    with:

    if(currentContainer == sprContainer2) {
    currentContainer = sprContainer1;
    nonCurrentContainer = sprContainer2;
    } else {
    currentContainer = sprContainer2;
    nonCurrentContainer = sprContainer1;
    }

    replace:

    var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
    currentContainer.addChild(bitMp);

    with:

    var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
    currentContainer.addChild(bitMp);
    nonCurrentContainer.alpha = 0;
    currentContainer.x = (stage.stageWidth / 2) – (currentContainer.width / 2);
    currentContainer.y = (stage.stageHeight / 2) – (currentContainer.height / 2);

  14. Stefan says:

    Thanks for that script! I´m a bloody beginner and it helped me to understand many things! My suggestion: write a part 3 and make a sequel out of it (if you´ve the time). I added a slide navigation (1,2,3 …) but it´s spaghetti-code … so …

  15. Stefan says:

    Me again.

    I found a bug, which you can trace with:
    trace(sprContainer1.numChildren);
    trace(sprContainer2.numChildren);

    You will see that after a few minutes of rotating, you will have dozens of childs and your cpu is under heavy duty by flash.exe

    Here my suggestion (i´m a beginner, so be careful!):

    Remember the last container with a new sprite oldContainer.

    //Hide the old slide
    currentContainer.alpha=0;
    oldContainer=currentContainer;

    and in the function fadeSlideIn delete unwanted childs:
    if (oldContainer.numChildren==1) oldContainer.removeChildAt(0);

    If you then delete all tweens before starting a new one …

    Tweener.removeAllTweens();
    //Fade the current container in and start the slide timer when the tween is finished
    Tweener.addTween(currentContainer, {alpha:1, time:FADETIME, onComplete:onFadeSlideIn});

    … you don´t need any checks like if(!Tweener.isTweening(currentContainer)){

    … so the user don´t has to wait, when he want´s to see the next slide …

  16. @ memory leaks, tested on ie8, ff, chrome:
    Please try something like this one
    (if useless delete the comment):
    ———————————————
    function fadeSlideIn(e:Event):void {
    // ADDITIONS BEGIN
    // —-
    // remove unused childs
    while(currentContainer.numChildren)
    {currentContainer.removeChildAt(0)};
    // force immediate garbage collection
    // see grant skinner’s article at
    // http://www.gskinner.com/blog/
    // archives/2006/08/as3_resource_ma_2.html
    try {
    new LocalConnection().connect(‘foo’);
    new LocalConnection().connect(‘foo’);
    } catch (e:*) {}
    // —
    // ADDITIONS END
    // add loaded slide from slide loader to the
    // current container
    addSlideContent();
    …….
    ———————————————
    and
    BIG THANKS to all the friendly people here
    REALLY BIG THANKS to the tech labs developer/s

  17. Marish says:

    My timer is malfunctioned. When i press the pause button, it works (turns invisible, play button becomes visible, and en the Infobar prints “Slideshow Paused”, however, the timer (slideTimer) does not stop, and the slideshow continues due to the pause. What’s wrong?

    // ——————–[ CODE (AS3) ]———————-\\

    function togglePause (evt:MouseEvent):void
    {
    if (bolPlaying == true)
    {
    mcInfo.btnPlay.visible = true;
    mcInfo.btnPause.visible = false;

    bolPlaying = false;
    mcInfo.lbl_loading.text = “Pause”;
    slideTimer.stop();
    }

    else if (bolPlaying == false)
    {
    mcInfo.btnPlay.visible = false;
    mcInfo.btnPause.visible = true;

    bolPlaying = true;
    mcInfo.lbl_loading.text = “Neste bilde om ” + timerDelay / 1000 + ” sek.”;

    slideTimer.reset();
    slideTimer.start();
    }
    }

    ———————————————————-

    Thanks,
    Norwegian dude

  18. Warrior_Elite says:

    This tutorial is great! Good job! I want to add a few buttons on the side so that I can go to specific slides? Do I have to add a name/ID on the XML, and reference it with the buttons? Or do have to create a third child to hold a specific image?

    All help is greatly appreciated!

  19. pominette says:

    It is possible to put a button full screen please??
    How to make
    Thank you very much of your answer ;)

  20. nate says:

    how can i make this gallery a true fit gallery so it can fill the whole screen ??

  21. Gemma says:

    Thank you for the tutorial Rafael.
    I know you have a lots of requests but if you or anybody have a bit of time to explain how to call swf would be very appreciate.

    Cheers,
    Gemma

  22. Kunal Shewale says:

    Hey, Can you please help me on modifying the above tutorial to following requirements.

    1) I need to add n number of images but only 25 images should be visible at any time.
    2) Images thumbnail could move left and right as per the mouse move direction.
    3) To navigate between the pages (25 image thumbnail on each page) on click of back and next.

    I am working on it but finding it difficult to customize the above code. I am novice to Action Script 3.0.

    Any help would be highly appreciated.

    Thanks in advance.

  23. Parasar says:

    Thanks a lot Rafael

  24. Aliz says:

    Has anybody tried to insert thumbnails in this gallery?

  25. kriz says:

    this is just perfect
    i deleted a few things i didnt need and changed another few

    BUT, the images ( not the same size as yours, tho i did change the size of the slideshow and the mask ) they wont appear their actual size ( 684 x 437 ) they show like 684 x 300 or something like that,
    does anyone have any idea on how to deal with this problem

    i just need the pictures i have ( 684 x 437 ) look their actual size, not smaller as they do right now

    someone please help me with this just a moment

  26. Andy D. says:

    Amazing tutorial! I’m trying to add numbered thumbnails to the slideshow. Would anyone be able to walk me through the steps to do this?

  27. Thanks for sharing! I look forward in viewing more of these articles.
    <a href=”http://www.sense2.com.au/”>yoyos</a>

  28. Thanks for sharing! I look forward in viewing more of these articles.
    http://www.sense2.com.au/

Leave a Reply

TTL VIP
Become a TTL VIP Member & Get Notified of The Best Changes in Technology, Plus Win Prizes in Our VIP Only Contests...

Tech News Tech Tutorials Smartphone News Tablet News Gaming News Free Software Infographics Contact