A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 36

Thread: image scroll and xml links

  1. #1
    Member
    Join Date
    May 2006
    Posts
    31

    image scroll and xml links

    Hi, I´m all new to this, so I´m maybe not explaning this very good.. but I´ll give it a try...

    I have made an image scroll in flash/xml... and it looks like this:http://kunst.no/mariusmellebye/test.html

    I want the images that are loaded in the polaroid (the big ones) to be clickable so when clicked it opens the picture in a new fixed size window, and sometimes, I need it to opens a fixed size html document...

    how should I do something like that? the xml code looks like this for now:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <images>
    <pic>
    <image>http://static.flickr.com/48/149711442_a436404a76.jpg</image>
    <caption>Bronze</caption>
    <thumbnail>http://static.flickr.com/24/119893521_2c4799fda5_s.jpg</thumbnail>
    </pic>
    <pic>
    <image>http://static.flickr.com/50/149715554_091b8556ef_o.jpg</image>
    <caption>Hand</caption>
    <thumbnail>http://static.flickr.com/50/149715554_091b8556ef_s.jpg</thumbnail>
    </pic>

    etc...

    thanks in advance :-)

    Marius

  2. #2
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Sine you are already sending the values to the larger clip holder, we'll need the actionscript for that to see how best to handle it. Otherwise we are forced to code from scratch which makes this more of a "code on demand" thing than supporting your current routine or advancing what you have.

  3. #3
    Member
    Join Date
    May 2006
    Posts
    31
    the "large" pictures is 320 pixels x 240 pixels... the ones I want to open in a new fixed siez window is going to be hi res. and a lot larger then that... I´m also making the same setup for some movies that I have made music for... so when clicked the "large" movie picture, it should opens a new fixed size html document with the move.. if it is possible :-)

    if I understand you right... the action script is flash goes like this:
    function loadXML(loaded) {
    if (loaded) {
    xmlNode = this.firstChild;
    image = [];
    description = [];
    thumbnails = [];
    total = xmlNode.childNodes.length;
    for (i=0; i<total; i++) {
    image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
    description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
    thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
    thumbnails_fn(i);
    }
    firstImage();
    } else {
    content = "file not loaded!";
    }
    }
    xmlData = new XML();
    xmlData.ignoreWhite = true;
    xmlData.onLoad = loadXML;
    xmlData.load("marius.xml");
    /////////////////////////////////////
    listen = new Object();
    listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
    prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
    nextImage();
    }
    };
    Key.addListener(listen);
    previous_btn.onRelease = function() {
    prevImage();
    };
    next_btn.onRelease = function() {
    nextImage();
    };
    /////////////////////////////////////
    p = 0;
    this.onEnterFrame = function() {
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
    preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
    preloader._visible = false;
    if (picture._alpha<100) {
    picture._alpha += 10;
    }
    }
    };
    function nextImage() {
    if (p<(total-1)) {
    p++;
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    desc_txt.text = description[p];
    picture_num();
    }
    }
    }
    function prevImage() {
    if (p>0) {
    p--;
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    desc_txt.text = description[p];
    picture_num();
    }
    }
    function firstImage() {
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[0], 1);
    desc_txt.text = description[0];
    picture_num();
    }
    }
    function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
    }
    function thumbNailScroller() {
    // thumbnail code!
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 10;
    tscroller.onEnterFrame = function() {
    if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._heig ht)) {
    if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
    thumbnail_mc._x -= scroll_speed;
    } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
    thumbnail_mc._x += scroll_speed;
    }
    } else {
    delete tscroller.onEnterFrame;
    }
    };
    }
    function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
    target_mc._x = hit_left._x+(target_mc._width+5)*k;
    target_mc.pictureValue = k;
    target_mc.onRelease = function() {
    p = this.pictureValue-1;
    nextImage();
    };
    target_mc.onRollOver = function() {
    this._alpha = 50;
    thumbNailScroller();
    };
    target_mc.onRollOut = function() {
    this._alpha = 100;
    };
    };
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
    }

  4. #4
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    No sweat. I'll dink around with it later when I get back (if it isn't solved that is ). When you click the larger image in the example movie...and it loads the full res, full size pic...I have a question. Are all the pics the same size? If not we will have to send in the dimensions as part of each entry as an element so they can be passed to the code to popup the window.

    I'll post back either way. Sorry I'm not faster today...getting slammed

  5. #5
    Member
    Join Date
    May 2006
    Posts
    31
    For now the high res. pictures are the same size... (almost) but I think in the future, I´m not only taking horizontal pictures.. :-) so I guess it would be bether to have the dimensions as part of each entry. And in those cases when I need to open a fixed size html document (for the movies that I have made music for).. the html documents may be different sizes...

    thanks for your help, I´ll be arround :-)

  6. #6
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Sorry for the delay....I'm really bogged today ;(

    http://actionscript.hobby-site.com/examples/marius.html

    Using these additions, I send in some bogus window dimension values and a path to load which adds three new variables and 3 new nodes to each child.

    mypath = the path to load....doesn't matter what...html...swf...php...etc etc
    mywidth = the width of the popup (should add 10 to each for fit)
    myheight = height of popup (same as above)

    Since you use an onEnterFrame in the _root, we bypass trying to script the "picture" clip as a button from the _root (as a function) and instead just paste this on the clip itself making it a button:

    Code:
     on(press){
    getURL("javascript:window.open('"+_root.foo1+"','newWin','width="+_root.foo2+",height="+_root.foo3+"');void(0);");
    
     }
    This fires the popup right from flashplayer without need for an html script. You can of course tie it to one if you wish and structure the command different.

    The foo1, foo2 and foo3 variables are simply declared as if I am targeting a textfield...just without the textfield

    So using this new XML structure:
    Code:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <images>
    <pic>
    <image>http://static.flickr.com/48/149711442_a436404a76.jpg</image>
    <caption>Bronze</caption>
    <thumbnail>http://static.flickr.com/24/119893521_2c4799fda5_s.jpg</thumbnail>
    <mypath>http://static.flickr.com/48/149711442_a436404a76.jpg</mypath>
    <mywidth>400</mywidth>
    <myheight>300</myheight>
    </pic>
    <pic>
    <image>http://static.flickr.com/50/149715554_091b8556ef_o.jpg</image>
    <caption>Hand</caption>
    <thumbnail>http://static.flickr.com/50/149715554_091b8556ef_s.jpg</thumbnail>
    <mypath>http://static.flickr.com/50/149715554_091b8556ef_o.jpg</mypath>
    <mywidth>300</mywidth>
    <myheight>200</myheight>
    </pic>
    </images>
    Along with the button code for the "picture" clip pasted above and this as your new load routine:

    Code:
    function loadXML(loaded) {
    if (loaded) {
    xmlNode = this.firstChild;
    image = [];
    description = [];
    thumbnails = [];
    mypath = [];
    mywidth = [];
    myheight = [];
    total = xmlNode.childNodes.length;
    for (i=0; i<total; i++) {
    image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
    description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
    thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
    mypath[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
    mywidth[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
    myheight[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
    thumbnails_fn(i);
    }
    firstImage();
    } else {
    content = "file not loaded!";
    }
    }
    xmlData = new XML();
    xmlData.ignoreWhite = true;
    xmlData.onLoad = loadXML;
    xmlData.load("http://actionscript.hobby-site.com/examples/marius.xml");
    /////////////////////////////////////
    listen = new Object();
    listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
    prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
    nextImage();
    }
    };
    Key.addListener(listen);
    previous_btn.onRelease = function() {
    prevImage();
    };
    next_btn.onRelease = function() {
    nextImage();
    };
    /////////////////////////////////////
    p = 0;
    this.onEnterFrame = function() {
    
    picture.addListener(plistener);
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
    preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
    preloader._visible = false;
    if (picture._alpha<100) {
    picture._alpha += 10;
    }
    
    }
    };
    function nextImage() {
    if (p<(total-1)) {
    p++;
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    _root.foo1 = mypath[p];
    _root.foo2 = mywidth[p];
    _root.foo3 = myheight[p];
    desc_txt.text = description[p];
    picture_num();
    }
    }
    }
    function prevImage() {
    if (p>0) {
    p--;
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    _root.foo1 = mypath[p];
    _root.foo2 = mywidth[p];
    _root.foo3 = myheight[p];
    desc_txt.text = description[p];
    picture_num();
    }
    }
    function firstImage() {
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[0], 1);
    _root.foo1 = mypath[0];
    _root.foo2 = mywidth[0];
    _root.foo3 = myheight[0];
    desc_txt.text = description[0];
    picture_num();
    }
    }
    function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
    }
    function thumbNailScroller() {
    // thumbnail code!
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 10;
    tscroller.onEnterFrame = function() {
    if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
    if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
    thumbnail_mc._x -= scroll_speed;
    } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
    thumbnail_mc._x += scroll_speed;
    }
    } else {
    delete tscroller.onEnterFrame;
    }
    };
    }
    
    
    function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
    target_mc._x = hit_left._x+(target_mc._width+5)*k;
    target_mc.pictureValue = k;
    target_mc.onRelease = function() {
    p = this.pictureValue-1;
    
    //getURL("javascript:window.open('"+image[p]+"','newWin','width=310,height=310');");
    nextImage();
    };
    
    
    target_mc.onRollOver = function() {
    this._alpha = 50;
    thumbNailScroller();
    };
    
    
    target_mc.onRollOut = function() {
    this._alpha = 100;
    };
    };
    
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
    }

    You should be styling Also be sure to make the window sizes what you want...mine were just quick entries and not even meant to match the examples...I just wanted to show two different sizes. Hope this helps!


    Chris

  7. #7
    Member
    Join Date
    May 2006
    Posts
    31
    thanks a lot chris :-) this is so greek to me, but I´ll try to figure it out.. I´m off to see a couple of exhibitions.. one about turbonegro (a norwegian rock band), and another about children at war... I´ll look at it when I get home, but there is a slight posebilletie that I have to ask for more help if it´s ok :-)

    I really presiate youre time and help :-)

    Marius

  8. #8

  9. #9
    Member
    Join Date
    May 2006
    Posts
    31
    I´m so confused :-)

    this code I copied and pasted and replaced the existing action code (and I changed back to my xml document)

    Code:
    function loadXML(loaded) {
    if (loaded) {
    xmlNode = this.firstChild;
    image = [];
    description = [];
    thumbnails = [];
    mypath = [];
    mywidth = [];
    myheight = [];
    total = xmlNode.childNodes.length;
    for (i=0; i<total; i++) {
    image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
    description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
    thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
    mypath[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
    mywidth[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
    myheight[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
    thumbnails_fn(i);
    }
    firstImage();
    } else {
    content = "file not loaded!";
    }
    }
    xmlData = new XML();
    xmlData.ignoreWhite = true;
    xmlData.onLoad = loadXML;
    xmlData.load("images.xml");
    /////////////////////////////////////
    listen = new Object();
    listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
    prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
    nextImage();
    }
    };
    Key.addListener(listen);
    previous_btn.onRelease = function() {
    prevImage();
    };
    next_btn.onRelease = function() {
    nextImage();
    };
    /////////////////////////////////////
    p = 0;
    this.onEnterFrame = function() {
    
    picture.addListener(plistener);
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
    preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
    preloader._visible = false;
    if (picture._alpha<100) {
    picture._alpha += 10;
    }
    
    }
    };
    function nextImage() {
    if (p<(total-1)) {
    p++;
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    _root.foo1 = mypath[p];
    _root.foo2 = mywidth[p];
    _root.foo3 = myheight[p];
    desc_txt.text = description[p];
    picture_num();
    }
    }
    }
    function prevImage() {
    if (p>0) {
    p--;
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    _root.foo1 = mypath[p];
    _root.foo2 = mywidth[p];
    _root.foo3 = myheight[p];
    desc_txt.text = description[p];
    picture_num();
    }
    }
    function firstImage() {
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[0], 1);
    _root.foo1 = mypath[0];
    _root.foo2 = mywidth[0];
    _root.foo3 = myheight[0];
    desc_txt.text = description[0];
    picture_num();
    }
    }
    function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
    }
    function thumbNailScroller() {
    // thumbnail code!
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 10;
    tscroller.onEnterFrame = function() {
    if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
    if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
    thumbnail_mc._x -= scroll_speed;
    } else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
    thumbnail_mc._x += scroll_speed;
    }
    } else {
    delete tscroller.onEnterFrame;
    }
    };
    }
    
    
    function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
    target_mc._x = hit_left._x+(target_mc._width+5)*k;
    target_mc.pictureValue = k;
    target_mc.onRelease = function() {
    p = this.pictureValue-1;
    
    //getURL("javascript:window.open('"+image[p]+"','newWin','width=310,height=310');");
    nextImage();
    };
    
    
    target_mc.onRollOver = function() {
    this._alpha = 50;
    thumbNailScroller();
    };
    
    
    target_mc.onRollOut = function() {
    this._alpha = 100;
    };
    };
    
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
    }
    I replaced this code to my xml document:

    Code:
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <images>
    <pic>
    <image>http://static.flickr.com/48/149711442_a436404a76.jpg</image>
    <caption>Bronze</caption>
    <thumbnail>http://static.flickr.com/24/119893521_2c4799fda5_s.jpg</thumbnail>
    <mypath>http://static.flickr.com/48/149711442_a436404a76.jpg</mypath>
    <mywidth>400</mywidth>
    <myheight>300</myheight>
    </pic>
    <pic>
    <image>http://static.flickr.com/50/149715554_091b8556ef_o.jpg</image>
    <caption>Hand</caption>
    <thumbnail>http://static.flickr.com/50/149715554_091b8556ef_s.jpg</thumbnail>
    <mypath>http://static.flickr.com/50/149715554_091b8556ef_o.jpg</mypath>
    <mywidth>300</mywidth>
    <myheight>200</myheight>
    </pic>
    </images>

    but this code I´m not sure where to put :-)

    Code:
    on(press){
    getURL("javascript:window.open('"+_root.foo1+"','newWin','width="+_root.foo2+",height="+_root.foo3+"');void(0);");
    
     }

    maybe I have taken too much water above my head. :-) but it´s fun and interesting tho... :-)

  10. #10
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    You must have a clip onstage with an instance name of "picture". It is most likely an empty clip so it might be hard to find but it's there. Highlight it onstage and enter that code in the actions panel

  11. #11
    Member
    Join Date
    May 2006
    Posts
    31
    check this out...

    if it´s right, I have tried to put the action when highlighted... but nothing happens..

    do you still have the .fla you made to show me the example? :-) please dont kill me ;-)

  12. #12
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Mine isn't flash I'm probobly the only mod here who's primary app is not flash (though I do use it from time to time). I'm a scripter so I'm platform independent and all I need is a program to support actionscript.

    Attach your fla (MX2004)....I'll square it away.

  13. #13
    Member
    Join Date
    May 2006
    Posts
    31
    thanks a lot!! :-) I sent the .fla as a private message :-)

  14. #14
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Ok. I'm making you do this because you need to know how. My mouse is pointing right at the clip onstage. You may have to move the grey Shape above it in that layer to the right so you can highlight it. Notice my stage, my actions panel and the instance name in the properties


  15. #15
    Member
    Join Date
    May 2006
    Posts
    31
    YUHUU!! I found it.. damn that was hard to hit... there must be an easier way to find that instance? and I lost it again... and found it after 5 minutes of clicking.... :-/

    thanks a lot man!! :-)

  16. #16

  17. #17

  18. #18
    Member
    Join Date
    May 2006
    Posts
    31
    ok, now that this works... lets move on ;-)

    lets say, I want to open a html document... wich is the same as open an image... but if I want that html document to be opened with NO scrollers... is that some xml code too, or is that decided by something else?

    I guess I can´t prevent it to be resized... but I have seen documents that have benn open without scrollers.. possible?

    thank you so much for youre help :-)

  19. #19
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    You can adapt that getURL window code using just about any options javascript allows by editing freely available popup code to match how flash expects it (like mine using the width/height as variable insertions). There are tons of popup generators out there to scarf example structures depending on chosen options.

    If I were to paste that on a link in an html document...it would fail....it is structured for flash. Same deal in the other direction...any popup code generated from generators usually has to be edited to work in flash (if using the NO HTML, fire right from flash method shown here).

  20. #20
    Member
    Join Date
    May 2006
    Posts
    31
    got this code:

    Code:
    on(press){
    getURL("javascript:window.open('"+_root.foo1+"','newWin','width="+_root.foo2+",height="+_root.foo3+",resizable=yes,toolbar=no,location=no,status=no,scrollbars=no,menubar=no');void(0);");
    }
    perfect :-)

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