8 Replies Latest reply on Feb 18, 2012 3:44 PM by tdorman4

    retrieving a picture via URL from an array

    tdorman4

      hey everyone!  I gotta say, I am extremely enthralled with learning as much as I can about Flash Builder and developing with Flex.  I have a really quick question that I think shouldn't take much to solve,  but the solution has eluded me all day, and I'm getting pretty frustrated.

       

      I have retrieved information from an XML file and stored it into an array.  One of the fields stored into the array {data.imageurl} is a http url link to a picture I want displayed.  this is how the code is currently:

       

      <s:BitmapImage width="100" height="100" source="{data.imageurl}"/>

       

      obviously it doesn't work this way.  my guess is i first need to convert it via URLRequest and then connect that as the source, but any attempts I've made have failed.  Could anyone point me in the right direction?  I would really appreciate help!  thank you!

        • 1. Re: retrieving a picture via URL from an array
          flexercised Level 2

          I've done this sort of thing like this:

           

          img.source = xmlContent.data.image.toString();

           

          <s:BitmapImage id="img" >

           

          where xmlContent is an xml object. The toString() was required.

          • 2. Re: retrieving a picture via URL from an array
            tdorman4 Level 1

            Hey Flex (or anyone else out there catching this)...

             

            my problem is still persisting and i am unable to figure it out.   here is all the code - please someone, help!

             

            <?xml version="1.0" encoding="utf-8"?>

            <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                    xmlns:s="library://ns.adobe.com/flex/spark"

                    backgroundColor="black" title="InterviewDetails"

                    creationComplete="myURLMethod(thumbnail)">

                <fx:Declarations>

                    <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

                <s:BitmapImage width="100" height="100" source="thumbnail"/>

                <s:Button x="10" y="216" label="Listen" click="playInterview()" color="#FFFFFF"/>

                <s:Label x="23" y="9" color="#FFFFFF" text="{data.title}"/>

                <s:TextArea x="10" y="289" width="457" height="226" color="#FFFFFF" editable="false"

                            text="{data.description}"/>

                <fx:Script>

                    <![CDATA[

                        private var req:URLRequest;

                        private var context:SoundLoaderContext = new SoundLoaderContext(8000);

                        private var s:Sound;

                        private var thumbnail:String;

                        private var imageurl:URLRequest;

                       

                        private function myURLMethod(thumbnail:String):void

                        {

                            imageurl = new URLRequest(data.imageurl);

                           

                        }

                       

                        private function playInterview():void

                        {

                            req = new URLRequest(data.audiourl);

                            s = new Sound(req, context);

                            s.play();

             

                        }

             

                    ]]>

                </fx:Script>

            </s:View>

            • 3. Re: retrieving a picture via URL from an array
              David_F57 Level 5

              Hi,

               

              You can try something like this which will give you the binary data for the image.

               

               

              private var loader:Loader = new Loader();

              [Bindable] private var myImage:ByteArray = new ByteArray();

               

              protected function getImage(value:String) : void

              {

                   loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded)

                   loader.load(new URLRequest(value));

              }

               

              protected function onLoaded(e:Event):void

              {

                   myImage = e.currentTarget.bytes;

                   loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaded);

              }

               

               

              now

               

              <mx:Image id="img1" source="{myImage}" verticalCenter="0" horizontalCenter="0" width="38" height="38" scaleContent="true" maintainAspectRatio="true"/>

               

              will have the image and not need to reference the url at all, with spark image its a little more work as you need to convert the binary data to a bitmap format

               

               

              David.

              • 4. Re: retrieving a picture via URL from an array
                tdorman4 Level 1

                Hey David,

                 

                thanks again for your help.  Unfortunately I am still having problems.  I implemented the code you provided, but I am still receiving errors.  Do you think you could look the following code over and tell me what I am doing wrong?  I would really appreciate it, thanks!

                 

                <?xml version="1.0" encoding="utf-8"?>

                <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        backgroundColor="black" creationComplete="getImage(thumbnail)" title="InterviewDetails">

                    <fx:Declarations>

                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                    <s:Image id="img1" width="38" height="38" horizontalCenter="0" source="{myImage}"

                             verticalCenter="0"/>

                    <s:Button x="10" y="216" label="Listen" click="playInterview()" color="#FFFFFF"/>

                    <s:Label x="23" y="9" color="#FFFFFF" text="{data.title}"/>

                    <s:TextArea x="10" y="289" width="457" height="226" color="#FFFFFF" editable="false"

                                text="{data.description}"/>

                    <fx:Script>

                        <![CDATA[

                            private var req:URLRequest;

                            private var context:SoundLoaderContext = new SoundLoaderContext(8000);

                            private var s:Sound;

                            private var loader:Loader = new Loader();

                            private var thumbnail:String = data.imageurl;

                            [Bindable]

                            private var myImage:ByteArray = new ByteArray();

                           

                           

                           

                            protected function getImage(value:String):void

                            {

                               

                                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded)

                                 loader.load(new URLRequest(value));   

                            }

                           

                            protected function onLoaded(e:Event):void

                            {

                                myImage = e.currentTarget.bytes;

                                loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaded);   

                            }

                           

                            private function playQuinnterview():void

                            {

                                req = new URLRequest(data.audiourl);

                                s = new Sound(req, context);

                                s.play();

                 

                            }

                 

                        ]]>

                    </fx:Script>

                </s:View>

                • 5. Re: retrieving a picture via URL from an array
                  flexercised Level 2

                  <s:BitmapImage width="100" height="100" source="{data.imageurl}"/>

                  should work. What is the value of data.imageurl? Did you show it in a label?

                  • 6. Re: retrieving a picture via URL from an array
                    tdorman4 Level 1

                    Absolutely, that was one of the very first things I did.  I replaced the text in my text field from {data.description} to {data.imageurl} and it would display the full and correct url in the description field.  i am truly perplexed.  In fact, I'd be willing to offer a modest $20.00 PayPal transfer to the person who can get my code working!  I promise to pay once it works!  Help!

                     

                    Any chance the formatting in the XML file is incorrect, and the problem could lie there?  This is how I have that particular field set up:

                     

                         -<interview>

                            -<title>   

                                Rory Scovel

                            </title>

                           

                            -<description>

                                Rory Scovel is an up-and-coming comedian who has been opening for big name comedians like Louis C.K., Nick Swardson and Daniel Tosh. His album "Dilation" is also featured on our website. In this exclusive interview, you can hear some of his comedy and learn what comedians inspired him to jump up on stage.

                            </description>

                            <imageurl>

                                http://dl.dropbox.com/u/7194501/Interviews/roryscovel.png

                            </imageurl>

                            <audiourl>

                                http://dl.dropbox.com/u/7194501/Interviews/InterviewMixdown_RoryScovel_012412.mp3

                            </audiourl>

                        </interview>

                     

                    NOTE:  links and names won't work as is displayed here, they are just examples of how they are set up.

                    • 7. Re: retrieving a picture via URL from an array
                      GordonSmith Level 4

                      > I am still receiving errors

                       

                      Compile-time errors? Runtime errors? What are they?

                       

                      Gordon Smith, Adobe

                       

                      • 8. Re: retrieving a picture via URL from an array
                        tdorman4 Level 1

                        solved, thanks!