FORUMS: list search recent posts

How can I create this navigation

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Brian Bradley
How can I create this navigation
on Aug 31, 2010 at 2:17:04 pm

Hello everyone,

I was hoping someone out their could help me out. I'm getting back into Flash and I'm trying to help my girlfriend out with her website. Unfortunetly I have an old version of Flash MX. I need to create a navigation bar just like in the link I've provide below. Can any of you guys and girls out their help me out. How can I create this effect using actionscripts instead on hundreds of keyframes

Return to posts index

demetri tashie
Re: How can I create this navigation (AS3 reply)
on Aug 31, 2010 at 4:01:34 pm

Flash MX, huh? i don't think that version even used AS3 yet, so disregard this message if you can't use AS3...

there is a lot going on there (and not all good), so i will try to break down the 2 basic things that i see, and believe you are looking for.

First off, get yourself a good tweening engine, don't rely on Flash's. get greensock's TweenLite which is great ( ). it is amazing, fast, easy, and (but once you realize how great it is and how much you will use it, send these guys a few bucks to keep them going)

now you can much more efficiently do the tweens/transitions that are involved.

the first thing to address is that on rollover the 'buttons' change color. this is simple and easily done with TweenLite. see my file/code

the second is the moving/sliding panels. this can be a little tricky, but thought about and organized correctly, and using TweenLite or similar engine, it can be done a lot easier than is normally laid out in most tutorials. here is a recent thread where i described this for someone else:

here is a posting of my revised file which now also has a rollover effect:

here is the revised file if you want to look at and disect it. it is well commented out, but if you have more questions, feel free to ask. of course you won't be able to open the file in MX, so the complete code follows below. hopefully you can get the idea from the posted example and the code.
import com.greensock.*;
import com.greensock.plugins.*; // only needed if you want the rollover color change effect
TweenPlugin.activate([TintPlugin]); // only needed if you want the rollover color change effect

// this slides the panels into their initial positions
TweenLite.from(a, 1,{delay:1, y:600});
TweenLite.from(b, 1,{delay:2, y:600});
TweenLite.from(c, 1,{delay:3, y:600});

// this gives the panles thier event listeners
a.addEventListener(MouseEvent.CLICK, changePanelsA);
b.addEventListener(MouseEvent.CLICK, changePanelsB);
c.addEventListener(MouseEvent.CLICK, changePanelsC);

// the movement of the 3 panels broken into separate functions for easier understanding
// the "if" statements take into account all their possible starting positions, and final positions
function changePanelsA(event:MouseEvent):void {
if (c.y<=100&&b.y<=65) {,1,{y:500});,1,{y:467});
} else if (c.y>=400 && b.y<=65) {,1,{y:467});

function changePanelsB(event:MouseEvent):void {
if (b.y<=65&&c.y<=100) {,1,{y:500});
} else if ( b.y>=450 && c.y>=450) {,1,{y:61});

function changePanelsC(event:MouseEvent):void {
if (c.y>=450&&b.y>=400) {,1,{y:94});,1,{y:61});
} else if ( c.y>=450 && b.y<=100) {,1,{y:94});

// ******* code below here is only to make the panel buttons change color on mouse over & mouse out. omit if not needed.

a.btn1.addEventListener(MouseEvent.MOUSE_OVER, changeButton);
b.btn2.addEventListener(MouseEvent.MOUSE_OVER, changeButton);
c.btn3.addEventListener(MouseEvent.MOUSE_OVER, changeButton);

a.btn1.addEventListener(MouseEvent.MOUSE_OUT, changeButtonBack);
b.btn2.addEventListener(MouseEvent.MOUSE_OUT, changeButtonBack);
c.btn3.addEventListener(MouseEvent.MOUSE_OUT, changeButtonBack);

function changeButton(e:MouseEvent):void
{, 1, { tint:0xcc9900});


function changeButtonBack(e:MouseEvent):void
{, 1, { tint:null});


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved