How can I do something close...

[jxb]

Hello,

I saw a nice Flash navigation on this website :

http://www.musze.com/

I'd like to buid something close (a vertical moving menu that glides to a pre-defined postion) but no matter how much I tried, I can't do it...

I would be forever indebted to you if you could point me in the right direction. Maybe you have a .fla of something close, or maybe you know where I could find a tutorial for it ?

Thanks a lot for your answers...

[Billy T]

searching will often find your answers quicker than posting

cheers

[jxb]

Sorry about posting w/o searching thoroughly, and thanks for your help...Actually, I think (but might be wrong) that what I'm looking for is in the same spirit but a tad more complex : the Flash menu in www.musze.com not only slides from left to right, but a click on a button places the navigation menu on a predefined position. This is the tricky part for me actually. :D

I did search everywhere for this kind of menu, and couldn't find it...:(

So if you can help, or maybe just point out how I can obtain the effect I want from your .fla, I can ship champagne bottles all around the globe !!! :p

Thanks a lot.

JXB.

[jxb]

...I forgot to add another tricky point for my animation : on your .fla the buttons with the actions are not ON the moving menu. So in fact the same .fla, but with the buttons on the menu and therefore sliding with it, would be fantastic. Add to that the fact that each position triggered by a click is predefined and fixed at various horizontal positions, and this .fla becomes divine...:D

[poab]

Hi,

For some reason I can't get to Billy's zip file. (That always happens to me. :0( ......smallest violin in the world etc..) So please forgive me if I'm just repeating information.

This has been modified from Brendan Dawes' new book. (The same one I've been banging on about for days.):

MAIN TIMELINE:

2 layers, bottom one called script, top one called navigation. Each one's only one frame long.

Create an MC to contain the script and place it on the script layer. Name it script in the instances panel.

SCRIPT TIMELINE:

Inside the script MC you need two layers. the top one has keyframes at frames 1 +2 and is called labels. In the frames panel label frame 1 still and frame 2 motion.

On the script layer frame one has the code:

stop();
speed = 2; //Later on you can alter this variable to alter the (you guessed it) speed.

frame two has the code:

difference = _root.navBar.targetX - _root.navBar._x;
move = difference / speed;
_root.navBar._x += move;

frame three has code:

gotoAndPlay("motion");


Back to the maintimeline. On the second layer create your vertical strip to use as a navigation bar. Position it at the X and Y coordinates you want it to start with. Turn it into a MC and name it navBar in the instances panel. Inside that MC you need 2 layers, one called background and one called buttons. Put anything you like on the background, although it looks better with a rectangle the same height as the movie. On the buttons layer create as many buttons as you like. Select a button and in the object actions panel type:

on(release){
targetX = 100; //Change this value to change where the nav bar moves to.
_root.script.gotoAndPlay("motion");
}

Now put the same code on each button, varying where you're asking it to move to.

Now test your movie.

As far as the background scrolling. Just use any old scrolling script. Or repeat the above process being carefull not to duplicate any variable or instance names.


That was all from memory, and I've only done it once, so hopefully it's right. If not just post back and I'll fix it.

cheers.

[Billy T]

I'm not sure why the last file wasnt suitable - all you had to do was move the buttons inside the MC that is being scrolled

anyway have a look at this one

the scripting is all commented

cheers

[wyclef]

How could this be changes to accomodate only a next and previous button instead of one button for each section...so you would just click next repeatedly to scroll through everything?

[Billy T]

i dont understand your question

[wyclef]

I'm trying to create something similar to the simplescroll.zip example however instead of having multiple buttons for the different sections, i just want two buttons, one to move forward, and one to move back, and i want to create it so if you have clicked to move forward, you can double click to move to sections forward, and so on....this make any more sense?

[Billy T]

see attached

cheers

[wyclef]

Thanks! This seems to be more along the lines of what i've been looking for.

Billy T Saves the day! (again)

A few questions.

01: It seems like the back and forward button are reversed or something, I probably just need to switch the instance names?

02: Will this script work for different length MCs? If I have one MC that is 900 px long scrolling 300 px each click, can I also have an MC 1800 px long scrolling 300 px each click and not have to modify the script or do I have to tell it how long the MC is?

Thanks again! :p

[Billy T]

1 - yep

2 - nope this script assumes that each section is 600px wide (which is the amount it increases or decreases the targetX variable by each time the button is clicked)

for different widths, you would need to set up an array of positions like...actually I'll just make a file - see attached

cheers

[wyclef]

I see what your doing. That's kinda neat and useful to know how to do. But here's what I was asking about, say every section is 600 px wide, or 300 px wide, whatever, it would be the same width for every section. Does it matter if the entire MC is 900 px wide or 1800 px wide? Do the buttons know when there is no more width to scroll?

[Billy T]

no - you need to adjust the if statements on the buttons

you could easily adapt the code to use the _width of sections mc

I gotta go to bed

cheers

[wyclef]

Why do I need to adjust the if statements? And how would the use of _width work? Also, is there a way to set this up so onEnterFrame is only needed when the buttons are pressed?


targetX = 0;
sections_mc.onEnterFrame = function() {
this._x -= (this._x-targetX)/4;
};
back_btn.onRelease = function() {
// delete the previous onEnterFrame event
delete this.onEnterFrame;
// and assign a new one
this.onEnterFrame = function () {
if (targetX>-1800) {
targetX -= 600;
}
}
}

forward_btn.onRelease = function() {
// delete the previous onEnterFrame event
delete this.onEnterFrame;
// and assign a new one
this.onEnterFrame = function () {
if (targetX<0) {
targetX += 600;
}
}
}

[Billy T]

because

if (targetX>-1800) {
targetX -= 600;
}

assumes that your sections mc is 2400 wide

to delete the enterFrame script you will need something like

if(this._x==targetX){
this.onEnterFrame=null;
}

cheers

[wyclef]

Hey, i'm trying to get this to work with _width and am having trouble. What do you see wrong with this script? It seems to work but not really, try it out and see for yerself.


targetX = 527;
maxWidth = section_mc._width

section_mc.onEnterFrame = function() {
this._x -= (this._x-targetX)/3;
};
forward_btn.onRelease = function() {
if (targetX<maxWidth) {
targetX -= 370;
trace("true forward")
}
};
back_btn.onRelease = function() {
trace(this._x)
if (targetX<527) {
targetX = 370;
trace("true back")
}
};

[Billy T]

try

targetX = 527;
maxWidth = section_mc._width

section_mc.onEnterFrame = function() {
this._x -= (this._x-targetX)/3;
};
forward_btn.onRelease = function() {
if (targetX>-maxWidth) {
targetX -= 370;
trace("true forward")
}
};
back_btn.onRelease = function() {
trace(this._x)
if (targetX<527) {
targetX += 370;
trace("true back")
}
};

[wyclef]

Here is the latest script i've got. It's working now too. I'm wondering though, if there is a way for it to work where onEnterFrame is only running when needed, like after clicking a button, or after the MC stops scrolling. I'm not sure, someone told me it's not possible.


_global.portfolioSection = function ()
{
targetX = 527;
path = _root.sectionMC_03.folioClip
maxWidth = path.section_mc._width-529;
velocity = 4;

path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
};
// Forward Button
path.forward_btn.onRelease = function() {
if (targetX>-(maxWidth-370)) {
targetX -= 370;
}
};
// Back Button
path.back_btn.onRelease = function() {
if (targetX<527) {
targetX += 370;
}
}
};

[Billy T]

try

_global.portfolioSection = function ()
{
targetX = 527;
path = _root.sectionMC_03.folioClip
maxWidth = path.section_mc._width-529;
velocity = 4;

path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
}
};
// Forward Button
path.forward_btn.onRelease = function() {
if (targetX>-(maxWidth-370)) {
targetX -= 370;
path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
}
};
}
};
// Back Button
path.back_btn.onRelease = function() {
if (targetX<527) {
targetX += 370;
path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
}
};
}
}
};

[wyclef]

So close...it works, but only twice, when the MC first loads in, it will trace the first NULL1 once, and the NULL2 once after you click forward button. Very strange. I tried tracing this._x and targetX to see if they were equal, and they seemed to be but maybe i'm missing something.


_global.portfolioSection = function ()
{
targetX = 527;
path = _root.sectionMC_03.folioClip
maxWidth = path.section_mc._width-529;
velocity = 4;

path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
trace("NULL1")
}
};
// Forward Button
path.forward_btn.onRelease = function() {
if (targetX>-(maxWidth-370)) {
targetX -= 370;
path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
trace("NULL2")
}
};
}
};
// Back Button
path.back_btn.onRelease = function() {
if (targetX<527) {
targetX += 370;
path.section_mc.onEnterFrame = function() {
trace("ENTER FRAME")
this._x += (targetX-this._x)/velocity;
if(this._x==targetX){
this.onEnterFrame=null;
trace("NULL3")
}
};
}
}
};

[Billy T]

please upload your fla

[wyclef]

Hello All,

I finally got this thing working. If y'all could check it out, I have one final question having to do with this piece. Would there be a way to substitute an MC or a textlink in place of an element in the array? sometimes i might want to include more than just text.

portfolioSection(["", "section1", "section2", "section3", "section4"]);

[Billy T]

sure just put the linkage id of any clips in the array and then use attachMovie to attach it to the slider

cheers

[wyclef]

I can't seem to figure out how that would fit into the main script though, because i would want it to appear in place of the text so the MC identifier would have to be in an array full of strings?

[Billy T]

please post a detailed description of what you are trying to do

cheers

[wyclef]

How can i have an array of strings but also with mc identifiers in the same array and have it know the difference between object and string?

RIght now i've got this array of strings that goes to a textfield, and if i change it to



portfolioSection(["section 01", "section 02", {linkage: "linkage_id", x: 530, y: 280}, "section 04", "section 05"]);

this.attachMovie(portfolioSection[2].linkage)




to try and attach an MC instead of text in a textfield i just get [object object] in the text field.

[Billy T]

that looks suspiciously like it was copy/pasted from another forum - am I right?

[wyclef]

Yeah, apparently I clicked new thread instead of reply previously. It's late, sorry about that.

[Billy T]

see if the attached file helps

cheers