Tutorial: Page (1) of 2 - 11/12/09 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Full Browser Flash

Using Flash CS4 and ActionScript 3 to dynamically reconfigure layout By Kevin Schmitt


Let's face facts, folks: sometimes just scaling your entire Flash movie to an arbitrary window size won't cut it. A prime example of one of those times would be if you're using Flash to create Web-based applications, where your users would rightfully expect to have the application interface scale intelligently to the size of their browser window. Flex Builder can do this through a simple GUI panel, but the process is a little more involved if you're using Flash CS4 Professional, which is where we'll pick things up.

The setup

We're not going to get too terribly complicated with this; the whole idea is that by keeping things simple, you can quickly jump off into your own experiments from here. With that in mind, let's set up the Flash movie and create the host HTML page.

Fire up Flash CS4 and create a new ActionScript 3-based Flash file. Unless you've changed the default profile, you'll get a 550x400 movie with a white background, which we'll leave the way it is. Don't worry if you have a different background color and stage size specified -- pretty much anything will do for this tutorial. Go ahead and save the file.

Once the file is saved, head to the Publish Settings panel (File: Publish Settings). Make sure the Flash and HTML options are checked in the Formats tab, then click on the HTML tab and set the Width and Height to 100%, the Scale to No scale, and the Flash alignment to Left and Top. Figure 1 shows you what your panel should look like before clicking OK.


Figure 1

Go ahead and publish the movie (File: Publish), which will generate the (currently blank) SWF file and the HTML. We need to take care of a small nit in the automatically generated HTML at this point, so using your favorite text editor (or some other application that allows you to edit raw HTML code), open up the HTML file. Right below the <title> tag on line 4, paste in the following:

<style type="text/css">
    body {margin:0; padding:0}
</style>

This little bit of CSS will prevent the scrollbar from showing up, which we don't need anyway, as the whole point of this exercise is to have the Flash movie scale to whatever size the browser window is. Save the HTML file, switch back to Flash, open the Publish Settings panel again, and uncheck HTML in the Formats tab. We don't need Flash overwriting our now-changed HTML every time we publish, so with that set, hit OK to return to the Flash stage.

The assets

We're going to need to create a couple of things in the Library. For one, we'll need a rounded rectangle, because in addition to being useful in seeing how our interface scales to the window size, rounded corners on rectangles are way cool. In Flash, open the Library panel if it isn't already (Window: Library) and click the New Symbol icon at the bottom left of the window. The Create New Symbol dialog will open up. Enter in the following settings:

  • Name: mcRoundedRect
  • Type: Movie Clip
  • Click the Advanced button and check the "Enable guides for 9-slice scaling" box

Click OK to create the symbol and enter the symbol editor. Select the Rectangle Primitive tool from the Tool panel and draw out a 50x50 rectangle onto the Stage. The color can be whatever you want (mine is a darkish gray with no stroke applied), but make sure the registration point is set to the top left (in other words, XY coordinates of 0,0). Then, using the Properties panel, give it a nice uniform 10 pixel curve in the Rectangle Options section. The panel should look something like Figure 2:


Figure 2

Your rectangle should look similar to Figure 3, with the 9-slice scaling guides nice and evenly distributed. Again, note the registration point (the crosshairs) at the top left:


Figure 3

Let's create another rectangle, this time of the non-rounded variety and with a gradient fill. Create another new Movie Clip symbol in the library and name it mcBG (no 9-slice scaling necessary on this one). In the symbol editor, draw out a 50x50 square (again with the registration point set to the top left) using either the regular Rectangle tool or the Rectangle Primitive tool (I prefer the latter, for whatever that is worth). In either case, make sure there is no stroke applied and the fill is set to whatever gradient makes you a happy camper. Just for kicks, my oh-so-exciting symbol is shown in all its glory in Figure 4:


Figure 4: Behold -- the greatest screenshot in the history of mankind.

The Layers

OK, we've got our rounded rectangle set, we've got our background set, so let's put 'em into some layers. Head to the Timeline (Window: Timeline if it's not already open) and click the New Layer button twice to add two additional layers. Name the bottom one bg, the middle one rects, and the top one actions. Your Timeline should look something like Figure 5:


Figure 5

Let's add the background layer first. Select frame 1 of the bg layer and then drag an instance of the mcBG symbol from the Library to the Stage. Use the Free Transform tool to position and size the instance to the overall size of the Stage. Finally, using the Properties panel, set the name of this instance to bg_mc.

Now for the rounded rectangles, which will simulate interface panels. Select frame 1 of the rects layer, then drag two instances of the mcRoundedRect symbol from the Library onto the Stage. Scale and position them so you have one on the left that is narrower than the one on the right, then name them left_mc and right_mc, respectively, in the Properties panel. Once that's done, your Stage should look roughly like Figure 6:


Figure 6

If you want your panels to look exactly like mine, use the following specs:

left_mc:
x: 20
y: 20
width: 150
height: 360

right_mc:
x: 190
y: 20
width: 340
height: 360

These specs assume that you left the default Stage size alone (550 x 400), which will give you a nice 20 pixel gutter on all sides around each panel. Once you've done all this, you should still have one empty layer left in the Timeline -- the actions layer -- which we'll start to fill up with code presently.


Page: 1 2 Next Page


Related Keywords:flash, adobe flash, flash cs4, actionscript

HOT THREADS on DMN Forums

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved