Overview of Flash
by Visualsoft UK Ltd

Since its introduction in 1996, Flash has grown in popularity to become widely regarded as a standard for high-end multimedia Web sites and presentations. Flash was derived from other Macromedia applications, particularly FutureSplash and Director. Macromedia Director has a longer history, but is primarily used for multimedia development for CD-ROMs, movies and television. However, the files created by Director are too large to port effectively over the Web.

Flash offers many of the dynamic features that Director offers, yet Flash compresses file sizes, making it possible to offer media-rich content and fast download times.

How does Flash work?

Flash combines four elements that define its functionality: vector graphics, streaming capability, a timeline, and layers.

Concepts and issues relevant to Flash

Vector graphics

Flash uses vector graphics, rather than bitmapped graphics such as GIF, JPG or PNG. Vector graphics perform more efficiently on the Web because they are based on mathematical computations, rather than the pixel-by-pixel information used by bitmaps.

As such, Flash graphics are scalable without affecting file size. For example, suppose that the two circles in Figure 23-l are separate vector graphics being displayed in a browser. Both images would have the same file size. The only difference between the two circles is the radius, which can be adjusted by a mathematical calculation. Vector graphics use mathematics in this way to manipulate images.



By contrast, if these images were bitmaps, the larger circle would have a significantly larger file size than the smaller one.

Streaming capability

In addition to using vector graphics, Flash offers another important feature that increases its Web compatibility: streaming capability. Streaming allows multimedia content to begin playing as soon as it reaches its destination-in this case, the client browser. For example, suppose a Flash file (also known as a Flash movie) has a total size of 100 KB. Using a standard 28.8-Kbps modem, a user must wait approximately 28 seconds for the entire file to download before the movie can begin to play. With streaming capability, the movie begins as soon as the initial information about the Flash file reaches the browser. This means that the user can begin watching the movie while the rest of the data continues to download.

Timeline

Flash uses the combination of vector graphics and streaming capability to deliver animation that is created using a timeline. The Flash Timeline can be thought of as a series of movie frames. As you develop more frames (or longer timelines), the movie begins to take action. Each Flash movie is a timeline consisting of a series of frames. Each frame contains vector graphics that are opened at a designated sequence and speed, creating the animation.

Layers

The final component of a Flash movie is layers. Each movie can have multiple layers, thus providing animation that is not only linear but also parallel: One animation sequence runs on top of another because each is on a different layer.

Flash and the browsers

Currently, Flash is not natively supported in browsers. Therefore, for a user to play Flash movies, his or her browser needs a plug-in. Because Flash does not rely on the browser, it is cross-platform capable, which is another advantage.

NOTE: IMPORTANTLY, MACROMEDIA IS WIDELY THOUGHT TO HAVE BEEN BANKING ON NATIVE SUPPORT IN BROWSERS, PARTICULARLY MICROSOFT. THIS HAS NOT HAPPENED AND IT FORMS THE BASIS OF THE QUESTION OF WHETHER FLASH WILL GAIN IN POPULARITY OR NOT. DISCUSS IN YOUR TUTORIAL WHETHER USERS ARE BECOMING ANY MORE INCLINED TO WANT TO DOWNLOAD PLAYERS TO READ WEB PAGES.

According to a study at the beginning of 2000, Flash had an installation base of 68 percent, or approximately 195 million users who have the Flash plug-in. There are two reasons for this. One is that many sites use Flash, and therefore many users have downloaded the plug-in. The second reason is that the 4.x versions of both Navigator and Internet Explorer include the Flash plug-in installed by default. AOL and WebTV also provide some Flash support in their browsers.

How Flash works with HTML

When you create a Flash movie, you have a file with the .fla file name extension (on the Windows platform). The FLA file format can then be converted and compressed into a SWF (pronounced "swiff"), which is then inserted into the HTML code using the <OBJECT> tag (for Internet Explorer) or the <EMBED> tag (for Navigator) to display in the browser. When the browser encounters the SWF file, the Flash plug-in is used to display the Flash movie in the browser.

Thus, the only HTML code on which Flash relies is the <OBJECT> and <EMBED> tags.

Some sites are created entirely with Flash, while others use Flash to provide simple animation such as navigation menus and rollover effects. Therefore, while Flash does not rely on HTML, the two technologies can co-exist and complement each other.

The Flash Interface and Components

The Flash interface uses palettes and toolbars for development.

To start Flash

Launch Flash by selecting Start > Programs > Macromedia Flash > Flash .

Note the following components of the Flash interface

Flash stage: the area in which you place elements, objects and graphics used in the movie.

Flash timeline: a sequenced ruler used to control the movie and how it plays the elements on the stage.

Flash layers: canvases used to control objects placed on the stage. Layers allow multiple objects to be positioned independently of each other.

Flash drawing tools: tools used to draw, colour, paint, move, resize, stretch and fill the objects on the stage.

Libraries

From the main menu, select Libraries. Notice the options for the available libraries.

Buttons Library

Select Buttons. These objects are available to place in Flash movies. If you click once on a button, you will see a preview in the top of the library.

Click the X to close the library.

Symbols

To insert a symbol

From the main menu, select Insert > New Symbol. The Symbol Properties dialog will appear. As you work with objects in Flash, you convert them to symbols based on how you want them to behave. Notice that you can name the symbol, then specify it as a graphic, button, or movie clip.

Click the Cancel button to close the Symbol Properties dialog.

NOTES ON SYMBOLS AND LIBRARY

Flash has the ability to define and reuse objects called symbols. A symbol is a graphic, a button or a movie clip that is stored in a Flash movie’s library. Symbols can be created after an object is imported into Flash. Flash automatically adds the file to the library for the current movie.

For example, suppose you import a graphic image. Flash will place the file in the library and name it. However, the graphic is not yet a symbol. To convert the graphic to a symbol, you must select the graphic, specify it as a graphic symbol, and give it a name. Once the file is a symbol, it can be inserted repeatedly throughout the Flash movie.

If you need to change the appearance of a symbol, you can edit it in Symbol Edit mode. After you make changes to the symbol file, all instances of the symbol used throughout the movie will reflect those changes. By contrast, if you left the file as the default graphic it was when you imported it, the changes you make later would not be reflected in other instances of the graphic.

Settings for Publishing

From the main menu, select File > Publish Settings. The Publish Settings dialog will appear. Note the tabs on the Publish Settings dialog:

• The Formats tab allows you to specify how you want Flash to publish a movie. By default, Flash creates a SWF file then generates an HTML page with the code necessary to view the movie in a browser.
• The Flash tab allows more advanced settings, such as loading preferences. You can specify how your movie loads in order to protect it from importing. (All SWF files can be opened in Flash, and you may not want someone else to download your Flash movie to see how it was made.) You can also specify the audio type used and the Flash version with which the movie must comply.
• The HTML tab allows you to specify the quality and position of the Flash movie in the HTML page that is generated.

For now, all the default settings are acceptable.

Click Cancel to close the Publish Settings dialog.

Flash Layers

Study the Flash Layers section and notice the icons: an eye, a lock, and a square. The Eye icon hides or displays the layer, similar to Dreamweaver. The Lock icon prevents a layer from being edited, which is helpful when working with many layers. The Square icon displays objects so that only the object outline is visible, hiding the fill.

Drawing Tools

Note the Flash Drawing Tools. You will learn to use each of them in the exercises in this course.

Notice also that the Flash main toolbar is similar to other Windows applications, enabling you to open, save, print, cut, copy, paste, undo and redo with the click of a button.

Developing with Flash

Flash is both a development tool and a testing tool. This means that you need not load the SWF file into an HTML page then a browser each time you want to test your work. As a development tool, objects and images can be created in Flash, eliminating some of the need to use other applications to create graphics and then import them. However, Flash does support the importation of GIF, JPG and PNG file formats.

Developing with Flash will be a different experience at first, due to the use of the timeline and layers. As you develop, you must think in different terms because you are no longer limited to linear constraints. If you have worked previously with an image application that supports layers, you will better understand the function of a layer and its significance to other layers on the page.

With Flash, you are limited only by your imagination. As you begin to develop files and gain an understanding of the application, you will find that it is a highly robust tool for multimedia.

Flash Pages

A question commonly asked about Flash is whether or not to create a site entirely with Flash. As with many questions about the Web, the answer depends on many factors.

While simple in terms of using its graphical interface for development, creating Flash movies can still be time-consuming. You must also consider the updating requirements of your content. While content updating with HTML is becoming more common in the workplace, updating Flash content still requires an advanced user. Therefore, if the site you are developing will require frequent content updates, or if inexperienced Flash developers will perform updates, then it is not advisable to develop a site entirely in Flash.

Common uses for Flash generally serve the purpose of rich multimedia design. For example, splash pages provide a quick movie introduction lasting from 10 to 30 seconds before refreshing automatically to the home page. When using the splash page technique, always provide a link for users to bypass the introduction.

Return visitors may not want to see the splash again. Flash can also provide effective navigation elements that offer an enhanced user experience while navigating the site.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

More Web Development Articles
More By Developer Shed

 

developerWorks - FREE Tools!

NEW! Calling all CC Power Users – and those that would like to be! Join this Rational Talks to You teleconference, featuring Paul Boustany and Mark Krasovich, to speak to the experts about becoming a Rational ClearCase power user. Get a chance to ask your questions and learn tips and tricks for using Rational ClearCase in Agile development FREE! Go There Now!

NEW! Best practices for software analysis: An introduction to the IBM Rational Software Analyzer application This whitepaper presents the benefits of successfully introducing static analysis into your organization using IBM Rational Software Analyzer. Additionally, it identifies some common pitfalls that can hinder the effective use of static analysis tooling as well as presents 10 simple strategies designed to help you quickly realize the value of static analysis using Rational Software Analyzer. FREE! Go There Now!

NEW! Download a free trial of Lotus Quickr 8.0 Visit IBM developerWorks to download a free trial version of Lotus Quickr 8.0, which enables collaboration by transforming the way everyday business content such as documents, rich media, photos, and video can be shared. Lotus Quickr makes it faster and easier to share content of all types (not just documents) within virtual teams. It is designed to make it easier to collaborate across organizational boundaries, while continuing to work within the context of familiar desktop applications. FREE! Go There Now!

NEW! Download a free trial of WebSphere Business Modeler Advanced V6.1.1 Visit IBM developerWorks to download a free trial version of WebSphere Business Modeler Advanced V6.1.1, IBM’s premier business process modeling and analysis tool for business users that offers process modeling, simulation, and analysis capabilities. IBM WebSphere Business Modeler helps you visualize, understand, and document business processes for continuous improvement. FREE! Go There Now!

NEW! Download the free Web Application Security eKit Discover how IBM Rational AppScan Standard Edition can help you detext vulnerabilities in your web applications in the Web Application Security eKit. IBM Rational AppScan is a leading suite of automated web application security solutions that scan and test for common Web application vulnerabilities. The new Web Application Security eKit provides you with valuable resources, including white papers, demos, and additional information on the benefits of testing your Web applications. FREE! Go There Now!

NEW! Harnessing the power of SQL and Java for high performance data access Join this webcast to see how IBM Data Studio Developer and pureQuery can take the pain out of Java data access. uApplications developed using both Java and SQL have become a common requirement. Database connectivity using Java Database Connectivity (JDBC) to create an application is a multi-step tedious process, and tooling that covers both SQL and Java has been unavailable, until now. IBM Data Studio introduces the pureQuery platform: a high-performance, Java data access platform focused on simplifying the tasks of developing, managing, and optimizing database applications and services. FREE! Go There Now!

NEW! Hello World: WebSphere Service Registry and Repository Manage, govern, and share services across your organization by using WebSphere Service Registry and Repository. Follow the hands-on exercises to learn how to navigate the Web interface to publish, find, reuse, and update services. FREE! Go There Now!

NEW! Info 2.0: Harnessing the power of Web 2.0 and Enterprise Mashups Listen to this webcast to get an overview of Info 2.0 and a technical demo of how to quickly build an enterprise mashup. IBM's Info 2.0 technology leverages emerging Web 2.0 technologies such as mashups, feeds, AJAX, and JSON in order to simplify assembly of information using feeds and services. Come learn about the technical elements of Info 2.0 including the Feed Generation framework, Mashup Engine, and mashup assembly components. Learn how to pull information from databases, departmental information, and the Web to create mashups critical to your company’s success. We will also discuss best practices to help you get started. FREE! Go There Now!

NEW! Try the IBM SOA Sandbox for People Visit IBM developerWorks to try the IBM SOA Sandbox for people. The SOA Sandbox for people provides a trial environment with the necessary tooling and components required to enable consistent human and process interaction and collaboration, showing how you can improve user experience and business productivity. FREE! Go There Now!

NEW! Webcast: WebSphere Process Server WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies. FREE! Go There Now!

All FREE IBM® developerWorks Tools!