?
Solved

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

Posted on 2009-07-08
21
Medium Priority
?
1,567 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 9
21 Comments
 
LVL 22

Accepted Solution

by:
rascalpants earned 2000 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
NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

 
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
 
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

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
Suggested Courses

777 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