12 Replies Latest reply on Dec 7, 2009 3:12 PM by cyber0897

    loading and displaying multiple images

    cyber0897 Level 1

      hey guys... so im a complete newbe at flex... and i was wondering if anyone would be able to answer this question for me...

      basically on the left side there needs to be a list of items, and when one of those items is clicked i have to load a certain set of images to the right with a "next" and "previous" button which will iterate through the set of images...

       

       

      i have an image of this if you would like to see... i have attached it to this fourm,

       

      thanks  a lot in advance!

        • 1. Re: loading and displaying multiple images
          David_F57 Level 5

          Hi,

           

          There are many ways you can do this, so I went the simplest I could think of

           

          http://gumbo.flashhub.net/imgmenu/ (sourceview enabled)

           

          This may give you a starting point

           

           

          David

          • 2. Re: loading and displaying multiple images
            cyber0897 Level 1

            hey david... thanks for the reply... i tried going to the website you suggested... but unfortunately, i cannot view the source... it says

            The requested URL /imgmenu/srcview/index.html was not found on this server.

             

            any other way to get to the src??

            • 3. Re: loading and displaying multiple images
              David_F57 Level 5

              oops....

               

              deleted the wrong folder on the host, try again

               

              http://gumbo.flashhub.net/imgmenu/

               

              http://gumbo.flashhub.net/imgmenu/srcview/index.html

               

               

              David

              • 4. Re: loading and displaying multiple images
                cyber0897 Level 1

                aha! gotcha... i can see the source now... thanks david!!


                • 5. Re: loading and displaying multiple images
                  cyber0897 Level 1

                  hey david... thanks for the links... they seem to be workign now.... but im having trouble with one line in ur code... i was wondering if there is somehting im doin wrong??

                   

                  the line in ur code is

                   

                  myImage.source = imgList[CurrImage].@url;

                   

                  I know this line is supposed to embed the image to the source of the myImage.... but unfortunately when i try to do something similar i get the following error...

                  "Error #1081: Property @url not found on Object and there is no default value"

                  I have no idea why this is happening... i downloaded your source and tried running it in my environment... and it seems to work just fine... lol

                   


                  the code i have is

                   

                   

                      private function userOptionsChange(event:IndexChangeEvent):void{
                          currImage = 0;
                          imgList = event.currentTarget.selectedItems[0].images.img;
                          definition.source = imgList[currImage].@url;

                   

                          next.visible = true;
                      }

                   

                  the definition is the image tag id

                   

                  is there another way i shuold be going about embedding my image? lol

                   

                  and hey thanks for the links... they helped me a LOT!

                  • 6. Re: loading and displaying multiple images
                    David_F57 Level 5

                    Hi,

                     

                    The app is dynamic, nothing is embedded, when the application starts it loads the xml which populates the group list which in turn determines the list of images that can be displayed, part of the xml is the image url(relative path, as this then works locally or remotely), I'm surprised that you got it working locally but it isn't working from my host.

                     

                    If you want to embed your images into the app that makes things a little easier but it means if the menu or images changed you would have to do that programmatically and recompile.

                     

                    Now if @url is not working for you you could use tags in the xml rather than attribute fields

                     

                    existing item -

                     

                    <item label="Group One">
                     <img url="images/img01.jpg"/>
                     <img url="images/img02.jpg"/>
                     <img url="images/img03.jpg"/>
                     <img url="images/img04.jpg""/>
                    </item>
                    
                    restructured item -
                    
                    <item label="Group One">
                     <img>
                     <url>images/img01.jpg</url>
                     </img>
                    
                     <img>
                     <url>images/img02.jpg</url>
                     </img>
                    
                     <img>
                     <url>images/img03.jpg</url>
                     </img>
                    
                     <img>
                     <url>images/img04.jpg</url>
                     </img>
                    
                    </item>
                    new code
                    myImage.source= imgList[CurrImage].url;
                    You should also note that because the images are being loaded dynamically using image.source is only for testing purposes. the image should actually be loaded then displayed on load complete.
                    David

                    1 person found this helpful
                    • 7. Re: loading and displaying multiple images
                      cyber0897 Level 1

                      hey david... yeah theh only way i could get ur code working locally was to change the compiler settings to "-use-network=false" lol,  oh and i changed the httpservice to actionscript lol

                       

                       


                      anyways, so i did what you suggested... i still have the same issue... i can get the url just fine like before... but i cannot get it to display... i think it has to do soemthign with the  "@Embed(source='sourcetofile')" type of line... i think you have to embed the images to be displayed or somrhitng... and i have no idea how to do that with my code lol

                       

                      the code i have now is

                       

                          private function userOptionsChange(event:IndexChangeEvent):void{
                              currImage = 1;
                              imgList = event.currentTarget.selectedItems[0].images.url;
                              definition.source = imgList[currImage];

                       

                              next.visible = true;
                          }

                       

                      and i guess i need to do something like @Embed(source=imgList[currImage]) .... but that gives me a "1041: Attributes are not callable" error

                       

                       

                      any suggestions??

                      • 8. Re: loading and displaying multiple images
                        David_F57 Level 5

                        Hi,

                         

                        Could you clarify by what you mean by embedded... when you embed a resource you compile it into the application, displaying an object is very different from embedding. You can only embed assets like an image or an xml file you can't embed pointers.

                         

                        if I have an image in a sub directory of your application you can get it in 2 ways either by the 'source' property or the 'load' property, for online apps the load is the correct process as you need to be able to know through an event listener that the image has arrived from the server. The source I provided to you was simplified by using source rather than load so it was easier to understand. It works whether on a local machine or on a host at the other end of the world, but because it uses source it can skip displaying images if they haven't finised downloading before you change to the next image. This wouldn't happen with the image.load property.

                         

                        Now if you just want the images embedded into your application you would do something like this

                         

                        [Embed(source="images/mypic.jpg")] [Bindable] private var pic:Class;

                         

                        to display that image

                         

                        var myImage:Image = new Image();

                         

                        myImage.source=pic;

                         

                        myappContainer.addElement(myImage) as IVisualElement  <<===== for a spark container

                        myappContainer.addChild(myImage)     <<=======for a mx container.
                        David.

                        • 9. Re: loading and displaying multiple images
                          cyber0897 Level 1

                          ok sorry... i didnt mean embed... i cant remeber what i ment by that lol

                           

                          but im still trying to get the image to display... but it dosent... i just see a little icon on the top left corner instead of displaying the image....

                           

                              private function userOptionsChange(event:IndexChangeEvent):void{
                                  currImage = 1;
                                  imgList.source = event.currentTarget.selectedItems[0].images.url;
                                  definition.source = imgList.source[currImage];
                                  next.visible = true;
                              }
                          • 10. Re: loading and displaying multiple images
                            David_F57 Level 5

                            Hi,

                             

                            your code

                            =========

                             

                            private function userOptionsChange(event:IndexChangeEvent):void{

                                    currImage = 1;

                                    imgList.source = event.currentTarget.selectedItems[0].images.url;<<--- you are trying to put an image as the list of images

                                    definition.source = imgList.source[currImage];  <<===== you are trying to put a menu object into an image

                                    next.visible = true;

                             

                            my code

                            =======

                             

                               protected function list1_changeHandler(event:IndexChangeEvent):void

                               {

                                   b1.enabled=false;

                                   b2.enabled=false;

                                   CurrImage=0; <===== the first image in the list

                                   imgList.source=xmlMainMenu[event.newIndex].children(); <====== all the images in the option

                                   if (imgList.length > 1) b2.enabled=true; <======== if there is more than 1 image next is possible

                                   myImage.source=imgList[CurrImage].@url;  <====== display the first image in the list

                               }

                             

                             

                            imgList(which is held in memory)  is a list of the images from the selected group

                             

                            the navigator(prev/next) determines which image you want from that list

                             

                            CurrImage is the select counter

                             

                             

                            myImage.source=imgList[CurrImage].@url

                             

                            myImage  is the image display object

                             

                            @url is the name of the image you are goung to display

                             

                             

                            David.

                            1 person found this helpful
                            • 11. Re: loading and displaying multiple images
                              cyber0897 Level 1

                              hey david... thanks for replying! i really appretiate it!

                               

                              i understood that much... but the place where im having problem is just displaying the image... and my xml had a be a lot different from the one in your code... which im sure u knew... but to get the data from thre i had to use an object instead of the XMLListCollection...

                               

                              but im trying to get my code changedover to xmllistcollection... but still unsuccessfull in setting it up close to what you were explaining to me...

                               

                              im including my code and the xml... your help is really appretiated!! thank you sooo much!

                               

                               

                              // ActionScript file
                                  import flash.display.Loader;
                                  import flash.events.Event;
                                  import flash.net.URLRequest;
                                 
                                  import mx.controls.Alert;
                                  import mx.core.ScrollPolicy;
                                  import mx.events.FlexEvent;
                                  import mx.rpc.events.FaultEvent;
                                  import mx.rpc.events.ResultEvent;
                                  import mx.rpc.http.HTTPService;
                                  import mx.collections.XMLListCollection;
                                 
                                  import spark.events.IndexChangeEvent;
                                 
                                  [Bindable] private var menuXml:XML;
                                  [Bindable] private var imgList:XMLListCollection = new XMLListCollection();
                                  private var selectedIndexList:XMLListCollection = new XMLListCollection();
                                  [Bindable] private var xmlReturn:Object;
                                  private var currImage:int = 0;
                                  [Bindable] public var postImg:String;
                                 

                                  private function myXml_resultHandeler(event:ResultEvent):void{
                                      var resultData:Object = event.result;
                                      xmlReturn = resultData;
                                      userOptions.dataProvider = resultData.menu.apx32.userOptions.item;
                                      trouble.dataProvider = xmlReturn.menu.apx32.troubleShooting.item;

                                     
                              //        xmlMainMenu.source = event.result.children();
                                      //var test:String;
                                  }
                                  private function myXml_faultHandler(event:FaultEvent):void{
                                      Alert.show("Error loading XML");
                                      Alert.show(event.fault.message);
                                  }
                                  private function app_creationComplete(event:FlexEvent):void{
                                      userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
                                      //trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
                                     
                                     
                                      var myXml:HTTPService = new HTTPService();
                                      myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
                                      myXml.resultFormat = "object";
                                      myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
                                      myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
                                      myXml.send();
                                  }
                                  private function userOptionsChange(event:IndexChangeEvent):void{
                                      currImage = 1;
                                      selectedIndexList = event.currentTarget.selectedItems[0].images.img as XMLListCollection;
                                      imgList.source = selectedIndexList[event.newIndex].children();
                                     
                                      //imgList.source=xmlMainMenu[event.newIndex].children();
                                     
                                     
                                      //imgList.source = event.currentTarget.selectedItems[0].images.img;
                                      //postImg = imgList.source[currImage]["url"];
                                      //definition.source = imgList.source[currImage]["url"];

                                      //definition.source = 'images/APX32-adjustingVolume_01.png';
                                      next.visible = true;
                                  }



                              <?xml version="1.0" encoding="UTF-8" standalone="no" ?>

                              <menu>
                                 <apx32>
                                        <userOptions>
                                          <item label="Adjust Volume">
                                                 <images>
                                                    <img url="images/APX32-adjustingVolume_01.png" />
                                                 </images>
                                                 <video>
                                                     <videoPresent>true</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Arm/Disarm System">
                                              <images>
                                                  <img url="images/APX32-armDisarm_01.png" />
                                                  <img url="images/APX32-armDisarm_02.png" />
                                                  <img url="images/APX32-armDisarm_03.png" />
                                                  <img url="images/APX32-armDisarm_04.png" />
                                              </images>
                                                 <video>
                                                     <videoPresent>true</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Change Mastercode">
                                              <images>
                                                  <img url="images/APX32-changeMasterCode_01.png" />
                                                  <img url="images/APX32-changeMasterCode_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>true</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Secondary Codes">
                                              <images>
                                                  <img url="images/APX32-secondaryCode_01.png" />
                                                  <img url="images/APX32-secondaryCode_02.png" />
                                                  <img url="images/APX32-secondaryCode_03.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Bypass the Sensors">
                                              <images>
                                                  <img url="images/APX32-bypassZone_01.png" />
                                                  <img url="images/APX32-bypassZone_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Record/Delete Messages">
                                              <images>
                                                  <img url="images/APX32-recordDeleteMessage_01.png" />
                                                  <img url="images/APX32-recordDeleteMessage_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="Set Time">
                                              <images>
                                                  <img url="images/APX32-settingTime_01.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>true</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="System Status">
                                              <images>
                                                  <img url="images/APX32-systemStatus_01.png" />
                                                  <img url="images/APX32-systemStatus_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                      </userOptions>
                                        <troubleShooting>
                                          <item label="AC Loss">
                                              <images>
                                                  <img url="images/APX32-noAC_01.png" />
                                                  <img url="images/APX32-noAC_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                          <item label="AC Loss">
                                              <images>
                                                  <img url="images/APX32-noAC_01.png" />
                                                  <img url="images/APX32-noAC_02.png" />
                                              </images>
                                              <video>
                                                  <videoPresent>false</videoPresent>
                                                     <img url="" />
                                                 </video>
                                          </item>
                                        </troubleShooting>
                                 </apx32>
                              </menu>

                               

                              and thanks again david!! im just having trouble is setting up my imgList.source...

                              • 12. Re: loading and displaying multiple images
                                cyber0897 Level 1

                                never mind dude... i got it!! i was just doing somehting dumb lol

                                 

                                here is the updated code...

                                 

                                    [Bindable] private var menuXml:XML;
                                    [Bindable] private var imgList:XMLListCollection = new XMLListCollection();
                                    [Bindable] private var xmlReturn:Object;
                                    private var currImage:int = 0;

                                    //public var userOpProv:XMLListCollection = new XMLListCollection();
                                    //private var troubleShootProvider:XMLListCollection = new XMLListCollection();

                                    private function myXml_resultHandeler(event:ResultEvent):void{
                                        userOptionProvider.source = event.result.apx32.userOptions.children();
                                        troubleShootProvider.source = event.result.apx32.troubleShooting.children();       
                                    }
                                    private function myXml_faultHandler(event:FaultEvent):void{
                                        Alert.show("Error loading XML");
                                        Alert.show(event.fault.message);
                                    }
                                    private function app_creationComplete(event:FlexEvent):void{
                                        userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
                                        //trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
                                       
                                       
                                        var myXml:HTTPService = new HTTPService();
                                        myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
                                        myXml.resultFormat = "e4x";
                                        myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
                                        myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
                                        myXml.send();
                                    }
                                    private function userOptionsChange(event:IndexChangeEvent):void{
                                        currImage = 0;
                                        imgList.source = userOptionProvider[event.newIndex].images.children();
                                        definition.source = imgList[currImage].@url;

                                        next.visible = true;
                                    }