NOTE: I am no longer able to offer support for this tutorial. I don't do Flash like this anymore and simply don't have the time. Sorry for the inconvenience.

The first in a series of eight tutorials on how to create a full Flash site.

If you found this tutorial useful or if you used it at all, please . Thanks!

C&C

----------

PLAIN-TEXT VERSION

NOTE: As you will notice, none of the images are included in this plain text version of the tutorial. At each point where "*IMAGE*" is placed, refer to the original version of the tutorial for the images.

----------

1. THE FIRST STEP TO CREATED A ENTIRELY FLASH SITE IS DESIGNING. FOR THE PURPOSES OF THESE TUTORIALS, CREATE A DESIGN THAT IS FINITE; OR ONE THAT HAS A CERTAIN AMOUNT OF SPACE IN WHICH TO PUT CONTENT. AS WELL, MAKE SURE YOU HAVE AN UNOBSTRUCTED, RECTANGULAR AREA FOR YOUR CONTENT. KEEP IN MIND ROLLOVERS, WHERE YOU WANT PHOTOS AND CONTENT, WHERE YOU'D LIKE AN AUDIO PLAYER, SOLID COLORED BACKGROUND ETC. FINALLY, YOU DON'T HAVE TO DESIGN EVERYTHING. MANY THINGS YOU WILL FIND OUT ABOUT AS YOU PROGRESS THROUGH THESE TUTORIALS. TAKE A LOOK AT THESE DESIGNS. THEY ALL CONTAIN THE FINITE DESIGN ASPACTS. DO NOT RIP THEM, THEY ARE SIMPLY EXAMPLES.

*IMAGE*

2. OK, NOW YOU HAVE A DESIGN. WOOHOO, NOW THE REAL FRUSTRATION BEGINS. YOU HAVE TO CUT UP YOUR NEW DESIGN INTO IMAGES THAT YOU CAN PLACE INTO FLASH. BASICALLY, DEPENDING ON THE DESIGN, YOU SLICE IT JUST LIKE YOU WOULD AN HTML WEBSITE (EXCEPT YOU CAN PUT IMAGES ON TOP OF OTHER IMAGES) BUT YOUR CONTENT AREA YOU WILL SLICE AS ONE BIG CHUNK. FOR YOUR DESIGN, THINK OF IT LIKE A FRAME. ONE PART IS GOING TO BE THE FRAME, OR CONSTANT, THE OTHER WILL BE THE PICTURE, OR THE CHANGING PART. FOR THE EARTHTONES DESIGN, MY OLD PORTFOLIO THE LEFT NAVIGATION PART IS CONSTANT AND THE BIG CONTENT BOX CHANGES. SO, I CUT IT UP INTO THE FOLLOWING IMAGES.

*IMAGE*

3. NOW OPEN UP YOUR VERSION OF FLASH (I'LL BE DOING MINE IN FLASH MX 2004, BUT I'M PRETTY SURE YOU CAN DO IT WITH FLASH MX) AND CREATE A DOCUMENT THAT IS THE SAME SIZE AS YOUR DESIGN AND WITH THE SAME CANVAS COLOR. NOW GO TO "FILE > IMPORT TO LIBRARY" AND GET ALL THE IMAGES YOU SLICED INTO YOUR FILE. SAVE THIS FILE AS "MAIN.FLA" (ALL LOWERCASE). AFTER YOU'VE DONE THIS YOU CAN HIT "F11" TO OPEN UP THE LIBRARY AND START PLACING YOUR IMAGES INTO THE STAGE (THE MAIN WORK AREA), GIVING EACH IMAGE IT'S OWN LAYER AND MAKING SURE YOUR IMAGES' COORDINATES ARE NOT AT "POINTS OF A PIXEL" (IE. 125.3, YOU SHOULD BE AT 125.0). WHEN THIS STEP IS OVER, YOU SHOULD HAVE BEFORE YOU SOMETHING THAT LOOKS EXACTLY THE SAME AS THE DESIGN YOU MADE AND YOUR TIMELINE SHOULD HAVE THE SAME AMOUNT OF LAYERS AS YOU HAVE IMAGES. IF IT LOOKS LIKE THAT, YOU CAN MOVE ON TO THE SECOND TUTORIAL.