Slideshow Component AS3
Actionscript 3, Flash Components December 17th, 2007Slideshow Component AS3 is a free flash component that helps you create nice looking image slide shows with less or no code. The component is very easy to use, allowing you to create rich internet applications in no time. Once you’ve installed the component, drag and drop it on stage and give it the path to the XML file in which you have included images’ paths.
The Slideshow Component has an easy-to-use API. There are 33 customizable properties (scaleMode, alignType, setBorder, transitionEffect, preloaderType, transitionSpeed, autoLoad etc), so you can easily customize it to fit your own applications. The supported file types are: JPEG, GIF, PNG and SWF.
For more examples on how the component can be used, make sure to check out the Tutorials category. I hope you’ll enjoy using it.
Requirements
Authoring: Flash CS3
Actionscript: Actionscript 3 (Actionscript 2 version available here)
Player: Flash Player 9
Download Slideshow Component AS3
Documentation for this component is available here.
Permission
This component is for non-commercial use only. For commercial projects please purchase the Slideshow component.
Support
As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.
February 20th, 2008 at 2:13 pm
Thank you for your nice effort. Just wanted to write a little thing for the sake of clean code execution about this demo, if you don’t mind. If you click on a button, before the transition ends, the requested picture won’t load. For example, the current picture is #4, I click on #5, the transition begins, and if I click on (let’s say) #6, it won’t load #6. Because it is busy with loading #5…
February 20th, 2008 at 6:28 pm
Thank you for your comment…
I’ve built this component so that the user won’t be able to load another image until the transition ends…but there will be future versions of this component, so any suggestion is welcomed.
March 13th, 2008 at 3:12 am
I dragged and dropped the component on the timeline and set the path to the XML as directed in your instructions, but when I play the SWF, only the first image plays and stops. The slideshow dies not move forward.
Does this slideshow require some player controls on the screen?
Is there any way to configure it so it automatically plays all slides without requiring any user interaction?
Please advise.
March 13th, 2008 at 9:45 am
To go to the next image you use mySlideshow.nextImage() and to go to the previous image you use mySlideshow.prevImage()
In my examples, I call those methods when the user presses a button but that is not necessary. For example you can use a timer to call the nextImage() method.
March 13th, 2008 at 2:11 pm
So, my question is besides dragging the component on stage and configuring the path to the XML, what other actionscripts do I need to put on the timeline?
I am trying to create a simple slideshow with about a dozen images, to post on a website, that I want to play automatically. I don’t want any play/pause/stop/next/previous controls on screen.
Just want the slideshow to play automatically and be able to set a duration for each image.
I am not an actionscript expert; so, please provide details on how to do this simply.
Thanks.
March 13th, 2008 at 3:30 pm
Is it possible to add headline and caption text to each image? Also, can this be modified to use buttons to jump to each different slide instead of using next and back buttons? I plan on using just three slides but need to be able to jump to any of them from any given screen via numbered buttons. Thanks!
March 13th, 2008 at 4:13 pm
Raj,
See this example http://flashotaku.com/files/auto_slideshow2.zip
Steph,
For adding text to the slideshow see this tutorial http://flashotaku.com/blog/yet-another-image-gallery
To load a specific image use the loadImage() method ( example: mySlideshow.loadImage(2) ) …as you can see, the demo also uses 10 buttons to jump to a specific slide. Just make sure to use the correct index…the first image has the index 0, the second image has the index 1… mySlideshow.loadImage(2) will load the 3rd image.
March 13th, 2008 at 6:05 pm
Thank you very much!
March 13th, 2008 at 6:29 pm
I get the following error when I generate a SWF…
Description: 1120: Access of undefined property slideCompleteHandler.
March 13th, 2008 at 6:30 pm
Source: mySlideshow.addEventListener(SlideshowEvent.TRANSITION_COMPLETE, slideCompleteHandler);
March 13th, 2008 at 6:46 pm
my bad…replace slideCompleteHandler with transitionCompleteHandler in mySlideshow.addEventListener(SlideshowEvent.TRANSITION_COMPLETE, slideCompleteHandler);
I’ve corrected the source file too…you can re-download it http://flashotaku.com/files/auto_slideshow2.zip
March 13th, 2008 at 8:32 pm
Thanks for the quick responses. This is a very useful component.
P.S. I was getting a similar error with the AS3 component yesterday. You may want to test it as well.
March 13th, 2008 at 8:37 pm
Is there any way to stop the looping of the slideshow.
Also, I’m assuming…
var myTimer:Timer = new Timer(2000);
… sets each slide duration to 2 seconds, correct?
March 13th, 2008 at 8:56 pm
To stop the looping use myTimer.stop();
Let’s say you have a button with the instance name “myButton” and you want to stop the looping when the button is pressed. For this you need the following code:
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent){
myTimer.stop();
}
you’re correct about the slide duration
March 13th, 2008 at 9:06 pm
I don’t have a button to stop the animation. In this case, is there a way to stop the slides after the last slide has displayed?
March 13th, 2008 at 9:43 pm
I’ve added this to the example.
http://flashotaku.com/files/auto_slideshow2.zip
March 13th, 2008 at 9:55 pm
Works great! - Thanks.
March 16th, 2008 at 9:14 pm
Maybe I’m stupid, but how do I use this so that it only displays the images in my page, not the controls? Thanks.
March 16th, 2008 at 9:29 pm
OK, I answered my own question. Thanks.
March 16th, 2008 at 10:20 pm
OK then :)
March 30th, 2008 at 10:49 pm
How do I keep the slideshow looping?
March 31st, 2008 at 8:03 am
See this tutorial http://flashotaku.com/blog/building-an-auto-slideshow-with-as3
April 17th, 2008 at 11:24 pm
I’m pretty sure this is a very dumb question, but I have to ask… :( when you say “drag and drop it (the component) on stage and give it the path to the XML file in which you have included images’ paths.”
I did drag and drop on the stage, but where/how do I give it the path to my XML file?? please help!
sorry…:(
April 17th, 2008 at 11:44 pm
There are 2 ways.
1. Using the component inspector. Click on the component and press Shift+F7. You will see a list of all the customizable properties including the xmlPath property.
2. By code. If your slideshow has the instance name mySlideshow, use this code mySlideshow.xmlPath = “images.xml”
April 24th, 2008 at 3:14 pm
Hello again, so i’ve noticed there are options for changing the reg point only for the squares/fly. I’m using the fade and want to change the point because when the image changes from horizontal to vertical, it covers copy because the reg point is in the upper left. Basically looking for a easy fix so that it transitions from the center, not the corner.
Thanks again!
April 24th, 2008 at 3:54 pm
Hi,
I’m not sure if I understand your question.
If you use the fade transition effect and scaleMode is “maintain aspect ratio”, you have several alignment types available including alignType = “center”
April 24th, 2008 at 4:41 pm
Here’s an example i whipped up. http://www.bunnybikini.com/v2
You can see when it transitions from a horizontal image to a vertical, it does it from the upper left corner so the slideshow doesn’t stay centered on the right side of the stage.
April 24th, 2008 at 5:30 pm
If you are using scaleMode = “no scale” , you can’t align the images, unless you align the slideshow but that would require some extra code. Instead you could use scaleMode = “maintain aspect ratio” and set the size to, let’s say 500X500, (ex: mySlideshow.setSize(500,500); ) and then set the alignType = “center”. See how it works for you.
May 21st, 2008 at 1:52 pm
Hello,
I just found this and tried dragging the slideshow onto the stage. I did give it the path to the xml file,which was included in the download just to see I can get it up and running.
however I get the following error when trying to preview:
1046: Type was not found or was not a compile-time constant: ColorPickerEvent.
Im fairly new to AS3 so im guessing im making some stupid mistake but would appreciate you pointing it out for me.
thanks in advance,
db
May 21st, 2008 at 3:02 pm
Hi,
The error you’re getting is not because of the slideshow component but because somewhere in your code you use the ColorPickerEvent class without importing it first.
You need to add
import fl.events.ColorPickerEvent;at the beginning of your code.May 22nd, 2008 at 1:38 pm
Hi,
Is it possible to use an array with image-paths instead of the xml-file?
thanks in advance,
Brecht
May 22nd, 2008 at 3:40 pm
Hi,
It’s not possible. You can only use an XML file as a source.
May 23rd, 2008 at 11:14 pm
I’ve run into a weird problem with a project. I’m using both of your components and if you go to
http://www.arca3.com/
all the transitions and the buttons work. if you go to
http://arca3.com/
the transistions don’t work and the thumbnail scroller is kind of screwed.
any ideas on why that might be?
thanks,
paul
May 24th, 2008 at 2:19 pm
Hi Paul,
That is because of cross-domain policy.
May 26th, 2008 at 11:54 pm
Hi,
I’ve setup a crossdomain.xml file but I’m still running into problems. When I run the file in debug mode I get this error
SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://arca3.com/arca 3 - website.swf cannot access http://www.arca3.com/img/intro/intro06.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::BitmapData/draw()
at com.flashotaku.slideshow.effects::SquaresEffect/drawSquares()
at com.flashotaku.slideshow.effects::SquaresEffect()
at com.flashotaku.slideshow::Slideshow/chooseEffect()
at com.flashotaku.slideshow::Slideshow/initHandler()
Is is there a way for me to set the checkPolicyFile flag to true?
Thanks for all your help,
Paul
May 27th, 2008 at 1:30 pm
Hi,
Setting the checkPolicyFile would require to change the component’s source but I’ve checked arca3.com and it seems to be working fine now. However, I think the best solution would be not to use absolute paths ( ex: http://www.arca3.com/img/intro/intro06.jpg), but relative paths (ex: img/intro/intro6.jpg) See how this works for you.
June 10th, 2008 at 8:38 am
nice slideshow
but can i have a text or a caption with every picture and i can control it?
June 10th, 2008 at 10:03 am
yes, here’s a tutorial http://flashotaku.com/blog/yet-another-image-gallery
June 24th, 2008 at 1:53 am
I’m building a site and want to add a Flash slideshow that autoruns and loops. I downloaded the auto slideshow2 but can’t figure out the actionscript code that I need to have to make it run and loop.
Thanks,
jp
June 24th, 2008 at 11:03 am
Here are some more examples that might help you:
http://flashotaku.com/files/auto_slideshow3.zip
http://flashotaku.com/files/auto_slideshow4.zip
If this doesn’t help much, please be more specific about what you don’t understand.
June 24th, 2008 at 12:35 pm
Thanks so much. Slideshow3 showed me the action script that I needed. You’ve got a nice little add on for Flash.
jp
July 21st, 2008 at 5:18 pm
I liked your component, I am using flash cs3 pro. Like many, this flash is going to be placed on a website. I cant get the flash to read the xml to import the pictures. In no way am i knowledgeable in xml and actionscript so thats why i looked for a component. (like most, i daydream one day i’ll learn) anyways, it doesnt load. I can preview the flash and it plays, but once it is embedded into html. It cant “call” it. i pressed shift+F7 and made looks like its supposed to. Do i need to change it to something else. Currently images.xml . I made the crossdomain.xml that every page i looked for recommended. What am i missing to get this flash to work?. AS2 worked like a champ, but it will only call 1 xml file and only the first picture. Excuse my lack of knowledge with xml and actionscript but im sure theres many who probably looked elsewhere just because they cant get this to work.
July 21st, 2008 at 5:59 pm
the auto_slideshow4 i just downloaded i think solves this problem. the first version i dowloaded seems to missing this feature
It might have something to do with the
var urlRequest:URLRequest = new URLRequest(”images.xml”);
in actions.
Also, coldfusion had something to do with it. Now i have that issue…but thats another faq. lol thanks.
July 21st, 2008 at 8:04 pm
Hi adrian,
This could be a path problem. All your paths, the path to the XML file and the path to each image, need to be relative to the HTML file in which you embed the flash content. You could also use absolute paths.
August 19th, 2008 at 3:11 pm
heya sorry this a bit off topic,but i have searched everywhere for the code to get this to work….i have a background with 3 seperate small video files on it that i have used caurina transitions tweener to activate….i have now made 2 seperate buttons and imported 25 small images that i want use to click on the buttons to navigate through the small images,but i just cant work out the code in as3…np in as2 but this is doing my head in….i have all the small pics on one layer with keyframes and the 2 buttons on another layer…i already have an as layer for the other video files…do i add the script for the new images on the same as layer…..but my main concern is the code to navigate through the images when clicking on the buttons…if you could help it would make my day completly..thanks
August 19th, 2008 at 3:26 pm
heres a link to one i made with as2. http://www.visnova.biz/Saphire/index.html ..you can see the lil pic of the girl with the 2 buttons on either side which useres can click on to navigate to the next….this is excactly what iam trying to achieve in as3 but just cant work out the code
August 19th, 2008 at 4:47 pm
It’s pretty easy if you use the Slideshow component.
Download the example on this page to see how it’s done and check out the documentation for the component.
August 19th, 2008 at 9:27 pm
ok thanks iam having a play now,will let you know:)
September 17th, 2008 at 7:44 pm
Awesome component… I love the noise transition… Now a question. how do I use multiple instances? Ex: I want to put a print, web, ect gallery on a site, all having different number of images and all on different pages, yet I cannot remove the numbers without an error… Any suggestions would be awesome… Thanks Again…
September 17th, 2008 at 9:07 pm
It depends on how you’ve structured the site. You could try using a single instance of the component and have multiple XML files(one for each section). Then, when you navigate to a new section of the site, set the xmlPath property to the corresponding XML file.
September 18th, 2008 at 11:56 pm
I thought I had it working, but alas… Okay I’ll be thorough, so you know what Im getting at… I was a little vague before. I want to put the component on 3 different sections of the site. Each will have a different number of images. When I try and delete some of the numbers I get an error:- TypeError: Error #1010: A term is undefined and has no properties. at test_fla::MainTimeline/frame1() -and the next images will not load once you click another number. If you need I can send you the script. Thanks again, and I hope I can get this as it is way cool…
September 18th, 2008 at 11:59 pm
Also I am putting the component and numbers in individual mc as to load them dynamically, yet I am placing the code on the time line within each individual mc. I hope this wont overide the component…
Thanks Again
September 19th, 2008 at 12:32 pm
You can send me your file at flashotaku [at] gmail [dot] com
September 26th, 2008 at 4:46 pm
If I am running 2 different instances of the same component, how do I set a delay on the autostart for one, so that they fire about 2 seconds apart yet at the same rate? Thanks in advance…
September 29th, 2008 at 5:05 am
Greetings!
Awesome component, thanks so much!
I’m having a strange problem. The structure for the website I’m working on is [preloader.html] loads & then opens [website.swf]. With this structure, the slideshow will not work properly (only displays first image, buttons do not work). However, if I go straight to [website.html] everything works just fine. Any ideas on how to fix this?
September 29th, 2008 at 1:04 pm
Josh,
See this example: http://flashotaku.com/files/auto_slideshow9.zip
Adam,
It’s difficult to give an answer unless I see the exact structure and code. It seems like the code for the buttons doesn’t execute but I can’t tell why. If you want, you can send me your file and I’ll take look at it.
January 26th, 2009 at 10:40 am
This is a really nice component. I’m using the auto_slideshow version and have it working fine in a standard HTML file but as soon as I insert it into a CMS (Joomla) it just shows up blank.
I’ve tried using relative URL’s and absolute for the images but it still does not display. I’ve even disabled the WYSIWYG editor to ensure that was not rewriting my code. Anyone got this working in a Joomla based site? How did you do it?
January 26th, 2009 at 1:04 pm
Hi Gavin,
It should work in Joomla too. Just don’t forget to use absolute paths to specify the location of the images and also to specify the location of the XML file.
January 28th, 2009 at 9:59 am
Cheers Otaku, it was the missing absolute for the images.xml in the parameters that I was missing. Doh! :)
March 5th, 2009 at 9:06 pm
I’m using this component for a little slideshow demonstration. Everything works great, i’m just getting a flash of black everytime i press the next/back buttons. I know it’s loading the image, but not sure why it’s flashing the color. Ideas? Thanks!
March 6th, 2009 at 12:01 pm
Are you trying to load images from a different domain? That could be a problem. See this http://www.moock.org/asdg/technotes/crossDomainPolicyFiles/
And also http://www.google.com/search?q=as3+cross+domain
March 11th, 2009 at 1:00 pm
[...] « Slideshow Component AS3 Documentation ThumbnailScroller Component AS2 [...]
May 22nd, 2009 at 12:59 am
Hello, so i have no idea how to get ride of the controls? Some asked in like 2006 buthe answered his own question and didnt post the answer. Thanks for the component!
jkr-
May 22nd, 2009 at 11:01 am
Hi,
You don’t necessarily need to remove the controls. Simply create a new FLA file. Use the following tutorials to learn how to use the component:
http://flashotaku.com/blog/image-gallery-tutorial-example-1/
http://flashotaku.com/blog/image-gallery-tutorial-example-2/