Images rotate when I mouseover one of 10 buttons. Help!

Hi,

I have 10 navigational buttons that will be located vertically on the right side of the page. I want an image to load in the center of the page when I mouseover one of the buttons. Then a different image to load when I mouseover the second button, and so on for all 10 buttons. I want all of the images to have the same position on the screen.

How can I do this? Any help would be appreciated!

Thanks,
Dan

place a new movie clip in the position you want your onmouse over images. Inside that put each image on its own keyframe i.e.

image1 | image2 | image3
kf1 | kf2 | kf3

put a stop action on each keyframe as well.

Now if you have 10 images you will also have 10 keyframes. Give the movie an instance name of imageAni.

Now left click on the first button. Open the AS panel and enter:

on(rollOver)
{
imageAni.gotoAndStop(1);
}

and the last button:

on(rollOver)
{
imageAni.gotoAndStop(10);
}

i'll leave it to you to fill in the rest :¬)

Theres an alternative which is to dynamically load each image. Take a look through some earlier posts to find out more about this. One of the posts has a dynamic image loader with a button. Looking at that may help you if you decide to take this route.

this is a long way round but simple....

convert each image to a separate movie clip and name them.
(eg:image 1)make the first frame of the movie a blank keyframe with a stop(); action then second frame with the image and a stop action.

now on your button use

on(RollOver) {

tellTarget("_root.image1");{
Nextframe

tellTraget ("_root.image2");
gotoandPlay("1");

//* and so on*//
}
}

// it can work quite well//

Thanks for the help people. I've only been developing with Flash for a couple of weeks now. So I'm loaded with questions.

Do either of you, or anyone, know why Mozilla Firebird makes you download Active X, while all the other browsers (that I use, IE Netscape, Opera) can load the .swf file just fine?

Is there a way for me to address the issue, or is it something that Firebird users just have to put up with?

Dan

Hi, I dont use firebird so I did a bit of a search. This is one of the closest answers I could find:

Flash and Shockwave

hendikins at the bottem has a brief bit of info that hopefully will put you on the right path. Try searching that forum, it seemed to be full o knowledgable people.

Hey Tann,

Thanks for the help, I am making great progress with my project. I am currently trying to make the images to appear less abruptly, maybe a fade effect. I can't find any good resources to help me. Do you have any suggestions? Here is what I have so far:



Dan

Hi, I'm a bit groggy from last night so this might be a bit rough.

It all depends on how you loaded the images. If you did the static version then you may have a bit of work to do. If you read up on dynamically loading the images then its a bit simpler.

Theres a couple of issues either way. What happens when the animations half way through the fade in for one image but the user hovers over another button. should the fade in continue and just play through the fade out. i.e.

button1->fadein->fadeout->button2->fadein

or should it just jump to the fade in for the second hovered button. Same with fade outs. If your ani's are really short then it might not be a problem.

Anyhow let me know which method you used and I'll come up with something for you then.

Hi,

I used the static method, and since that worked for me I didn't even try the dynamically loading images method. The buttons are pretty close together, so the user has a good chance of hovering over one while the previous button is still fading out. What do you think?

Thanks,
Dan

Hi, are you really an Lt? thats cool hehe anyhow yer i dont think you really need the fade in and outs for the products page. It would slow down the navi, things like that are better suited for page transitions. I just mean that at the moment you can see each thing really quickly but I reckon it would get irratating if you had to keep waiting for the next thing to load up. so all thumbs up for your current design