This website uses cookies to personalise ads and to analyse traffic ok
web design

Flash image slideshow

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.
http://opensource.org/licenses/MIT


67 Comments

Post a comment
  1. mina nabil
    Posted on August 20, 2014 at 14:41 Permalink

    how can i use it

    Reply
  2. Jermaine
    Posted on October 22, 2012 at 20:31 Permalink

    I’m unable to change font color.
    Link to slideshow http://www.worrellcorp.com/slider/flash/index.html

    Slide 1

    Reply
  3. Sidney
    Posted on August 22, 2012 at 16:00 Permalink

    Χ”Χ™Χ™, ΧΧ—ΧœΧ” Χ€Χ•Χ‘Χ˜, ΧͺΧ•Χ“Χ”

    Reply
  4. Ari
    Posted on August 16, 2012 at 20:09 Permalink

    This is usually done with jQuery nowadays, but still nice work πŸ˜‰

    Reply
  5. shruti
    Posted on August 6, 2012 at 13:58 Permalink

    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.

    Reply
    • malihu
      Posted on August 6, 2012 at 17:37 Permalink

      Yes, you can use and modify the files however you like. For more info, see the license at the end of the post.

      Reply
  6. Raymond
    Posted on June 27, 2012 at 12:14 Permalink

    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?

    Reply
  7. Johnny
    Posted on May 23, 2012 at 05:56 Permalink

    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?

    Reply
    • malihu
      Posted on May 23, 2012 at 08:35 Permalink

      Yes, you need to edit the .fla to change the font.

      Reply
      • Shannon
        Posted on July 17, 2012 at 01:35 Permalink

        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!

        Reply
        • Shannon
          Posted on July 17, 2012 at 02:23 Permalink

          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!

          Reply
          • Nick
            Posted on August 15, 2012 at 05:05 Permalink

            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.

  8. Maxbilisim
    Posted on February 24, 2012 at 18:11 Permalink

    Hello

    Explorer 9 working but refresh after don’t work

    Reply
  9. Michael
    Posted on February 11, 2012 at 19:42 Permalink

    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?

    Reply
  10. Casey
    Posted on February 7, 2012 at 10:29 Permalink

    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.

    Reply
    • Casey
      Posted on February 7, 2012 at 10:42 Permalink

      What files do I absolutely have to edit to use my own images.
      Does swfobjects.js have to be edited?

      Reply
      • malihu
        Posted on February 7, 2012 at 15:51 Permalink

        No, swfobjects.js never needs to be edited. You just edit the .xml file and/or the html.

        Reply
  11. Tyrone
    Posted on January 30, 2012 at 03:58 Permalink

    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.

    Reply
    • malihu
      Posted on January 30, 2012 at 08:26 Permalink

      Great! Thanks πŸ™‚

      Reply
  12. Susana
    Posted on December 22, 2011 at 17:19 Permalink

    Hi! Great script!! How can I add a target=”_blank” to the links? Thanks!!

    Reply
  13. bhargavavardhan
    Posted on July 27, 2011 at 17:21 Permalink

    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!

    Reply
  14. rod
    Posted on July 11, 2011 at 19:12 Permalink

    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 πŸ˜‰

    Reply
    • malihu
      Posted on July 12, 2011 at 13:02 Permalink

      Hi rod,
      The issue you’re describing has to do with the flash plugin for Firefox. Try reinstalling latest flash player.

      Reply
  15. Denny
    Posted on June 13, 2011 at 05:31 Permalink

    Anyone else having issues with getting this to work in IE??

    Reply
  16. PJ
    Posted on June 12, 2011 at 07:32 Permalink

    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!

    Reply
    • malihu
      Posted on June 12, 2011 at 13:27 Permalink

      Not as it is. It’s an entirely different script really.

      Reply
      • PJ
        Posted on June 12, 2011 at 18:07 Permalink

        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.

        Reply
  17. Paola
    Posted on May 20, 2011 at 01:22 Permalink

    Hi. I would like to know if you script support a slide pause instruction.
    Thank you.

    Reply
    • malihu
      Posted on May 20, 2011 at 13:32 Permalink

      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.

      Reply
  18. Flo
    Posted on March 16, 2011 at 14:16 Permalink

    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.

    Reply
    • malihu
      Posted on March 16, 2011 at 15:05 Permalink

      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 πŸ˜‰

      Reply
      • Flo
        Posted on March 16, 2011 at 18:45 Permalink

        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 “Γ ”.

        Reply
    • malihu
      Posted on March 17, 2011 at 14:23 Permalink

      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.

      Reply
      • Flo
        Posted on March 17, 2011 at 17:50 Permalink

        Hi,
        When I write “Γ ” in the XML file, the character is not displayed in the animation.

        Reply
      • Flo
        Posted on March 18, 2011 at 14:24 Permalink

        I added this line in the code :
        system.useCodepage = true;

        Now it works fine !

        Thanks for your help and have a nice day,
        Flo

        Reply
  19. rob
    Posted on January 18, 2011 at 09:13 Permalink

    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

    Reply
    • malihu
      Posted on January 18, 2011 at 11:29 Permalink

      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 πŸ™‚

      Reply
      • rob
        Posted on January 18, 2011 at 12:17 Permalink

        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.

        Reply
      • rob
        Posted on January 19, 2011 at 17:36 Permalink

        So does the flash_slideshow_cs3.fla file exist? If so, is there a link to download it?

        Thanks

        Reply
    • malihu
      Posted on January 19, 2011 at 17:53 Permalink

      The new CS3 file inside the .zip is flash_slideshow_CS3.fla. You can’t see it?

      Reply
      • rob
        Posted on January 19, 2011 at 19:07 Permalink

        Yep,
        Now I see it.

        Thanks for your help,
        Rob

        Reply
  20. rob
    Posted on January 18, 2011 at 09:03 Permalink

    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

    Reply
  21. Ahmed
    Posted on December 19, 2010 at 20:26 Permalink

    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

    Reply
  22. Ahmed
    Posted on December 18, 2010 at 19:19 Permalink

    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

    Reply
    • malihu
      Posted on December 19, 2010 at 15:41 Permalink

      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’

      Reply
  23. Jesper
    Posted on December 2, 2010 at 18:11 Permalink

    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..??

    Reply
    • malihu
      Posted on December 6, 2010 at 01:03 Permalink

      Hello Jesper,
      Right now you can only do it by editing the .fla

      Reply
  24. pixel
    Posted on November 3, 2010 at 18:30 Permalink

    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 …

    Reply
    • malihu
      Posted on November 4, 2010 at 01:09 Permalink

      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

      Reply
  25. surfy
    Posted on October 25, 2010 at 10:18 Permalink

    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.

    Reply
    • malihu
      Posted on October 25, 2010 at 10:25 Permalink

      You’re very welcome πŸ™‚

      Reply
  26. surfy
    Posted on October 22, 2010 at 17:06 Permalink

    I changed the link attribute for each slide: link =”

    The hand cursor appears!

    Reply
    • malihu
      Posted on October 23, 2010 at 03:22 Permalink

      Can you check the demo in this post? The second slide doesn’t have a link, do you see hand cursor?

      Reply
      • surfy
        Posted on October 23, 2010 at 09:56 Permalink

        I see hand cursor. If you can help I’m using Windows 7 and Google Chrome, firefox. Only works on Internet Explorer 8.

        Reply
      • malihu
        Posted on October 24, 2010 at 04:17 Permalink

        Can you show me a live example? Maybe I didn’t understand what the problem is…

        Reply
  27. surfy
    Posted on October 22, 2010 at 15:16 Permalink

    Thanks very much!! πŸ˜€

    Reply
  28. surfy
    Posted on October 21, 2010 at 20:48 Permalink

    How can you show me the file that you modified for me though? Inside post or something?

    thank you so much again!!!

    Reply
    • malihu
      Posted on October 22, 2010 at 01:48 Permalink

      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.

      Reply
      • surfy
        Posted on October 22, 2010 at 15:24 Permalink

        I re-downloaded the file and replaced, but nothing changes. Why?

        Reply
      • malihu
        Posted on October 22, 2010 at 16:44 Permalink

        Each slide has its own link attribute, so you have to change each one in XML.

        Reply
  29. surfy
    Posted on October 21, 2010 at 19:26 Permalink

    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 …!!

    Reply
    • malihu
      Posted on October 21, 2010 at 19:39 Permalink

      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.

      Reply
      • surfy
        Posted on October 21, 2010 at 19:43 Permalink

        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!

        Reply
      • malihu
        Posted on October 21, 2010 at 19:45 Permalink

        Yes, I will do it πŸ™‚

        Reply
      • surfy
        Posted on October 21, 2010 at 19:53 Permalink

        THANKS!!! πŸ˜€

        Reply
  30. surfy
    Posted on October 21, 2010 at 18:21 Permalink

    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!

    Reply
    • malihu
      Posted on October 21, 2010 at 18:52 Permalink

      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?

      Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php