Basic Tasks: Creating a banner, Part 2
- Examine the completed FLA file
- Adding text
- Creating a symbol
- Adding animation to a timeline
- Creating a button
- Writing simple actions
- Test the application
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Welcome to Part 2 of this three-part introduction to Macromedia Flash Basic 8 or Macromedia Flash Professional 8. You successfully completed Part 1 of this tutorial, where you created, set up, and imported content into an FLA file. Because you’re reading Part 2, you’re probably ready to learn more about Flash. That’s good, because you will create symbols, animation, and even write some simple ActionScript to make the banner function in this continuation tutorial. Following this part, you’ll add the banner to a website using Dreamweaver (or, you can optionally upload the banner to a website using any tool).
See the introduction to “Basic Tasks: Creating a banner, Part 1” on page 25 for a desecription of Part 1, 2, and 3 of this tutorial.
You do not need any prerequisite knowledge to complete these tutorials, however you should complete Part 1 (“Basic Tasks: Creating a banner, Part 1” on page 25) of this tutorial before you start Part 2.
In Part 2 of this tutorial, you will complete the following tasks:
|
Examine the completed FLA file |
44 |
|
Adding text |
46 |
|
Creating a symbol |
49 |
|
Adding animation to a timeline |
51 |
|
Creating a button |
56 |
|
Writing simple actions |
59 |
|
Test the application |
61 |
The tutorial workflow includes the following tasks:
- “Examine the completed FLA file” on page 44 lets you view the completed Flash document for Part 2.
- “Adding text” on page 46 shows you how to create and format text in a FLA file.
- “Creating a symbol” on page 49 shows you how to create a movie clip symbol, to which you’ll add an animation.
- “Adding animation to a timeline” on page 51 shows you how to create animation using the main Timeline and motion tweens.
- “Creating a button” on page 56 shows you how to create a button to add interactivity to your banner.
- “Writing simple actions” on page 59 shows you how to write simple ActionScript to make the button work.
- “Test the application” on page 61 shows you how to export and test your document’s SWF file, which lets you test your progress so far.
Examine the completed FLA file
As you examine the finished version of an application that you’ll create, you’ll also look at the Flash workspace.
In this section, you will complete the following tasks:
- “Open the authoring document” on page 163
- “Review the completed FLA file” on page 45
- “Close the completed FLA file” on page 46
In subsequent sections you’ll go through the steps to create the application yourself starting with a brand new FLA file.
Open the finished FLA file
The files for this tutorial are located in the Samples and Tutorials folder in the Flash installation folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire FlashBanner tutorial folder to the writable location of your choice. In Part 1, you might have already copied the FlashBanner source files to another location of your hard disk.
On most computers, you will find the Flash Banner tutorial folder in the following locations:
- In Windows: boot drive\Program Files\Macromedia\Flash 8\ Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
- On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
Copy the FlashBanner folder to another location on your hard disk to which you have access. Inside this folder are three directories for each part of this tutorial: Part1, Part2, and Part3. In the FlashBanner/Part2 folder, you will find a Flash file called banner2_complete.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.
Review the completed FLA file
In the completed FLA file, you will see the structure that makes up the finished SWF file for Part 2 of this tutorial. The application, a Flash banner for a gnome website, looks like this at the end of Part 2:
)
This file contains an animation in a movie clip, text, an invisible button, and the assets that you imported in Part 1 of this tutorial.
- The movie clip instance contains a graphical instance that you animate.
- Text fields contain static, stylized text that you display on the Stage.
- The invisible button covers the entire Stage, and it lets your visitors click the banner and open a new web site.
- The graphic assets include a bitmap background image (the gnome), and the star graphic that you animate in an upcoming exercise.
By the end of Part 3 of this tutorial, you will add the graphics, animation, and interactivity to the banner. Then, you’ll insert the banner on a website using Dreamweaver.
Close the completed FLA file
To close the document, select File > Close.
If you prefer to keep the finished file open as a reference while working with your banner file, be careful not to edit it or save any changes to it.
Now you’re ready to start creating your own banner file in the next section, “Adding text”.