Cool Navigation that I cannot figure out

[jjski]

Somebody please help me with this. I cannot find a fla or a tutorial. I have seen this effect many times before. I have been trying and I cannot figure out how each component reacts with the other components.
The example is in the navigation seen here:

http://www.code-media.com/home.htm

Thanks for any help

[jayemsee]

im not to keen on action script, but i can help you do it the harder way! basically the top 2 boxes and the lower right are on the same movie, but on press of button it loads an external swf into the lower left box.

start with movie 550X400
use line tool - draw vertical and horizontal (centered)
(movie looks as if it is into 4 boxes)
create your buttons
add script to button kinda like this.....

// use this action to get the transition between button presses, just add stop action when tween is done and unload whatever movie)

on press {
play
unloadMovie(1)

// use this action to load .swf, just make sure you load on level 1)

on release
loadMovieNum("blah.swf",1)

}

[cybergold]

Can we get an example? how would you fit those movies onto the main timeline, and make them appear to be part of it?

[jayemsee]

i'll get one up here by the end of the day!
j@yemsee;)

[jjski]

If you could put a fla up, that would be great. I can't see how it would work with loading in new swfs. They need to react off of each other, but if you can figure it out, I would love to see it done this way. I almost had it figured out with action scripting, but not quite.

[Guig0]

to load external movies on a desired place you can do in one of these two ways:

#1 (easy):

loadMovieNum("load.swf", 1);
make you FLAs (main and to-be-loaded movies) with the same stage size. place the content of the to-be-loaded movies in the spot you want them to be loaded. ex:

you have a main movie with 200 w and 100 h. the first half (the first 100 w an all 100 h) will be the menu that is located on the main movie, the other half (the last 100 w an all 100 h) wiil be the spot were the loaded movies will sit. Make your main FLA with the menu opsitioned in the first half and make the loaded movies with theyr content positioned in the last half.


#2 (not so easy, but more flexible):

loadMovie("load.swf", "movieClip");
you´ll need to make a movieclip on your main movie that will nest the loaded movies, place it on the right place on your main FLA. the loaded movies will be loade inside the movie clip.


Cheers :bounce:

[jjski]

I know how to load movies. Take a look at the example link that I put in my first post. The question was how do I get the navigation to react to the other components in the menu?

[Guig0]

the #1 load in levels (in this case, level 1), the #2 load in to target(in this case a movie clip instance named movieClip).

[Guig0]

react ?

can you be more specific?

[jayemsee]

onClipEvent (enterFrame)
{
setProperty("_root.nav.overview_nav", _x, _root.nav.overview_nav._x + (_root.x_values[0] - _root.nav.overview_nav._x) * _root.ratio);
setProperty("_root.nav.web_nav", _x, _root.nav.web_nav._x + (_root.x_values[1] - _root.nav.web_nav._x) * _root.ratio);
setProperty("_root.nav.brand_nav", _x, _root.nav.brand_nav._x + (_root.x_values[2] - _root.nav.brand_nav._x) * _root.ratio);
setProperty("_root.nav.print_nav", _x, _root.nav.print_nav._x + (_root.x_values[3] - _root.nav.print_nav._x) * _root.ratio);
setProperty("_root.nav.multimedia_nav", _x, _root.nav.multimedia_nav._x + (_root.x_values[4] - _root.nav.multimedia_nav._x) * _root.ratio);
setProperty("_root.nav.awards_nav", _x, _root.nav.awards_nav._x + (_root.x_values[5] - _root.nav.awards_nav._x) * _root.ratio);
setProperty("_root.nav.resume_nav", _x, _root.nav.resume_nav._x + (_root.x_values[6] - _root.nav.resume_nav._x) * _root.ratio);
setProperty("_root.nav.contact_nav", _x, _root.nav.contact_nav._x + (_root.x_values[7] - _root.nav.contact_nav._x) * _root.ratio);
}

// [Action in Frame 1]
getURL("FSCommand:allowscale", "false");
setProperty("_root.Bar", _xscale, 0);
_level0.load = "Buffering Data...";

// [Action in Frame 35]
stop();

// [Action in Frame 107]
gotoAndPlay(108);

// [Action in Frame 108]
increment = 24.850000;
ratio = 0.500000;
content_width = 6.550000 * increment;
items = 8;
x_values = new Array(items);
for (i = 0; i < items; i = i + 1)
{
x_values[i] = i * increment;
} // end of for

getURL("FSCommand:allowscale", "false");

// [Action in Frame 127]
getURL("flash/music2.swf", "_level50");

// [Action in Frame 230]
stop();

// [Action in Frame 1]
Movieclip.prototype.elasticScale = function (target, accel, convert)
{
xScale = xScale * accel + (target - this._xscale) * convert;
yScale = yScale * accel + (target - this._yscale) * convert;
this._xscale = this._xscale + xScale;
this._yscale = this._yscale + yScale;

// Action script...

// [onClipEvent of sprite 3 in frame 1]
onClipEvent (load)
{
this._y = 0;
endPosy = -128;
}

onClipEvent (enterFrame)
{
currentPosy = this._y;
diffPosy = endPosy - currentPosy;
movey = diffPosy / 5;
this._y = this._y + movey;
}

// [onClipEvent of sprite 8 in frame 21]
onClipEvent (load)
{
this._y = -128;
endPosy = 128;
}

onClipEvent (enterFrame)
{
currentPosy = this._y;
diffPosy = endPosy - currentPosy;
movey = diffPosy / 5;
this._y = this._y + movey;
}

[jayemsee]

// [Action in Frame 1]
stop();
id = _name;
if (_name == "overview_nav")
{
nr = 1;
item_name = "item 1";
} // end if
if (_name == "web_nav")
{
nr = 2;
item_name = "item 2";
} // end if
if (_name == "brand_nav")
{
nr = 3;
item_name = "item 3";
} // end if
if (_name == "print_nav")
{
nr = 4;
item_name = "item 4";
} // end if
if (_name == "multimedia_nav")
{
nr = 5;
item_name = "item 5";
} // end if
if (_name == "awards_nav")
{
nr = 6;
item_name = "item 6";
} // end if
if (_name == "resume_nav")
{
nr = 7;
item_name = "item 7";
} // end if
if (_name == "contact_nav")
{
nr = 8;
item_name = "item 8";
} // end if
with (content)
{
gotoAndStop(nr + 1);
} // End of with

if (nr == 1)
{
tellTarget("_root.nav.overview_nav.content")
{
gotoAndPlay("overview_wireframe");
} // end of tellTarget
gotoAndPlay(2);
tellTarget("_root.nav.web_nav")
{
gotoAndPlay("web_close");
} // end of tellTarget
tellTarget("_root.nav.brand_nav")
{
gotoAndPlay("brand_close");
} // end of tellTarget
tellTarget("_root.nav.print_nav")
{
gotoAndPlay("print_close");
} // end of tellTarget
tellTarget("_root.nav.multimedia_nav")
{
gotoAndPlay("multimedia_close");
} // end of tellTarget
tellTarget("_root.nav.awards_nav")
{
gotoAndPlay("awards_close");
} // end of tellTarget
tellTarget("_root.nav.resume_nav")
{
gotoAndPlay("resume_close");
} // end of tellTarget
tellTarget("_root.nav.contact_nav")
{
gotoAndPlay("contact_close");
} // end of tellTarget
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.content_width + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if

// [Action in Frame 20]
stop();

tellTarget("_root.overview_content_movie")
{
gotoAndPlay("overview_content");
} // end of tellTarget

// [Action in Frame 31]
stop();

// [Action in Frame 1]
Movieclip.prototype.elasticScale = function (target, accel, convert)
{
xScale = xScale * accel + (target - this._xscale) * convert;
yScale = yScale * accel + (target - this._yscale) * convert;
this._xscale = this._xscale + xScale;
this._yscale = this._yscale + yScale;
} // End of the function

// [onClipEvent of sprite 13 in frame 2]
onClipEvent (load)
{
this._y = 0;
endPosy = -107;
}

onClipEvent (enterFrame)
{
currentPosy = this._y;
diffPosy = endPosy - currentPosy;
movey = diffPosy / 5;
this._y = this._y + movey;
}

// [onClipEvent of sprite 14 in frame 21]
onClipEvent (load)
{
this._y = -107;
endPosy = 149;
}

onClipEvent (enterFrame)
{
currentPosy = this._y;
diffPosy = endPosy - currentPosy;
movey = diffPosy / 5;
this._y = this._y + movey;
}

// [Action in Frame 1]
stop();
id = _name;
if (_name == "overview_nav")
{
nr = 1;
item_name = "item 1";
} // end if
if (_name == "web_nav")
{
nr = 2;
item_name = "item 2";
} // end if
if (_name == "brand_nav")
{
nr = 3;
item_name = "item 3";
} // end if
if (_name == "print_nav")
{
nr = 4;
item_name = "item 4";
} // end if
if (_name == "multimedia_nav")
{
nr = 5;
item_name = "item 5";
} // end if
if (_name == "awards_nav")
{
nr = 6;
item_name = "item 6";
} // end if
if (_name == "resume_nav")
{
nr = 7;
item_name = "item 7";
} // end if
if (_name == "contact_nav")
{
nr = 8;
item_name = "item 8";
} // end if
with (content)
{
gotoAndStop(nr + 1);
} // End of with

// [Action in Frame 20]
stop();

tellTarget("_root.web_content_movie")
{
gotoAndPlay("web_content");
} // end of tellTarget

// [Action in Frame 31]
stop();

and lastly here's the script for the buttons!

// Action script...

on (release)
{
_root.nav.overview_nav.selected = nr;
with (_root.nav.overview_nav.content)
{
if (_root.nav.overview_nav.selected == 1)
{
gotoAndPlay("overview_wireframe");
} // End of with
} // end if
gotoAndPlay(2);
tellTarget("_root.nav.web_nav")
{
gotoAndPlay("web_close");
} // end of tellTarget
tellTarget("_root.nav.brand_nav")
{
gotoAndPlay("brand_close");
} // end of tellTarget
tellTarget("_root.nav.print_nav")
{
gotoAndPlay("print_close");
} // end of tellTarget
tellTarget("_root.nav.multimedia_nav")
{
gotoAndPlay("multimedia_close");
} // end of tellTarget
tellTarget("_root.nav.awards_nav")
{
gotoAndPlay("awards_close");
} // end of tellTarget
tellTarget("_root.nav.resume_nav")
{
gotoAndPlay("resume_close");
} // end of tellTarget
tellTarget("_root.nav.contact_nav")
{
gotoAndPlay("contact_close");
} // end of tellTarget
if (nr == 1)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.content_width + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 2)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.content_width + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 3)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.content_width + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 4)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.content_width + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 5)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.content_width + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 6)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.content_width + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
if (nr == 7)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.content_width + _root.increment;
} // end if
if (nr == 8)
{
_root.x_values[0] = 0;
_root.x_values[1] = _root.x_values[0] + _root.increment;
_root.x_values[2] = _root.x_values[1] + _root.increment;
_root.x_values[3] = _root.x_values[2] + _root.increment;
_root.x_values[4] = _root.x_values[3] + _root.increment;
_root.x_values[5] = _root.x_values[4] + _root.increment;
_root.x_values[6] = _root.x_values[5] + _root.increment;
_root.x_values[7] = _root.x_values[6] + _root.increment;
} // end if
}

[jayemsee]

i tried to re-create that site, everything worked fine till i tried to do the buttons, im definately not an actin scipt person, but i ripped that whole site for you, movies,text,actions,buttons so explore the files im sending for download

[Guig0]

all that code for what?

[jayemsee]

to get those buttons to do the same actions they do in the requested flash movie form that site

[Guig0]

let me tell ya, you can do an exact copy of that site with a 1/3 or 1/4 of that code...

seriously.

[Guig0]

don´t ripp other ppls sites.
that´s just not right.

kitupa.com has a tight rule concearning that kindaof thing.
i´m just giving you a tip.

[cybergold]

can you put an example fla for the movie clip one, where it goes in the desired location?

[Guig0]

just give me a min..

[Guig0]

is the main fla:

[cybergold]

this is for Flash 5?

[Guig0]

mx

[Guig0]

here is the loaded fla:

[cybergold]

Here is mine, it is not working Here is the swf with it

[cybergold]

here is the swf i want to attach

[Guig0]

they´re working!

the thing is that background colors don´t go along with loade movies, so you´re loading a bouncing white square on a white background (background of the main movie) :P that´s why you don´t see it, but it is there ;)

[cybergold]

lol, thanks

[Guig0]

:)