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

Things You'll Need

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

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.

Learnify Hub © www.0685.com All Rights Reserved