Designer's Guide: Building Macromedia Flash Banners with Tracking Capabilities
To insert click throughs into a Macromedia Flash
banner:
In Macromedia Flash, clickable elements are usually
assigned to buttons. A button is a special type of symbol
that contains 4 frames. Each frame represents one of
the following "states" of the button: Up, Over, Down,
or Hit. These four states determine how the button will
visually behave when the user rolls their mouse over
it or clicks on it.
- Select Insert > New Symbol, or press Control-F8
(Windows) or Command-F8 (Macintosh).
Note: In Macromedia Flash 3 and earlier, deselect everything
on the stage and choose Insert > Create Symbol
- In the Symbol Properties dialog box, enter a name
for the new button symbol and choose Button as the Behavior
option. Click OK.
Macromedia Flash will switch to symbol-editing mode.
The Timeline header changes to display four consecutive
frames labeled Up, Over, Down, and Hit. The first frame,
Up, is a blank keyframe.
- To create the image for the button's Up state, you
can use the drawing tools, import a graphic, or place
an instance of another symbol on the Stage. You can
use either a movie clip or a graphic symbol in a button,
but you cannot use another button in a button. To create
an animated button, use movie clip symbols.
- Select the second frame, labeled Over, and choose
Insert > Keyframe. The button image from the first frame
will appear on the Stage.
- Change the button image for the Over state. Repeat
steps 4 and 5 for the Down frame and the Hit frame.
Note: The Hit frame is not visible on the Stage on
playback, but it defines the area of the button that
responds when clicked. Make sure that the graphic for
the Hit frame is a solid area large enough to encompass
all the graphic elements of the Up, Down, and Over frames.
It can also be larger than the visible button. If you
do not specify a hit frame, the objects in the Up state
are used as the hit frame.
- After defining the images of the four button states,
choose Edit > Edit Movie to exit Symbol Edit mode.
- Open the Library window by choosing Window > Library.
Locate the button in the Library window and then drag
the button symbol out of the Library onto the Stage.
This creates an instance of the button in the movie.
For information on assigning actions to the button instance
refer to the documentation below for the version of
Macromedia Flash that you are using:
To assign a simple action to a button (Macromedia
Flash 4 and earlier):
- In Edit Movie mode, select the button instance created
in Step 7 above.
- Make sure that Enable Buttons from the Control menu
is unchecked.
- Double-click the button to get the Instance Properties
dialog box. (Note: In Macromedia Flash 2 this was the
Link Properties: Button dialog box.)
- Assign the action by selecting the Action tab in
the Instance Properties dialog box. Then, click the
plus (+) button and double click on the appropriate
action.
Note: In Macromedia Flash 2 assign the action using
the Action pop-up menu in the Link Properties: Button
dialog box. Only one action may be assigned to the button.
- Make sure that Enable Buttons in the Control menu
is checked, so that option is toggled back on. If the
selected action has any associated parameters, those
parameters will appear in the Parameter panel on the
right side of the Actions panel. Choose or type the
parameters appropriate for that action.
To assign a simple action to a button (Macromedia
Flash 5):
- In Edit Movie mode, select the button instance created
in Step 7 above.
- Choose Window > Actions to open the Actions panel.
- In the Toolbox list on the left side of the panel,
click the Basic Actions category to display the basic
actions.
To assign an action, do one of the following:
- Double-click an action
in the Basics Actions category.
- Drag an action from the Basic Actions category on the left to the Actions
list on the right side of the panel.
- Click the Add (+) button
and choose an action from the pop-up menu.
- If the chosen action has any associated parameters,
those parameters will appear in the Parameter pane at
the bottom of the Actions panel. (If the Parameter pane
is not visible, click the small triangle in the lower
right corner of the panel.) Choose or type the parameters
appropriate for that action. For example, the getURL
action shown below contains three parameters: URL, Window,
Variables, and an option for Expression.
To assign a clickTAG for your advertisement:
The clickTAG is the tracking code assigned by the ad
serving network to an individual ad. The clickTAG allows
the network to register where the ad was displayed when
it was clicked on. This click through data is reported
to the ad serving servers so advertisers may determine
the effectiveness of their campaign.
The code below will allow ad serving networks to dynamically
assign a clickTAG to their ad.
In this example, a getURL action is being assigned
to a button that will navigate the browser to ["clickTAG"].
The "getURL(clickTAG)" statement appends the variable
data passed in via the OBJECT EMBED tag and navigates
the browser to that location. It is the tracking code
assigned by the ad serving network, which allows them
to register a user's click on that advertisement.
<EMBED src="ad_banner_example.swf?clickTAG= http://adnetwork.com/tracking?http://www.destinationURL.com">
The code below will allow
ad serving networks to dynamically assign a clickTAG
to their ad:
on (release) {
if (clickTAG.substr(0,5) == "http:") {
getURL(clickTAG);
}
}
Note: The ActionScript in
this Flash advertisement is verifying that the clickTAG URL begins with "http:".
This is an important security measure. If you do not take this precaution,
a malicious HTML page could source your SWF and pass a clickTAG URL
that begins with "javascript:" or another scripting pseudo-protocol.
If your ActionScript code were to call getURL with a maliciously crafted
JavaScript URL, it would be possible for the site serving the malicious
HTML page to obtain the contents of your HTTP cookies or perform other
actions on your site's behalf.
Below is a
workflow diagram of how the variable is passed from the
Macromedia Flash advertisement to the ad serving network,
then redirected to the URL.
|
