Flash HotSpot Rollover Pop

  • theBruney
  • Student
  • Student
  • User avatar
  • Joined: May 30, 2007
  • Posts: 67
  • Loc: China
  • Status: Offline

Post July 6th, 2007, 5:53 pm

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 6th, 2007, 5:53 pm

  • IceCold
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 05, 2004
  • Posts: 1254
  • Loc: Ro
  • Status: Offline

Post July 8th, 2007, 11:44 pm

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
“True mastery transcede any particular art. It stems from mastery of oneself - the ability, developed throgh self-discipline, to be calm, fully aware, and complety in tune with oneself and the surroundings. Then, and only then, can a person know himself. ”
  • pow_haaweeese
  • Born
  • Born
  • No Avatar
  • Joined: Nov 04, 2007
  • Posts: 1
  • Loc: SF Bay Area, CA
  • Status: Offline

Post November 4th, 2007, 9:31 pm

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
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 5th, 2007, 5:01 am

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

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 94 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.