Billups Design

When I first started developing in flash, there were inevitably things that just made me want to pull my hair out. Basic physics, Actionscript vs. timeline animation and embedding assets vs. creating them at run-time were just a few of the areas I really wrestled with early on. Part of the problem stemmed from a desire to go from 0-60 in 2 seconds (and that might be on the high side). I was like Nike, just do it. *** As a side, that reaches my corny joke quota for this blog….so please, read on.

When I jump in to a project I’m really excited about, my patience (as a developer) is typically at an all-time low. I have always felt like (and sometimes still do) that I’m in a race against my own ideas. The longer I leave them in my head or on a piece of paper, the less likely they are to become reality. This type of mentality inevitably leads to the late night coding sessions that all developers, at one point or another, experience. You know, the ones that single-handedly keep your favorite late night coffee chains in business.

While I slowly developed a basic understanding of a lot of abstract concepts, what really gave me a lot of problems early in my flashing endeavors was taking that abstract concept and applying it to something practical. I understood, in it’s simplest form, why something was being done but I really struggled with taking that basic blanket concept and then plugging it in to one of my projects.

For one reason or another, understanding how to create a basic fluid flash layout really was a thorn in my side. I would find tutorials here and there that kind of taught me what I would like to know but the examples and explanations really left me with one or two questions that ultimately made me scrap the idea and move on to something else. After reading through some recent message board posts, I thought this might be a worthwhile topic to write about for some of the newer flashers out there. I would also encourage experienced developers to give this a read and add anything else (via comments) that might be worthwhile for anyone out there looking for a better understanding of fluid layout concepts.

As always, if you’re just starting out PLEASE don’t just rip through this post and download the source files. Why? Cause they’re not there. Trust me, I’m just as impatient as the next guy when it comes to this kind of thing but the most important part of learning development techniques is to fight the urge to just grab a file and try to use it (without understanding exactly what’s going on). I’ll do my best to explain things as thoroughly as I can and if you have questions on this subject, feel free to post it in a comment.

With all that said, lets get started……

————————————————–

1.) The first thing you need to do is create a new AS3 document in Flash. I’m going to assume that if you’ve got to this point in the blog that you can do that on your own but if not, here’s a hint…… File > New > Flash File (Actionscript 3.0) > Click OK.

2.) Open up the actions window (Window > Actions) if you haven’t already and lets add some code. ***In the spirit of learning, I’m not going to type out this code. I will prove screen captures for you to follow but a big step early on in the development learning phase is physically learning to type out your own code (and making it a habit to do so). If you don’t cheat yourself early on, it will really payoff later down the road as you continue to build applications / websites. Copying and pasting is convenient but it won’t help you learn as quickly.

With all that said, lets add some code…..

3.) The first thing we’re going to do is add an event listener, in this case Event.RESIZE, to the stage. This will allow us to track when a user modifies the size of the stage and act accordingly to adjust the elements that live in / on it.

To do this we’ll assign the (Event.RESIZE) event to the stage property via an event listener (stage.addEventListener). This is going to dispatch an event whenever a user does anything that modifies the height or width of our published flash document.

To add an event listener we first express the instance we want the event attached to (stage), what we are going to attach (.addEventListener), the type of event listener (Event.RESIZE) and the function we are going to trigger when the stage is resized (onResizeStage). If you have done it correctly, your actions window should look something like this:

Next, we need to write our (onResizeStage) function that is fired by our (Event.RESIZE) listener. Then, we can put our trace statement inside it and track when the stage is re sized and what it’s updated dimensions are. We start writing a basic function in AS3 by using the reserved word (function). We then give the function a name, in this case (onResizeStage). I’m sure you’ve noticed the function name is the same as the one we expressed in the stage.addEventListener(Event.RESIZE, onResizeStage ); event. That’s because we want that function to be fired when the (Event.RESIZE) event takes place.

Next, we asign a variable name (evt:) to the event object and then express the type of variable it is…in this case (Event). If this doesn’t make sense to you, I would suggest reading about some more basic AS3 practices on Adobe LiveDocs. Lastly, we tack on :void, as the function is not going to return any information and open and then close it with our brackets / curly braces {}. Your function should look like this:

4.) We want to take the information that the function (onResizeStage) outputs for us and use it to reposition our objects. To show you how the (Event.RESIZE) listener works, lets plug in a trace statement to get some feedback in the output window. Tracing is simply a way for you to get feedback from Flash and it really is a great tool for testing. It will return requests to the output window and help you to understand exactly how this RESIZE function works. I would expect most of you know how to type a trace statement but if not, I’ll break it down as best as I can.

5.) Since we’re interested in adjusting an instances position based on the height and width of the flash movie, lets trace the height and width of our flash movie and watch how our RESIZE event handles it.

Inside the brackets of our (onResizeStage) function we’ll type trace(stage.StageHeight, stage.stageWidth). Anything typed in “quotations” in a trace statement will display as static text. It’s good practice to label what it is that you are tracing (with a static label) inside your trace statement. Why? Well, let’s do it without a static label and you’ll see why it’s advantageous, especially in a larger project, to thoroughly comment / label all aspects of your code.

Inside our (onResizeStage) function, let’s type the following:

Now, lets compile it and look at our .swf. You should just be looking at a blank white screen (as we haven’t added any objects to the stage). If you do something to affect the height or width of the .swf, by maximizing it or dragging it’s edge, you’ll notice two numbers are being displayed in the output window when you let go of the mouse. One number is the height and one is the width. Which one is which? Well, do you remember which one went in to the trace statement first? Even if you do, you can see how this can be really confusing without a relevant label.

Let’s put in a label and recompile our .swf.

As I mentioned earlier, quotations allow you to add text that the trace statement will simply display in the output window. The key difference (quotes vs. no quotes) being that it displays it in the output window without carrying out an actual operation (such as retrieving the height or width).

We simply concatenate (add a + sign) to the strings we want the label to be associated with (ie. “Stage Height = ” + stage.stageHeight). We then label stage.stageWidth as well (”Stage Width =” + stage.stageWidth). It’s good practice to separate statements that are being traced by a coma. Why? Because it helps make things consistent and a lot more readable (for you or someone else that may work on the project). It also helps formatting in the output window, as a coma will insert a space in between multiple statements.

You could theoretically concatenate string after string (”Stage Height = ” + stage.stageHeight + “Stage Width =” + stage.stageWidth) but your output is going to be Stage Height = 415Stage Width =572 instead of Stage Height = 415  Stage Width =572. It’s a small detail but a good note on best practices.

6.) Now we have a better understanding of what’s going on with the RESIZE event and our triggered function, lets do some layout basics (finally!).

The first step is adding a few lines of code to let flash know we want to turn off / on a few default properties of the stage. The point of a fluid layout is to use the height and width of the stage to establish new layout positions and NOT to zoom in out / skew the movie clips, buttons, etc. To ensure objects are going to slide (left / right, up / down, etc.) in position and not scale up or down in size, we need to turn scaling off. This will allow our objects to move according to the stage width / height and not scale (50%, etc) as the stage gets bigger or smaller. To do this, we’ll simply type the small code snippet below:

Now, for our last bit of code before we start adding some elements to the stage…..

The final little piece of code we need to express is to let flash know that we always want our movie to align to the left of the browser window. This ensures things anchored to the far left will stay on the far left and not reposition if the .swf file contained in our HTML page were to move. To accomplish that we simply set the stage to align to the TOP_LEFT.

7.) Still with me? Now lets create objects to drop on to our stage. We’ll start by making 2 separate movie clips, both 80px by 80px.

They can be any shape you’d like but for this exercise, I’m just going to make some colored squares (one blue, one red). Take the Rectangle Tool (R) and draw a blue box and a red box. Convert each one to a movie clip. You can do this a number of ways (key board short cuts, etc) but for this exercise go Modify > Convert To Symbol and then give them names of boxBlue and boxRed.

***An important note here…..make the registration point the top left corner (see image below). Why? Because it’s much more flexible (in my opinion) then just centering the registration point. It causes you to have to do a bit more math when resizing a centered object but I’ll explain why it’s worth it in the long run.

Now, click on the boxes on the stage and give them instance names of boxBlue and boxRed in the property inspector. This is so they can be referenced by the actionscript code we’ll write.

Just to make sure we’re all on the same page, your actions window should look like this:

8.) The first fluid alignment I’ll discuss is centering an instance. For this first example, lets use our boxRed movie clip.

Now is where a little basic math comes in. To find the center of anything, you simply divide the width and height by 2. In our case, we want to divide the width and height of the stage to find the middle point at which to center our boxRed movie clip. The main thing we want to accomplish is re-centering our boxRed movie clip when the stage is re-sized. To do this, lets place some code inside our (onResizeStage) function.

***You might notice the grayed out text above. If you don’t recognize why that is, it’s because I commented it out with two // so it would no longer continue to trace the height and width of the stage. You could remove it all together but it’s good practice to leave important trace statements intact, just in case you need to trouble shooot (again) later in the project.***

Go ahead and compile your flash movie. If you re size your .swf movie (or the web browser, depending on how you prefer to preview your flash files) you’ll notice that the boxRed movieclip will adjust as the browser adjusts and the boxBlue movieclip will simply stay put.

You might look at it and say, why does it not look centered? (If not, you may need to fine tune your eye for document layout. ) I’ll explain (and illustrate) why that is. If you remember, earlier in the tutorial we specified the registration point of our movie clip(s) as the top left of our vector shape. So dividing the stage width and height (and adjusting the x and y of our movieclip accordingly) will simply center the top left corner of our object on the stage (see the figure below).

The expected out come was (fig 2.) while our actual result was (fig 1.). Now, before you go rushing through your file to change the registration point (to be the center of our object) or re-align the vector object to the center of the movieclip’s stage, let me explain why doing that is not that great of an idea (in my humble opinion).

By making the registration point of a movieclip the top left, it allows a designer (or developer) to layout objects on a typical (x, y) axis. If you have a movieclip with several different elements embedded in it, your movieclip’s stage will function as the main flash stage would (with 0,0) being the (x,y) coordinate of the top left of the stage. Maybe this doesn’t seem like such a huge advantage but let me illustrate the point to really drive it home. The figure below shows how you would have to align a second movie clip if your registration point was in the center of your instance.

If you center your movieclip’s registration point, the (x,y) of your second element would be (-35, -35), instead of simply (5,5). I hope you can see how that could get incredibly confusing if you’re trying to attach objects at run time or trying to consistently produce precise spacing in your imbeded objects.

If you’d prefer to center the registration point of your objects, then please do so. There’s not really anything wrong with it but it’s just my personal preference that using a top left registration point is much more advantageous, especially once we start talking about other aspects of fluid layouts (scaling an elements width, scaling an elements height, etc, etc.). Just be prepared to potentially have to do some extra math if you’re centering your registration points. I can only make a suggestion on what I consider to be best practice…..in the end, do it whichever way you’re more comfortable with but keep in mind the rest of this tutorial (past centering objects) will not include math fixes for objects that have a centered registration point.

Ok, so the question is…..how do we fix it (create an offset so the object displays in the absolute middle of our window)? It’s pretty simple really.

As I explained earlier, you find the center of an object by dividing it’s width and height by 2. Our boxes are 80px by 80px. So we’ll divide 80 by two (in both cases) and get an X offset of 40 and a Y offset of 40. So, now on to the part some might find tricky……applying it to our equation so we get the desired result.

Based on the basic principles of a top left registered (x,y) grid, if you add to the x and y numbers it will move it right on the stage and down…..if you subtract from the x and y numbers, it will shift your object left and up (which if you look at the illustrated figure above) is the desired result we are looking for. So, all we need to do is subtract 40 from the center of our stage.

With all that said, lets type:

Now recompile your FLA and adjust the size of your flash movie.

You’ll notice we get a much more precise result and the movie clip doesn’t appear to be off-center (now that we have compensated for the x and y offset of registering the movieclip on the top left). Easy enough right?

The reason I recommend doing it this way is that in almost all cases, you’re going to want a movieclip registered in the top left for the other effects i’ll go over. It’s easier to compensate for it on only a centered object than to compensate for it in every other iteration / alignment. I hope that makes sense and if it doesn’t, you should see why later on (when we start adding some more alignment solutions to the project).

Let’s finish off centering up an object with this last tip…..

Some of you might be asking, why doesn’t the movieclip center when the .swf file first compiles? Well, hopefully you have already realized why (because it only assigns a new x and y value when the stage is re-sized) but if not, I’ll give a (very) brief explanation. Flash has to be told what to do. A program like flash is only as good as the directions a programmer gives it and if you don’t give it any, it’s not going to do anything. In this case, it’s just assigning a default (x,y) value for our boxes (i.e. where they are placed on the stage inside our FLA) because we didn’t give it any specific directions to do differently. Let’s fix that so our object not only realigns in the center of our window on re-size but starts there from the beginning.

All we need to do is grab the .x and .y equations we just wrote for our boxRed movieclip and paste them outside of our (onResizeStage) function, just below our stage.scaleMode amd stage.align instructions. This lets flash perform the equation when the movie first loads and also when the stage is re-sized.

Now recompile your FLA and your boxRed starts in the middle and stays there as the browser / window re-sizes.

If your head hurts, I understand but try to bear with me or better yet, take a break and come back to this point. If you’re stuck or having trouble getting your code to work, here’s what your actions panel should look like:

You’re probably thinking, 13 lines of code?! 13 lines of code!? I know, it can be somewhat frustrating that something so simple could take so long to explain but understanding the basic fundamentals of many of these concepts will apply across a multitude of other projects you are bound to take on (both willingly and unwillingly). Understanding the fundamentals of why something does (or doesn’t work) will really help you problem solve (on your own) down the road. In the end, figuring things out by yourself is one of the most rewarding aspects of programming.

With all that said, let the impatient crowd rejoice…..the next few examples will be much faster paced but I will be sure to hit on all side info relevant to how the concept works.

9.) The next fluid alignment we’ll touch on is adjusting the width on an object to the browsers / .swf files width. This is especially helpful when creating navigational elements, such as a background color that might sit just behind your nav text / buttons and scale full width to the browser.

This only takes 2 more lines of code (yay). In this case, we’ll grab our boxBlue and use it for this example. Position it on your stage at (0,0) and add the following code (one line for when the movie initializes and one line for when the stage / browser is resized…..just as we did with the boxRed movieclip):

A friendly reminder. Make sure you double check that your line of code appears both inside and outside of your (onResizeStage) function, just as we have done for all the other steps. If it doesn’t, copy and paste it in to the appropriate place.

The above concept is a simple one. We want the width of our blue box (boxBlue) to be the same as our stage. We calculate the width of the stage with the stage.stageWidth property and apply it to our box (boxBlue.width = stage.stageWidth;). When you recompile your .swf, you’ll notice that the width of our blue boxes stretches with the stage.

10.) Next up, right justify.

We’re gonna have to make a new box for this one, as we want to retain what we’ve already done. Lets make another 80px by 80px box. This time, I’m going to make it Orange. Once you have made an orange box, convert it to a movieclip, top left justify it’s registration point and give it an instance name of boxOrange. Done? Lets write another small snippet of code (again, just 2 lines).

Another friendly reminder. And yes, again! Make sure you double check that your line of code appears both inside and outside of your (onResizeStage) function, just as we have done for all the other steps. If it doesn’t, copy and paste it in to the appropriate place.

Here’s where the left registration point comes in handy again. To position our moveiclip to float on the right side of our stage, we simply use the stage.stageWidth property and subtract the width of our object (80px). That 80px offset simply bumps our object 80 pixels to the left of the far right edge of the stage. I hope all this is starting to click in your head now and you’re thinking of different ways you can position / anchor things on the stage.

11.) The last alignment solution I’m going to go over is aligning something to the bottom of the browser (i.e. something like a footer).

Lets make another 80px by 80px box. This time, I’m going to make it Green. Once you have made an green box, convert it to a movieclip, top left justify it’s registration point and give it an instance name of boxGreen. Give it a x value of 0, so that it aligns to the far left of our stage.

As a side not, I would start getting in to the habit of doing this programmaticly by simply typing boxGreen.x = 0; I decided to skip those steps in an effort to keep this tutorial as lean and mean as possible (but just wanted to mention it somewhere). I would guess most of you are already doing such things (without instruction) but I wanted to make sure I gave it a brief plug.

Again, once you understand the basic principles of what we’re doing right now, you should find it fairly easy to not only understand these basic concepts but also to implement more advanced ones in your projects.

To align something to the bottom of the movie and stretch it to to the width of the stage, we’re only going to need 2 lines of code. 1 to adjust the width and 1to adjust it’s y position in relation to the stage’s height. Easy enough right?

Let’s crank out the last few lines of code (I know, it’s about time) for this!

Psst. Make sure your code appears both inside and outside the function. Sorry, I had to.

Congratulations! Not because you’re done but because this (next short info blurb) is the last small explanation you’ll have to plod through.

I have confidence that most of you thoroughly understand how this is now working but just in case there is someone out there looking for this last bit of instruction, I’ll explain why I’m doing what I am to get our desired result.

The stage.stageHeight property returns the size of our stage, as it appears in the browser. Because we want our object to hug / appear at the very bottom of the stage, we simply use that number and subtract the height of our object. Why do we subtract? Because in a traditional (x,y) grid you subtract to move up, add to move down…..because our object is justified in the top left corner, we need to subtract it’s height or it will be aligned at the bottom of the stage, out of view. If you are having trouble understanding this concept, just remove the (-80) on the equation and recompile it.  It will appear as the object disappeared but really it’s just aligning the leading top edge of the movieclip to the very bottom of the stage / browser window (fig 2.). See the figure below for a visual representation. The colored red area is off of the visible part of the stage inside the browser.

12.) If you’ve got to this point and didn’t get everything to work, here’s the final code sample posted below. Hopefully you didn’t have any problem following along but if you did, compare your actions panel to the one below and see where you got tripped up.

13.) The last step in all of this is changing the height and width listed in our HTML file. Flash publishes a pixel by pixel output in the HTML file it spits out that relates to the document size listed in our FLA file. Because we want the stage to be equal to the height and width of the browser we just need to make one quick change. Instead of having our height and width be in a pixel format, we simply want it to display to 100% of the browsers width and height.

Our specified height and width appears THREE times on the page, so don’t miss one set…..it could cause problems down the road depending on what browser the end user is viewing your project on. If you need specific directions you’ll find it once in the AC_FL_RunContent function and twice in the object id tag.

One last fix……….

By default, a margin of 10 pixels is sometimes assumed. To turn those margins off, so our file hugs the endpoints of our browser, we just need a short piece of CSS. Include this just before the close of your HTML page’s head tag:

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

If you’re having trouble with this part, just view the HTML source in the working link posted below.

For a working example of how your file should look, click here to view my final tutorial .swf file. Resize the window and our objects are sliding / scaling as they should. hopefully your file looks exactly the same! If not check back soon (see my p.s. note) as this will most likely be an ongoing tutorial subject that I update with newer blog entries.

Cheers! and as always, happy flashing!

Ryan

P.S. If there’s a large request for source files, I will post them a few days after the blog has gone live. I’ll also swap out the images with source code……..BUT until then, invest in your professional skill set and learn how and why you’re doing the things you are.

EDIT: Commented source file can be downloaded here.

Last 5 posts by Ryan Nasipak

• An Event Apart: Chicago 2009 - Web Form Design - October 29th, 2009
• Creating Fluid AS3 Flash Layouts: Extending The Basics. - May 18th, 2009
• Panoramic View of San Francisco Part II, Night Time. - May 4th, 2009
• Panoramic View of San Francisco. - April 8th, 2009
• Adobe Flash Catalyst Looks Promising - November 17th, 2008

This entry was posted on Friday, March 20th, 2009 at 9:04 am and is filed under Code, Inspiration, Tutorials, Usability.Tags: AS3, Flash, Inspiration, Tutorials, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.