PDA

View Full Version : Using MC Tween Add On Question...



tomyknoker
09-26-2006, 06:16 AM
Hi All,

I downloaded the MC Tween extension and things are working really well with it so far! Just have a few questions and I've attached the file:

1) If you take a look at the file you'll see that when the user rolls over an mc it slides to the right, and holds there until they roll off it. The issue I'm having is that, if I make rollOver area too small when they rollOver, the mc moves and they rollOff... So I have to make the RollOver active area as big as the image which I'm fine with the only issue is that it activates even if it is hidden by another mc... How can I stop this?

2) Also does anyone know an easier way to slide 5 mc's to the right at the same time easily? Or do I have to tell each one exactly where to be?

BLiZZaRD
09-26-2006, 07:18 PM
Actions Layer says:



#include "mc_tween2.as"


however, that file is not included in your zip. You will need to attach it as well so we can see what is going on ;)

tomyknoker
09-26-2006, 10:17 PM
Actions Layer says:



#include "mc_tween2.as"


however, that file is not included in your zip. You will need to attach it as well so we can see what is going on ;)
Hi sorry .as file is attached now :)

BLiZZaRD
09-27-2006, 01:13 AM
Okay, have the files now. Will take a looksee when I have a free oment to do so :)

tomyknoker
09-27-2006, 01:23 AM
Okay, have the files now. Will take a looksee when I have a free oment to do so :)Hi Blizzard,

Thanks again! I have another issue now, to make the each mc go back to the origianl position without having to specifiy specific _x & _y values I added this:
onClipEvent (load) {
this.originalX = this._x; // store the original position
}, It all worked fine until I added my intro, because the original _x value the mc is hidden this is where it returns too... If you look at the new attached file and roll onto the bars you'll see what I'm talking about :confused: :confused:

BLiZZaRD
09-27-2006, 01:27 AM
I haven't had a chance to look at the files because I can't get to my desktop to open them, LOL so much going on right now..

But I have a question. What you are trying to accomplish is this: You have 5 "buttons" or MCs whatever, that you want to slide to the right when someone mouses over them, and then again back to the left when someone mouses out of them, yes?

If this is correct, then why bother with the complicated AS file? If each is a button, why not just make the up/over/down states reflect what you want?

If they are MCs, why not do your tweens yourself inside the MCs and use AS to tell the movie which frame to go to on mouse over?

tomyknoker
09-27-2006, 01:32 AM
I haven't had a chance to look at the files because I can't get to my desktop to open them, LOL so much going on right now..

But I have a question. What you are trying to accomplish is this: You have 5 "buttons" or MCs whatever, that you want to slide to the right when someone mouses over them, and then again back to the left when someone mouses out of them, yes?

If this is correct, then why bother with the complicated AS file? If each is a button, why not just make the up/over/down states reflect what you want?

If they are MCs, why not do your tweens yourself inside the MCs and use AS to tell the movie which frame to go to on mouse over?Well I'm using the MC Tween it gives better transitions for tweening, I guess there is probably better ways to do it? Maybe I could still use the tweening but make the code work better... I guess you'll see what I mean when you get to your desktop :p Ahhhhhh I'm so confused! :confused:

BLiZZaRD
09-27-2006, 02:08 AM
Yes, I see what you mean. However the problem still remains you are using too much coding for a simple thing.

Look at this: MouseOver Tween (http://cleverwasteoftime.com/Flashtesting/mouseOver_tween.html)

You will see how mousing over the image and not moving the mouse will make the image slide right and sit. mouse out and it returns.

3 layers, 2 stop(); codes, and 2 mouse action codes. done.

tomyknoker
09-27-2006, 02:17 AM
Yes, I see what you mean. However the problem still remains you are using too much coding for a simple thing.

Look at this: MouseOver Tween (http://cleverwasteoftime.com/Flashtesting/mouseOver_tween.html)

You will see how mousing over the image and not moving the mouse will make the image slide right and sit. mouse out and it returns.

3 layers, 2 stop(); codes, and 2 mouse action codes. done.Ok I have done some thinking... I think this works better, it's a bit cleaner... although still complicated I guess, but needs to be as it will be doing other things later on... Can you see why the red bars don't return to their original position?? :confused:

BLiZZaRD
09-27-2006, 02:52 AM
Not 100 percent, but it looks like you have 2 states for the button, pre activated and post activated.

in the AS file you have 2 functions. The first: ActivateItem, makes the bar move to the right, and then holds it there, and then disables the bar.

then you have deActivateItem.

Now the enabled = false in the ActivateItem function concernes me, if you want the button to beable to go back to where it was on mouseOut, then you can't disable it.

Try setting that to "true" instead of false and see what happens.

I did notice they return to their position when you click on another one though. Weird.

BLiZZaRD
09-27-2006, 02:57 AM
verified... this line in the AS file:



// When the mouse exits the menu option.. go back up.
myButtons[i].onRollout = myButtons[i].onReleaseOutside = function() {
this.tween("_x", this.originalX, 0.5);


is telling it only use the rollOut when outside of that area is released, meaning you have to click elsewhere on the stage to make the rollOut function work.

you can achieve the onRollOut function by removing


= myButtons[i].onReleaseOutside




<EDIT>
OH, and it should be onRollOut not onRollout ;)
</EDIT>

tomyknoker
09-27-2006, 02:59 AM
verified... this line in the AS file:



// When the mouse exits the menu option.. go back up.
myButtons[i].onRollout = myButtons[i].onReleaseOutside = function() {
this.tween("_x", this.originalX, 0.5);


is telling it only use the rollOut when outside of that area is released, meaning you have to click elsewhere on the stage to make the rollOut function work.

you can achieve the onRollout function by removing


= myButtons[i].onReleaseOutside
Can I make all the buttons move to the right at the same time? If a button is rolled over?

BLiZZaRD
09-27-2006, 03:07 AM
Wouldn't that defeat the whole point of this AS script?

For the original problem replace your code with this:



// This is an array, a list of the buttons used.
var myButtons = [this.right_1, this.right_2, this.right_3, this.right_4];

// Loops on all buttons from the first to the last one
for (var i=0; i<myButtons.length; i++) {
// Sets its original X value. This will be used later for reference.
myButtons[i].originalX = myButtons[i]._x;

// When the mouse rolls over this menu option... go down just a bit.
// NOTICE: I'm not taking into consideration the problem of having the hit area going down and "moving" the
// mouse area and out of the button (possible rollover flicking). This is just a simple example afterall.
myButtons[i].onRollOver = function() {
this.tween("_x", this.originalX + 5, 1);
};
// When the mouse exits the menu option.. go back up.
myButtons[i].onRollOut = function() {
this.tween("_x", this.originalX, 0.5);
};
// When the mouse clicks.. activate it!
myButtons[i].onRelease = function() {
this._parent.activateItem (this);
// *** Add some function here or somewhere else to handle real button actions!
trace ("Hey, button "+this+" was clicked.");
};
}

this.activateItem = function(item) {
// Function that activates a button.

// Checks if there's an activated item already; if so, deactivates it.
if (this.currentItem != false) this.deActivateItem();

// Activates it, finally
this.currentItem = item;
this.currentItem.alphaTo (50, 1); // makes it 'disabled'
this.currentItem.enabled = false; // makes it a disabled button, so it won't receive mouse events
};

this.deActivateItem = function() {
// Deactivates the current activated menu item.
this.currentItem.enabled = true; // back to a normal button/movieclip
this.currentItem.alphaTo (100, 0.5); // back to its original opacity
this.currentItem.tween("_x", this.currentItem.originalX, 0.5); // back to its original position
this.currentItem = undefined;
};

this.stop();


This will enable the on mouseOut function you were after :)

tomyknoker
09-27-2006, 03:47 AM
Wouldn't that defeat the whole point of this AS script?

For the original problem replace your code with this:



// This is an array, a list of the buttons used.
var myButtons = [this.right_1, this.right_2, this.right_3, this.right_4];

// Loops on all buttons from the first to the last one
for (var i=0; i<myButtons.length; i++) {
// Sets its original X value. This will be used later for reference.
myButtons[i].originalX = myButtons[i]._x;

// When the mouse rolls over this menu option... go down just a bit.
// NOTICE: I'm not taking into consideration the problem of having the hit area going down and "moving" the
// mouse area and out of the button (possible rollover flicking). This is just a simple example afterall.
myButtons[i].onRollOver = function() {
this.tween("_x", this.originalX + 5, 1);
};
// When the mouse exits the menu option.. go back up.
myButtons[i].onRollOut = function() {
this.tween("_x", this.originalX, 0.5);
};
// When the mouse clicks.. activate it!
myButtons[i].onRelease = function() {
this._parent.activateItem (this);
// *** Add some function here or somewhere else to handle real button actions!
trace ("Hey, button "+this+" was clicked.");
};
}

this.activateItem = function(item) {
// Function that activates a button.

// Checks if there's an activated item already; if so, deactivates it.
if (this.currentItem != false) this.deActivateItem();

// Activates it, finally
this.currentItem = item;
this.currentItem.alphaTo (50, 1); // makes it 'disabled'
this.currentItem.enabled = false; // makes it a disabled button, so it won't receive mouse events
};

this.deActivateItem = function() {
// Deactivates the current activated menu item.
this.currentItem.enabled = true; // back to a normal button/movieclip
this.currentItem.alphaTo (100, 0.5); // back to its original opacity
this.currentItem.tween("_x", this.currentItem.originalX, 0.5); // back to its original position
this.currentItem = undefined;
};

this.stop();


This will enable the on mouseOut function you were after :)Thanks Bliazzard... Yea I guess it would, so what would I edit if I wanted to achive that? Basically when you roll over any of the red buttons I want all the buttons to move either to the right or left depending on which side they are on of the activated button... Get what I mean? :confused:

tomyknoker
09-27-2006, 03:51 AM
Wouldn't that defeat the whole point of this AS script?

For the original problem replace your code with this:



// This is an array, a list of the buttons used.
var myButtons = [this.right_1, this.right_2, this.right_3, this.right_4];

// Loops on all buttons from the first to the last one
for (var i=0; i<myButtons.length; i++) {
// Sets its original X value. This will be used later for reference.
myButtons[i].originalX = myButtons[i]._x;

// When the mouse rolls over this menu option... go down just a bit.
// NOTICE: I'm not taking into consideration the problem of having the hit area going down and "moving" the
// mouse area and out of the button (possible rollover flicking). This is just a simple example afterall.
myButtons[i].onRollOver = function() {
this.tween("_x", this.originalX + 5, 1);
};
// When the mouse exits the menu option.. go back up.
myButtons[i].onRollOut = function() {
this.tween("_x", this.originalX, 0.5);
};
// When the mouse clicks.. activate it!
myButtons[i].onRelease = function() {
this._parent.activateItem (this);
// *** Add some function here or somewhere else to handle real button actions!
trace ("Hey, button "+this+" was clicked.");
};
}

this.activateItem = function(item) {
// Function that activates a button.

// Checks if there's an activated item already; if so, deactivates it.
if (this.currentItem != false) this.deActivateItem();

// Activates it, finally
this.currentItem = item;
this.currentItem.alphaTo (50, 1); // makes it 'disabled'
this.currentItem.enabled = false; // makes it a disabled button, so it won't receive mouse events
};

this.deActivateItem = function() {
// Deactivates the current activated menu item.
this.currentItem.enabled = true; // back to a normal button/movieclip
this.currentItem.alphaTo (100, 0.5); // back to its original opacity
this.currentItem.tween("_x", this.currentItem.originalX, 0.5); // back to its original position
this.currentItem = undefined;
};

this.stop();


This will enable the on mouseOut function you were after :)Also I'm confused by replacing the code I can't see what the difference is?

BLiZZaRD
09-27-2006, 03:51 AM
So what you want is your 5 buttons to move in sequence?

so if right1 is hovered, you want right2, right3, right4 and right5 to move to the right, and if right3 is hovered, you want right1 and right2 to go left, and right4 and right5 to go right, is that correct?


it is doable, and your buttons are sufficient size... let me think a minute.

tomyknoker
09-27-2006, 03:54 AM
YAY! I can't believe you understood what I was saying ha! Yes that's what I want!

BLiZZaRD
09-27-2006, 04:49 AM
We are going to have to resort to if/else statements.

something like:

if button1 moves, move all
else if buttons 2 moves, move 2 -4, and move 1 left

etc..

problem is I just can't think of WHERE...

tomyknoker
09-27-2006, 04:51 AM
We are going to have to resort to if/else statements.

something like:

if button1 moves, move all
else if buttons 2 moves, move 2 -4, and move 1 left

etc..

problem is I just can't think of WHERE...Ah ok I gotcha... but where is the million dolalr question!

BLiZZaRD
09-27-2006, 05:10 AM
Logically it will go in this section:



myButtons[i].onRollOver = function() {
this.tween("_x", this.originalX + 5, 1);
};
// When the mouse exits the menu option.. go back up.
myButtons[i].onRollOut = function() {
this.tween("_x", this.originalX, 0.5);
};


how to write it becomes a problem then, though, as we are trying to pin point one of the i's from the array.



if(i==1){
this.move_them_all_dammit!;
}

didn't work :(