art home

TUTORIALS: Building a Flash Website

INTRO: I created this tutorial (and never completed it) around 2005. Since then, the world has moved on and HTML5 is replacing what Flash websites can do. However, Flash is still a useful art tool.

Not covered in this tutorial:
  1. Basic digital art terminology, such as layers and animation frames. Definitions should be easy to find elsewhere.
  2. I assume you have web space for your site.
  3. Flash provides tutorials on using the basic drawing and text tools, so I won't go over those.
  4. I'll cover animation in another tutorial.
Design your website before you start!
A Flash website can give you interactivity with the viewer, animations, and other good things that ordinary HTML can't deliver.
The band Doctor Steel uses Flash for its website. The main page, or splash page, should provide access to the most important features of your website, since it's the first thing viewers will see. Professional artists, photographers, and musicians often use Flash to prepare a staged area for online portfolios or web comics. Check out Making Fiends and Home Star Runner for more neat design ideas.

I threw together a half-assed Flash website for this tutorial. Even this half-assed site required a few hours of planning.
  1. Choose a resolution size
    When you start a new project in Flash, it has default dimensions. You can make your webpages any resolution size (it's easiest to make your whole site one size), but remember that some viewers have small monitors. I made my Flash site 800 x 550 pixels, which is probably the largest you should go for.

  2. Stay organized by using layers
    You'll add layers by clicking on the add layer icon in the Timeline above your project. Layers are useful for keeping the components of your page (graphics, text, buttons, animations, music) separate, just like in Photoshop or Premiere. Ignore the frames in the Timeline for now!
    I used three layers for the main page of Darwin's Gap
    As you see above, my main page has three simple layers. I can lock these layers, or make them invisible or just an outline. This helps me to to place components (text, graphics, buttons) where they'll look best.

  3. Putting stuff on the page
    In addition to drawing art inside Flash, you can import images (CTRL+R). They may inflate your file size, but fear not; Flash is great at compressing things! You won't even need to upload the orginal image files. You can import sound files as well (I'll cover how to implement them later).

    Within Flash, there are exactly three different components that you can have:
    • Graphic: A piece of art which may or may not have multiple layers. Think of it as a piece of clip art that you can move around, or a bunch of lines and shapes grouped together. The easiest way to construct a complex graphic is to draw its basic shape, press F8 to name it as a Graphic, and continue working on it, adding layers as you go. If, perchance, you decide you want the thing to animate, you'll need to convert it to a Movie Clip. Read on.
    • Button: You know what this is. It has four frames, and I'll cover it later.
    • Movie Clip: An animation clip, which may or may not contain Graphics and many layers. It uses the Timeline frames.
    You can convert any of the above components into another thing; for example, you can make a Graphic into a Movie, or a Movie into a Button. In Flash, this is known as changing the Symbol Behavior. To do it, you can select the art and press F8. Another way is to go to your Library by pressing F11.

    The Library is like a storage bin for all the components of your project. Right-click on any component and choose Properties to change its behavior.

    All these layers and components (symbols) can get confusing to the uninitiated. In Flash, it's possible to have layers within a Graphic within another Graphic within another Graphic with more layers, within a Movie Clip that has more Graphics, within more Movie Clips with frames and layers, with a Scene that has Buttons and Graphics galore ... all connected to other Scenes within one single file. It's ridiculous. I think of Flash as a fractal type of set-up, where you can only concentrate on one area at a time, though it may have a near-infinite amount of such areas. There's always something inside of something else. It takes practice to get used to it and learn terminology.

    Remember to save your project frequently as you work.

  4. Having multiple pages
    Most web designs require more than one page, of course. But Flash uses weird terminology for things like webpages and art, which is why many artists have trouble learning it, even if they're proficient in programs like Photoshop. In Flash, a Scene acts as a webpage. You'll observe that your new Flash project says Scene 1 on that bar between the Timeline and the project window. At some point, you'll probably want to make a button that links to (or goes to) a new scene/page when you click it. I'll cover buttons later; first, let's make a new scene so your button will have meaning in its life!


All material Copyright © 2024 Abby Goldsmith, except where otherwise noted.
All rights reserved. No part of this may be reproduced or reprinted without prior written permission from the author.
Document updated: 05 September 2016 - 17:57:51 [an error occurred while processing this directive]