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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    [F8] 1)Scrolling thumbnail problem. 2)URL link.

    Hiya-

    Take a look:
    http://www.roy-trainer.com/HelenNewman/HelenNewman.html

    Do you see the first thumbnail of the shirt? Why is there that big gap/gutter to the left of it? I'm getting the same thing on the last button as well(last thumbnail to the right). How do i get rid of the big gap/gutter?

    /**********import classes**********/
    import mx.transitions.*;
    import mx.transitions.easing.*;
    /**********declare variables and instances**********/
    var nextX = 52;
    /**********create objects**********/
    var xmlPhotos:XML = new XML();
    var initThumb:Object = new Object();
    /**********handle events**********/
    xmlPhotos.onLoad = function() {
    for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
    initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
    initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
    makeAThumb(i);
    nextX += 99;
    }
    setInterval(_root,"scroller",50);
    };
    initThumb.onRollOver = function() {
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };
    initThumb.onRollOut = function() {
    thumbScaleX.yoyo();
    thumbScaleY.yoyo();
    };
    initThumb.onRelease = function() {
    txtTitle.text = this.photo;
    txtDesc.text = this.desc;
    mcLargePhoto.loadMovie("images/large/"+this.photo+".png");
    };
    /**********functions**********/
    function makeAThumb(num) {
    thumbName = "mcThumb"+num;
    mcScroller.attachMovie("thumb",thumbName,num,initT humb);
    mcScroller[thumbName].mcPhoto.loadMovie("images/thumbs/"+mcScroller[thumbName].photo+".png");
    mcScroller[thumbName]._x = nextX;
    mcScroller[thumbName]._y = 0;
    mcScroller[thumbName]._xscale = 100;
    mcScroller[thumbName]._yscale = 100;
    }
    function scroller() {
    //if (this._ymouse>mcScroller._y) {
    var scrollSpeed = (this._xmouse-Stage.width/2)/10;
    if (Math.abs(scrollSpeed)<1) {
    scrollSpeed = 0;
    }
    mcScroller._x -= scrollSpeed;
    if (mcScroller._x>0) {
    mcScroller._x = 0;
    } else if (mcScroller._x<Stage.width-mcScroller._width) {
    mcScroller._x = Stage.width-mcScroller._width;
    }
    }
    /**********set properties**********/
    xmlPhotos.ignoreWhite = true;
    /**********run now**********/
    xmlPhotos.load("photos.xml");
    this.createEmptyMovieClip("mcScroller",this.getNex tHighestDepth());
    mcScroller._x = 0;
    mcScroller._y = 485;




    2)URL website link.

    How in XML do i create a URL link for each? And where do i place the code in flash?:

    <?xml version="1.0" encoding="utf-8"?>
    <photos>
    <image photo="Anac">
    <caption>HERE LIES THE COPY FOR ANAC.</caption>
    </image>
    </photos>


    Thank you for any help you can throw my way.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Yes I see the thumbnail, and is the large gap from the edge of the window or the edge of the black box?

    It seems to be aligning just fine to the edge of the black box with just a little padding to the right or left of the strip.

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Scrolling thumbnail.

    Hiya-

    Well when I do a test movie on my computer; the first thumbnail of the shirt is cut-off by half. While the last thumbnail of the girl has a big gap.

    I changed the var nextX to '0'. That helped the first thumbnail but created an even larger gap on the last thumbnail.

    your thoughts?



    Quote Originally Posted by jeremywilken View Post
    Yes I see the thumbnail, and is the large gap from the edge of the window or the edge of the black box?

    It seems to be aligning just fine to the edge of the black box with just a little padding to the right or left of the strip.

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well the orientation of a newly created movieclip is at the center. So you need to recalculate by offsetting them by 50px or whatever half of an image width is.

    I do see the problem now only after resizing my browser, otherwise it scales.
    Last edited by gnomeontherun; 05-15-2008 at 09:30 PM.

  • #5
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Scrolling thumbnail.

    Hi-

    By image width...do you mean the thumbnail? Because the width of each thumbnail is 99.


    For example:
    /**********declare variables and instances**********/
    var nextX = 50;<-----Is this what you mean?
    /**********create objects**********/
    var xmlPhotos:XML = new XML();
    var initThumb:Object = new Object();
    /**********handle events**********/
    xmlPhotos.onLoad = function() {
    for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
    initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
    initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
    makeAThumb(i);
    nextX += 99;<----This is the width of my thumbnail.
    }
    setInterval(_root,"scroller",50);
    };
    initThumb.onRollOver = function() {
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };
    initThumb.onRollOut = function() {
    thumbScaleX.yoyo();
    thumbScaleY.yoyo();
    };
    initThumb.onRelease = function() {
    txtTitle.text = this.photo;
    txtDesc.text = this.desc;
    mcLargePhoto.loadMovie("images/large/"+this.photo+".png");
    };

    Quote Originally Posted by jeremywilken View Post
    Well the orientation of a newly created movieclip is at the center. So you need to recalculate by offsetting them by 50px or whatever half of an image width is.

    I do see the problem now only after resizing my browser, otherwise it scales.

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I think I understand.

    OH I see!

    I went into the thumbnail MC and moved it over 50 pixels from the registration mark.
    But now there is an even gap on the first and last thumbnail.
    Also, when I rollover the thumbnail it overlaps the thumbnail next to it.

    http://www.roy-trainer.com/HelenNewm...enNewman3.html

    Your thoughts?


  • #7
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Something like this would have the image slide slightly to the left as it expands too.
    Code:
    initThumb.onRollOver = function() {
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbPositionX = new Tween(this, "_x", Bounce.easeOut, 0, 10, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };

  • #8
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    What am I doing wrong.

    Ok here's what I put:

    initThumb.onRollOver = function() {
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbPositionX = new Tween(this, "_x", Bounce.easeOut, 0, 10, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };
    initThumb.onRollOut = function() {
    thumbScaleX.yoyo();
    thumbScaleY.yoyo();
    thumbPositionX();
    };


    When I rollover the thumbnails they disappear and bunch up in the left corner.

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    That is because of the 0, 10 numbers in the Tween. Hmmm... lets put this instead. It should calculate based on the position of the clip instead of from the left of the container. I guess I just didn't know exactly how they were functioning!

    Code:
    var moveX = this._x + 10;
    thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);

  • #10
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Do you mean like this?

    /**********declare variables and instances**********/
    var nextX = 0;
    var moveX = this._x + 10;
    /**********create objects**********/
    var xmlPhotos:XML = new XML();
    var initThumb:Object = new Object();
    /**********handle events**********/
    xmlPhotos.onLoad = function() {
    for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
    initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
    initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
    makeAThumb(i);
    nextX += 99;
    }
    setInterval(_root,"scroller",50);
    };
    initThumb.onRollOver = function() {
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };

  • #11
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Nope, keep it together (and try to put your code in the [CODE ] tags for us)

    Code:
    /**********declare variables and instances**********/
    var nextX = 0;
    /**********create objects**********/
    var xmlPhotos:XML = new XML();
    var initThumb:Object = new Object();
    /**********handle events**********/
    xmlPhotos.onLoad = function() {
    for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
    initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
    initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
    makeAThumb(i);
    nextX += 99;
    }
    setInterval(_root,"scroller",50);
    };
    initThumb.onRollOver = function() {
    var moveX = this._x + 10; /* Put it here so that it gets the currently rolled over thumb as a reference */
    thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
    thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
    thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
    };
    Last edited by gnomeontherun; 05-16-2008 at 12:48 AM.

  • #12
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Whoops sorry about that.

    Hiya-

    I'll definitely put them in [CODE] tags.

    So here's what I have now:

    http://www.roy-trainer.com/HelenNewman/HelenNewman3.html

    What do you think? Should I move the thumbnails back to their original position?

    Thanks again for your patience and help getting me through this.

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Oops, change the math from +10 to -10. My apologies, I'm just sitting here and not testing anything so I make more mistakes that way! A subtracting _x will move it to the left while adding to _x will move it right.
    Code:
    var moveX = this._x - 10;
    You will also need to include this to make the images roll back into their original position...wasn't sure if you would add that on your own or not. We just need to reverse the movement.
    Code:
    initThumb.onRollOut = function() {
    thumbScaleX.yoyo();
    thumbScaleY.yoyo();
    thumbPositionX.yoyo();
    };
    Last edited by gnomeontherun; 05-16-2008 at 01:20 AM.

  • #14
    New Coder
    Join Date
    Apr 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile You did it!

    Cool.

    Looks a lot better. What do you think?

    http://www.roy-trainer.com/HelenNewm...enNewman3.html

    Comments, Questions, Suggestions?


    Thanks - I really do appreciate your help.

    How's your XML knowledge?

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Quote Originally Posted by TheMexican View Post
    Cool.

    Looks a lot better. What do you think?

    http://www.roy-trainer.com/HelenNewm...enNewman3.html

    Comments, Questions, Suggestions?


    Thanks - I really do appreciate your help.

    How's your XML knowledge?
    My XML works...

    I think a neat idea would be to make the thumbs clip smaller unless it is rolled-over. That would save some space and be a neat effect if you want.

    I would also change the scroller function so that it only moves the thumbs when you are scrolling over them. You want to keep the causality of effects linked to something. Otherwise people will be confused why things are moving when they move the mouse.

    Put something at the top so people know if they scroll up that the top will roll down. I still think a little tab at the top which says Panel or something would be great, because as I move the mouse around the top panel slides down when I don't expect and its a bit over sensitive.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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