Okay I'll give you the general idea, but you'll still have to google
What I'm trying to do is give you the basic concept on how to go about this, with some code tips.
Firstly I'm going to use ActionScript 2.0, so if you want AS3.0 then find someone else..
It's designed to be all in one frame.. I suggest reading through my entire post first!
Also I don't remember how masks work, so I'm going to go about it a different way!
If there's any problems with scope, then oops, and ask
Lastly I'm doing this off the top of my head, so any syntax errors in the example code you'll have to fix yourself.
Each button is a movie clip, a grey rectangle with a text-box. There should be one movie-clip which is the grey rectangle and used in each button.
The page to be displayed is a movie clip, which has each page on an individual frame.
On the movie clip (place it on screen, and the click on it and go to the actions panel), what you need is:
CODE
on(MouseOver){ stuff }; on(MouseOut){ morestuff }; function fadein(){ instuff }; function fadeout(){ outstuff }; on(MouseDown){ clickstuff }; movedown(){ downstuff }; moveup(){ upstuff }; checkover(yp){ overstuff }
What 'stuff' should have:You should set an interval that calls fadein().
For example: ininterval = setInterval(fadein, 100); //which would call fadein() 10 times a secondI want to define a variable, I'll come back to this later. Briefly.
For example: pie = true;What 'morestuff' should have:You need to clear the interval calling fadein(), and then set an interval for fadeout().
For example: clearInterval(ininterval); outinterval = setInterval(fadeout, 100); //calling fadeout() 10 times a second.What 'instuff' should have:Change the colour of the the grey rectangle:
For example: this.greyrectangle._alpha -= 2; //which reduces the alpha by 2, 10 times a second.We need to change the colour of the text, what you can do is have the text white and increase the alpha to make it visible:
For example: this.textbox._alpha += 5; //so it'll be fully visible after 20 calls, i.e. 2 seconds.We need to check that the fade hasn't finished yet:
For example: if(this.greyrectangle._alpha <= 60){ clearInterval(ininterval) }; //so it stops fading after 2 secondsWe lastly need to stop fadeout() being called if a user moves his mouse back on after fading out.
For example: if(!pie){clearInterval(outinterval); pie = true}; //pie is set to false each time fadeout() is called.What 'outstuff' should have:The opposite of 'instuff' mostly:
For example: this.greyrectangle._alpha += 2;this.textbox._alpha -= 5;if(this.greyrectangle._alpha >= 100){ clearInterval(outinterval) }pie = false;What 'clickstuff' should have:This is the messy bit (at least the functions involved). I'm sure you can do it with masking or something, but I don't get that stuff.
My alternative is to delete the pieces when you pass over them.
After reaching the bottom, the page display is set to visible, and it starts to scroll up.
To prevent the page above the bar to be shown, there should be a large rectangle the same colour as the background with its bottom at the bottom of the bar.
We can simply make a movieclip of this and put it on stage, with _visible as false. When the bar reaches the bottom, set _visible to true and start moving it up. I have it called 'bgoverlay' in my example code.
We need the depth of the bar to be at the top, and the large rectangle in between bars and the page display.
Lastly we need to prevent other clicks and things. We can simply set a variable _root.clicked to true, and have stuff, morestuff, and clickstuff use a conditional statement to check if allowed to move.
For example: on(MouseOver){if(!_root.clicked){ stuff } }; //cilcked should be defined on the stage at the start as false. unless you want to start with displaying one page, in which case you would have an equivalent of clickstuff, and clicked to false.Okay, firstly we need the movement, we can set an interval to call movedown() every so often.
For example: downinterval = setInterval(movedown, 50); // so movedown() is called 20 times a second.We also need to make sure that the fade is done, we can either have it fade gradually (have a similar function to fadein() but change the end condition) or just set the values. Since I'm lazy:
this.greyrectangle._alpha = 60; this.textbox._alpha = 100;We need the depth to be at the top:
Not sure about this piece of code: this.swapDepth(_root.getNextHighestDepth());Also to stop fadein(), fadeout(), and clickstuff being run multiple times:
_root.clicked = true; //the _root means that it's at the top, leaving out the root would make it specific to the movie clip.What 'downstuff' should have:We need to move the rectangle down, obviously:
this._y += 5; //this makes the rectangle cover 100 pixels per secondWe need to check if it's passing over another bar, and we need to check if it's at the bottom:
checkover(this._y); //we're passing in the y ordinate of the bar!if(this._y >= 400){ _root.bgoverlay._visible = true; _root.bgoverlay._y = 0; clearInterval(downinterval); upinterval = setInterval(moveup, 50); } //i'm taking it to stop at 400 pixels down..
//also setting bgoverlay._y to 0 means that it would be 400 pixels high, as it would span from 0 to 400 (where the bar top is.)What 'overstuff' should have:This bit is a bit messy too, one way is to store an array of the y ordinates of the bars under the clicked bar, and then test if the y ordinate of the bar is bigger than any of these, and if so, set _visible to false and remove it from the array. If we use this method, clickstuff would need to define this array, and downstuff would redefine it when we start moving upwards - we'd also need to keep a variable of which way we're going. Probably the better way to go about it though.
I'm too lazy to do this, so will do it a different way:
I'm going to assume that the bars are evenly spaced. In this example, I'm going to assume they're spaced with 60 pixels between the top (so 60 = gap + height of one), and the y ordinate of a bar modulo 60 is 40 (so the first bar would be at y = 40, or y = 100.)
I also assume that the bars are named "bar"+num, where num is the amount of times 60 does into the y ordinate - e.g. "bar2" for a y ordinate of 160.
Note this only works if the amount of movement in downstuff divides this number (5 divides 60 easily and evenly!)
if(yp % 60 == 40) { _root["bar"+(yp-40)/60]._visible = false; };Lastly we need to define 'upstuff':
Basically this is the same as downstuff, except we're moving bgoverlay also.
this._y -= 5; _root.bgoverlay._y -= 5; checkover(this._y); //it tries to set _visible to false for those we've already turned off, but that's fine.
if(this._y <= 50) { _root.bgoverlay._visible = false; clearinterval(upinterval); };That should be enough for today
Make sure you tell me how it goes, or if you don't understand something (basically find where to put that in the code tags at the top, and change all the 'stuff' bits into what's italicized.)
Oh, I think using getNextHighestDepth() wherever it was is a bad idea. It's probably better to have a neat depth pattern (e.g. page is 5, bars are 20-25, bgoverlay is 10, over-the-top bar is 30).
Comment/Reply (w/o sign-up)
. I'll add what I can. From the mock-ups in the PDF file, it looks as if you and your partner are aiming for a custom variant on the accordion component. But before I throw in my two cents I need some clarification on a few things. From your initial post I take it you want all the menu items to be in a scroll pane of some sort. But the story boards weren't clear on how to handle a scrollable field along with the rest of the interactions. So I am somewhat at a loss in that regard. In addition there were some other steps missing. For instance what happens to the bars above the selected bar when moving from the 3rd to the 4th frame of the story board. And I'm kinda fuzzy on the last three steps as well. Not such exactly how one leads into another. Forgive me if I appear a bit picky, but its always good to clear up any ambiguity in a design before writing any code.
