What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

 How to Create a Banner in Flash, Part 3

Basic Tasks: Creating a banner, Part 3

Examine the completed FLA file

Considering your audience

Checking your publish settings

Inserting Flash on a Dreamweaver site

Using roundtrip editing

Checking for Flash Player

Test the application

Summary

 

Basic Tasks: Creating a banner, Part 3

TOP

WThis is Part 3 of a three-part article on how to build a simple animated banner in Macromedia Flash Basic 8 or Macromedia Flash Professional 8, and add it to a web page using Macromedia Dreamweaver. In this final part, you learn about file size, banner standards, how to set publish settings, how to add the banner to a Dreamweaver web page, and how to add Macromedia Flash Player detection.


You must have Dreamweaver MX 2004 or Dreamweaver 8 installed to complete most of Part 3 of the tutorial. If you don't use Dreamweaver, you can complete the first part of this article and use the HTML that Flash outputs with a different HTML editor. However, you won't be able to enjoy some of the benefits of using Flash and Dreamweaver together.

See the introduction to Basic Tasks: Creating a banner, Part 1 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 and Part 2 of this tutorial before you start Part 3.

 

Examine the completed FLA file

#TOP

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

  • Review the completed FLA file

  • Close the completed project

In subsequent sections you'll go through the steps to create the application yourself starting with a brand new FLA file.

Open the finished project

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 or Part 2, 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/Part3 folder, you will find an HTML file called gnome.html inside the finished folder. Double-click the file to open it in your default browser. You now see the completed SWF and HTML files in the browser window.

Review the completed project

In the completed project, you will see the structure that makes up the finished project for Part 3 of this tutorial. The application, a Flash banner inserted into an HTML page for a gnome website, looks like this at the end of Part 3:

The completed banner for Part 3

By the end of Part 3 of this tutorial, you will add the banner that you created which contains graphics, animation, and interactivity to a website using Dreamweaver.

Close the completed project

To close the document, click the close button on your browser window, in the upper right (Windows) or left (Macintosh) corner of the window.

You might prefer to keep the finished file open as a reference while working with your banner file.

Now you're ready to start creating your own banner file in the next section,

 

Considering your audience

TOP

When you create a site, you often need to follow certain guidelines for submitting a Flash banner. For the purposes of this article, following established advertising guidelines is not a great concern because you're not submitting the banner to a company for advertising purposes. This section briefly explores some of the considerations you might have when creating a banner in a real-life project, or a project for wide distribution. When you create a banner that you submit to an advertising company, often you need to make sure the file meets their specified file size, dimension, target Flash Player version, and frame-rate guidelines. Sometimes, you have to consider other rules about the kinds of media you can use, button code you use in the FLA file, and so forth.

You have created the banner and resized its dimensions. When doing so, you actually set the banner to established and standardized dimensions for what the Interactive Advertising Bureau calls a "wide skyscraper." The file size is also reasonable for a Flash ad of this size. You will discover how to reduce the file size in an upcoming exercise.

However, ensure you confirm the advertising guidelines for the advertising service, client, or website that you're advertising with first. Guidelines might include standards for file size, dimensions, sound and video usage, and buttons.

The purpose of this article is understand how to create Flash content, export it from Flash, and add it to your own website. The lesson to draw from considering banner guidelines is that you need to consider your audience. Whenever you create a Flash site, think about the kind of people who will see the content--much like when you create any website. Is your audience a wide range of individuals, with many kinds of computers and Flash Players (or none at all)? Or, is your audience primarily fellow Flash developers and new media companies? Your audience affects which Flash Player version you target. For example, if you think a diverse audience (often a large audience with a wide range of computer capabilities) will visit your site, target an earlier version of Flash Player, such as version 6. If you think other web professionals will visit the site, then the latest player (with a detection system) is fine. You set your Flash Player and add a Flash Player detection system using Dreamweaver in upcoming sections.

NOTE If you send your banner to a company to host, they usually have special requirements for how you add button code to your FLA file. Often, they want you to add a specific variable (such as clickTAG) instead of a URL. Refer to the advertising service, client, or website guidelines for the correct button code to add to your FLA file. Some companies also limit what frames per second (fps) rate you can use in the SWF file. When you design a banner, try to keep your fps rate as low as possible. I recommend using 18 fps or lower; ideally, use 12 fps.

 

Checking your publish settings

TOP

Often you need to save banners to earlier versions of Flash Player. Many sites you might advertise with now accept Flash Player 6 files. You might also create a website that targets a wide audience, and you need to target an older player. The simple ActionScript you added to your file can play in Flash Player 6. Therefore, you can change your player settings to Flash Player 6 for your website.

In earlier parts of this tutorial, you made changes in the Document Settings dialog box. You set the dimensions and frame rate (fps) for the SWF file. In this final section, you will make sure that the Flash Player setting you want to target is correct, and that you export the files you need. Many Flash developers make these settings when they start the FLA file, because they are aware of what they need to output and target.

  1. Open the banner2.fla file from Part 2 of this tutorial (Basic Tasks: Creating a banner, Part 2).

    If you don't have banner2.fla, open banner3.fla from the tutorial source files (see Open the finished project). Look inside the start folder.

  2. Select File > Save As and then rename the file banner3.fla.

  3. Select File > Publish settings.

    The Publish Setting dialog box opens, where you can change many different settings for publishing your files.

  4. Click the Formats tab, and then make sure that the Flash (.swf) check box is selected.

  5. Deselect the HTML option.

    For this exercise, you don't need to output an HTML page.

  6. Click the Flash tab, and select Flash Player 6 from the Version pop-up menu.

    When you add Flash advertisements to an HTML page, use Flash Player 6 or earlier (as of the time of writing). Many Flash developers still use Flash Player 5, although sites are starting to use Flash Player 6, which enables you to add additional functionality in your Flash advertisements.

  7. Select ActionScript 1.0 from the ActionScript version pop-up menu.

    For this example, you wrote ActionScript 1.0 style code (in Part 2), and although this setting does not matter it's a good habit to check which version you have selected. You can write ActionScript 2.0 and publish to Flash Player 6 if you want.

  8. In the Options section, select Compress movie.

    You do not need to make any other selections on the Flash tab.

  9. When you finish, click OK to accept the changes to your document.

  10. Select File > Publish when you have finished editing your FLA file.

    This publishes the SWF file to the directory where you saved the SWF file.

  11. Go to the directory to which you published the banner's SWF file. Check the file size of the document (it's called banner3.swf).

    As discussed previously, file size is not a great concern because you're not submitting the banner to an advertising service. If you need to or want to reduce the file size of your banner, you can go to the Publish Settings dialog box again (File > Publish Settings) and click the Flash tab. You can reduce the quality of the bitmap image you use in the background by changing the JPEG quality to a lower number.

  12. Move the slider to 60, and click Publish.

    When you check the SWF file again, the file size is smaller.

There are other ways to reduce the file size of a SWF file. If you need to design a file to a specific maximum file size, make sure you publish your work regularly and check the current file size. Bitmap images, sounds, and video quickly increase a SWF file's size.

If you don't have Dreamweaver installed, then the tutorial series ends with this section. If you don't have Dreamweaver, you can return to the Publish Settings dialog box from this exercise, and make sure you select the HTML option under the Formats tab. When you publish the document, an HTML file exports with the SWF file. You can open this file, copy the HTML code, and paste it into your website. Notice that this file contains some extra tags that you won't need if you have an existing website, such as head and body tags. The tags you need are both the object and embed tags, which contains the information both Internet Explorer and Mozilla-based browsers need to display the SWF file.

If you have Dreamweaver installed, continue to the next page. In the following exercises, you place and edit the banner in a web page.
 

 

Inserting Flash on a Dreamweaver site

TOP

You might have a web page already created for a banner. We have created a page for you to use for the purposes of this exercise, which is ready to have a banner of this size placed on it.

Make sure that you have the FlashBanner/Part3 directory available (see Open the finished project), and find the website folder inside this directory. Inside the website folder are the documents that you need to edit in Dreamweaver. You will modify the gnome.html web page in the following exercise.

NOTE You can find a finished version of the website in the finished folder in the FlashBanner/Part3 directory.

  1. Open the page called gnome.html in Dreamweaver MX 2004 or Dreamweaver 8 (this tutorial uses Dreamweaver 8).

    You can find this document in the website folder of this article's source files. Look inside the start folder (FlashBanner/Part3/website/start).

  2. Save a copy of gnome.html in the same directory as the SWF file you published in the previous exercise (banner3.swf).

  3. Save a copy of rightnav.css in the same directory as the SWF file you published in the previous exercise.

    Look inside the start folder to find rightnav.css. This document adds styles (such as text color and margins) to the gnome.html file.

  4. In Dreamweaver, make sure that you're in Split view (View > Code and Design).

    When in Split view, you can see and edit the code you're working on, and also select the SWF file easily in Design view.

  5. Select the large 160 x 600 image placeholder on the right side of the web page (see the following figure).

    This is where you want to add the Flash banner to the website.

    Select the large image placeholder on the right side of the web page in Dreamweaver. Notice that the dimensions are the same as your banner file.

  6. Press the Backspace or Delete key to delete the image. Leave the text selection pointer at that position in the HTML document.

  7. Select Insert > Media > Flash.

    This opens the Select File dialog box, where you can select the SWF file of the banner you created.

  8. Select the banner3.swf file, which should be in the same folder your web page is in (see Step 2).

  9. Click OK.

    The SWF file is inserted into the web page. (See the gnome.html document in the finished folder to reference the code that's added to the document).

  10. (Optional) You can select the SWF file and click Play in the Property inspector to view the banner's animation.

  11. Select File > Preview in Browser > iexplore (Windows) or Internet Explorer (Macintosh) (or select your preferred browser) to preview your site that now contains the SWF banner in a browser window.

  12. Select File > Save in Dreamweaver to save your changes before you proceed to Using roundtrip editing.

 

Using roundtrip editing

TOP

By now, you might want to change something in your Flash banner. Say you want to change the frame rate, or add some more text. It's easy to return to Flash to edit the document from Dreamweaver.

  1. In gnome.html, select the SWF file in Design view (where you see the layout of the page below the HTML code), and then open the Property inspector (Window > Properties).

    The Property inspector displays controls for the SWF file.

  2. Click Edit in the Property inspector (see the following figure).

    Select the SWF file and click Edit in the Property inspector.

    Flash opens the associated FLA file in the Flash authoring environment, or opens a window for you to locate the associated FLA file.

  3. Make your edits in Flash.

    Notice that "Editing From Dreamweaver" displays in the authoring environment, to indicate you're editing a file from the Dreamweaver environment.

  4. Click Done next to Editing From Dreamweaver (see the following figure).

    You can edit the FLA file directly from Dreamweaver. Click Done when you're finished.

    Flash updates the FLA file, publishes the SWF file, closes Flash, and then returns you to the Dreamweaver document. Your document is updated in Dreamweaver.

NOTE To view the changes to your SWF file in Dreamweaver, either view your site in a browser or select the SWF file in Design view and click Play in the Property inspector.

 

Checking for Flash Player

TOP

Most people who visit your website will have the Flash Player 6 or greater plug-in installed. In rare circumstances, a visitor might not have the plug-in installed. There are several different things you can do when a visitor without Flash Player visits your site. When you have a site that uses Flash primarily for functionality, you might want to send that user to a custom page that links to the Macromedia site, where the user can download the player.

The Check Plugin behavior in Dreamweaver enables you to check whether visitors to your website have the Flash Player plug-in installed. After the behavior checks for a plug-in, you can route the visitor to different URLs, depending on whether they have the minimum required plug-in. For example, if the visitor doesn't have Flash Player, you can open a page that links the visitor to the Macromedia website to download the latest version.

  1. In gnome.html, click inside the body tag (click between the "y" the closing angle bracket) and open the Behaviors panel in Dreamweaver (Window > Behaviors).

  2. Click Add (+) and select Check Plugin from the behaviors pop-up menu.

  3. Select Flash from the Plugin pop-up menu.

  4. Leave the If Found, Go To URL text box blank.

    This text box controls which page the visitor with the specified plug-in sees. Leaving the text box blank ensures that users stays on the same page if they have Flash Player installed.

  5. Type a URL into the Otherwise, Go To URL text box.

    Specify an alternative URL for visitors who don't have the Flash Player plug-in. Type noflash.html into the text box.

    NOTE There is a noflash.html document for you with the source files, included in the sample files that accompany this tutorial; it's inside the finished folder. Either save this document in the same folder as the gnome.html document you're working on, or create your own file in this location. Ideally, you would create a custom web page for users without Flash Player.

  6. Select the Always go to first URL if detection is not possible option.

    When selected, this option effectively means "assume that the visitor has the plug-in, unless the browser explicitly indicates that the plug-in is not present." Because you add an alternate ad for visitors without the plug-in, this option is preferable for this exercise. The following figure shows the selections you have made up to this point to add Flash Player detection.

    Make these selections to add Flash Player detection in Dreamweaver using a behavior.

  7. Click OK. When you finish, Dreamweaver adds the following code to the <body> tag:

    <body id="container" onLoad="MM_checkPlugin('Shockwave Flash','','noflash.html',true);return document.MM_returnValue">

  8. Save your changes to the document before you proceed to Test the application.

NOTE You can find the finished files in the FlashBanner/Part3 file directory, inside the finished folder.

You can also add Flash Player detection in Flash authoring if you aren't using Dreamweaver. Go to the Publish Settings dialog box (File > Publish Settings) and make sure that you select HTML in the Formats tab. Then select the HTML tab, and select the Detect Flash Version option. Click Settings next to the check box. You can set the target, content, and alternate pages in this dialog box.

 

Test the application

TOP

NNow you have a Flash banner, with graphics and animation, which also reacts to button clicks. You have completed your first interactive and animated Flash document, and then you inserted it into a website using Dreamweaver. Let's take a look at the banner in action, within a browser window.

  1. Click the gnome.html document that you modified in the previous exercises to open the web page that contains your banner.

    A new browser window opens and display the gnome website.

  2. Click the banner to open the browser window from the web page.

NOTE If you want to compare your results to the tutorial source file, open the banner3_complete.fla and gnome.html files from the finished folder inside the FlashBanner/Part3 folder that you saved on your hard disk in Open the authoring document.

 

Summary

TOP

Now you have completed your first Flash site and inserted it into a Dreamweaver web page. You have learned how to create a new file, import content, create new assets in Flash, add simple animation and ActionScript, and publish your work for the web. You also learned how to use Dreamweaver to insert the SWF file into an existing web page, probably one that's similar to a simple page you've created in the past.

In Part 3 of this tutorial, you learned how to use Flash and Dreamweaver to accomplish the following tasks:

  • Modify publish settings for a SWF file.

  • Publish a SWF file.

  • Insert a SWF file on a web page using Dreamweaver.

  • Use roundtrip editing to open, modify, and republish a FLA file from Dreamweaver.

  • Add a Dreamweaver behavior to check for Flash Player.

This introductory step of learning Flash and adding a SWF file to a web page is an important one when you're learning to use Flash. You now have the fundamentals and understand the essential nature and workflow of creating content with Flash. Hopefully, you'll feel better equipped to learn how to create increasingly interactive, entertaining, functional, or instructional content using Flash.

 

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash