How to Display Different Images in AS3

If you want to liven up your Flash video game, create interesting educational games or develop intriguing Flash business applications, you will need to display many different images. Images create interest and help focus your audience on the subject at hand. AS3, Flash's ActionScript 3 programming language, lets you display different images without the need to individually drag and drop your graphic files into Flash. This will save you time. With AS3 you can specify what images you want in your animation, at what time and where you want them positioned with just a few lines of code.

Things You'll Need

  • Adobe Flash Professional(Versions CS3, CS4 and CS5)
  • A graphic jpeg file named keyEheartshape.jpg
  • A gif graphic file named croquie-one-quant-midtones.gif
Show More

Instructions

    • 1

      Start the Flash program. Click "new" from the file menu on the main Flash menu bar. Click the file type "Flash File(ActionScript 3.0)" from the new document dialog box. Click the "OK" button to close the dialog box.

    • 2

      Select the "actions" option from the Window menu on the main Flash menu bar to open the actions editor. Position the cursor on the first line of the actions editor. Click the mouse button and type in the code below to create an instance of the URLRequest object that will request the jpg graphics file "keyEheartshape.jpg" from the file directory.

      var imageLoad:URLRequest = new URLRequest("keyEheartshape.jpg");

    • 3

      Type the following code starting at the next line in the actions editor, to create an instance of a loader object named imageLoader that will hold the file contents of the file named "keyEheartshape.jpg."

      var imageLoader:Loader = new Loader();

    • 4

      Type the code below starting at the next line in the Actions editor, to call the Loader's load method and load the file contents of the jpeg file "keyEheartshape.jpg" into the imageLoader instance.

      imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded_fn);

    • 5

      Type the code below starting at the next line in the actions editor, to add an event listener to the imageLoader instance that will call the function "imageLoaded_fn" when the file "keyEheartshape.jpg" has finished loading into the imageLoader instance.

      imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded_fn);

    • 6

      Type the code below starting at the next line in the actions editor, to instruct flash to load in another graphic file, a gif file, named "croquie-one-quant-midtones.gif" using a URLRequest instance named imageLoad2, a Loader instance named imageLoader2 and to attach an event listener to the imageLoader2 instance that will call the function "imageLoaded_fn" when the "croquie-one-quant-midtones.gif" has finished loading.

      var imageLoad2:URLRequest = new URLRequest("croquie-one-quant-midtones.gif");

      var imageLoader2:Loader = new Loader();

      imageLoader2.load(imageLoad2);

      imageLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded_fn);

    • 7

      Type the code below starting at the next line in the actions editor, to instruct Flash to place the imageLoader instance (the jpg graphic) on the Flash stage at stage coordinate 100, 100 and place the imageLoader2 instance(the gif graphic) on the Flash stage at stage coordinate 300,100.

      function imageLoaded_fn(event:Event):void

      {

      addChild(imageLoader);

      imageLoader.x =100;

      imageLoader.y = 100;

      addChild(imageLoader2);

      imageLoader2.x =300;

      imageLoader2.y = 100;

      };

    • 8

      Copy and paste the code below into your actions editor if you want to ensure your code has no syntax errors and runs error free.

      var imageLoad:URLRequest = new URLRequest("keyEheartshape.jpg");

      var imageLoader:Loader = new Loader();

      imageLoader.load(imageLoad);

      imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded_fn);

      var imageLoad2:URLRequest = new URLRequest("croquie-one-quant-midtones.gif");

      var imageLoader2:Loader = new Loader();

      imageLoader2.load(imageLoad2);

      imageLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded_fn);

      function imageLoaded_fn(event:Event):void

      {

      addChild(imageLoader);

      imageLoader.x =100;

      imageLoader.y = 100;

      addChild(imageLoader2);

      imageLoader2.x =300;

      imageLoader2.y = 100;

      };

    • 9

      Click the "TestMovie" option in the control menu on the main Flash menu bar to play the Flash movie. Observe that the upper left corners of the jpg and gif files have been placed at the stage positions as defined with the x property of the imageLoader and imageLoader2 instances.

Learnify Hub © www.0685.com All Rights Reserved