1680 posts Envato Elite Author
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
Tean says

I dont have an online example now so I am using a product from here. I hope the author doesnt mind :)

Anyway, go here: http://activeden.net/item/xml-gallery-with-thumbnail-scroller-v2/full_screen_preview/74687

Put a mouse over thumbnails, and let it scroll and watch button mode “breaks” when crossing from thumb to thumb. I am currently experiencing the same problem and its quite anoying…

One would think its happening because there is a space between thumbs, but I have tried even spacing the thumbs so that each one lies under the previous one (like thumb.x = i * (thumb.width – 1) ) so there cant possibly be any space between, so why is this happening?

Thank you!

159 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
theRiviera says

If your file is is AS3 you can add the buttonMode to the holder that contains the thumnails, and leave the other actions on the thumbs.

Have you tried that?

1680 posts Envato Elite Author
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
Tean says
If your file is is AS3 you can add the buttonMode to the holder that contains the thumnails, and leave the other actions on the thumbs. Have you tried that?

Yes, I have, and result is the same.

I have also tried making just a shape rectangle, wrapping it into a movieClip, give it an export name of “Box” and make it as simlpe as I can:

http://pastie.org/774544

1162 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured in an Envato Bundle
+4 more
FlashTang says

i * (thumb.width +1)

1680 posts Envato Elite Author
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
Tean says

but if you add the space that brakes the button mode.

567 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
iamdok says

Hey,

The pastie isn’t working for some reason.

Maybe it has something to do with your events. When is the button mode being added? Inially or on rollover? and what happening on roll out of the thumbs? Is the rollout of the thumb triggering a rollout event of the parent clip too? (MOUSE_OUT vs ROLL _OUT)

I would just suggest what the initial commenter suggested above. To place the button mode on the parent clip, after that the problem must have something to do with the events.

Or maybe you could also try giving each thumb an transparent background which is wider than the thumb and each thumb’s background meets the next one, thus allowing space between the thumbs, but keeping button mode. Them the buttonmode could be set on the combined thumb and background clip.

1680 posts Envato Elite Author
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
Tean says

the code from the pastie is here, i dont really know how this forum formats this:

like I said in my first post, I event tried to go as simply as possible, and just made a shape rectange, converted it into a movieclip, gave an export name of “Box”, and added this code:

var s:Sprite = new Sprite();
addChild(s);

var _box:Box;

for (var i:int = 0; i < 20; i ++) {

    _box = new Box();
    _box.mouseChildren = false;
    _box.buttonMode = true;

    _box.y = i * (_box.height);

    s.addChild(_box);

}
addEventListener(Event.ENTER_FRAME, scroll, false, 0, true);
function scroll(e:Event):void {
    TweenLite.to(s, .5, {y:((stage.stageHeight - s.height)/stage.stageHeight * mouseY)});
}

even if i try like this: _box.y = i * (_box.height – 1); aka tuck the next thumb under the previous one, button mode is still breaking…

567 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+4 more
iamdok says

Hey tean,

I tested your code and made a couple of changes. Also I’m using tweener instead of TweenLite.

import caurina.transitions.*;

//set buttonMode of container
var s:Sprite = new Sprite();
s.buttonMode = true;
addChild(s);

var _box:Box;

//create boxes
for (var i:int = 0; i < 20; i ++) {

    _box = new Box();

    //space boxes out
    _box.y = i * (_box.height + 4);

    s.addChild(_box);

}

//draw transparent bg after s has been populated with all boxes
s.graphics.beginFill(0xffffff, 0);
s.graphics.drawRect(0,0,s.width, s.height);
s.graphics.endFill();

//start scrolling
addEventListener(Event.ENTER_FRAME, scroll, false, 0, true);

function scroll(e:Event):void 
{
    Tweener.addTween(s,{y:((stage.stageHeight - s.height)/stage.stageHeight * mouseY), time:0.5});
}

I’ve basically set the button mode of the container sprite, then when the sprite has been filled with the boxes, I’ve drawn a transparent backgound covering the final width and height of the sprite.

The buttonMode no longer breaks.

Donagh

1680 posts Envato Elite Author
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
Tean says

cool, thanks! I actually tried adding transparent shape inside of container sprite at the bottom when it has been populated, but that didnt work either…

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by