Next / Prev Buttons with follow mouse within dynamically resizing containers

[JKB]

Hey guys,

AS 2 Flash CS5

so the Title says pretty much it, what i'm trying to achieve is pretty much shown here:

http://grandpeople.no/work/#diamond/



My first attempt was to make 2 giant movieclips over a AS2 Gallery, one almost left and one aligned right - 60px from right side via actionscript...

in actionscript i made these mcs behave as buttons calling the next and previous functions

the idea was to have a follow mouse script in each of the movieclip "containers" that would show a "next" or "previous" sign and make it follow the mouse....

turned out the usability was far from perfect because obviously the movieclips dont resize and at smaller resolution would not exactly result in a enjoyable user experience....

plus the follow mouse script ignored my idea to actually stay inside the movieclip container and just followed the mouse everywhere....

so after days of messing around with it i ditched the whole thing and decided to cry for help.........


there has to be a more elegant solution with maybe 2 movieclip containers dynamically resizing to the stage on each half of the frame... staying away from the borders and a menu on the left and a slide-in info panel on the right just like the logo on the top and maybe 50 pixels from the bottom.

plus 2 follow mouse scripts that use the containers as "frames" and actually staying there....and in a perfect world would fade in or out when inactive or the mouse leaves / enters each of the movieclips....

i am relatively new to this, so thats my best idea, plus i have posted the link abovve so you dont really have to listen to my nonsense

Any help is very very much appreciated.

Cheers!

[gparis]

Both arrows are never visible at the same time. Just do one movieclip where PREVIOUS is on frame1 and NEXT is on frame2. Switch between keyframes 1 & 2 depending on the _x position. You'll need control over one movieclip only. All fade in/out and follow functions will be easier to handle.

For the hit areas you are right, use 2 mcs resizing to cover the % of the stage you want active.



gparis

[JKB]

Hi thanks for your fast reply,

the first part sounds brilliant,.. but i a; just dont know how exactly how to pull it off, and b; i would still require the hit areas to resize anyway so maybe i thought it would be easier to just load an external follow mouse swf for each, next and previous, have it dynamically resized, and use the same resizing code for the hit area mcs.

The main reason i am trying to go the external swf route, is becuase after couple of hours of experimenting and lots of failure of mousefollow scripts that follow the mouse everywhere i found this post in another forum where i downloaded the fla from and it worked for me....:

http://www.actionscript.org/forums/s....php3?t=126955


the only thing is:

how could i make that black box disappear when the mouse is outside of the red area?

and is there a way to resize the red area to half of the stage - 60 pixels top -100 pixels right -60 pixels bottom?

and do the exact same thing for the previous button...except of course on the left side...

and then apply that code, that resizes the red area in the external swf, to the hit area mcs that call the functions from the gallery....

Hope that didn't make you go "Huh?" too much....

does this make any sense at all? And if so, how could it be done?

Cheers

[JKB]

Ok, my girlfriend hates me by now, but i fixed one of the main issues, the followmouse next/prev buttons via 2 mcs and this cool startDrag alternative i found here on the board:

http://board.flashkit.com/board/showthread.php?t=810550

Not the prettiest way to do it, but i think i can make it work ok with my frankenflash type of way.


What would make me ( and my girlfriend ) really happy tho, would be a "real" solution to this resizing problem.


Again, how can i resize 2 movieclips,one taking the left half and the other one right half of the stage
leaving a border of say 50 px top,bottom,right,left...

this cant be hard, i just dunno how to do it


Any help, point outs links to tutorials... whatever is much appreciated.

PS: dunno what happened to my other reply,... thanks a lot to gparis for his brilliant idea that was just a little beyond my abilities

[gparis]

Is your layout liquid? as in, are you publishing 100% scaleMode noscale, with an onResize event? or are the dimensions and placements fixed?

In any case you can use Stage.height and Stage.width (no underscores) as constants. Example (to use in a function called in the onResize in case of a liquid layout):

mc_left._x = 50;
mc_left._y = 50;
mc_left._height = Stage.height - 100;
mc_left._width = (Stage.width/2) - 50;

gparis

[JKB]

Hi,

yes, my setup is a main timeline with on frame 1:

stage align tl
noscale resize listener and a main preloader for the gallery

then a control mc with the controls.

I found a lot of information on how to get things centered, just not how to have 2 objects centered next to each other and then have their width and height adjusted at the same time.

Sorry for my lack of wisdom, but what exactly do you mean by

Stage.height and Stage.width (no underscores) as constants.

how would i assign that to these 2 movieclips?

[gparis]

read the edited post above

gparis

[JKB]

I can't believe my eyes....

t_previous._x = 50;
t_previous._y = 50;
t_previous._height = Stage.height - 100;
t_previous._width = (Stage.width/2) - 50;

t_next._x = (Stage.width/2);
t_next._y = 50;
t_next._height = Stage.height - 100;
t_next._width = (Stage.width/2) - 50;

and it does exactly what i wanted it to do.... right there...

yessss flash!!! follow my command!!!

thank you very very much for this gparis for this brilliant and simple solution, you just saved my weekend. can't thank you enough.

[JKB]

Ok,.... i just found out there's one little detail left (of course) and i'm done with this...

The images of the gallery will cycle when the previous button is pressed repeatedly, but it won't cycle through the images when i use the next button.
It will just stop at the last image.

It was implemented in the gallery as a mousewheel function that i assigned to the buttons.

It has to be pretty obvious....

//

call button previous
t_previous.onRelease = function(delta){

//function
root.myCP.t_hol.buttons["b" + root.curImage].gotoAndPlay("out");
    if (delta == 3) {
        if (root.curImage < root.totalItems - 1) {
            root.curImage = root.curImage + 1;
        } else {
            root.curImage = 0;
        }
    } else {
        if (root.curImage > 0) {
            root.curImage = root.curImage - 1;
        } else {
            root.curImage = root.totalItems - 1;
        }
    }
    root.showImage(root.curImage);
};




//call button next
t_next.onRelease = function(delta){
    
    
//function next

root.myCP.t_hol.buttons["b" + root.curImage].gotoAndPlay("out");
    if (delta == 3) {
        if (root.curImage > root.totalItems + 1) {
            root.curImage = root.curImage - 1;
        } else {
            root.curImage = 0;
        }
    } else {
        if (root.curImage > 0) {
            root.curImage = root.curImage + 1;
        } else {
            root.curImage = root.curImage + 1;
        }
    }
    root.showImage(root.curImage);
};