Flash HotSpot Rollover Pop

  • theBruney
  • Student
  • Student
  • User avatar
  • Posts: 67
  • Loc: China

Post 3+ Months Ago

Hello, I'm trying to create the effect similar to:

http://www.herosite.net/guide.htm

What I actually did was:
Import my image
Create new layer and draw shapes on wanted area
Convert new layer to symbol button and then edit in place
I then inserted key frame at 'Over' and then converted layer 2 to movie symbol
Then edited in place at over once more
Created a new layer and typed my text.

I then thought to reduce the alpha to 0 of scene1, because I wanted to get rid of the fill colour in the shapes I created. However all other symbols/objects of that layer inherited that property so you never get to see the hover unless you keep the colour of the shapes.

I believe I was doing it the incorrect way. Can anyone help?

Thanks.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

1. import image - you already did
2. draw shapes on wanted areas - you already did
3. set the alpha of the shapes to 0 (see the Color panel)
or, make the shapes graphics and set their color to alpha = 0
4. make the shapes (or graphics if you chosed the second way) movieclips
5. add one more layer inside each movieclip, and in the second frame add your text.
6. extend the layer with the shape in frame 2 as well
7. add one more layer inside each movieclip, name it: actions, and place in the first frame:
Code: [ Select ]
this.onRollOver = function()
{
  this.gotoAndStop(2);
}
this.onRollOut = function()
{
  this.gotoAndStop(1);
}
stop();
  1. this.onRollOver = function()
  2. {
  3.   this.gotoAndStop(2);
  4. }
  5. this.onRollOut = function()
  6. {
  7.   this.gotoAndStop(1);
  8. }
  9. stop();

place also in the second frame (not really necessary, but who knows :D)
Code: [ Select ]
stop();

7. test the movie
  • pow_haaweeese
  • Born
  • Born
  • pow_haaweeese
  • Posts: 1
  • Loc: SF Bay Area, CA

Post 3+ Months Ago

hi Ice,
Say, I've built this to your specs for over an hour now and can't get anything to "happen" during swf playback. I believe I've followed your instructions to the letter...but..to no avail.

I'd very much like to fwd a zip of my fla, and jpg image, to see if you could take a look.

thanks, when you have a sec,
Jim
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

For simplicity, let's say your background image is in place and only has one person in it.

Next we need two Movie Clips, not buttons; The first is the outline of the person, the second is for the text. Leave them opaque for now. Both of these movie clips need to have unique Instance Names, not just movie clip names. For example, person_1 and text_1.

You'll refer to these movie clips using their instance names.

Now in the root timeline, first frame, you'll place your script. Go through this a little bit at a time to make sure it's working.
Code: [ Select ]
person_1.onRollOver = function() {
   trace("rollover is true");
}
  1. person_1.onRollOver = function() {
  2.    trace("rollover is true");
  3. }


Now, when you test your movie and rollover the person_1 movie clip, the Output window will pop open and say "rollover is true".

If you get this far, you should be able to see, logically, how this works. Where previously we evoked the "trace()" function, we will now be acting on our second movie clip.

So...
Code: [ Select ]
person_1.onRollOver = function() {
   text_1.doSomethingCool();
}
  1. person_1.onRollOver = function() {
  2.    text_1.doSomethingCool();
  3. }


Eventually, the "something cool" is going to tell text_1 to move to the mouse's x, y position and become fully opaque at the same time. Flash has a very good language reference built into it's help files. :)

Assuming you get that far, you'll want to add the counterpart event handler of onRollOver which is onRollOut. In that function, you'll return text_1 to a transparent state.
Code: [ Select ]
person_1.onRollOver = function() {
   text_1.doSomethingCool();
}
person_1.onRollOut = function() {
   text_1.doSomethingCoolAgain();
}
  1. person_1.onRollOver = function() {
  2.    text_1.doSomethingCool();
  3. }
  4. person_1.onRollOut = function() {
  5.    text_1.doSomethingCoolAgain();
  6. }


Gool luck.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.