Tutorial by Daniel Nestorsson

Web Classroom creation:

Flash 5 is used today to make the www come alive. Whether you’re a graphic designer, a hard-core programmer, or a web designer, Flash 5 can give you the power and flexibility you need to create the dynamic web pages of tomorrow.

The timeline in Flash is used to separate content into logical and workable groupings. Flash works with mainly vector graphics and can be broken apart to their equivalent bitmap or raster graphic equivalent. The key-frames in Flash are used to represent the passing of time. These key-frames can be used to show a particular motion and can be used to “Motion Tween”, or can be used just to show key-frame events as they happen in time. Motion Tweening is the placing of a motion tween event between two key-frames that contain a span of regular frames. The motion tween process is not covered in this project but can be located in the Flash Help file. Key-frames are created to show the next position of the object you are working with. Figure 1.0 shows a timeline with layers and frames. The frames that have black dots in them are the key-frames. Again they just show a change in an object.

Figure 1.0

Figure 1.0 shows a good use of layers and key-frames that will in the end make your creation come alive! Hard to see but the first layer which is the bottom most layer is labeled Design, followed by layer 2 labeled Buttons, and layer 3 labeled actions, and finally label 4 labeled labels. The naming convention you use for your layers is strictly up to you but these names should correspond to the focus of the layer. An example of a good name is the Buttons layer. If I hide all other layers as in Figure 2.0, then one can see the layer by itself without the rest of the layers. The Buttons layer depicts the layer in which I have all of my click able buttons. Buttons are created in the main toolbar under Insert and then by selecting either Convert to Symbol or the Create New Symbol options. Once a button is created and added to the Scene we are working on, right clicking the button and pointing to Actions will enable us to set the button’s action property. In this project we are simply pointing to the GetURL action and entering a URL.

Figure 2.0

Figure 2.0 is essentially the last layer in the project with all other layers hidden. The reason you want to create layers that make sense and serve a distinct level of use is without them you will find yourself doing much more work than is necessary. Use a new layer for each main theme you have and your project will be more manageable.

The most important part of the Web Classroom web page is the Flash 5 concept of converting bitmaps to vector graphics and vector graphic back to bitmaps (raster graphics). The Trace Bitmap command can be used to convert a bitmap into a vector graphic. Use this command to manipulate the image as a vector graphic, or to reduce file size. If you convert a bitmap to a vector graphic, the vector graphic is no longer linked to the bitmap symbol in the Library window. The Library window is located at the bottom right of our main Flash window as an icon. By clicking the Library window we can easily access any items we have imported into Flash. We will not be using the Trace Bitmap command in this project but it is a good command to know.

To get our image into Flash we select File and then Import from the main toolbar.

The Library icon (bottom right of Flash program) will be used for easy of access to imported items.

What we actually do to this page is break apart the bitmap we import or vector graphic into a raster bitmap graphic again. Confused yet? When any bitmap is imported into Flash, it is actually automatically converted into a vector graphic and can’t be edited. We want to manipulate the bitmap and modify the image using Flash drawing and painting tools. To do this just select the bitmap from the main toolbar under Modify select Break Apart.

Your bitmap can now be edited with the drawing tools and converted back into a vector graphic again by selecting the chosen bitmap area and selecting Insert from the main toolbar and the Convert to Symbol and choosing Button from the pop up menu. Certain selections can be used to create a button for linking to other URLs or can be a movie clip if desired.

Here I just use the pen tool and line tool to go around the main shapes of the room, highlighting corners and edges. I then copy the entire frame to a later frame. With the current frame I slowly delete the colored areas of the classroom until only traced lines of the room are left along with the area of Dr Rodriguez and students as shown in Figure 3.0.

Figure 3.0

The actions layer that I have is actually an advanced scripting concept. Basically what is happening here is a pre-loader is being designed so users accessing this page will have the option to either wait for the page to load while seeing a nice little graphic image or they can skip the intro. Both the Web-Classroom page and the Introduction page that I have created for Dr Rodriguez use a pre loader to pass the time. It is a neat concept and if you are interested in implementing it in your own projects you can either download the code from one of Dr Rodriguez’s sites if applicable or you can purchase the Flash 5 Bible and learn directly from reading this book.

Finally to rap things up I will show you Figure 4.0, just a shot of the web-class from the Design layer that shows frame key-frame motion. Notice the Design layer is currently blackened showing it has been selected.

Figure 4.0

Here you can see as the frames progress I reanimate them by slowly adding parts of the bitmap that were removed earlier on. Try implementing a project on your own now and see how it works. The best way to learn Flash 5 is by using it on your own projects. I hope you have enjoyed this Flash 5 tutorial for Dr Rodriguez’s Web-Classroom of the future. My name is Daniel Nestorsson and I can be reached at support@radical3se.com, dnestorsson@cs.com, or at my main site www.radical3se.com. I hope this gives you a look at what Flash 5 technology can do and I recommend you purchase the Flash 5 Bible if more advanced topics such as action scripting interest you.

Best of luck,

Daniel Nestorsson