1. Spacing
2. Pixel Perfect Detail
3. Typography
4. Organization of Elements
5. Restraint & Subtlety
6. Using Color
7. Do Something New

have more? Leave em in the comments.

View online

• Transmit (mac)
• CyberDuck (mac) – free
• FileZilla (Mac/PC) – free

More information available here.

A few of the SWFObject features that might make your life easier:

• Fixes the dreaded Microsoft “Click to Activate” error in IE 6 and 7
• Creates clean standard compliant code
• Can detect a Flash player version and push an upgrade
• Provide users with alternate (non-Flash) content for search engines or those without Flash
• Allows for an easy way to pass data into Flash at run time.

• Build a killer online portfolio
• Creating the perfect portfolio
• 5 Tips for a Better Online Portfolio
• Preparing and Talking About Your Graphic Design Portfolio

If you have more resources, please share them in the comments.

• http://www.comparewebhosts.com
• http://www.cheaphostingdirectory.com
• http://www.webhostingsearch.com/cheap-web-hosting.php

Most hosts will help you register a domain name, but if you want to do that on its own check out Godaddy.com

Step 1

Lets take a look at an example of what we’ll be creating. What you see is essentially an HTML content sandwich comprised of a flash background, HTML middle and a Flash menu on top. If you resize your browser window you’ll notice that the content inside the background is changing position according to the center of the browser window.

In this tutorial I’m only going to cover the creation and placement of the background and text layers. However, the placement of the “top” Flash movie is very similar and you can see exactly how it works by viewing the source of the example.

Step 2 – Creating the background flash

You can use just about anything for your background movie. My example is extremely simplistic, but I’ve seen this technique used to display everything from a tiling background to full screen video to dynamically changing content based on weather or time of day.

Ok lets get started. Open up Flash and create a new Actionscript 2 document. First we want to make sure that Flash doesn’t try to resize our content (unless of course that’s your intention) so we’re going to add a bit of Actionscript that tells Flash not to allow scaling and to set a content origin in the top left of the movie. So create a new layer, name it “script” and in the first frame add this Actionscript in the Actions Panel:

Next we want Flash to watch for the stage being resized and reposition content (in my case to the center of the screen) relative to the new size. We can accomplish this task by adding a listener and then a simple function. So go back to your Flash document and create a movie clip.  Make sure that the registration point is in the upper left corner when you create the clip. Give your clip an instance name of “box_mc”. A quick side note, adding _mc to your instance name will help Flash give you hints for code you can use with a movie clip. Next go back to the first frame of your “script” layer and add this code after the align and scale code from the previous step.

Lets go through this line by line.

A. The first part is creating a function (series of commands) to run when the stage is resized. The first line inside the function moves our box_mc to the horizontal center of the stage. We use the Math.round() command to make sure our clip doesn’t end up with a decimal position (rounding to the next/previous whole number). Inside the round functions we’re telling Flash to use Order of Operations by including things we want to happen first inside the parenthesis. So in case that math doesn’t make sense we’re saying take the stage width and cut it in half which gives us the horizontal center. However, since Flash is going to place our box_mc clip at its origin point, the left side of the clip would be in the center of the stage resulting in our clip being off center. So to fix that, we need to get half the width of the clip and then move the position to the left (using the minus sign) resulting in the clip being centered at the center of the stage. In other words we want to set the clip x position to (half the stage width) minus (half the clip width).

Note – getting the stage height/width does not require an underscore while getting the height/width of a movie clip does require an underscore so Stage.width vs clip._width

B. The next part of the function is similar to the first line except that we’re looking for half the height of the stage and half the height of the movie clip.

C. We need to create a new listener object. This is pretty aptly named in that it “listens” for some event and then does a specified action when the event occurs.

D. After we have a listener we need to tell it what action to watch. In this case we want to know when something is being resized.

E. Next we’re attaching the listener to the stage object so Flash knows that when the stage is resized it should run the function to center our clip.

F. Finally since the stage isn’t changing when the movie first loads, we need to call our function to center box_mc the first time the movie runs.

Now you can publish your movie and in the next step we’ll use the swfObject to place your swf file in an html page.

Step 3 – Placing the background in the HTML page

First of all visit deconcept.com and download the swfObject. You’ll end up with a zip file containing javascript and several examples. Grab the swfobject.js and put it in the same folder as your Flash background movie.

The quickest way to get up and running is simply modify the relevant chunks of code out of one of the swfObject example files and then save it as a new HTML file. So open the “fullpage.html” file from the swfObject folder in your your favorite text editor/IDE and save it to the same folder as your background.swf from the previous steps. The fullpage.html file has almost everthing we need to make our flash movie fill the entire screen pre written for us. We’ll just need to replace a few lines with the correct names of our files.

You’ll need to change the first argument in this line:  var so = new SWFObject(“so_tester.swf“, “sotester”, “100%”, “100%”, “8″, “#FF6600“); to the name of your swf file and the last argument to the background color of your choice. Changing the background color is important since our swf will be transparent in any location where you can see the stage. (If you decided to cover the entire stage of your movie with some color this won’t be an issue).

At this point, if all you wanted was a 100% wide and 100% high movie that resizes with the browser window you’ve got it. If you view your HTML file in a web browser you should see a resizing Flash movie that fills the browser window. However, if you want to use Flash as a page background follow on as we add some CSS trickery to make the Flash sit below some content on the page.

Step 4 – A little bit of Javascript.

Typically if we want something to be layered above or below other content in an HTML page we would use the CSS z-index property to create depth. Unfortunatly with Flash we run into a little problem in that swf’s always like to be on top of all the other content. We can fix this default behavior with one really simple but very important addition to the swfObject placement code. So go back to the HTML page we were just editing and place your cursor at the end of “so.addParam(“scale”, “noscale”);” hit return and type:

With that simple addition Flash should play by the normal CSS stacking rules.

Step 5- Placing the html content with CSS

Ok we’re almost done. The final step is to add a HTML container for our content and position everything with a little bit of CSS. So in your HTML file add a new div  after the closing script tag (</script>) with an id of “htmlContent”. Make sure to add some content inside the htmlContent div so you can see when the new div is placed correctly. This container will hold any content that you want to appear “on top” of the Flash background.

Next go to the head of your HTML page where it says <style type=”text/css”>. We need to add another CSS rule to position our htmlContent div. Find the last closing brace “}” inside the </style> tag and add this rule:

That’s all there is to it. Remember to save your HTML page and then take a look at it in your web browser. You should see whatever is inside the htmlContent div on top of your full screen Flash movie.