Billups Design

Welcome back!

This is part two of (how many I’m not quite sure) a tutorial series in working with AS3 fluid flash layouts. If you missed part one (Creating Fluid AS3 Flash Layouts: The Basics.), I’d highly recommend giving it a look here (especially if you have some lingering questions on how all of this is working). It goes much more in depth as to the how and why of what we’re doing to create some of these CSS like effects in actionscript.

Another reason I would recommend starting from that first tutorial is that we’ll be extending the original file we built (and doing a lot less step by step coding). Hopefully you already have your own file but if you don’t, I’ve provided a commented file from the previous tutorial here.. If you’re serious about learning (and most importantly understanding) all these concepts, don’t cheat yourself by just downloading the previous file! Go back, read / work through my first tutorial and get a firm grasp on the fundamentals. Many of these concepts are incredibly valuable and you really should learn how to do them yourself. Why? Because I cannot provide you with everything you’ll ever need. Develop your own personal skill set and then eventually share it with others as well (maybe in your own blog ).

With all that said, lets get started.

First, I’ll give a brief run through of what we’ll be doing in this tutorial and also why I think it’s important .

So far, we have a pretty nice fluid file. I’ve left a working copy of it up on labs. So if you need a reference while I’m talking about some of the problems associated with it (Ok, nobody freak out! I’ll explain), you can check it out here.

When I say “problems associated with it” I’m sure that makes a few people’s stomachs turn BUT……don’t fret. We’re going to identify what I think they (the problems) are and go over how to eliminate them (yay!).

Let me illustrate what I’m talking about.

Right now we are giving our objects some basic directions on where to position themselves in our browser window. When you adjust / maximize / etc. you obviously notice that our objects move based on how we want them to be displayed (center, right, top, bottom, etc., etc.). So far so good right? Well, sort of. The one thing we haven’t done is establish any sort of boundaries within our browser window. Currently, our objects can (and will) overlap if the window is re sized to an extremely small size. Go ahead and drag your browser all the way to the extreme vertical end on the working fluid file. You’ll notice we get a pretty sloppy result (see figure below).

It’s a result you’d really never expect to get when looking at an HTML page for example and if you did, how would you not assume the page was broken? If stuff was overlapping and there were no content boundaries, the user’s overall experience would be pretty poor and the likelihood of them returning would be very low. The same can be said in flash applications. “Tricking” a user in to thinking you’re applying CSS to an HTML page, while serving them a 100% flash application that’s rich in multimedia content really helps to drive home the value of the flash platform (think Kontain). Flash provides a programmer with a lot of flexibility (when it comes to layout) so don’t squander an opportunity to make a positive impression.

Some of you might be saying, what’s the big deal? When are you ever going to be shrinking your browser to such a small size? Well, my question for you is…….when are you ever going to be designing an entire website with only 80 x 80px blocks?

Overlapping is going to occur MUCH quicker (and most likely with a much more adverse result) when your stage content is of “real world” size. To help you understand exactly what I’m talking about, imagine our boxRed moviclip had a height of 500px, instead of 80px. It could start overlapping the boxBlue dummy nav movieClip when the webpage first loaded (see the figure below). Needless to say that would be a pretty ugly (and careless) result.

So, how do we keep that from happening? Easy. We’ll write a few conditional statements in our onResizeStage function that set some layout boundaries for our project and mimic a lot of what CSS does for an HTML page.

The statement we’ll write will be an if / else statement and we’ll include it in to our onResize function that’s called when someone resizes the stage. For those unfamiliar with such a conditional we’ll basically check for one thing to be true and if it’s not, we’ll continue to move our pieces around (hence the if / else name). To put it very simply, we’ll check to see if our boxes are touching a boundary and if they are, we’ll return them to a set minimum / maximum location. Essentially we’re putting up a virtual fence that our individual pieces must play nicely in.

To accomplish that, let’s first do the math on such a calculation. While we could just write an equation with an explicit number (like 80px), why not take it a step further and use the height property of a given object instead? After all, we want this to be as flexible as possible don’t we? That way if we were to make some executive design decisions later, the code will do all the heavy lifting for us (on the fly). With all that said, lets write the equation (finally).

Hopefully everyone sees what I’m doing here. If not, let me explain. Because our boxBlue resides at the top of our movie / stage / site we don’t want other objects “bumping” in to it. To keep that from happening we use a conditional statement like if / else. We want to maintain consistent padding between it and our other objects, just like you might do in your HTML markup. Instead of adding a CSS property like margin or padding, we’re instead adding that number (our desired amount of padding) in to our calculation (in this case 10 pixels) to the current object (boxBlue) that is occupying the space we do not want our other objects to go in to. That extra 10 pixels will bump the other elements on our stage, in this case the boxRed movieclip, away from our boxBlue movieclip. If the resizing of our window tries to move our boxRed any further then our minimum desired numerical (.y) location ((boxBlue.height + 10);) it simply returns it to that minimum point on our y axis and holds it there. The else portion of our conditional remains blank in case you would like to add in some extra interactivity or streamline your boundary function even more.

For a better understanding of this layout concept, I broke it down in this quick diagram.

Pretty simple right? As it should be. It’s good to remember not to over think your programming projects. While it won’t always be the case, many of the effects you’d like to produce are often rather simple functions.

With that said, let’s add a boundary function for our footer (boxGreen). You should have an idea of what we want to do here. If not, keep reading.

There are several ways to make this calculation, so keep that in mind if you came up with something that is a bit more efficient. I went with a more long winded approach for explanation purposes. Here’s my conditional and an explanation / diagram to help illustrate what’s going on.

As I said before, we want our flash file to behave like HTML / CSS here. Because we don’t want things to overlap, we need to set a minimum .y value for our boxGreen movieclip. To do so, we need to take in to account what object(s) separate the boxGreen movieclip from the “0″ point on our y-axis (or top of our browser content area). Our dummy nav (boxBlue) and dummy content (boxRed) are those objects in this case but you could have several others as well depending on the complexity of your project.

So with that in mind, our equation uses those object’s height to set that invisible fence that our boxGreen or dummy footer cannot cross. We simply add boxBlue.height + boxRed.height + 20. Why 20? Well, see the diagram below. We add 20 because there is 10 pixels of padding in between the dummy nav and dummy content as well as 10 pixels of padding between the dummy content and dummy footer. As a small code note….to make it even more efficient, you could declare a variable called “padding” and set it to 10.

Nothing too difficult right? These really are concepts, that when sketched out on paper, seem really easy (which is never a bad thing).

As I said before, this tutorial will be a little more abbreviated then the last. I would expect you all have a firm grasp on these concepts and are starting to critically think about how to execute such effects in your own projects (and even add on to what is already here to make it even more flexible / efficient).

To round out this tutorial we’ll do two things:

1.) Write an equation to keep objects from overlapping horizontally (so you can space your objects on both the x and y axis).

2.) Clean up our file in to one singular equation that we call twice (instead of setting up elements outside of our onResize event and then adjusting them inside a separate function).

Ok, lets wrap this up…….

Writing an equation to space things horizontally.

I’d hope by now that you all are jumping ahead and writing equations on your own and then checking them with what I have below. If not, I would suggest trying such an approach in the future. After you have the correct instruction, try to take that instruction and apply it while you’re learning. It will really help you retain the info / concepts you’re learning. With that said, go write an equation that would keep the boxRed and box Orange objects from overlapping each other. Oh, and throw in 10 px of padding as well.

You’re not cheating are you?

Ok, if you’re stumped or would like to check your work, here’s what you should have been thinking……

If you didn’t get it, I’m sure you’re thinking to yourself “duh!” but don’t fret. In time, you’ll look back and laugh about things like this giving you trouble. It’s the same basic concept as before, just using the .x property (horizontal positioning) instead of the .y property (vertical positioning). With that equation plugged in to your onResize function, you should see a similar result as the one pictured below. I bumped my boxRed movieclip’s width to 500 px to show what our equation is accomplishing. When you collapse the web browser horizontally your box orange movieclip will never get closer then 10px to the right of the boxRed movieclip.

I hope everyone is on the same page, if not drop a message in as a comment and I’ll try to get back to you as soon as I can.

Finally, lets clean up our file.

Like anything else, you should always strive to be as efficient as possible in your projects. It not only makes it easier for you to work on your .fla’s but others as well. Right now we initialize .x and .y locations outside of our on resize function. Obviously this is not uncommon and will be done in almost all your projects down the road…..BUT in this case, we don’t need to write our layout function that way. Instead, we can write one universal function that we call when the program loads and then continue to call when a user resizes the browser window. This is especially helpful. Why? because we only need to change things or add layout boundaries in one central function instead of doing so inside and outside (as we did in our first tutorial).

So, we’ll move all the .x and .y equations (that initialize the starting point, on load, of all our objects) inside a single function I’m going to call setElementsXY();

Pretty painless right? Now we just call our function after our addEventListener at the top of our program:

and finally, we just call that setElementsXY(); function when the stage is resized:

I would guess most of you understood that without much trouble but in case you got hung up, you can download the full commented file here:

Commented File Download: Extending the basics FLA

And a working version over on labs:

Creating Fluid AS3 Flash Layouts: Extending The Basics – Working File

There are a few extra layout conditionals that have been added in (that haven’t been explained) but I’m confident you all can decipher what’s going on. Just as an example, there’s a layout conditional that keeps the boxRed from touching the left edge of the browser window (i.e. 10 px of padding). Easy enough right? The comments should help you figure anything out that you might be a bit unsure about.

I really hope this 2 part (for now ) layout series helps you in your projects. If nothing else, I hope it (this tutorial) helps you realize the value of the internet (for programmers) and encourages you to share some of your own concepts with others. It’s nice to know everything, even nicer to share it with others as well.

That’s all for now but check back often. I’ll try to post some other flash tutorials when I get a chance!

As always happy flashing!

Last 5 posts by Ryan Nasipak

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