Flash image slideshow
A highly customizable, xml-driven dynamic flash slideshow/banner rotator with thumbnail navigation and auto-play feature. Very easy to customize within the html document via SWFObject variables and XML attributes.
This flash slideshow utilizes GreenSock custom classes (files included in the archive).
Features include:
- Set slideshow dimensions via CSS without editing the .fla file)
- Set the directory of the images and XML file through swfobject variable
- Set transition types, time, speed etc. via swfobject variables
- Customize slideshow appearance (images scaling, colors, borders, radius corners etc.) via swfobject variables
- Customize each slide appearance (text color, background, border, radius corners etc.) through XML attributes
License
This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT
Donating helps greatly in developing and updating free software and running this blog ๐
how can i use it
I’m unable to change font color.
Link to slideshow http://www.worrellcorp.com/slider/flash/index.html
Slide 1
ืืื, ืืืื ืคืืกื, ืชืืื
This is usually done with jQuery nowadays, but still nice work ๐
Hi
can I modify and use these files for my commercial projects for my clients. Or is there any other option that I can buy this slideshow.
Yes, you can use and modify the files however you like. For more info, see the license at the end of the post.
Hi, Thank you for the great slideshow. I would like to inquire possible I put the width 100% and once the window resize the images would automatic resize?
Hi, this is the best slideshow script I’ve seen that’s using flash.
One question I have is if it’s possible to change the font. I’d like to keep it consistent with my site. Do I have to edit the .fla for this?
Yes, you need to edit the .fla to change the font.
Related, I’m trying to change the font size, but I can’t find it in the .fla. I’m not very familiar with AS, could you point out what I’m looking for? Thanks!
Ah, nevermind! I figured it out from your reply to Flo above.
Though I do have a second question; is there a way to set the corner radius of the player and the text box separately? It’s shown that way in your picture at the top of the page, but they are both controlled by the border_radius in the index.html. Thanks again!
I am also wondering this as I have this sitting ontop of my navbar so I want the swf_object div to have no border-radius but would still like it on the title boxes inside of the player.
Hello
Explorer 9 working but refresh after don’t work
Mailhu,
It’s a nice and attractive piece of work but here is an obstacle I’ve come on.
I used a distinctive web design with layer containers and rollover menu button to switch between different containers/layers. This layered behaviour creates a very responsive web page to switch quickly between different sections.
When I place the slideshow inside the first layer it remains persistant and does not switch off when the layers are switched.
Is there something I’ve missed in the scripts that can make the flash object lock into its container and accept the switching operation?
I am trying to incorporate this into a magento based website. xml, phtml, css based.
Just wondering where in the layout I should place the html code and what files need to go where.
I have my image location set to “/images”
I have the location of flash_slideshow.xml set to “/flash/flash_slideshow.xml
I have all locations set.
The problem i’m having, is adding the html code.
Basically when I add html to the pages, I have really no choice but to add the html to a wysiwyg editor. I enter everything but the body tag and html tag.
/* CONFIGURATION ---------------------------------------------------- */ /* The directory of the image files (important: keep trailing slashes) */ images_directory = "/images/"; /* The XML file containing slides data */ XML_file = "/flash/flash_slideshow.xml"; /* Display time for each slide (in seconds) */I get nothing to show up on the page. I made sure my xml and flash files are properly uploaded to my server as well.
Any help would be great! Thank you very much! I know once this gets going, it’s gonna be an awesome addition to my site.
What files do I absolutely have to edit to use my own images.
Does swfobjects.js have to be edited?
No, swfobjects.js never needs to be edited. You just edit the .xml file and/or the html.
Thank you for the simple use of a script which has been a big deal to do with software.
You are generous to share your work and my contribution to coffee doesn’t match this your free information.
I had no idea what I was doing and I put it in my html editor and it worked without pages of instructions.
Great! Thanks ๐
Hi! Great script!! How can I add a target=”_blank” to the links? Thanks!!
Great Scriptโฆ Is there a way to use this to continously load the the same image without buffering (example: reload an image that is updated every ten seconds from a live camera)? Thanks!
Bravo and thanks for this script Malihu.
I have just a problem with last version of Firefox 5.0. The message is : “Alternative html content for non-flash devices”. Do you try it ?
Bye
Rod
ps sorry for my english ๐
Hi rod,
The issue you’re describing has to do with the flash plugin for Firefox. Try reinstalling latest flash player.
Anyone else having issues with getting this to work in IE??
Great Script… Is there a way to use this to continously load the the same image without buffering (example: reload an image that is updated every ten seconds from a live camera)? Thanks!
Not as it is. It’s an entirely different script really.
Thanks for the feedback malihu. It works well for a gallery… just thought the presentation style would also be cool for regularly updating images. I have done similar with PHP and JavaScript (reloading the image every x seconds) but the flash image processing seems to be a smoother option. Unfortunately, I don’t have the time currently to learn it.
Hi. I would like to know if you script support a slide pause instruction.
Thank you.
At the moment, the behavior of the slider is very simple, based totally on user interaction. When a user clicks a slide thumbnail, the auto-play stops.
Hi Malihu,
I don’t understand why some special HTML caracters are not displayed correctly in the text fields. Ex : à is shown as “à” instead of “ร ”.
Could you please help me to solve this problem ?
Thanks a lot for your great work ! Regards.
Hi Flo,
You need to edit the .fla file included in the archive, in order to select the which character set to embed according to the language you wanna use (e.g. Latin, Greek etc.).
To do that, open “flash_slideshow.fla” with flash and find “mc” in library. Right click it and select “edit”. On “texts” layer reside the 2 text-fields (txt_title and txt_description). Select each one and click “character embedding” on properties->character panel. In the modal window you can select the character set(s) you want (multiple selection by holding Ctrl button in windows). For the character you describe, you probably need Latin I/Latin Extended A/B. Do this for both text-fields. Save and export ๐
Thanks for your quick answer ๐
Well, that’s what I did, but the caracters like “& agrave ;” (whitout space) are still displayed as written in the xml file “& agrave ;” instead of “ร ”.
You can write โร โ and “&” directly in the xml (no need to use special characters).
In addition, if you want to be able to write html special characters, you need to manually include each one in the “Include these characters:” box in “Character Embedding” panel.
Hi,
When I write “ร ” in the XML file, the character is not displayed in the animation.
I added this line in the code :
system.useCodepage = true;
Now it works fine !
Thanks for your help and have a nice day,
Flo
Forgot to mention that I’m on a mac, but I’m pretty sure that doesn’t matter.
Thanks. Hopefully I can get this resolved. I’ve been saving this slideshow for a project I’m doing and now I’m ready to integrate into my fla.
Thanks,
Rob
Hi Rob,
The reason you get a “corrupted file” error message is because the .fla is a flash CS4 file. I’ve added a second CS3 .fla (flash_slideshow_CS3.fla) in the archive so you can open it with your version of flash. Please re-download the .zip to get the updated files ๐
Thanks. I downloaded the zip again. But I don’t see any reference to an archive file. Just the fla, swf, xml, greensock and index.html files are all I see. And that fla must still be the cs4 file.
Sorry for the stupid question, but where is the archived cs3 file?
Thanks in advance.
So does the flash_slideshow_cs3.fla file exist? If so, is there a link to download it?
Thanks
The new CS3 file inside the .zip is flash_slideshow_CS3.fla. You can’t see it?
Yep,
Now I see it.
Thanks for your help,
Rob
Hi,
I’m trying to open the .fla in cs3 and keep getting a ‘failed to open doc’ statement. I downloaded the zip again and got the same thing. Seems that the file is corrupt. I need to be able to open the file to do some editing. Have you had anyone else report this?
Thanks for the slideshow. It looks great. Can you post another zip? Maybe this one is corrupted.
Thanks!
Rob
Mr. malihu
I appreciate this from you ,,, Thank you very much for every thing.
right now i dont have flash installed on my pc , i will try to install it and update you regarding the arabic letters.
Thanks again,
Ahmed
Hi,
Thanks for this valuable share.
i have 2 questions:
1- does it support Arabic words?? i want to write arabic words in the title and the description . how can i do it?? i edited the xml file but i recieved ” undefined”
2- how can i link one of the pictures to google. Ex. i want when i click on one of the pic to go to google
can you edit here:
<myItem
img='1.jpg'
title=''
description=''
text_color='0xffffff'
text_align='left'
text_valign='top'
text_margin='30'
text_background_color='0x000000'
text_background_alpha='00'
text_background_border_thickness='0'
text_background_border_color='0xffffff'
text_background_border_alpha='0'
slide_background_color='0xffffff'
link='#1"
Thanksssssss ,
Appreciate this from you
Regards,
Ahmed
Hello Ahmed,
For convenience I’ve changed the slideshow to support Arabic language. You can download it here:
http://manos.malihu.gr/tuts/flash_slideshow/flash_slideshow_arabic.zip
How it’s done:
In order to display Arabic words (or any other language) you need to edit the flash_slideshow.fla and embed the Arabic character set.
Open flash_slideshow.fla with flash. Right-click “mc” item in the library panel and select “Edit”. Select “txt_title” textfield and click on “Character Embedding” button on properties panel. Scroll down and click on “Arabic” (pressing Ctrl you can select multiple character sets). Click “OK” and do exactly the same for the “txt_description” textfiled. Save and export the movie.
This way you can support as many languages as you like. Remember that the more characters you embed the greater the filesize of the swf (the reason I didn’t embed all character sets).
In order to link a slide to e.g. google.com, enter its URL in “link” attribute inside the XML. For example:
link=’http://www.google.com’
Hi,
Thanks for this Flash image slideshow, it rocks!
I have one question tho. Can i change the transparant text background field to the full width of the “swf_content”, cause now the width is equel with the text in the field..??
Hello Jesper,
Right now you can only do it by editing the .fla
Hi, congratulations on this great website and for the amazing scripts!
But I also have a question: I love the slideshow and the many options. But I would like to change the size of the two texts. But also hide! Unfortunately, I have found nothing to fix this – I missed something? Thank you in advance for your work …
Thanks for your comments ๐
In this version the only way to change the text size is to edit directly the .fla file which is relatively easy (when I find some time I might update the script to change font size via the swfobject variables).
If you need to completely hide the text for any of the slides just empty the title and description attributes (title=” description=”) and set its text background alpha to zero (text_background_alpha=’0′) inside flash_slideshow.xml.
Hope this helps
Hello.
I understand why it did not work. I deleted the cache of the browser and it works perfectly.
Thanks for your help and patience.
You’re very welcome ๐
I changed the link attribute for each slide: link =”
The hand cursor appears!
Can you check the demo in this post? The second slide doesn’t have a link, do you see hand cursor?
I see hand cursor. If you can help I’m using Windows 7 and Google Chrome, firefox. Only works on Internet Explorer 8.
Can you show me a live example? Maybe I didn’t understand what the problem is…
Thanks very much!! ๐
How can you show me the file that you modified for me though? Inside post or something?
thank you so much again!!!
OK done. I have updated the demo and download files.
On the updated version, if you empty the link attribute in the XML (link=”) the hand cursor is disabled. You can re-download the flash_slideshow.zip from the top of the page to get the updated files.
I re-downloaded the file and replaced, but nothing changes. Why?
Each slide has its own link attribute, so you have to change each one in XML.
Thanks for letting me respond.
I saw the option but what about removing the link appears when you go on to slide the cursor to click on the link. I would like to remove or have only the image without it being linked.
I hope I explained …!!
I see… I’ll edit the flash source and disable the hand cursor when the link attribute inside the XML file is empty. I’ll try to have it done and upload the updated files by tomorrow.
The problem is that I do not know how to use flash and then I do not know how to edit the file. Could you please help me?
Thanks again!
Yes, I will do it ๐
THANKS!!! ๐
Hello.
I wanted to ask if you could add an option to disable the links of your images. I would like an option for paging. You can do this?
Thank you and congratulations for your articles!
PS: sorry for my English but not speak it very well!
Hi surfy,
In “flash_slideshow.xml” file you can edit each slide options (including the links). Also when you hover the cursor over the slideshow the paging fades-in. Was that what you meant?