How to Make a Flash Banner Clickable With ActionScript

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Flash Banner Clickable With ActionScript
Make your banner clickable to automatically display your donation page. (Digital Vision/Digital Vision/Getty Images)

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 trolley 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).

Skill level:
Easy

Other People Are Reading

Things you need

  • Adobe Flash Professional: CS3, CS4 or CS5 versions
  • A Flash swf file that contains your completed animated banner

Show MoreHide

Instructions

  1. 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. 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 "movie Container," instruct the Flash program to load in the banner animation file ("MasterIllustrationReferenceLibrary.swf") and store the contents of the banner file in the movie Container object.

    var movie Container:MovieClip;

    var movie Loader:Loader = new Loader();

    movieLoader.load(new URLRequest("MasterIllustrationReferenceLibrary.swf"));

  3. 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. 4

    Type the "movieLoaded_fn" function code starting at 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 {

    movie Container = movieLoader.content as MovieClip;

    add Child(movieContainer);

    movieContainer.x = 100;

    movieContainer.addEventListener(MouseEvent.CLICK, callFunction_fn);

    }

  5. 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. 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 movie Container:MovieClip;

    var movie Loader:Loader = new Loader();

    movieLoader.load(new URLRequest("MasterIllustrationReferenceLibrary.swf"));

    movieLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, movieLoaded_fn);

    function movieLoaded_fn(e:Event): void {

    movie Container = movieLoader.content as MovieClip;

    add Child(movieContainer);

    movieContainer.x = 100;

    movieContainer.addEventListener(MouseEvent.CLICK, callFunction_fn);

    }

    function callFunction_fn(e:MouseEvent): void {

    navigateToURL(new URLRequest("http:www.adobe.com"));

    };

  7. 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.

Tips and 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.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.