Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    62
    Thanks
    12
    Thanked 0 Times in 0 Posts

    combining xml image gallery with slideshow functionality ?

    Hello,

    I have been helping a friend with an image gallery for his paintings. We are loading the images from an XML-file.

    I am new to ActionScript, so I have been using this tutorial (and adapted it a little bit to suit my friend's wishes): http://www.oman3d.com/tutorials/flash/xmlimagegallery/

    The movie opens with thumbnails only. Clicking a thumbnail loads a full sized image, which stays on screen until another thumbnail is clicked. Scrolling thumbnails is done by means of reading the mouse position on screen.

    I/we would like to build on this design but I am not sure if it is possible/advisable. I would be very grateful if someone would share their thoughts on this subject.

    1) Is it possible - at the start of the movie - to have the full sized images display one by one in an eternal loop, which ends only when a thumbnail is clicked (and the corresponding full image loads in place of the looping images)? So that someone who chooses to not click any thumbnails still gets to see all the images? Can this functionality be incorporated in the main ActionScript that governs the image gallery?

    2) If 1) is possible, and we assume that the loop has been stopped because a thumbnail was clicked, is it also possible to get the loop to start again by clicking the full sized image currently displayed?

    Or am I trying to combine things that can't be achieved in ActionScript and that calls for a traditional Flash movie with hundreds of frames and jumps back and forth.

    Thanks a lot!

    /g

    This is the ActionScript for the image gallery:
    PHP Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;


    var 
    myGalleryXML = new XML();
    myGalleryXML.ignoreWhite true;
    myGalleryXML.load("gallery.xml");




    myGalleryXML.onLoad = function() {

    _root.gallery_x myGalleryXML.firstChild.attributes.gallery_x;
    _root.gallery_y myGalleryXML.firstChild.attributes.gallery_y;
    _root.gallery_width myGalleryXML.firstChild.attributes.gallery_width;
    _root.gallery_height myGalleryXML.firstChild.attributes.gallery_height;

    _root.myImages myGalleryXML.firstChild.childNodes;
    _root.myImagesTotal myImages.length;

    _root.thumb_height myGalleryXML.firstChild.attributes.thumb_height;
    _root.thumb_width myGalleryXML.firstChild.attributes.thumb_width;

    _root.full_x myGalleryXML.firstChild.attributes.full_x;
    _root.full_y myGalleryXML.firstChild.attributes.full_y;


    callThumbs();
    createMask();
    scrolling();



    };




    function 
    callThumbs() {
    _root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
    container_mc._x _root.gallery_x;
    container_mc._y _root.gallery_y;

    var 
    clipLoader = new MovieClipLoader();
    var 
    preloader = new Object();
    clipLoader.addListener(preloader);

    for (
    i=0i<myImagesTotali++) {
    thumbURL myImages[i].attributes.thumb_url;

    myThumb_mc container_mc.createEmptyMovieClip(icontainer_mc.getNextHighestDepth() );
    myThumb_mc._y _root.thumb_height*i;
    clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);

    preloader.onLoadStart = function(target) {
    target.createTextField("my_txt",target.getNextHighestDepth,0,0,100,20);
    target.my_txt.selectable false;
    };

    preloader.onLoadProgress = function(targetloadedBytestotalBytes) {
    target.my_txt.text Math.floor((loadedBytes/totalBytes)*100);
    };

    preloader.onLoadComplete=function(target){
    new 
    Tween(target"_alpha"Strong.easeOut0100.5true);
    target.my_txt.removeTextField();
    target.onRelease=function(){
    callFullImage(this._name);
    }

    target.onRollOver=function(){
    this._alpha=50;
    };

    target.onRollOut=function(){
    this._alpha=100;
    };


    }
    }
    }







    function 
    callFullImage(myNumber) {

    myURL myImages[myNumber].attributes.full_url;
    myTitle myImages[myNumber].attributes.title;

    _root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
    fullImage_mc._x _root.full_x;
    fullImage_mc._y _root.full_y;

    var 
    fullClipLoader = new MovieClipLoader();
    var 
    fullPreloader = new Object();
    fullClipLoader.addListener(fullPreloader);

    fullPreloader.onLoadStart = function(target) {
    target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,0,0,200,20);
    target.my_txt.selectable false;
    };

    fullPreloader.onLoadProgress = function(targetloadedBytestotalBytes) {
    target.my_txt.text Math.floor((loadedBytes/totalBytes)*100);
    };

    fullPreloader.onLoadComplete = function(target) {
    new 
    Tween(target"_alpha"Strong.easeOut0100.5true);
    target.my_txt.text myTitle;
    };
    fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);

    }






    function 
    createMask() {

    _root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());

    mask_mc._x _root.gallery_x;
    mask_mc._y _root.gallery_y;

    mask_mc.beginFill(0x000000,100);
    mask_mc.lineTo(_root.gallery_width,0);
    mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
    mask_mc.lineTo(0,_root.gallery_height);
    mask_mc.lineTo(0,0);

    container_mc.setMask(mask_mc);

    }


    function 
    scrolling() {

    _root.onEnterFrame = function() {
    if (
    mask_mc._ymouse<(mask_mc._height*(1/3)) || mask_mc._ymouse>(mask_mc._height*(2/3))) {
    container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;
    if (
    container_mc._y>mask_mc._y) {
    container_mc._y mask_mc._y;
    }
    if (
    container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
    container_mc._y mask_mc._y-(container_mc._height-mask_mc._height);
    }
    }
    };

    Last edited by guermantes; 12-03-2008 at 01:13 PM.

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    62
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I have looked a bit more at tutorials trying to patch those pieces of knowledge together for my situation.

    Would it be an option to create a separate SWF to cover the animated loop and then through my main ActionScript load that swf in the beginning, having it unload when thumbnails are clicked, and reload it when full sized images are clicked?

    /g

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    165
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you think you could narrow down your question to something a bit less complicated? No one will have time to go through that chunk of code for you. Narrow down your problems. One question at a time and as little code as possible... maybe then we can help

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Lets stick with one swf, I prefer that in most situations unless your content requires a lot of special flash stuff (I'm using stuff as a technical term for 'fancy things')

    Quick answers:
    #1 Yes it is possible
    #2 Yes it is possible

    How:

    We have most of the functions already written to help us, what we need now is something that will display the images in a loop. Here is some code that is not tested and just shows the logic, not necessarily the exact code. Please do not just plug it in, but test it and make sure you understand how it works!

    This is some code which will hopefully be our function to call the main image when we need
    Code:
    function slideshow(current) { // current should be the most recent image displayed, if called for the first time pass 0
      callFullImage(current); // Display current image
      current++; // Increase current to queue for next image
      if (_root.myImagesTotal == current) { current = 0; } // If increasing makes current equal to the total number, we have reached the end and start from 0
    }
    We shall use setInterval on load to start the slideshow, so put this

    Code:
    myGalleryXML.onLoad = function() {
    
    _root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
    _root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
    _root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
    _root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;
    
    _root.myImages = myGalleryXML.firstChild.childNodes;
    _root.myImagesTotal = myImages.length;
    
    _root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
    _root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;
    
    _root.full_x = myGalleryXML.firstChild.attributes.full_x;
    _root.full_y = myGalleryXML.firstChild.attributes.full_y;
    
    
    callThumbs();
    createMask();
    scrolling();
    autoplay = setInterval(slideshow, 5000, 0); // Calls the slideshow function every 5 seconds (5000 milliseconds) and passes the arguement of 0 to the function
    
    
    };
    When the thumbnails are clicked on, we must stop the slideshow function
    Code:
    preloader.onLoadComplete=function(target){
    new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
    target.my_txt.removeTextField();
    target.onRelease=function(){
    clearInterval(autoplay); // Clears the interval before calling the next image
    callFullImage(this._name);
    }
    When the main image is clicked we want to resume the slideshow function

    Code:
    _root.fullImage_mc.onRelease = function() {
       autoplay = setInterval(slideshow, 5000, _root.current); // We reset the interval and pass the variable 'current' to resume
    }
    So that is a quick attempt without testing. Let me know if this helps.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    guermantes (12-03-2008)

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    62
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks Jeremy,

    I'll start to lab around with that code as soon as I get home from work this evening. I'll keep you posted.



    /g

    (And I agree, I also prefer to keep things in one SWF if possible. Was just thinking that perhaps my second suggestion would have been an easier solution.)
    Last edited by guermantes; 12-03-2008 at 04:07 PM.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    62
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Jeremy,

    It took me three hours to figure it all out, but I feel really glad at having done so, and even improved upon your code a little bit.

    I'll post a little bit of code so other beginners in my situation hopefully can learn something from it all as well.

    The slideshow function you posted would advance 'current' by one but then reset it again, but it all worked fine once I changed
    PHP Code:
    function slideshow(current
    to
    PHP Code:
    function slideshow() 
    and adapted the
    PHP Code:
    autoplay setInterval(slideshow50000); 
    to
    PHP Code:
    current 0;
        
    autoplay setInterval(slideshow5000); 

    Now the slideshow would loop through all the images.
    The 'stop slideshow' code was perfect.
    The 'start slideshow again' code was great once I understood where to put it. I am not quite sure why it should go inside the fullPreloader.onLoadComplete section, but I think that has more to do with the fact that I find the FullPreloader.onLoadComplete formula a bit awkward. Preloader to me signifies something that happens before something has loaded and onLoadComplete signifies that loading is over, so which state is monitored? Yes, after loading is complete, I know, but I still have to think 25 times before I grasp it.... I am also unsure about why those '_root.' are needed but I think I can remedy that by reading up on the topic a little bit.

    Anyway, I found that turning your code into the following made it work a bit more smoothly:

    PHP Code:
    /*pick up click on main image and if so restart slideshow (load one image immediately while waiting for slideshow to kick in)*/
            
    _root.fullImage_mc.onRelease = function() {
                
    clearInterval(autoplay);/*Needed to prevent movie mayhem when people try to doubleclick large images repeatedly*/
                
    callFullImage(current);
                
    current++;
                if (
    _root.myImagesTotal == current) {
                    
    current 0;
                }
                
    autoplay setInterval(slideshow5000_root.current);
            }; 

    Thanks again and very much, Jeremy! You've been a great teacher.

    /g

  • #7
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Great thanks for the contribution, and glad to help. I wrote all of that code without testing, and without Flash around so it was a stab in the dark. I don't really have all of the functions memorized, as I don't develop with Flash all that often, in fact helping around here is really how I keep my knowledge from rotting.

    I knew there would be a better method, but I'm glad you did it and not me since you clearly learned a lot in the process. Without the full program at my disposal its hard to see exactly how the data is manipulated, even with the program it can be tricky!

    The _root helps to access the variable scope, so _root.variable is different from just variable. Often inside of a function, the variable is limited to just that function but adding _root. prefix set it like a global variable. That might not be the best explanation, but in essence that's whats happening.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #8
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Could I pls get the complete code with all chgs for combining xml image gallery with

    First, thanks for the great job on these tutorials!

    I have tried to follow guermantes and jeremy's tutorials for combining xml image gallery with slideshow functionality --- but I am not sure where to put the final changes Jeremy made to the code and it is not working correctly for me.

    If I could get the whole code complete with the slideshow changes, I would really appreciate it.

    Thanks,
    Bk123456

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I believe you look at the tutorial in the first post, and then at guermantes last post for the final code. I didn't add anything after that post.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •