[RESOLVED] Design/Concept Problem.. any ideas? (ZDepth & Mouse Events)

[Zeusbwr]

Ok, i have a bit of a conceptual problem. So please bare with me.


I have an image, that when scrolled over, it displays 25 thumbnails occupying the space of that image. So to recap, when you roll the mouse over this image, another moveiclip is set to be at a childindex infront of the image movieclip. And inside that "thumbnail clip" there is 25 image (movieclips) thumbnails.


Now i ran into the problem that i didn't think of to begin with. When you roll your mouse over (we'll call it "mcImage1", that is, the fullsize image) "mcImage1", swaps its child index with that of the thumbnails movieclip (now known as "mcThumbs"). And i wanted to simply add an event to mcThumbs that was dispatched whenever the mouse left its area, and that would swap mcThumb's child index with mcImage1's child index. However this does not work. The problem is, there is 25 images that occupy 100% of the space "mcThumbs" has, and therefor, no event is triggered from any mouse action.

Now i see a couple quick ways to fix this, but they seem costly. The most obvious being, have each of the 25 images dispatch events for when a mouse enters and exits them, so that you could check, if the mouse leaves "mcThumbs" but it is over a thumbnail, don't swap indexes.

That leads me to wonder though, is listening for 25 events costly on CPU/Ram? Or if the user whips his mouse around, he could in theory trigger 50+ (2 per image, and with a couple swipes of the mouse they can add up) dispatched events. This seems very costly to me..


The only thing i can think of is one form or another of making each of the 25 thumbnails let something know the mouse is over them. Because of i put a movieclip over them (say the size of all 25 of them for just 1 event needed), then they won't have any mouse events because a movieclip is infront of them. And, being that they are links, not having them active is pointless.


Any thoughts?

[cancerinform]

You can check event bubbling. That may be useful. If a button is a child of another button the mouse event on the child will affect both the child and parent.

http://flashas3.flashscript.biz/even..._bubbling.html

[Zeusbwr]

I just realized something that is confusing me. I have been struggling with this problem for nearly 2 days now, and its driving me mad.

The problem is, i have a movieclip that 25 thumbnails are loaded into, each thumbnail being a movieclip aswell. This main Movieclip (we'll call it mcMain) has mouse rollin & out events attached to it, as do the thumbnail images.

Two things should happen. When the user rolls over "mcMain" it fades its alpha in, and when it rolls out, it fades its alpha out. The thumbnails should do the same thing.

Now the thumbnails work fine, the problem persists on mcMain's side of it. When you roll onto mcMain it fades in as told, however when you roll over a thumbnail it fades mcMain out, and inturn, the thumbnails because they are inside mcMain.

Why is it doing this? When the mouse is over the thumbnails, isn't it still inside the movieclip and therefor should not be triggering the rollout event?

Can you think of anyway to fix this? The only thing i can think of is to have a timer be activated by mcMain's rollout function, upon which at the end of the timer it is checked to see if the mouse is currently over a thumbnail, then decides what to do.
This would work, but i see it as being a poor solution. A Timer leaves too much room for assuming, not to mention ugly delays.


Can you think of any decent way to do this? mcMain's "ROLL_OUT" event is always triggered before the thumbnails "ROLL_OVER" event..

Any ideas?

[cancerinform]

Event bubbling, check the above tutorial link. Here is a similar tutorial to separate button functions:

http://flashas3.flashscript.biz/mouse/button_event.html

[Zeusbwr]

I'll check that link out, however even after checking out the first one (when you posted it) i was unable to figure a fix for my problem directly.. :/

I do check your links

*edit*
Because it seems that even though my buttons are working correctly, the problem still persists that the "mcMain" clip thinks it no longer has the mouse over it when the mouse is over a child movieclip. I'll be trying to decipher this event bubbling.. but in the end i basically need to find a way to have a roll over event of a child movieclip, without the roll out event of the parent movieclip.

[senocular]

why not put everything in one movie clip and use rollover/out with that?

+-Roll-events----+
|                |
| +-fullimage--+ |
| +------------+ |
|                |
| +-thumbs-----+ |
| |[][][][][][]| |
| +------------+ |
|                |
+----------------+

[Zeusbwr]

Not quite sure what you mean.

All the thumbnail movieclips are children of one movieclip. The problem is the children need to also be rolled out, over, and clicked on. And the parent clip needs to be rolled out/over. The problem is when mcMain gets rolled out, it fades away 100%, so when you roll over a thumbnail (which is inside the mcMain), mcMain throws the event that you rolled out of it, and then hides the whole thing.. thumbnails included.

And then ofcourse, the rolled out event from mcMain is before the rolled in event from the thumbnail clips, So i can't just have mcMain's event check if a thumbnail is currently rolled over. Least not without pausing for a short duration, like a timer, but that just seems like a very poor way to do it.

[cancerinform]

In the rollover script of your child clips put this:

event.stopPropagation ();

[Zeusbwr]

i must be implementing my events wrong, because that did nothing (or so it seems.)

In my thumbnail class i have this: (inside the roll over event)

event.stopPropagation();
			this.dispatchEvent( new MouseEvent( MouseEvent.ROLL_OVER, true ) );

then i also tried commenting out both lines one by one with no result. In the end mcMain still thinks the mouse rolled out when the mouse went over the thumbnail.

For this to work, should i be directly subscribing to the thumbnails event? That is, should i, instead of subscribing inside the thumbnail the dispatching a new event, should i subscribe to the thumbnail rollover&out event from "mcMain"? I'll try that i guess, i'm out of ideas & understanding really.. just guessing.


*edit* Tell me this, and i'll know if i am implementing it wrong. take two movieclips then..
1.) Can you add a MovieClipB to MovieClipA.
2.) Make MovieClipA have Roll In & Out events.
3.) Make MovieClipB have Roll In, Out, and Click events.
4.) Then make it so that when you roll over MovieClipB, MovieClipA will not throw the Roll Out event?

[cancerinform]

Create Mouse eventlisteners


addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

[Zeusbwr]

ofcourse i have those.

For both the mcMain and the thumbnail clips i have the Roll In and Roll Out Listeners. With the thumbnail also having the Click listener.

Those All Work. They work fine, they do what their sposed to, and that is partially the problem.


When i roll over a thumbnail, which is inside mcMain, mcMain's Roll Out event is triggered.

I'll make a new project and example, either i'll see what i am doing wrong or i'll give you guys a better example.

[senocular]

you dont have to worry about event propagation or any of that - with rollover and rollout propagation is not an issue (though it is with mouseover and mouseout). If you use the container I suggested, it will work fine, for example...

use BoxesMain as your document class; it follows the same setup as the little diagram I drew above

[Zeusbwr]

Well i'm scannin the code tryin to find a quick way of making it so the box isn't full to make sure it works when not full, but i think i understand what you mean.

In other words, you have mcMain have 2 movieclips. One containing the Thumbnails, and one containing the roll over events i am using with mcMain currently... wait that wouldn't work. Maybe i don't understand. Gimme a few to take apart that example... im in brainfart mode with all this confusion lol.

Thanks again for all the help

*edit*
Yea it works with the the limited thumbnails, just lowered the loop count.

[senocular]

So you got it figured out? Works the way you want?

[Zeusbwr]

I believe it works the way i want.

I think i understand it! I kept looking at that and getting confused why mine wasn't working. Because i had nearly the same thing, i even had the manager class, or as you put it, "AllBoxesContainer". The problem was, when you moused over the thumbnail gallery, it would hide itself or show itself.

What i needed to to was give my manager class more control. The only things that need mouse over events are the manager class (to swap the display between showing and hiding the thumbnailCollection), and the thumbnails class to do the various effects on each image.

Give me some time to implement this new system, its nearly there now but my code needs a bit of reworking to set this up.

Thanks a ton guys, i think what you did senocular is what i was almost onto. This whole time i felt so close to the answer but i was too close to the problem. Thanks again , i'll post back on my results!

[Zeusbwr]

And bam just like that, it works.

Thanks a ton guys!

Note that to recap, in my last post i actually said it a bit wrong and i noticed once i started implementing things.
The Manager class did need more control, but the key problem was that the thumbnailCollection was still just triggering its own event. When the mouse was over the thumbnail collection THEN it would throw the event. Where as i needed to add a new movieclip inside the manager class, than put the thumbnail collection inside the movieclip. Then the mouse events would be truely from the Manager Class.


So it works, and it works nice and clean. Thanks again!