How to Make a Flash Banner Clickable With ActionScript
Flash banners, animations that automatically scroll a repeating pattern of letters, words or images across the Flash stage, are used to attract attention on a website. Items that move, like Flash banners, often grab a viewer's attention. Because moving banners attract the viewer's attention, advertisers often want to turn banners into clickable ads. In these cases, when the banner is clicked, the advertisers want a new Web page with promotional material or a shopping cart to appear. Flash banners are not much different than other objects in Flash, making it a simple operation to make a Flash banner clickable using ActionScript 3 (AS3).
Other People Are Reading
Things You'll Need
- Adobe Flash Professional: CS3, CS4 or CS5 versions
- A Flash swf file that contains your completed animated banner
Instructions
-
-
1
Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.
-
2
Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button. Type in the code below to create a MovieClip object named "movieContainer," instruct the Flash program to load in the banner animation file ("MasterIllustrationReferenceLibrary.swf") and store the contents of the banner file in the movieContainer object.
var movieContainer:MovieClip;
var movieLoader:Loader = new Loader();
movieLoader.load(new URLRequest("MasterIllustrationReferenceLibrary.swf"));
-
-
3
Type the belowcode into the next line of the ActionScript 3 editor to rigger a file loaded(COMPLETE) event listener that will execute the code in the function "movieLoaded_fn" when the banner animation file has completed loading.
movieLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, movieLoaded_fn);
-
4
Type the "movieLoaded_fn" function code starting at the the next line of the ActionScript 3 editor to convert the contents of the banner file into a MovieClip object, place the banner on the stage at the stage coordinates (100,0) and add a banner mouse CLICK event listener that will instruct Flash to execute the instructions in the function "callFunction_fn" when the banner animation is clicked.
function movieLoaded_fn(e:Event): void {
movieContainer = movieLoader.content as MovieClip;
addChild(movieContainer);
movieContainer.x = 100;
movieContainer.addEventListener(MouseEvent.CLICK, callFunction_fn);
}
-
5
Type the "callFunction_fn" function code starting at the next line of the ActionScript 3 editor such that the Flash will open up Adobe's Web page (navigateToURL) when a banner CLICK mouse event occurs.
function callFunction_fn(e:MouseEvent): void {
navigateToURL(new URLRequest("http:www.adobe.com"));
};
-
6
Copy and paste the code into the ActionScript 3 editor to ensure that the code syntax is error-free and the Clickable Banner program runs correctly.
var movieContainer:MovieClip;
var movieLoader:Loader = new Loader();
movieLoader.load(new URLRequest("MasterIllustrationReferenceLibrary.swf"));
movieLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, movieLoaded_fn);
function movieLoaded_fn(e:Event): void {
movieContainer = movieLoader.content as MovieClip;
addChild(movieContainer);
movieContainer.x = 100;
movieContainer.addEventListener(MouseEvent.CLICK, callFunction_fn);
}
function callFunction_fn(e:MouseEvent): void {
navigateToURL(new URLRequest("http:www.adobe.com"));
};
-
7
Click "Test Movie" in the Window menu to play the Clickable Banner movie. Click the banner that is displayed and observe that the Adobe Web page appears in a new window in your Web browser.
-
1
Tips & Warnings
If you click a portion of your banner that does not contain a movie clip object, such as a blank region of the banner, a click will not be activated and the Adobe Web page won't be displayed. To circumvent this problem, ensure that your banner has a blank or transparent background that has been converted to a MovieClip. You can add this object with AS3 or in Flash-authoring mode.
References
- Photo Credit Digital Vision/Digital Vision/Getty Images
