I want to preface this list by explaining that at Catalyst Studios we typically follow the process of creating site mockups in Photoshop and then breaking them down into the visual elements required to display a site. Type, color, layer styles, size, position and so on are translated from the PSD into HTML, but we aren’t simply slicing up the document into a group of images that show the page. This list is intended to optimize this process of mapping the elements  base on our work flow, however most of it should easily translate to other processes and software applications.

Ok on to what you all care about–the list (annotated and explained as I have time). This document can be summed up by saying as a designer you need to be specific. Never assume that the developer is looking at the same vision you have in your head. Meaning its rarely enough to simply create one of similar elements and expect the developers to know how to modify that object or to intuitively know how a drop-down menu should look or even what font you had in mind for those form fields. Keeping in mind that you need to specify exactly how EVERYTHING will look, and interact makes this list somewhat irrelevant but here goes:

Interactivity

1. Did you design alternate content states?
2. Have you defined a visual look for rollover/hover states on buttons and links?
3. Have you defined a visual look for error messaging and status information?

Concept & Layout

1. Did you account for different sized content?
2. Did you design for extremes?
3. Did you design for dynamic content?
4. Does your layout width add up to a standard viewable area?
5. Are columns, gutters, margin and padding all equal and add up to the container width?
6. Did you provide direction for what should occur when the browser window changes size?
7. Did you use web-safe fonts? If not, did you include the font with your design or check licensing for use with @font-face?

Photoshop Document

1. Is your image file 72DPI and RGB color space?
2. Have color management profiles been removed from the file?
3. Did you name and organize your layers?
4. Do objects in your layout end on full pixels?
5. Have you used any blending modes (multiply, screen, burn) to create an effect? If so find a different way to create the effect.

Production Instructions

1. Have you specified content that requires special technology? If so how should these be included?
2. have you specified a hand-full of reusable typographic elements side wide? (For example make body copy on all pages the same size, color, etc)
3. Have you defined browser compatibility requirements? (Must support IE6 or needs a mobile version)
4. Did you consider how this will look on different devices/mediums?
5. Did you specify any locations where visual objects should be the same height?

Tutorial websites (photoshop, illustrator, flash, more):

• PSDTuts
• PSHero
• Tutorial9
• Tutorial Dog
• Tutzor
• VectTuts
• NetTuts
• Tutorialblog
• Abduzeedo

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

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.

• 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

• Movieclip tweening prototypes (LMC Tween)
• Fuse Kit (heavy duty animation, but watch out it has a learning curve)

Actionscript 2 Cheat Sheet

Other helpful cheat sheets

• Javascript (Functions & Methods)
• Javascript (event handlers)
• HTML
• HTML Character Entities
• CSS

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.