Solved

Flash CS4 -- How to swap multiple images on a text rollover -- and Leave it there.

Posted on 2009-07-08
21
1,560 Views
Last Modified: 2013-11-12
I am trying to accomplish something and I am totally lost....
I have a Flash Movie. It has 4 lines of text that are converted to button symbols.

When you roll over them, it displays a new image on the right hand side of the movie. OK. That part actually works OK. The challenge here is: I want the image to STAY when they Mouse Off, unless they Mouse Over ANOTHER image.

I was using the default button code with the Up Down Over, and that works great... but the over doesn't stick when you mouse out. If I put the pic in the OUT frame, well then i get one static picture and no activity.

I tried converting my buttons to movie clips and then writing a Mouse Over event in action script, but that failed miserably. (see below code, which was inserted into Frame 1) The whole screen just flickered madly, AND I couldn't get it to hit any of my breakpoints to test it.

So.... I guess I am looking for someone to point me toward a way to make this work: as a side note: In the picture that appears when you rollover, there is a hyperlink button that needs to be clickable.

Any advice/help is greatly appreciated.

Thanks.
Veronica
//This is in frame1 of my button.

import  flash.display.MovieClip;

import  flash.events.MouseEvent;
 

myMc.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);
 

function onRollOverHandler(myEvent:MouseEvent){

gotoAndStop(2);

}
 

//This is in Frame 2

stop();

Open in new window

0
Comment
Question by:VeeVan
  • 12
  • 9
21 Comments
 
LVL 22

Accepted Solution

by:
rascalpants earned 500 total points
ID: 24805242
you did the right thing by creating movieclips instead of using button symbols.  It is always best to create your own "buttons" and then control them with Actionscript.

So you should have all of your buttons separated from the image(s) that you want to display to the left.  the below code assumes your buttons are named sequentially and the corresponding images are the same.

below is what your code should look like...


rp

// all code on root frame 1
 

import flash.display.MovieClip;

import flash.events.MouseEvent;
 

btn1.id = 1; 

btn1.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn1.useHandCursor = true;

btn2.id = 2; 

btn2.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn2.useHandCursor = true;

btn3.id = 3; 

btn3.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn3.useHandCursor = true;
 

function onRollOverHandler( evt:MouseEvent){

  var theID:int = evt.currentTarget.id;

   

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

  {

    img[ (i+1) ].alpha = 0;

  }

  

  img[ theID ].alpha = 1;

}

 

stop();

Open in new window

0
 
LVL 1

Author Comment

by:VeeVan
ID: 24805900
OK... quick ?
When you say "This assumes that your buttons are named sequentially  and your graphics are as well."

I am actually swapping out a couple of graphics per button.

I have named the instances of my buttons btn1, btn2, btn3 and btn4.
How exactly do I want to name my images? (Sorry...)

Veronica
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24805902
Just out of curiosity... is there any way to just make the whole LAYER invisible?
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24805961
Also, i'm getting this compile error when I attempt to run:
1119: Access of possibly undefined property id through a reference with static type flash.display:SimpleButton.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24806191
"When you say "This assumes that your buttons are named sequentially  and your graphics are as well." "

if you look at my code, you will see three buttons (movieclips names btn1, btn2, btn3).  I was assigning an id to the movieclip so that it knows what corresponding image to display...  so you have 3 movieclips with images in them, and I gave them instance names of img1, img2, and img3 in my example.

"I am actually swapping out a couple of graphics per button."

then you can just as easily name them sequentially and have them change their display state as well...


"I have named the instances of my buttons btn1, btn2, btn3 and btn4.
How exactly do I want to name my images? (Sorry...)"

I would name them the same, just put a number at the end that corresponds to the button...  btn1 = img1


and the error you are getting is because you are not using a movieclip, or have somehow associated your movieclip with the SimpleButton class.

dont' do that  :)


rp
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24806201
"Just out of curiosity... is there any way to just make the whole LAYER invisible?"

and you don't really use layers...  you should just group objects(movieclips) in other movieclips, and then change the property of the holder clip.


rp
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24806316
OK... i have converted my buttons to movie clips (duh) and the error has gone away, however, I get the following error now, and I converted all my graphics to a symbol (movie clip) named img1,2,3 4. (the instances are named that.)

1120: Access of undefined property img.
@
img[ (i) ].alpha = 0;

and the same error at:
img[ theID ].alpha = 1;

Thanks!
Vee
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24806394
well your img movieclips need to be referenced with the right scope...  

can you post the entire message that you get...   because img should not be acting as a property, but as an object.


rp
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24806488
That's the entire error message. It comes up in the compiler when I try to run the movie.
I saved each one as a movie clip, and then named the instance Img1, etc.

Thanks.
V
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24806552
make sure you are using the right nomeclature... ActionScript is case sensitive.

try that...

rp

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:VeeVan
ID: 24806940
I'm going to try to recreate the whole movie, since I have added, subtracted and done lots of other stuff, and I think I may have a residual object hanging out somewhere. I'll keep you posted on the results.

And Yeah... actionscript is just like (almost C#) I just don't work with it (ActionScript) enough, and it always manages to frustrate me. :)
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24807256
Well, i recreated the entire thing, and it's still doing the same thing... i'm not sure why.
I even tried changing the instance name to myimg thinking that maybe if the object and the instance were named the same thing it would cause problems. No dice.

Any other ideas? I copied your code exactly, and everything is named properly.
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24807263
BTW: My images are all grouped into 1 movieclip for each button. That's correct, right?
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24807547
yes, you can group all of your movieclips into one movieclip, but just make sure when you reference them in code, you use dot syntax and scope them out correctly...  liek this...

imgHolder_mc.img1


rp
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24807563
ok. but my MAIN movieclip (the container if you will) is the one i am referencing in YOUR code, and it's what is giving me the property error.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24807673
give it an instance name, and then reference by that name in the code.


maybe post a link to your FLA...


rp
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24807976
Ok. Here is what I had to do to make it work:

  for( var i:int = 0; i < 4; i++ )
  {
    /*img[(i+1)].alpha = 0;*/
      img1.alpha = 0;
      img2.alpha = 0;
      img3.alpha = 0;
      img4.alpha = 0;
  }
 
  if (theID == 1) { img1.alpha = 1;}
  if (theID == 2) { img2.alpha = 2;}
  if (theID == 3) { img3.alpha = 3;}
  if (theID == 4) { img4.alpha = 3;}
}

and now it works beautifully!! Thank you ever so much for your assistance.
0
 
LVL 1

Author Comment

by:VeeVan
ID: 24807985
and the alpha line should actually be:

  if (theID == 1) { img1.alpha = 1;}
  if (theID == 2) { img2.alpha = 1;}
  if (theID == 3) { img3.alpha = 1;}
  if (theID == 4) { img4.alpha = 1;}
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24808147
you know what...  I know why it wasn't working...    I normally setup an array with all of the movieclips in them and then loop through them that way...  

so img[ i ]  obviously does not work, because I was mixing up code examples...  below is the code that I should have typed  :)


so your if/then conditional statements are not needed...


rp


// all code on root frame 1

 

import flash.display.MovieClip;

import flash.events.MouseEvent;

 

btn1.id = 1; 

btn1.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn1.useHandCursor = true;

btn2.id = 2; 

btn2.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn2.useHandCursor = true;

btn3.id = 3; 

btn3.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);

btn3.useHandCursor = true;

 

function onRollOverHandler( evt:MouseEvent){

  var theID:int = evt.currentTarget.id;

   

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

  {

    this["img" + (i+1) ].alpha = 0;

  }

  

  this[ "img" + theID ].alpha = 1;

}

 

stop();

Open in new window

0
 
LVL 1

Author Comment

by:VeeVan
ID: 24808168
Ok. So that was a big Duh moment on MY part as well. :) I should know better. I just figured that ActionScript has some weird and funky concatenation syntax. LOL.

Thanks for the update. It's definitely prettier than MY code.
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24808265
yeah, sorry about that...  normally when I setup navigation, I put them all in an array first, so I can loop through them...  like this

var navList:Array = new Array();
navList.push( {theClip: btn1, theID: 1} );
navList.push( {theClip: btn2, theID: 2} );
navList.push( {theClip: btn3, theID: 3} );


then I can loop through them to setup the addEventListener code as well as anything else they might need...

for(...)
  var clip:MovieClip = navList[i].theClip;
  clip.id = navList[i].theID;
  clip.addEventListener(MouseEvent.MOUSE_OVER, onRollOverHandler);
  clip.useHandCursor = true;
}

again... sorry it took me so long to see that...


rp
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now