Flash Action Scripting Help Needed

[sonesay 7]

Hey all, I'm working with a art student on this flash based portfolio site and it requires some complicated action scripting. Either him nor I are efficient enough in flash so we need some advice from you experienced Flash experts out there. I worked with flash a long time ago and it was only on one project so I remember vaguely what movies and time lines are for lol. Basic stop and go to commands but that's about it. I can read up on anything I need but the thing is I have no idea where to begin.I have attached a PDF of my partners initial storyboard of the scenes. The first initial screen is of items in the portfolio. I'm assuming this will be scrollable since you cannot fit all the items on the screen if there are many. Also spacing between them has to be applied when highlighted.I hope someone can give me some pointers on how to go about it. I am not looking for a "Go search google" answer lol because I have tried and I cant find anything specific to moving items in a scrollable context. I need advice from someone who can do this so I can save a bit of time trying to find things out on my own.Thanks in advancedSone.

Explainations.pdf

[Nabb 0]

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:

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 second

I 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 seconds

We 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 second

We 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).

[sonesay 7]

I had a quick read through all your post but its too detailed and not specific to what I was asking lol. Maybe i'm just too tired and didnt read it correct to understand but I will ask you again to give a high level description on how I would go about creating the first two screents. Firstly the items on the first screen would be movies that expanded right? is it possible to give them action scripts that displace from each other on hover? I just need some general answers before I can even begin coding since I do not know what limitations are on flash.I hope you get my point. I will get into the coding part when I need to for now I need a guide on how to start this project.Thanks again for your time Sone

[Nabb 0]

I don't get what you're saying...

I'm having the pages which are displayed as a single movieclip. Each frame is an individual page.

 

I hacked up the basics of the system and you can see it and get the fla here. (just installed joomla, it's pretty random o_o)

Check how I did it.. (sorry, no comments. forgot about that, I don't usually use them anyways unless I'm removing code)

Edited September 17, 2008 by Nabb (see edit history)

[sonesay 7]

thats pretty cool man. are the buttons movie clips that have action scripts applied to them? also they move down differently depending on how far up they are so are they separate movie clips? Sorry if my questions are confusing I'm totally unfamiliar with flash LOL. If you can post the fla for me to look at that would help abit thanks againSoneedit: nvm i see the fla lol.

Edited September 17, 2008 by sonesay (see edit history)

[dimumurray 0]

Hey Sonesay, It seems like you're already well on your way with your project (thanks to Nabb I see). 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.

Edited September 18, 2008 by dimumurray (see edit history)

[sonesay 7]

Hey thanks for the response. I'm sorry I didn't 'reply back sooner I was brain dead and couldn't read your questions. I been too stressed over assignments due. Anyway back on topic I talked to the designer and he said that the scrolling of items wont be necessary at this stage so there will only be six items. As button from the 3rd frame moves back up to revel the items content it just starts to mask what ever is above it including any buttons. I think I have enough to start off with for now thanks to nabb. I just need to look over how he done it and apply that to our version. Thanks again all any more questions and I will ask again here.Sone.