dcsimg
A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Building A Flash/XML Photo Gallery

  1. #1
    Junior Member
    Join Date
    Aug 2006
    Posts
    14

    Building A Flash/XML Photo Gallery

    I saw a few other posts on here regarding the topic, but they were project-specific, and I didn't want to hijack another poster's thread.

    To begin, I'm using Flash 8.

    I'm trying to create a photo gallery using XML and Flash. I'm steering away from sites that offer a complete download of all of the code. I really want to learn how to do this so that I have the knowledge rather than just downloading and plugging in the code.

    I found three examples that I really dig. They're here, in order from the swankest:
    http://www.airtightinteractive.com/simpleviewer/
    http://www.tutorio.com/tutorial/simp...l-photogallery
    http://www.flashgallery.org/

    I had tried building a gallery using the example that the Tutorio site offered, but it just wasn't working out. Thumbnails were showing up in random places, and the large pictures were just all over the place. I don't know what the Hell was going on.

    While I do like those three examples that I linked to, there is one component that I'm very interested in using. That would be a thumbnail gallery that disappears from the screen and only reappears when the mouse is over a specific region (like a hideaway menu, I guess).

    I don't mind following through a tutorial - just so long as I'm learning what's going on while I'm doing it. I hate tutorials that just give you long strings of code without explaining what they do. I'm not a complete beginner at ActionScript, but I'm no expert at it, either.

    So, there's my plight. If you can give me any advice, or if you need any more information on what I'm looking for, please hit reply and let me know what you've got.

    Thanks!
    Last edited by itsinmyhead; 10-05-2007 at 06:04 PM.

  2. #2
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    Here is something relatively simple, not exactly what you want but a scroll menu using XML.

    http://www.flashscript.biz/component.../scroller.html
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  3. #3
    Junior Member
    Join Date
    Aug 2006
    Posts
    14
    Quote Originally Posted by cancerinform
    Here is something relatively simple, not exactly what you want but a scroll menu using XML.

    http://www.flashscript.biz/component.../scroller.html
    I'll definitely check it out tomorrow in more detail. If nothing else, I can disect the rollover scroller to use. That's my back up plan if I can't get the full thumbnail gallery in its own hideaway menu.

    And speaking of which, maybe I can just start small - how can I get a hideaway menu to work? I have a feeling it's something really easy involving mask layers or something... but it's been a while since I've delved so heavily into Flash, so I'm a bit rusty around (some of) the edges.

  4. #4
    Junior Member
    Join Date
    Aug 2006
    Posts
    14
    No editing posts? Wacky.

    Anywho, I figured out the menu situation. I finally stumbled onto one page referring to it as a "flyout" rather than a hideaway/hidden/whatever menu. Searching for a flyout menu tutorial definitely made things easier.

    One thing that I can't figure out, though, is how to make the flyout menu hide again if you move your mouse off of it. I want it to pop up and stay there as long as I am mousing over the menu, but if I leave that menu, I want it to hide itself again. Any tips?

    Now I've just got to turn my flyout menu into a scrollable gallery of thumbnails which, upon clicking, will open up the full-sized picture.

    Looks like I'll have a fun and busy Saturday!

  5. #5
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    The thumbs are probably all in a movieclip. Each of the thumbs then needs to have something in the rollover function that makes the movieclip alpha 100 and on rollout 0.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  6. #6
    Junior Member
    Join Date
    Aug 2006
    Posts
    14
    Alright, here we go again. I figured something out. I figured a few things out, actually. I figured out how to place the images in my XML file wherever I want on the stage. Easier than it should have been, heh

    Also, I found out that my buttons don't like to work properly when they're in that flyout menu.

    These are just sloppy makeups right now, because I haven't gone to the trouble of prettying things up... but here's the skinny.

    Working Gallery
    That's a link to the working gallery. Click on the thumbnail, the larger version pops up.

    Non-Working Gallery
    That's a link to the non-working gallery. Only sort of non-working. If you mouse over the rectangle at the bottom, the flyout menu comes up. However, when you click on the thumbnail on the menu, nothing happens.

    I'm going to attach the code, again, for what I have in there. This is the complete code, which is found in the non-working version. The working version only has from "myphoto = new XML" onward.

    Thanks again!

    **


    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    var startY:Number = gallery._y;
    button.useHandCursor = false;

    button.onRollOver = function () {
    if(gallery._alpha == 0) {
    new Tween(gallery,"_alpha",Regular.easeOut,0,100,12,fa lse);
    new Tween(gallery,"_y",Regular.easeOut,startY,startY-200,12,false);
    }
    }

    gallery.onRollOut = function () {
    if(gallery._alpha == 100) {
    new Tween(gallery,"_alpha",Regular.easeOut,100,0,12,fa lse);
    new Tween(gallery,"_y",Regular.easeOut,startY-200,startY,12,false);
    }
    }

    myPhoto = new XML();
    myPhoto.ignoreWhite = true;
    myPhoto.onLoad = function(success) {
    //portfolioTag = this.firstChild;
    numimages = this.firstChild.childNodes.length;
    spacing = 70;
    for (i=0; i<numimages; i++) {
    this.picHolder = this.firstChild.childNodes[i];
    this.thumbHolder = gallery.createEmptyMovieClip("thumbnail"+i, i);
    this.thumbHolder._x = i*spacing;
    this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_i mage", 0);
    this.thumbLoader.loadMovie(this.picHolder.attribut es.thmb);
    this.thumbHolder.title = this.picHolder.attributes.title;
    this.thumbHolder.main = this.picHolder.attributes.main;
    this.thumbHolder.onRelease = function() {
    loader.loadMovie(this.main);
    title_txt.text = this.title;
    };
    }
    };
    myPhoto.load("gallery.xml");


    **

  7. #7
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    I thought I had answered this post (?)

    The problem is that the thumbs will not be recognized, because they are hidden under the button to tween the thumbrack out.
    - The right of the People to create Flash movies shall not be infringed. -
    | www.Flashscript.biz | Flashscript Biz Classes/Components |

  8. #8
    Junior Member
    Join Date
    May 2008
    Posts
    1

    Another one

    You can try that flash gallery: http://flash-gallery.com
    i have no such problem with it

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center