Something like this...

[iSerce]

Hey,

I'm currently newbie to flash, and need to create a website purely based in flash. Now i wanted to get the navigation to look something like this: http://www.dittolondon.com/index.html - So that when you scroll over it, it fades to a different colour and goes up sightly, with nice smooth action.

How would i go about doing this? Any tutorials around??

[Medyman]

Hi iSerce...

I don't know of any tutorials but here is a little walkthrough.

First, you're gonna want to download mcTween from http://hosted.zeh.com.br/mctween. It's an AS2 extention that makes tweening so so much more flexible and easier.

The code to do something like that would like something like this:


#include "mc_tween2.as"

button.onRollOver = function() {
this.colorTo(0xff0000, .5, "easeOutQuad");
this.ySlideTo(this.y - 10, .5, "easeOutQuad");
}

button.onRollOut = function() {
this.colorTo(null, .5, "easeOutQuad");
this.ySlideTo(this.y + 10, .5, "easeOutQuad");
}

To learn more about the syntax:
ColorTo:

<MovieClip|TextField>.colorTo(color [, seconds, animation type, delay, callback, extra1, extra2]);

ySlideTo:

<MovieClip|TextField>.ySlideTo(y [, seconds, animation type, delay, callback, extra1, extra2]);

It's pretty self explanatory. Post back with any questions.

You might exerience a glitch when you've rolled over something then roll off and then quickly roll back on again. There are ways around this but make sure this is what you want and we can work through fixing that glitch.

[iSerce]

Hi, I just can't seem to get my head around this - I am a newbie to flash :s

[BLiZZaRD]

Thats a lot of work for a simple Tween and Tint.

I have attached a zip file (in Flash 8 format) that will show you the exact method used in your linked example. It is quite simple.

Make a square the same color as your back ground, and convert to a symbol. edit symbol and make a new layer, and place the text on it, at the bottom of the square. Convert the text to a symbol as well. move over a few frames and insert a keyframe. now using the arrow keys, move the text MC to the top of the square. With it still selected (the text) in the Properties menu, click on the color drop down list and choose tint. Select your color from the choices. Now right click on frame one of the text and select "copy frame" then right click again and select "create tween"
now move further down and where you want the frame to be right click and choose "paste frame":
again, create tween on the PREVIOUS keyframe, now you have your up and down and color tweens. Add a stop code :


stop();

to frame one AND to the next keyframe. You are done making your button.

Exit edit mode and click once on the "button" you just made. Open the actions panel and write this:



on (rollOver) {
this.gotoAndPlay(2);
}
on (rollOut) {
this.gotoAndPlay(7);
}


the only thing you may have to change is the (7) to reflect the frame # AFTER the second stop(); you put in.

If you open the .fla included you can follow along to see where I did things, and how it was done.

Enjoy :) And Welcome to Flash!

As one point of advice though.. I would recommend NOT making your entire site Flash. There are a lot of people that have Flash disabled, or not installed, or JavaScript turned off, which will render your site useless to them. It is still a large enough number to be of concern.

Also, an entire Flash site can take for ever to load, which will drive away visitors. Just add Flash for that extra Splash here and there, and your site will be better for it.

[Medyman]

Hi, I just can't seem to get my head around this - I am a newbie to flash :s

Let me try to explain it better.
What Blizzard showed is another way to go about it, though I find working on the timeline to be a bit more cumbersome (if you want to change something, it takes too my effort for my liking).

First, let's start off with the finished Actionscript and then I'll walk you through it.


// Include McTween class
#include "mc_tween2.as"

// OnRollover Function
function Over() {
delete this.onRollOver;
this.colorTo(0xff0000, .25, "linear");
this.ySlideTo(this._y-10, .25, "easeOutQuad", 0, function() { this.onRollOut = Out;} );

}

// onRollOut Function
function Out() {
delete this.onRollOut;
this.colorTo(null, .25, "linear");
this.ySlideTo(this._y+10, .25, "easeOutQuad", 0, function() { this.onRollOver = Over; });
}

// Assign Mouse Events to MCs
Link1.onRollOver = Over;
Link2.onRollOver = Over;
Link3.onRollOver = Over;



First and foremost, please go to the website I mentioned in my previous post and download and install McTween. It's a very robust tweening engine and allow for quick and easy management of your tweens. Doing it on the timeline isn't as clean, smooth, or powerful as doing it via actionscript.

First, we want to set the onRollOver state -- this means set the actions that the assigned movieclips will take when someone rolls over them with a mouse pointer.

So, we have this bit of code:


function Over() {
delete this.onRollOver;
this.colorTo(0xff0000, .25, "linear");
this.ySlideTo(this._y-10, .25, "easeOutQuad", 0, function() { this.onRollOut = Out;} );

}

Since we will be assigning the same set of actions to muliple movieclips (i.e. to each of your links in a menu bar), I've created a function so we can call this multiple times easily.

Now, to the code:
Using McTween sytanx, I have:

this.colorTo(0xff0000, .25, "linear");

This is saying, change the color of "this" (referring to which ever movieclip your mouse is over) to 0xff0000 (red) in .25 seconds using a "linear" ease type.

You can see the ease types here: http://hosted.zeh.com.br/mctween/animationtypes.html. Having a linear ease type for a color tween is probably best as it's a uniform transition between one color to the other.

Next, we say:

this.ySlideTo(this._y-10, .25, "easeOutQuad", 0, function() { this.onRollOut = Out;} );

This is saying, when someone mouses over the link ("this"), decrease the y value by 10 pixels (from it's current position) thereby moving it up on the screen. It's also saying to do it in .25 seconds using an "easeOutQuad" animation type.

Here is where it gets a little tricky. The 0 after the "easeOutQuad" means that there should be no delay (i.e. the actions happens immediately when you mouse over). The final bit of code is saying that once this particluar tween is finished, set the onRollOut event (when the user mouses off the particluar button) to a function called "Out".

We will be writing out in a little while.
At the beginning of the code block, i have a delete call. I'll explain this at the end.

Now, to the onRollOut event state.

// onRollOut Function
function Out() {
delete this.onRollOut;
this.colorTo(null, .25, "linear");
this.ySlideTo(this._y+10, .25, "easeOutQuad", 0, function() { this.onRollOver = Over; });
}

Again, I've used a function to allow for ease of calling it without cumbersome code. The syntax for the tweens here is the same.


this.colorTo(null, .25, "linear");
This is telling Flash to remove all tinting ("null") and thereby return to default color in .25 seconds using a linear ease. If you wanted to change it to another color, you could add another color instead of "null".


this.ySlideTo(this._y+10, .25, "easeOutQuad", 0, function() { this.onRollOver = Over; });
}
This bit of code says, increase the y value of "this" movieclip over .25 seconds using an easeOutQuad animation type, with 0 delay and upon completion of the tween, to se the onRollOver state equal to the function called Over which we wrote earlier.

Lastly, we have this:

// Assign Mouse Events to MCs
Link1.onRollOver = Over;
Link2.onRollOver = Over;
Link3.onRollOver = Over;

This is bascially specifiying which movieclips the actions should be associated with. As an example I've specified 3 links with instance names of Link1, Link2, and Link3.

Now, to why I'm deleting each action when it starts. Like I explained in my previous post, if you are quick with the mouse, it can create some glitchy behavior. Say you're mousing over something, mouse off, and mouse back on again.

So the actions happen as thus (relating to the y shift).
1. Y value decreases by 10
2. Y value increases by 10
3. Y value decreases by 10

Now, if that happened smoothly it wouldn't be a problem. But since you moused off and then quickly right back on, step 2 never finished. So when flash decreases that value by 10, you'll end up with a link that is not back at it's original location.

So, to fix this, we delete each action at it's start and then set it again when the animation is complete. This way, even if you mouse back on to something that is doing the onRollOut animations, it won't effect the look.

Hope that clears it up for you. It's really not very complicated once you play around with it a little. I think you'll find it easier to accomplish than cumbersome timeline animations.

If you have any questions, post back. I'd be happy to clear them up

[Medyman]

Also, an entire Flash site can take for ever to load, which will drive away visitors. Just add Flash for that extra Splash here and there, and your site will be better for it.


I don't think that's really an issue if coded properly. Too many people go heavy on the timeline driven stuff though and that does take forever to load.

But if you do everything at runtime and load things dynamically, I wouldn't say it's that much more loadtime than a HTML site.

[BLiZZaRD]

First, let's start off with
...
Hope that clears it up for you


Jesus. Scare the kid away why don'tcha? LOL For some one who doesn't know Flash at all, to have to download an add on, learn how to script it, learn how to fix it's problems, tweak its parameters, and test and retest for any bugs and other flaws... that's a lot to cram down their throat.

I am all for a complete AS Flash movie. and most of my games are 1 frame scripts as well. But let the kid learn Flash before you redesign the wheel a little bit ;)



I don't think that's really an issue if coded properly. Too many people go heavy on the timeline driven stuff though and that does take forever to load.

But if you do everything at runtime and load things dynamically, I wouldn't say it's that much more loadtime than a HTML site.


tomato/tomato (doesn't work when typed does it?)

It also depends on the end user and his computer. If I go to a timeline driven Flash site I will see it eventually, but If I have JS disabled, how much of a script driven movie will I see?

My computer loading a 2MB image either dynamically or internally is still downloading a 2MB image. I can add it to the load time of my movie, and you can add it to the load time of the dynamic image, but it still remains that my computer has to download a 2MB image, I am waiting either way.

My use of "can" is the same as your use of "if"..

tomato/tomato :)

[Medyman]

Jesus. Scare the kid away why don'tcha? LOL For some one who doesn't know Flash at all, to have to download an add on, learn how to script it, learn how to fix it's problems, tweak its parameters, and test and retest for any bugs and other flaws... that's a lot to cram down their throat.



I started out with Actionscript with a similar implementation and I caught on fairly quickly.

I was just giving some options. If not for this poster than someone else who may come along. But lets let the OP decide instead of passing judgement on his/her competance.

Maybe it's just me, but I much prefer using actionscript than timeline based things. It's a lot cleaner.

Plus, if the OP is trying to build a totally flash-based website, mcTween is a good tool to have in your arsenal. Otherwise, you get caught in the horrible mess of creating everything on the timeline.