0 Replies Latest reply on Nov 12, 2007 7:51 AM by ljonny18

    Loading images into a Custom Component

    ljonny18 Level 1
      Hi I have created a custom competent “myComp.as” extending the UIComponent.

      My question is: how I can load the images into a (custom) component only once, when the application first starts, therefore, not having to re-load the same images within the component every time the component is refreshed / reused ???

      Sorry in advance if this is slightly confusing as it is difficult for my to try to explain, but I will give it a go:

      “myComp” includes / imports many images that are used to build the component in any for a specified status, and “myComp” can have many statuses depending on the results coming form the Data Provider (in this case an XML File).

      Note: “myComp” can be used multiple times within the application (different instances)

      I am currently instantiating / setting up all of my images at the top of “myComp”:


      package components {
      import flash.display.Bitmap;
      import mx.core.UIComponent;

      public class myComp extends UIComponent {
      [Embed(source='../images/image1.png')]
      public var imgage1_Class:Class;
      [Embed(source='../images/image2.png')]
      public var imgage2_Class:Class;
      [Embed(source='../images/image3.png')]
      public var imgage3_Class:Class;
      [Embed(source='../images/image4.png')]
      public var imgage4_Class:Class;
      [Embed(source='../images/image5.png')]
      public var imgage5_Class:Class;

      public var imgage1_Img:Bitmap = new imgage1_Class();
      public var imgage2_Img:Bitmap = new imgage2_Class();
      public var imgage3_Img:Bitmap = new imgage3_Class();
      public var imgage4_Img:Bitmap = new imgage4_Class();
      public var imgage5_Img:Bitmap = new imgage5_Class();

      public function myComp():void {
      super();
      //code here
      }

      override protected function createChildren():void {
      super.createChildren();
      //code here
      }

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      //code here
      }
      }
      }



      “myComp” is created every time the Data Provider is refreshed, and in this case it is refreshed every 5 seconds – this data refresh set up and done within the main application MXML file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute"
      xmlns="*"
      creationComplete="initApp()" >

      <mx:HTTPService
      id="myResults"
      url=" http://localhost/results.xml"
      resultFormat="e4x"
      result="myResultHandler(event)" />

      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent;

      [Bindable] public var myDataFeed:XML;


      public function initApp():void {

      myResults.send();

      //set uo timer to refresh results (every "5" seconds)
      timerPulse = new Timer(5000)
      timerPulse.addEventListener(TimerEvent.TIMER, timerRefresh);
      timerPulse.start();
      }

      public function timerRefresh(eventObj:TimerEvent):void {
      refreshResults();
      }

      public function refreshResults():void {
      myResults.clearResult(); //clear results - optimisation?
      myResults.send();
      }

      public function myResultHandler(event:ResultEvent):void {
      myDataFeed = event.result as XML;
      }
      ]]>
      </mx:Script>
      </mx:Application>



      Within the “myResultHandler” function “myComp” is being added / redrawn – therefore it is being re-created and all the images within the component are being re-loaded every 5 seconds, which seems a bit “heavy” on the application.

      Is there a way I can load the images into the component – only once, when the application first starts therefore not having to re-load them every time the component id refreshed?

      All images within the components could be needed / used (depending on the results from the data Provider) so therefore all needed to be loaded into each “myComp” component, but are only needed to be loaded the one time etc….


      Sorry again if this is a bit confusion.

      Thanks,
      Jon.