Flash Movies - Java Script

What began as a way to embed small, vector-based animations on Web pages has grown into a development environment for entire Web sites and Web applications.Macromedia Flash has evolved into more than just a tool for animations, but an entire development environment designed for use on the Web.

Flash movies, as they are called, are created using Macromedia’s proprietary Flash and Flash MX development environments(although many graphics programs now feature an Export to Flash feature based on Macromedia’s Open SWF initiative). Because of its ubiquity,the Flash plugin now ships with most browsers, meaning that most users never have to download the plugin manually to enjoy the benefits(unless an upgrade is made available, of course).

Embedding Flash movies

To embed a Flash movie into an HTML page, use the <object/> element:

Mozilla-based browsers won’t display this properly,so you need to add a movie parameter set to the same URL as the data attribute:

Of course, if you want to support Netscape 4.x, include the <embed/> element:

Referencing Flash movies

Just like Java applets, Flash movies can be referenced in a couple of different ways depending on how you embed them(using document.getElementById() for <object/> or document.embeds for <embed/>). The following function can be used to retrieve a reference to a Flash movie regardless of the embedding process used:

This function can be called like so:

var oFlashMovie = getFlashMovie(“FlashMovie”);

After you have a reference to the movie, it’s possible to communicate back and forth using JavaScript.

JavaScript-to-Flash communication

Flash movies provide a number of standard methods that can be accessed by JavaScript:

  • GetVariable(variable_name)— Retrieves the value of a Flash movie variable
  • GotoFrame(frame_number) — Sets the current Flash frame to the given frame number
  • IsPlaying()— Indicates whether the Flash movie is current playing
  • LoadMovie(layer_num, url)— Loads a Flash movie at the given URL into the given Flash layer
  • Pan(x, y, mode)— Pans a zoomed movie to the given coordinate.The mode argument is either 0, to consider the coordinates as pixel values, or 1, to consider the coordinates as percentages.
  • PercentLoaded()— Returns the percent of the Flash movie that has been loaded (a number 0nto 100)
  • Play()— Plays the movie from the current position
  • Rewind()— Sets the movie back to the first frame
  • SetVariable(variable_name, value)— Sets the value of a Flash movie variable
  • SetZoomRect(left, top,right, bottom)— Sets the rectangle to zoom in on
  • StopPlay()— Stops the Flash movie
  • TotalFrames()— Returns the total number of frames in the Flash movie
  • Zoom(percent)— Zooms in by a given percentage

These methods work directly on the movie object itself,so to stop a movie named ExampleMovie, you can do this:

To get the total number of frames in the movie, use TotalFrames(). However, you must be aware of some cross-browser compatibility issues. In Internet Explorer on Windows, there is a bug where TotalFrames is an integer value instead of a function. It is necessary to check for this using typeof to determine if TotalFrames is a number or a function for cross-browser functionality:

Using SetVariable() and GetVariable(), it’s possible to pass information to and get information from a Flash movie. For this to work, the Flash movie must have a variable that is watched for a value change.The simplest way to do this is to create a text field and tie its value to a variable (by selecting Dynamic Text from the Flash Properties panel and entering the name of the variable). Then, you can get the value of the variable using GetVariable() and change its value using SetVariable(). Both methods require the name of the variable in relation to its timeline. So, to access a variable named message in the main timeline, the first argument for both methods is “/:message”, where “/” represents the default timeline, the colon indicates a part of the timeline to access, and message is the variable name.
For example:

Some methods also work on a specific timeline in the movie:

  • TCallFrame(timeline, frame_number)— Executes the action in the Eframe that is in the given position
  • TCallLabel(timeline, frame_label)— Executes the action in the frame represented by the given label
  • TCurrentFrame(timeline)— Returns the position of the current frame in the timeline
  • TCurrentLabel(timeline)— Returns the label of the current frame in the timeline
  • TGetProperty(timeline, property_constant)— Returns the value of the property indicated by the property constant (discussed later) as a string
  • TGetPropertyAsNumber(timeline, property_constant)— Returns the value of the property indicated by the property constant as a number
  • TGotoFrame(timeline, frame_number)— Sets the movie to the frame in the given position in the timeline
  • TGotoLabel(timeline, frame_label)— Sets the movie to the frame with the given label in the timeline
  • TPlay(timeline)— Plays the movie on the given timeline
  • TSetProperty(timeline, property_constant, value)— Sets the value of the property indicated by the property constant as a string
  • TStopPlay(timeline)— Stops the movie on the given timeline

The TGetProperty(),TGetPropertyAsNumber(), and TSetProperty() methods all use constants to indicate the property to get or set. Because the constants are only accessible from within Flash, JavaScript must always use the numeric value.

JavaScript-to-Flash communicationJavaScript-to-Flash communication

When using the timeline-specific methods, the first argument is always the name of the timeline to act on. The default timeline is represented by a single forward slash:

revar iXPos = oFlashMovie.TGetProperty(“/”, 0);

The first argument is always mirrored by the TARGET property:

Because Flash uses an ECMAScript-based scripting language called ActionScript, the interaction with JavaScript is seamless.

Flash-to-JavaScript communication

Flash also has the capability to interact with JavaScript that exists on the HTML page in which it is embedded. When using the <object/> element to embed the Flash movie, this capability is enabled by default. If you are using the <embed/> element, even for backwards compatibility, you must add a special attribute called swLiveConnect:

With the attribute set, you can be assured that the Flash-to-JavaScript communication channel is open.

Flash provides two different ways to achieve this interaction: getURL() and fsCommand().Both can send only primitive values to JavaScript, and each has its own strengths and weaknesses.

getURL()

The getURL() function is a generic way of interacting with the browser. It can be used to open up a document in the browser window (or in a new window) similar to window.open() is JavaScript. For example,you can open www.wrox.com in a new browser window with the following code:

getURL(“http://www.wrox.com”,“_blank”);

Because getURL() simply passed the given URL to the browser,it can accept javascript: URLs as well. For example, suppose you have a function, getMessageFromFlash(), that accepts a string as its only argument and then displays that string in an alert, such as in the following:

Inside of the Flash movie, create a button and assign the following ActionScript to it:

When you export the movie and embed it in the HTML page containing getMessageFromFlash(), clicking on the button pops up the JavaScript alert displaying the text “Hello from Flash!”

The getURL() function is the simplest way to call JavaScript from Flash, although you have another way to do this.

fscommand()

Using fscommand() in Flash is like sending a message to JavaScript. This message consists of a command (indicating the action the movie is expecting) and a single argument (although Flash allows you to enter more than one argument, this isn’t handled correctly by JavaScript). A typical call from inside a Flash movie looks like this:

In order for JavaScript to handle this command, a special function must be defined. This function must begin with the name (or ID) of the Flash movie object and be followed by _DoFSCommand,such as the following:

The function always accepts two arguments, the command and an argument.The command is always a string, but the argument may be any primitive type. All calls to fscommand() are routed to this function, so, by providing different commands,you can determine what action should be taken with JavaScript. For example:

When using any browser other than Internet Explorer, this function is called when fscommand() is executed. For Internet Explorer, another function is needed.

For reasons unknown,the Flash Player routes fscommand() calls in Internet Explorer to VBScript, not JavaScript. VBScript is an IE-only technology that allows developers to use Visual Basic code to script Web pages. Originally intended to compete with JavaScript, VBScript never gained the popularity or support from other browsers that would have enabled it to be a true rival. Instead, it was remanded to niche developers working on IE-only solutions.

In order to avoid writing a lot of VBScript, you can just write a simple function that passes the command and the argument back to the JavaScript function. This code must be enclosed in its own <script/> element with the language attribute set to “VBScript”. The VBScript function takes the same form as the JavaScript function, although it ends with _FSCommand instead of _DoFSCommand:

All non-IE browsers ignore this code block because “VBScript” is unrecognized as a scripting language; therefore,it’s safe to include this in your cross-browser pages (although it is still recommended that this reside in the <head/> element to prevent rendering of the code as plain text). Another alternative is to place the VBScript into an external file (ending in .vbs) and load it into the page like this:

<script language=”VBScript” src=”example.vbs”></script>

Because of the intricate workings of fscommand(), many developers simply choose to use getURL() for JavaScript communication.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Java Script Topics