TODAY'S POSTS
|
||||||
Development
 REPLY THREAD |
|
|
Thread Tools | Search this Thread | Display Modes |
|
#1
12-16-2004, 09:06 AM
|
|||
|
|||
|
Dynamic Motion Tween
Hi everybody,
I'm trying to create a simple effect I've seen several times before, but for some reason just can't quite figure out. I need to create a dynamic "sliding arrow" that slides underneath the navigational element (button) the user hovers over. For example, let's say I have a navigation like this: [HOME] [NAV 1] [NAV 2] ^ (This ASCII is just so you get the idea, I'm using actual images here!) If the user mouses over Nav 1, I need the arrow to gently slide (tween) to the center point on the same vertical axis (same y-value) under Nav 1. Then the same thing if they mouse over Nav 2. The thing is, let's say they've just moused over Nav 2 and then go over Home - I need the arrow to be able to glide back over there as well. This would be completely dynamic based on the user's mouse movement(s). So far the only way I know of to do this is to create motion tweens for every possible contingency and add actionscript accordingly, but I'm sure there's a correct way to do it. Any thoughts?
__________________
Josh Hughey - Ionex Interactive Forward-Velocity - Awesome Hosting Solutions Ionex Interactive - Website Design and Development |
|
#2
12-16-2004, 09:49 AM
|
||||
|
||||
|
convert the images to buttons and place movieclips(or the same movieclip) in the "over" frame of each button
cheers
__________________
Every problem is an opportunity in disguise! |
|
#3
12-17-2004, 01:36 AM
|
||||
|
||||
|
The real answer (or one of them)
Here's one way.
Create a MC of the arrow and place it on the stage -- call it "arrowMC". Add this code to the first frame. Actionscript:
var targetX;
onEnterFrame=function() {
if(this.targetX!=undefined) {
this._x+=Math.ceil((this.targetX-this._x)/5);
}
}Then on each button (assuming the registration point is centered) add the following code: Actionscript:
on(mouseOver){
arrowMC.targetX=this._x
}
on(mouseOut){
arrowMC.targetX=undefined;
} |
|
#4
12-17-2004, 04:45 AM
|
||||
|
||||
Tween Class
The correct way to do it...... is which ever way that works. Since there are multiple ways of making it work, the next question would be what is the best way of making it work. Depends on what you want. In many cases, I like the easiest way. That's where using the Tween class comes in handy (in my opinion).
The Tween class is located in the package: mx.transitions.Tween The format for using the Tween class is: Actionscript:
/** * obj The object that is to be tweened * prop The property of the object to be tweened * func The Easing function to use * begin Start value of the property * finish End value of the property * duration Either the number of frames or seconds the tween lasts * useSeconds Boolean value indicating whether duration is measured in frames or seconds */ var tweenObj:Tween = new Tween (obj, prop, func, begin, finish, duration, useSeconds); [update]Currently have documentation for the Tween class[/update] You can find info on it in some other sites like actionscript.org . The easing functions are in: mx.transtions.easing There is more info on the Easing Class here. Anyway, on to making it work. Seems overwhelming, but MM has done most of the work for us. We just need to know how to get it going. You need to import the packages first (Note, in my example I am putting all code on the first frame of the main timeline. This is a single frame movie): Actionscript:
// import the Tween class and the Easing class package import mx.transitions.Tween; import mx.transitions.easing.*; Then you can set up your tween object on the button events: Actionscript:
// this will be our tween object
var tweenObj:Tween;
// set on rollover events for the buttons
home.onRollOver = nav1.onRollOver = nav2.onRollOver = function()
{
// stop the previous tween
tweenObj.stop();
// tween object - you can mess with the different parameters and see how it affects the tween
tweenObj = new Tween (arrow_mc, "_x", Strong.easeOut, arrow_mc._x, this._x + this._width / 2, 1, true);
};
__________________
Our greatest glory is not in never falling but in rising everytime we fall. - Confucius Blog | Shared Items Last edited by Scottae : 12-15-2005 at 05:29 PM. |
God Moderator|
#6
12-17-2004, 09:55 AM
|
||||
|
||||
|
Quote:
Started off my day with this one.  made me smile.merry xmas
__________________
Every problem is an opportunity in disguise! |
|
#7
12-17-2004, 12:37 PM
|
||||
|
||||
@ houc0015 - No it is not......but I believe that this Tween class was spawned by Robert Penner's easing equations. He has a set of equations that I've used in Flash MX that works very well (see ActionScript 1.0 Equations)
@ Rantanplan - 
__________________
Our greatest glory is not in never falling but in rising everytime we fall. - Confucius Blog | Shared Items |
|
#8
01-01-2005, 02:44 AM
|
||||
|
||||
|
__________________
Our greatest glory is not in never falling but in rising everytime we fall. - Confucius Blog | Shared Items |
«
Previous Thread
|
Next Thread
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | Search this Thread |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Resolved: motion tween | akos91 | Flash MX |
1 | 03-16-2004 05:00 AM |
| motion or shape tween | mstram | General Flash | 1 | 07-12-2003 03:29 AM |
| motion tween and file size | Gros Pingouin | Newbies |
2 | 03-07-2003 05:21 PM |
| Mouse over motion tween??? | lacount | Newbies |
3 | 12-31-2002 02:05 PM |
| what font for alpha tween, how about motion tween? | makc | Design and Animation |
1 | 09-29-2001 05:09 PM |
All times are GMT. The time now is 01:43 PM.