videos

Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3

on Sep 9th 2009 with 70 comments
This entry is part 3 of 3 in the series Create a Dynamic Slideshow with AS3 and XML

Create a Dynamic Slideshow with AS3 and XML

Time to implement labels and navigation to our Slideshow Application. We’ll go over a lot in this third and final part of the series. This screencast is almost one and a half hours in total, so sit back, open up your files from Part 2 and let’s dig in!

View Screencast: Section One

Introduction

Get the Flash Player to see this player.

View Screencast: Section Two

Labels

Get the Flash Player to see this player.

View Screencast: Section Three

Tween Manager

Get the Flash Player to see this player.

View Screencast: Section Four

Navigation

Get the Flash Player to see this player.

View Screencast: Section Five

Roundup

Get the Flash Player to see this player.

Create a Dynamic Slideshow with ActionScript 3.0 and XML: The Series.

Other parts in this series:«Create a Dynamic Slideshow with ActionScript 3.0 and XML: Part 2

Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Pierre is a flashdeveloper from Sweden. He spends his freetime learning new fun stuff and experimenting. He´s in a band called Moll Flanders where he plays guitar. Aside from Actionscript he is trying to expand his knowledge in other programming languages. It´s all about the fun...  

Plus Premium
 
 
Newer Comments →
  • Benaissa

    great slide show,thanks a lot

  • ircaparis

    really great tuto!!!

    thaks a lot

    and more like that if possible ;-)

  • Fred

    Good things come to those whose wait I guess….. :o)
    Thanks Pierre.

  • André

    Great code, i didnt see the tutorial because i dont know why the video is too slow here, i still prefer steps written tutorials, but great job and keep this good work!!

  • Rock Freak

    Guess I missed it… How many parts are there going to be?

    • http://www.laveklint.com Pierre Laveklint
      Author

      Hi RF,

      This is the final part of 3.

      - The first part was a somewhat walk-through of the basics ( no need to look at this in order to complete the application, start with part 2 instead )

  • Hussein

    I’m officially addicted to flash.tuts! a lot of great tutorial, thank you for sharing this Pierre

  • http://www.xitestudiomagazine.com Roberto XSM

    A message for webmaster: are the RSS feed of FlashTuts+ working?

    I’ve the same problem with the CgTuts+ website…

    • http://snaptin.com Ian Yates
      Staff

      Hmm, I’ve just noticed that the link to the Short RSS is broken (thanks for that, I’ll get it fixed) though all the other RSS feed links are fine.

      Try clicking on the large RSS logo at the top of the page. And don’t forget you can always follow @flashtuts on Twitter :)

  • Sandeep Bonavate

    thanks for the tutrl, its really nice. I would like to see some more tutrls like these. Thank you.

  • sled09

    Is there any way to have it auto play AND include the navigation buttons as well?

    Some users may want to use the back button while watching the auto play… and some users may want to click through quickly after watching the auto play once.. thanks for a great tutorial!

    • http://www.laveklint.com Pierre Laveklint
      Author

      Hi sled09,

      as the application is setup that is not possible, however it´s not that hard to accomplish if you know a little AS3 to go in there and modify. But in order to have that you might also want to include play/pause buttons etc.

      If this is a common request and with Ian´s approval I might put together one absolute final screencast on this subject and maybe how to add a mask for the application.

      Any more of you out there who would like to see these features?

      • sled09

        Thanks for the quick reply. It would be great if you could put together one more screencast and include the dual navigation functionality. I know I, and many others would greatly appreciate it!!

        If you decide to do a final cast it might be nice to add a note about off setting the nav buttons so they hang off the edge of the images (just like on your homepage). I am trying to work it out right now, but I keep getting a gap that I can’t get rid of.

        Thanks again for a great tut!

      • André

        I think you should create a final shoutcast and send it, because it´s a great quality tutorial, and this kind of gallery is one of the most requested over the internet, so i think if you send it to Yan he shurelly will put it here, great work man!!

        I´ve created my own slideshow api too, i need just to create the documentation so i will send it to the free stuffs, it´s xml controlled too, you can see it working at http://cavallari.freehostia.com/slides/ and http://cavallari.freehostia.com/slides/?swf=slide2.swf , also you can see the xml at http://cavallari.freehostia.com/slides/slides.xml , i didnt add a description section, but it´s too easy to create it, check the xml you can see the node, if you right click the slide you will see them there, the node sets the time of each image, each image can have different delays, at node you can add a start and stop context menu for the slide api… it´s all optional, the only node that need to exist is the of the … also you can bind keys for next and prev functions, if you press the arrows in my slideshow you can see it…

        If approved, it will be soon at free area.

      • Lane

        Another feature that I would really like is to make the image itself be a link. I tried wrapping the image with a link in the xml file but that keeps the image from displaying.

    • David

      Yes waiting for the auto play WITH buttons.
      Great tutorials Pierre! Thank you for taking the time :)

  • Fred

    Part 4….
    Yes please.

    When do you think you could get this online?

  • Pingback: Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3 … node

  • Dan

    Part 4
    Yes please…

    Great tuts btw! Keep’em comin’!

    • Petter

      Is there a way to put a new png image in the same way as the navigation buttons – but without any action attatched. For example I want to put a logo in a layer over the slideshow instead of adding it to the images (wich means that the logo “slides” away with the image).

      Great tutorial, it’s been really useful for us in many ways. (I’m also interested if there will be a part 4 with navigation and autoplay)

  • Pingback: Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3 - ActionScript - All Tutorials

  • http://www.melanelago.com Mélane Lago

    Thanks for the great tutorial. Please, more tutorials like this! :)

  • Pingback: Create a Dynamic Slideshow with Actionscript 3.0 and XML – Part 3 - ActionScript - All Tutorials

  • Greg Blass

    Hi Pierre,

    I can’t thank you enough for this. I am in the process of implementing this on 3 commercial sites right now, with more to come.

    I can’t for the life of me get the embedded font to work. I embeded the characters in a swf just like you did. I’ve tried with “ITC Stone Informal Std” and “Helvetica Lt Std.” I made the changes to the css as well.

    Nothing shows up. Any clues here?

    Thanks man…great work!!!

    • Greg Blass

      Nevermind…I just got it about 10 seconds after I posted this.

      Thanks again!

  • Greg Blass

    OK – another question for you, Pierre.

    Is there any way to have the labels on the bottom of the slides, and not the top?

    Thanks.

  • Greg Blass

    When I try to edit the y values in CreateLabels.as, some really weird stuff happens. The bar appears for a second in one spot, then jumps to another.

    Also, and more importantly, the swf doesn’t load some of the time…IE, just a white spot appears there. Really weird and sporadic…

    • http://www.laveklint.com Pierre Laveklint
      Author

      I´m on the run right now but I´ll take a look at this tomorrow, ok?

      Glad you enjoy the screencast!

  • Hussein

    One of the best tutorial, excellent work flow, and indeed its an advance technique.brilliant mate. keep it up, hope to see more good stuff coming.

    • http://www.laveklint.com Pierre Laveklint
      Author

      Thank you Hussien, glad you like it!

  • Hussein

    Pierre i learned a lot from those 3tutorial and i moved from writing AS3 on timeline to, to writting classes, i have tried your slide show and it work fine.but when i try to load it from my dynamic xml driven drop down menu, it gives that error.
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at DynamicSlideShow$iinit()
    and i always knew a way arround that error by
    this.addEventListener(Event.ADDED_STAGE, init);
    i have tried to load different swf file, they work perfectly that mean theirs nothing wrong with my dynamic XML driven drop down menu code.

    any way to get round that error?
    thanks a lot.

    • http://www.laveklint.com Pierre Laveklint
      Author

      My first guess is that you haven´t changed the xmlfile-variable to have an absolute path to the xmlfile for the slideshow. We set it up to grab the xmlfile-path from flashvars, so make sure to set the path in the documentclass instead.

      Let me know how it turns out.

      • http://www.spicy-indian.com babita

        how exactly would you do this? what would the code look like?

        sorry, i’m a newbie to flash. but i LOVED your tutorials. so easy to follow and exactly what i was looking for.

  • http://www.flvwin.com/flv-viewer-mac FLV Player For MAC

    Is there any way to have the labels on the bottom of the slides, and not the top?

    • Thien

      Yes, in the SlideView.as file scroll down to the transitionSlides function. In the if( DynamicSlideShow.displayLabels ), you need to add label_box.y = stage.stageHeight – label_bg.height at the end. Place it after label_bg.height = label_tf.height + Number( _xmlProperties.labelBoxTopPadding ) + Number( _xmlProperties.labelBoxBottomPadding );

      should look like this

      if( DynamicSlideShow.displayLabels )
      {
      ……..
      label_bg.height = label_tf.height + Number( _xmlProperties.labelBoxTopPadding ) + Number( _xmlProperties.labelBoxBottomPadding );

      label_box.y = stage.stageHeight – label_bg.height;
      }

      • Rev

        That doesn’t seem to be working for me. Are you sure that’s correct?

  • http://www.flvwin.com/flv-viewer-mac FLV Player For MAC

    Nice topic!Thanks!

  • Nick

    Pierre you are a genius!!!
    i have only one problem…when i try to load it from another swf i have this error:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at DynamicSlideShow()

    i’m going crazy….

    thanks anyway

    • http://www.spicy-indian.com babita

      were you able to solve this?

      cause i’m getting the same error trying to do the same thing and probably going the same amount of crazy…

  • http://nathanmckinleynash.com Nathan

    This is very cool, I was looking for how to do something just like this for the past 30 minutes as well. Great work, thanks for sharing your knowledge.

    • http://nathanmckinleynash.com Nathan

      Does anyone know if it is possible to use wordpress template tags for labels and descriptions?

  • Maciej

    Hello

    The source file from this tutorial doesn`t work when i download it and try to play offline on my comouter. I launch index.html and get a blank grey rectangle of a clip also when i hit the demo on this site slideshows sometimes don`t come up (usually they do). The same is with examples frome the 2nd part of this tutorial, examples from the first part work correct

    Anyone knows the reason??

    thanks for help in advance

    Maciej

  • Shahad

    Hey Pierrre! Thanks for this great tut! really helped.

    I was just wondering if there was a way to have the same slideshow functioning on a swf file directly instead of an html file. I would be really thankful if you could help me out on this!

    Thanks in advance!
    Shahad

  • Jyotsna

    Hi,

    Great tutorial, but when I download the source code and run the .fla file, it is giving an error.

    And one thing I have different folder structure, I want to change the images folder path and the XML file path in this. Please help me.

    Please update the souuce files.

    Thanks.

  • Jyotsna

    Hi,

    I tweak into it and I got it working (Actually I am not a flash guy :) ).

    I need few more changes here.

    1. Title and Short description – at the bottom
    2. If I gave two lines of short description the entire short desc is showing in ONE line.
    3. I want to add link to either image or some ‘go’ button for all / some of the slides.

    If you know how to do this please help me.

    Thanks in Advance.

  • Mel Rodriguez

    Great tutorial, but when I convert the flash properties to flash player 10 I get a blank screen after I publish with no images also I get an error message.

    TypeError: Error #2007: Parameter url must be non-null.
    at flash.net::URLStream/load()
    at flash.net::URLLoader/load()
    at DynamicSlideShow()

  • Mel Rodriguez

    Never mind I got it Thanks

    • zeynep safak

      TypeError: Error #2007: Parameter url must be non-null.
      at flash.net::URLStream/load()
      at flash.net::URLLoader/load()
      at DynamicSlideShow()

      Did you fix the problem?

  • Mel Rodriguez

    Time for a DynamicSlideShow part 4 how to put the label in the bottom

  • Amelia

    I downloaded the files. Nothing seems to be playing when I open the index.html file.

    • Amelia

      The browser is telling me that some images have been blocked to prevent sender from intentifying my computer….reason I launch index.html and I don’t see the images loading….files from Parts I and II of this tutorial loaded fine on my browser, the only problem seems to be the source files from Part III……

      And also, I forget where the css file is because I don’t see it.

      • Amelia

        Sorry for the multiples….correction….SOURCE FILES PARTS II AND III ARE NOT WORKING!

        Seems that other users are encountering the same problem….it’s not my browser I believe.

  • annette

    Hi all I have the sme problem…….

    TypeError: Error #2007: Parameter url must be non-null.
    at flash.net::URLStream/load()
    at flash.net::URLLoader/load()
    at SlideEngine()
    at DynamicSlideshow()

    Any solution as yet?

    • http://www.spicy-indian.com babita

      i’m not very good with flash, but i think you can solve this in the DynamicSlideShow.as.

      in the constructor, switch the lines that are commented out in the source files from the internet.

      var slidesfile:String = “data/slides.xml”;

      //var slidesfile:String = root.loaderInfo.parameters.xmlFile;

  • Laura

    how do you integrate the swf into a flash site with actionscript 3.0? i want to place it in a frame that i have assigned to be one of the pages of my site. i would also like to know how you can remove the swf once you go to another frame.

  • http://atauldiit.wordpress.com/ Kazi Ataul Bari

    GREAT TUTORIAL ……………

  • fuya

    how can i use the swf in another flash movie?

    great work!

  • Steven

    Pierre – nice tutorial. How do i add labels at bottom of slideshow? Your help appreciated.

  • Roy

    Is it also possible to add some dots in this slide show so that the viewer knows which image he’s watching
    Here’s example what I mean:
    http://www.kpn.com/glasvezel/home.htm

    Thanx great tut

  • Roy

    Another problem that accurred when I open only the swf the player stays blank. But when I open it in html it shows the slideshow. This is not really a big issue because with function f12 you can easily publish it in your browser. I just was wondering why this ‘bug’ accurred and if anybody else had this problem?
    I use Flash CS4

  • http://blueperfect.com jeffrey

    thank your for the tutorial and well done slideshow!

    i do have a question: i got everything working smoothly on my computer, but when i upload to my server, the slideshow doesn’t show. can anyone guide me? i am super-green when it comes to coding, but i do understand a little html and have a reasonable grasp how the pieces fit together.

    thanks!

  • davelf

    everything is error, even the demo

  • steven

    nice script. how can i upload multiple swf into dynamicslideshow.swf using nav buttions? maybe this can be an extension for script – Screencast 4? thanks.

  • steven

    regarding loading external swf. can anyone write class for uploading swf into dynamicslideshow.swf with nav buttons. want to display more photo galleries (swf’s) e.g. june. july. aug. etc using existing swf as container. any help is appreciated.

  • matthias

    the sourcefiles are not working for me, i’m missing the SlideView.as

    :-(

  • Pingback: 27+ The Best Free Flash Gallery Tutorials - Ntt.cc

  • Charlie

    This error is being thrown by Internet Explorer 8.

    *************************************

    ArgumentError: Error #2124: Loaded file is an unknown type.
    at SWFByteArray()
    at ru.etcs.utils::FontLoader/handler_complete()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    *************************************

    Firefox, Chrome and IE are all non-functional at this point. It seems that the site cannot locate the XML file, but beyond that I do not know.

  • Christian Persson

    I just downloaded the source files without looking at the screen cast, but the files are just white for me. Maybe I should look at the screen casts to fix this? If I just open DynamicSlideShow.swf I get a message telling me to open it using either Localhost or external machine, but none works. I don’t know what the problem is. :/

    Thank you for taking your time to do these screen casts anyhow!

    Tack. :) Skulle va nice om du kunde se vad som är fel.

  • Anwer Shah

    Thanks for a great tutorial – I learnt a lot.
    I have a question regarding the text field – when I add additional text it does not seem to ‘wrap’ in the text field, instead it remains on one line and is cut off by the end (right edge) of the text field.
    Is there a way to make the text ‘wrap’/'multiline’?
    (Currenlt my only work around is to manually insert in the html text…not what I want to be doing)
    Please advise,
    Thanks in advance.
    Anwer

  • Christian

    Okay. I got it fixed now, but I really miss a auto scroll function and the ability to make each image a link. :) Great slideshow after all!

  • Teo

    Great tutorial, beyond my knowledge of AS3, but love the xml slideshow. One problem, for us newbies learning flash, since their is nothing on the timeline or any AS3 actions on the timeline, how would you add this slideshow to your flash website within a specific page/frame?

    • Jason

      I’m wondering the same thing. On part 2 I posted how I tried to add it to an all flash site but I was receiving errors. I’m still trying to work it out.

Newer Comments →