Solved

How do I activate a movieclip on rollover and rewind it on rollout?

Posted on 2009-03-30
13
2,360 Views
Last Modified: 2012-06-27
I have a movieclip called offer_mc, which I would like to be user activated on rollover and then for it to rewind on rollout, at any point in the timeline.
0
Comment
Question by:LLC0706
  • 7
  • 6
13 Comments
 
LVL 5

Expert Comment

by:john_hollings
ID: 24017714
I would use labels to control the movie clip.  For example:  In you movie clip timeline I would have a layer called actions and a layer below called labels.  On frame one of your MC I would have the following ActionScript in a key frame on the actions layer:  
stop();

In the labels layer I would create a blank key frame and label this as start.

In frame two of the labels layer again have a blank key frame and label this over.

Now I'm not sure if you are using ActionScript 2 or 3 and how you have structured your Movie Clip.  However I will continue with the assumption of ActionScript 3.

Create another layer labeled button and create an invisible button.  

Just draw a rectangle with fill but no border.  Select it and press F8 to create a symbol.  Select button from the list and give it a name.  Now double click the symbol you just created and you will see four frames on the timeline.  To create an invisible button click and drag the keyframe to the hit frame.

Return to the timeline of your movie clip and make sure the invisible button is on the button layer extended through to the end of your movie clip timeline.

Give the button an instance name activate_btn for example.  Now move to your main root timeline and if you have an ActionScript layer using the following code to get the activation to work on rollover.

Hope this is of help.

//add an event listener to the activate button to listen out for when someone rolls over it, and action the function activate_btn_ROLLOVER

movieclip_mc.activate_btn.addEventListener(MouseEvent.ROLL_OVER, activate_btn_ROLLOVER);
 

//add an event listener to the activate button to listen out for when someone rolls out, and action the function activate_btn_ROLLOUT

movieclip_mc.activate_btn.addEventListener(MouseEvent.ROLL_OUT, activate_btn_ROLLOUT);
 

//function to action when rollover is detected

function activate_btn_ROLLOVER(e:MouseEvent):void

{

   movieclip.gotoAndPlay("over");

}
 

//function to action when rollout is detected

function activate_btn_ROLLOUT(e:MouseEvent):void

{

   movieclip.gotoAndPlay("start");

}

Open in new window

0
 

Author Comment

by:LLC0706
ID: 24017940
Hi
I forgot to state that I'm using actionScript 2. I've also given my movieclip an instance name of offer_mc.
0
 
LVL 5

Expert Comment

by:john_hollings
ID: 24018000
Ok.  To change this to actionscript 2 you only need to amend the code for the main root timeline.  You don't need the event listeners only the onRollOver and onRollOut functions as shown in the code snippet below.
offer_mc.activate_btn.onRollOver = function()

{

    offer_mc.gotoAndPlay("over");

}
 

offer_mc.activate_btn.onRollOut = function()

{

    offer_mc.gotoAndPlay("start");

}

Open in new window

0
 

Author Comment

by:LLC0706
ID: 24023208
This solution works fine, however I would like the movieclip to rewind back through the previous frames on rollout rather than snapping straight back to the first frame as this solution does.

The movieclip is a single layer frame by frame animation, with no tweening. The movie is of a roller garage door, which goes up when the user rolls over it and goes back down again when the user rolls off it, so that if the user then rolls back over it again before it has reached the first frame it will go back up again.

Is this possible?
0
 
LVL 5

Expert Comment

by:john_hollings
ID: 24036897
I believe you could use tweener for this type of reserve playback you are after.

Watch this video if you haven't used Tweener before: http://www.gotoandlearn.com/player.php?id=45
It's AS3 but Tweener in AS2 is practically the same.

You will need to download tweener from here http://code.google.com/p/tweener/downloads/list - Make sure you get the AS2 version and not AS3.  Basically you are going to need the following code within your onRollOut function:

Watch the tutorial to understand tweener and how to use it.

Hope this helps.
offer_mc.activate_btn.onRollOut = function()

{

   Tweener.addTween(offer_mc,{_frame:15, time:1});

}

Open in new window

0
 

Author Comment

by:LLC0706
ID: 24066802
Sorry for the late reply.

I've been trying to get the Tweener to work, but I'm getting the following error message when I test the movie:
------------------------------------------------------------------------------------------------------------------------------
**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'e'.

**Error** C:\Documents and Settings\LLC0706My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: Line 391: There is no property with the name 'e'.
handleError(_tweenList[i], e, "onOverwrite");

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'e'.

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: Line 740: There is no property with the name 'e'.
handleError(tTweening, e, "onUpdate");

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'e'.

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLDcaurina\transitions\Tweener.as: Line 770: There is no property with the name 'e'.
handleError(tTweening, e, "onStart");

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'e'.

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: Line 832: There is no property with the name 'e'.
handleError(tTweening, e, "onUpdate");

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'e'.

**Error** C:\Documents and Settings\LLC0706My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: Line 845: There is no property with the name 'e'.
handleError(tTweening, e, "onComplete");

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: There is no property with the name 'metaError'.

**Error** C:\Documents and Settings\LLC0706\My Documents\My Flash\projectLLD\caurina\transitions\Tweener.as: Line 1068: There is no property with the name 'metaError'.
printError(pTweening.scope.toString() + " raised an error while executing the 'onError' handler. Original error:\n " + pError +  "\nonError error: " + metaError);

Total ActionScript Errors: 12
Reported Errors: 12
-----------------------------------------------------------------------------------------------------------------------------
I'm using Flash MX2004 (not professional)
I've downloaded version: tweener_1_31_74_as_fl7.zip
I've installed the caurina folder locally to the project.
This is the current code:

import caurina.transitions.Tweener;

offer_mc.activate_btn.onRollOver = function()
{
    offer_mc.gotoAndPlay("over");
}
 
offer_mc.activate_btn.onRollOut = function()
{
    Tweener.addTween(offer_mc, {_frame:15, time:1});
}

This is the first time that I have used Tweener; any suggestions?
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 5

Expert Comment

by:john_hollings
ID: 24075243
Firstly, try removing the _ from _frame:

Tweeer.addTween(offer_mc, {frame:1, time:1});

If this does not solve the problem, can you provide your fla file?
0
 

Author Comment

by:LLC0706
ID: 24076390
Hi
I'm not able to provide the .fla file as Expert Exchange does not allow this file format as an attached file.
I've recreated the movie using Flash CS3 Professional, using actionScript 2.0, although it can now be coded using actionScript 3.0 if you prefer.

I've tried removing the_frame from _frame as you suggested; the movie plays but you get this error message:

## [Tweener] Error: The property 'frame' doesn't seem to be a normal object property of [object Object] or a registered special property.

You can view the movie at this address: http://freespace.virgin.net/linda.c

It's almost working correctly, however I would like the door to go down frame by frame on roll out, instead of on the second roll over as it currently does.
0
 
LVL 5

Expert Comment

by:john_hollings
ID: 24085430
EE does not allow fla's but if make a copy of your fla and then rename it with an extension of txt instead of .fla it will upload.  I have done some digging and _frame is the right syntax so without the fla I'm not too sure what to suggest.
0
 

Author Comment

by:LLC0706
ID: 24085747
Hi
I've attached the file for you.
offer-test-01.txt
0
 
LVL 5

Accepted Solution

by:
john_hollings earned 500 total points
ID: 24095302
Hi,

I must admit I couldn't work out why those errors appear however I have provide an alternative solution which after some testing seems to be doing the task you asked for.  The downside is I have had to add quite a bit of code to the MC itself.  This code controls the state and direction of play, which is called by actions in the _root timeline.

Have a look and let me know what you think.
offer-test-02.txt
0
 

Author Comment

by:LLC0706
ID: 24095444
Brilliant! This is exactly how I wanted it to work. Thank you so much for persisting with this.
0
 

Author Closing Comment

by:LLC0706
ID: 31564270
This is exactly how I wanted it to work. Thank you so much for persisting with this.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

747 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

12 Experts available now in Live!

Get 1:1 Help Now