# Navigation similar to draftdigital.com

**URL:** <https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335>\
**Category:** flash\
**Created:** [July 12, 2004, 1:55pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335 "2004-07-12T13:55:10Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajeanne26](https://avatars.discourse-cdn.com/v4/letter/a/8491ac/32.png) [@ajeanne26](https://forum.kirupa.com/u/ajeanne26)\
**Post date:** [July 12, 2004, 1:55pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/1 "2004-07-12T13:55:10Z")

</div>

Hi,

I’m trying to find a tutorial and/or a fla that is similar to the effect that they use on the navigation at [www.draftdigital.com](http://www.draftdigital.com)

If you click on work and view the client list, that’s the effect I’m trying to emulate.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 12, 2004, 2:54pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/2 "2004-07-12T14:54:39Z")

</div>

Something like this?

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 13, 2004, 6:13pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/3 "2004-07-13T18:13:18Z")

</div>

Thanks for taking the time to put this together.  
I really appreciate it.

The buttons are not staying scaled if you click on them, if I click and drag the mouse away from the button it stays scaled but it I release the mouse when I’m still on the button it doesn’t stay scaled.

Is it possible to fix this?

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 15, 2004, 6:00pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/4 "2004-07-15T18:00:07Z")

</div>

Hi,

Sorry to double post but I’ve tried to figure this problem out but I can’t.  
Thanks.

> [@ajeanne26](#):
>
> Thanks for taking the time to put this together.  
> I really appreciate it.
> 
> The buttons are not staying scaled if you click on them, if I click and drag the mouse away from the button it stays scaled but it I release the mouse when I’m still on the button it doesn’t stay scaled.
> 
> Is it possible to fix this?
> 
> Thanks for your help!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 15, 2004, 6:46pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/5 "2004-07-15T18:46:37Z")

</div>

I’m not sure if this is what you’re after…  
Have a look and let me know:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 15, 2004, 7:06pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/6 "2004-07-15T19:06:35Z")

</div>

Thanks again—you’re awesome!

Just one more question.

I want to load external .swf files into the same movie the navigation will be in I will probably load it into an empty mc. How do I add a loadMovie(); action to the buttons?

> [@scotty](#):
>
> I’m not sure if this is what you’re after…  
> Have a look and let me know:)
> 
> scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 15, 2004, 7:23pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/7 "2004-07-15T19:23:23Z")

</div>

The easiest way (if you want to stick to my code) is making a new array with your swf’s in it eg movArray.

```auto
movArray = new Array();
movArray = ["home.swf", ........etc,"contact.swf"];

```

Make an empty movieclip with the instancename “box” and change the code in the onRelease like this:

```auto
	but.onRelease = function() {
		box.loadMovie(movArray[this.i]);
		setButtons(this.i);
	};

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 16, 2004, 8:39pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/8 "2004-07-16T20:39:17Z")

</div>

How do I set a function to change the color if you press on the button  
and then have it revert back to the original color in you click on another button?

> [@scotty](#):
>
> The easiest way (if you want to stick to my code) is making a new array with your swf’s in it eg movArray.
> 
> ```auto
> movArray = new Array();
> movArray = ["home.swf", ........etc,"contact.swf"];
> 
> ```
> 
> Make an empty movieclip with the instancename “box” and change the code in the onRelease like this:
> 
> ```auto
> but.onRelease = function() {
> box.loadMovie(movArray[this.i]);
> setButtons(this.i);
> };
> 
> ```
> 
> scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 16, 2004, 10:33pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/9 "2004-07-16T22:33:24Z")

</div>

You can do it two ways:  
use setRGB() or  
make a second frame in your button mc (put a stop in the first;)), color that like you want.  
Then add in the setButtons function (if(j!=k)

```auto
this["bt"+j].gotoAndStop(1);

```

and in the else part

```auto
this["bt"+j].gotoAndStop(2);

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 2:17pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/10 "2004-07-19T14:17:47Z")

</div>

Ok, I tried the setRGB function, but it’s not working.  
I think I did it wrong, please see code below.

```auto
MovieClip.prototype.easeIn = function(tar) {
	this.onEnterFrame = function() {
		this._xscale = tar-(tar-this._xscale)/1.1;
		this._yscale = this._xscale;
		if (Math.abs(tar-this._xscale)<1) {
			this._xscale = this._yscale=tar;
			delete this.onEnterFrame;
		}
	};
};
title_array = new Array();
title_array = ["ABC TELEVISION", "ABC RADIO", "BETHEL WOODS", "BRANDOPOLY", "HOME BOX OFFICE", "INFINITY BROADCASTING", "INTEREP", "JVC", "SMITHSONIAN"];
movArray = new Array();
movArray = ["home.swf","test.swf","contact.swf"];
for (i=0; i<9; i++) {
	but = this["bt"+i];
	but.i = i;
	but.bt_info.text = title_array*;
	but.onRollOver = function() {
		this.easeIn(175);
	};
	but.onRollOut = function() {
		this.easeIn(100);
	};
	but.onRelease = function() {
		box.loadMovie(movArray[this.i]);
		setButtons(this.i);
		setColor(this.i);
	};
}
//function to set the buttons
function setButtons(k) {
	for (j=0; j<9; j++) {
		//for the buttons that aren't released
		if (j != k) {
			this["bt"+j].easeIn(100);
			this["bt"+j].enabled = 1;
			//for the one that is released
		} else {
			this["bt"+j].easeIn(150);
			this["bt"+j].enabled = 0;
		}
	}
}
//function to set the color on release
function setColor(k) {
	for (j=0; j<9; j++) {
		//for the buttons that aren't released
		if (j != k) {
			this["bt"+j].setRGB(0xCCCCCC);
			//for the one that is released
		} else {
			this["bt"+j].setRGB(0xFFFFFF);
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 3:07pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/11 "2004-07-19T15:07:02Z")

</div>

Ah, so close=)  
You’ve forgotten to define the color Object

```auto
myColor = new Color(targetmc)

```

Further, if you use it this way, the whole mc will get coloured, so you can’t read the text anymore (cause it’s inside the button).  
A way to work around this, is make the background in the button a mc, give it the instance name “bg”, now your can look like this

```auto
function setColor(k) {
	for (j=0; j<9; j++) {
		myColor = new Color(this["bt"+j].bg);
		if (j != k) {
			myColor.setRGB(0xFFCCCC);
		} else {
			myColor.setRGB(0xFF0000);
		}
	}
}

```

btw, you can combine this function with the setButtons()😉

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 3:31pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/12 "2004-07-19T15:31:43Z")

</div>

thanks so much…  
I just wanted the color of the text, not the entire mc to change.  
So i was fooling around with the code a bit and I targeted the text field  
"bt\_info" instead of the mc “bg”.

```auto
MovieClip.prototype.easeIn = function(tar) {
	this.onEnterFrame = function() {
		this._xscale = tar-(tar-this._xscale)/1.1;
		this._yscale = this._xscale;
		if (Math.abs(tar-this._xscale)<1) {
			this._xscale = this._yscale=tar;
			delete this.onEnterFrame;
		}
	};
};
title_array = new Array();
title_array = ["ABC TELEVISION", "ABC RADIO", "BETHEL WOODS", "BRANDOPOLY", "HOME BOX OFFICE", "INFINITY BROADCASTING", "INTEREP", "JVC", "SMITHSONIAN"];
movArray = new Array();
movArray = ["home.swf", "test.swf", "contact.swf"];
for (i=0; i<9; i++) {
	but = this["bt"+i];
	but.i = i;
	but.bt_info.text = title_array*;
	but.onRollOver = function() {
		this.easeIn(175);
	};
	but.onRollOut = function() {
		this.easeIn(100);
	};
	but.onRelease = function() {
		box.loadMovie(movArray[this.i]);
		setButtons(this.i);
		setColor(this.i);
	};
}
//function to set the buttons
function setButtons(k) {
	for (j=0; j<9; j++) {
		//for the buttons that aren't released
		if (j != k) {
			this["bt"+j].easeIn(100);
			this["bt"+j].enabled = 1;
			//for the one that is released
		} else {
			this["bt"+j].easeIn(150);
			this["bt"+j].enabled = 0;
		}
	}
}
//function to set the color on release
function setColor(k) {
	for (j=0; j<9; j++) {
		myColor = new Color(this["bt"+j].bt_info);
		//for the buttons that aren't released
		if (j != k) {
			myColor.setRGB(0x000000);
                 this["bt"+j].enabled = 1;
			//for the one that is released
		} else {
			myColor.setRGB(0xFF0000);
			this["bt"+j].enabled = 0;
		}
	}
}

```

Now, when I click on the button, the text color changes and if I rollover another button and then click on that…the previous button reverts back to the original color and the one I just clicked changes.

woo hoo!!!

Thanks so much for helping me to get this to work!!!

P.S. would it make the coding cleaner and a bit smaller if I combined the setButton and setColor functions like you suggested in your last post?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 7:16pm UTC](https://forum.kirupa.com/t/navigation-similar-to-draftdigital-com/57335/13 "2004-07-19T19:16:59Z")

</div>

Glad you’ve got what you want=)  
About the coding, I think I would combine them, but having those functions apart can give a better oversight, so it’s up to you:)

scotty(-: