You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by brutfood <br...@yahoo.com> on 2015/09/28 08:37:20 UTC

Flex mx Image source path at runtime

I'm wading through a Flex AIR desktop project that someone else wrote. The
original author has used several mx.controls.Image components. Runtime image
paths assigned like this:

image.source = "/assets/book.png";
BUT - It doesn't work - I just get the broken image icon.

I've never used the above approach in my own code. Personally, I've always
used compile-time embedded images or URLLoader/Loader for runtime images.

So, I'd like to learn how to get this image path approach working.

I wrote a simple test program. Here is my .mxml -

<?xml version="1.0" encoding="utf-8"?>
 <pf:LearningAS xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:pf="com.powerflasher.*">
      <mx:Image id="myImage"/>
 </pf:LearningAS>

Here is my connected .as

public class LearningAS extends WindowedApplication {

    public var myImage:Image;

    public function LearningAS() {
        super();
        addEventListener(FlexEvent.CREATION_COMPLETE, init);
    }

    protected function init(event:FlexEvent):void {
        myImage.source = '/assets/myimage.png';
    }
}

I also added the src/assets folder to AIR package contents. And I added
-use-network=false to my compiler directives. (I'm using FDT, and Flex 4.6).

(PS: I know that the spark image is preferred to the mx Image nowadays.  But
the Spark image definitely doesn't support runtime image paths like this.)



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-at-runtime-tp11240.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Flex mx Image source path at runtime

Posted by brutfood <br...@yahoo.com>.
Thank you Alex.  I've copied my assets folder to bin before.  For previous projects.  I don't know why I didn't think of it this time.  I think I assumed that adding the folder to the AIR package would take care of this.
Problem Solved - Thanks. 


     On Tuesday, 29 September 2015, 22:37, Alex Harui [via Apache Flex Users] <ml...@n4.nabble.com> wrote:
   

  The path probably has to be relative to the SWF.  FB would usually create
a bin-debug or bin-release folder, put the swf and -app.xml in there, and
copy other files relative to it, so if your project looked like:

src/MyApp.mxml
src/MyApp-app.xml
src/assets/book.png

When debugging, FB would create:

bin-debug/MyApp.swf
bin-debug/MyApp-app.xml
bin-debug/assets/book.png

I don’t know how FDT sets up its output and whether you have to do
something to get it to copy book.png. You should be able to examine the
IOErrorEvent and get a clue where it is looking for the image file.

HTH,
-Alex

On 9/29/15, 4:52 AM, "brutfood" <[hidden email]> wrote:

>I tried a few variations of the image path.  I tried without a leading
>slash. That wasn't the problem.
>
>
>     On Monday, 28 September 2015, 22:54, Alex Harui [via Apache Flex
>Users] <[hidden email]> wrote:
>   
>
>  Was this project developed in Flash Builder?
>
>For some reason, Flash Builder “taught” folks to put a leading slash on
>their paths to assets and then the FB compiler “undid” that during
>compilation.  Maybe it made it easier for design view, I don’t know.
>Anyway, a fair number of FB project do not compile outside of FB for that
>reason, and I just end up removing the forward slash in the code to get it
>to work.
>
>HTH,
>-Alex
>
>On 9/27/15, 11:37 PM, "brutfood" <[hidden email]> wrote:
>
>>I'm wading through a Flex AIR desktop project that someone else wrote.
>>The
>>original author has used several mx.controls.Image components. Runtime
>>image
>>paths assigned like this:
>>
>>image.source = "/assets/book.png";
>>BUT - It doesn't work - I just get the broken image icon.
>>
>>I've never used the above approach in my own code. Personally, I've
>>always
>>used compile-time embedded images or URLLoader/Loader for runtime images.
>>
>>So, I'd like to learn how to get this image path approach working.
>>
>>I wrote a simple test program. Here is my .mxml -
>>
>><?xml version="1.0" encoding="utf-8"?>
>> <pf:LearningAS xmlns:fx="http://ns.adobe.com/mxml/2009"
>>      xmlns:mx="library://ns.adobe.com/flex/mx"
>>      xmlns:pf="com.powerflasher.*">
>>      <mx:Image id="myImage"/>
>> </pf:LearningAS>
>>
>>Here is my connected .as
>>
>>public class LearningAS extends WindowedApplication {
>>
>>    public var myImage:Image;
>>
>>    public function LearningAS() {
>>        super();
>>        addEventListener(FlexEvent.CREATION_COMPLETE, init);
>>    }
>>
>>    protected function init(event:FlexEvent):void {
>>        myImage.source = '/assets/myimage.png';
>>    }
>>}
>>
>>I also added the src/assets folder to AIR package contents. And I added
>>-use-network=false to my compiler directives. (I'm using FDT, and Flex
>>4.6).
>>
>>(PS: I know that the spark image is preferred to the mx Image nowadays.
>>But
>>the Spark image definitely doesn't support runtime image paths like
>>this.)
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-
>>a
>>t-runtime-tp11240.html
>>Sent from the Apache Flex Users mailing list archive at Nabble.com.
> 
> 
>   If you reply to this email, your message will be added to the
>discussion below: 
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240p11245.html   To unsubscribe from Flex mx Image source
>path at runtime, click here.
> NAML 
>
>
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240p11252.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
 
 
   If you reply to this email, your message will be added to the discussion below: http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-at-runtime-tp11240p11253.html   To unsubscribe from Flex mx Image source path at runtime, click here.
 NAML 





--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-at-runtime-tp11240p11254.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Flex mx Image source path at runtime

Posted by Alex Harui <ah...@adobe.com>.
The path probably has to be relative to the SWF.  FB would usually create
a bin-debug or bin-release folder, put the swf and -app.xml in there, and
copy other files relative to it, so if your project looked like:

src/MyApp.mxml
src/MyApp-app.xml
src/assets/book.png

When debugging, FB would create:

bin-debug/MyApp.swf
bin-debug/MyApp-app.xml
bin-debug/assets/book.png

I don’t know how FDT sets up its output and whether you have to do
something to get it to copy book.png. You should be able to examine the
IOErrorEvent and get a clue where it is looking for the image file.

HTH,
-Alex

On 9/29/15, 4:52 AM, "brutfood" <br...@yahoo.com> wrote:

>I tried a few variations of the image path.  I tried without a leading
>slash. That wasn't the problem.
>
>
>     On Monday, 28 September 2015, 22:54, Alex Harui [via Apache Flex
>Users] <ml...@n4.nabble.com> wrote:
>   
>
>  Was this project developed in Flash Builder?
>
>For some reason, Flash Builder “taught” folks to put a leading slash on
>their paths to assets and then the FB compiler “undid” that during
>compilation.  Maybe it made it easier for design view, I don’t know.
>Anyway, a fair number of FB project do not compile outside of FB for that
>reason, and I just end up removing the forward slash in the code to get it
>to work.
>
>HTH,
>-Alex
>
>On 9/27/15, 11:37 PM, "brutfood" <[hidden email]> wrote:
>
>>I'm wading through a Flex AIR desktop project that someone else wrote.
>>The
>>original author has used several mx.controls.Image components. Runtime
>>image
>>paths assigned like this:
>>
>>image.source = "/assets/book.png";
>>BUT - It doesn't work - I just get the broken image icon.
>>
>>I've never used the above approach in my own code. Personally, I've
>>always
>>used compile-time embedded images or URLLoader/Loader for runtime images.
>>
>>So, I'd like to learn how to get this image path approach working.
>>
>>I wrote a simple test program. Here is my .mxml -
>>
>><?xml version="1.0" encoding="utf-8"?>
>> <pf:LearningAS xmlns:fx="http://ns.adobe.com/mxml/2009"
>>      xmlns:mx="library://ns.adobe.com/flex/mx"
>>      xmlns:pf="com.powerflasher.*">
>>      <mx:Image id="myImage"/>
>> </pf:LearningAS>
>>
>>Here is my connected .as
>>
>>public class LearningAS extends WindowedApplication {
>>
>>    public var myImage:Image;
>>
>>    public function LearningAS() {
>>        super();
>>        addEventListener(FlexEvent.CREATION_COMPLETE, init);
>>    }
>>
>>    protected function init(event:FlexEvent):void {
>>        myImage.source = '/assets/myimage.png';
>>    }
>>}
>>
>>I also added the src/assets folder to AIR package contents. And I added
>>-use-network=false to my compiler directives. (I'm using FDT, and Flex
>>4.6).
>>
>>(PS: I know that the spark image is preferred to the mx Image nowadays.
>>But
>>the Spark image definitely doesn't support runtime image paths like
>>this.)
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-
>>a
>>t-runtime-tp11240.html
>>Sent from the Apache Flex Users mailing list archive at Nabble.com.
> 
> 
>   If you reply to this email, your message will be added to the
>discussion below: 
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240p11245.html   To unsubscribe from Flex mx Image source
>path at runtime, click here.
> NAML 
>
>
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240p11252.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.


Re: Flex mx Image source path at runtime

Posted by brutfood <br...@yahoo.com>.
I tried a few variations of the image path.  I tried without a leading slash. That wasn't the problem.  


     On Monday, 28 September 2015, 22:54, Alex Harui [via Apache Flex Users] <ml...@n4.nabble.com> wrote:
   

  Was this project developed in Flash Builder?

For some reason, Flash Builder “taught” folks to put a leading slash on
their paths to assets and then the FB compiler “undid” that during
compilation.  Maybe it made it easier for design view, I don’t know.
Anyway, a fair number of FB project do not compile outside of FB for that
reason, and I just end up removing the forward slash in the code to get it
to work.

HTH,
-Alex

On 9/27/15, 11:37 PM, "brutfood" <[hidden email]> wrote:

>I'm wading through a Flex AIR desktop project that someone else wrote. The
>original author has used several mx.controls.Image components. Runtime
>image
>paths assigned like this:
>
>image.source = "/assets/book.png";
>BUT - It doesn't work - I just get the broken image icon.
>
>I've never used the above approach in my own code. Personally, I've always
>used compile-time embedded images or URLLoader/Loader for runtime images.
>
>So, I'd like to learn how to get this image path approach working.
>
>I wrote a simple test program. Here is my .mxml -
>
><?xml version="1.0" encoding="utf-8"?>
> <pf:LearningAS xmlns:fx="http://ns.adobe.com/mxml/2009"
>      xmlns:mx="library://ns.adobe.com/flex/mx"
>      xmlns:pf="com.powerflasher.*">
>      <mx:Image id="myImage"/>
> </pf:LearningAS>
>
>Here is my connected .as
>
>public class LearningAS extends WindowedApplication {
>
>    public var myImage:Image;
>
>    public function LearningAS() {
>        super();
>        addEventListener(FlexEvent.CREATION_COMPLETE, init);
>    }
>
>    protected function init(event:FlexEvent):void {
>        myImage.source = '/assets/myimage.png';
>    }
>}
>
>I also added the src/assets folder to AIR package contents. And I added
>-use-network=false to my compiler directives. (I'm using FDT, and Flex
>4.6).
>
>(PS: I know that the spark image is preferred to the mx Image nowadays.
>But
>the Spark image definitely doesn't support runtime image paths like this.)
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
 
 
   If you reply to this email, your message will be added to the discussion below: http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-at-runtime-tp11240p11245.html   To unsubscribe from Flex mx Image source path at runtime, click here.
 NAML 





--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-at-runtime-tp11240p11252.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Flex mx Image source path at runtime

Posted by Alex Harui <ah...@adobe.com>.
Was this project developed in Flash Builder?

For some reason, Flash Builder “taught” folks to put a leading slash on
their paths to assets and then the FB compiler “undid” that during
compilation.  Maybe it made it easier for design view, I don’t know.
Anyway, a fair number of FB project do not compile outside of FB for that
reason, and I just end up removing the forward slash in the code to get it
to work.

HTH,
-Alex

On 9/27/15, 11:37 PM, "brutfood" <br...@yahoo.com> wrote:

>I'm wading through a Flex AIR desktop project that someone else wrote. The
>original author has used several mx.controls.Image components. Runtime
>image
>paths assigned like this:
>
>image.source = "/assets/book.png";
>BUT - It doesn't work - I just get the broken image icon.
>
>I've never used the above approach in my own code. Personally, I've always
>used compile-time embedded images or URLLoader/Loader for runtime images.
>
>So, I'd like to learn how to get this image path approach working.
>
>I wrote a simple test program. Here is my .mxml -
>
><?xml version="1.0" encoding="utf-8"?>
> <pf:LearningAS xmlns:fx="http://ns.adobe.com/mxml/2009"
>      xmlns:mx="library://ns.adobe.com/flex/mx"
>      xmlns:pf="com.powerflasher.*">
>      <mx:Image id="myImage"/>
> </pf:LearningAS>
>
>Here is my connected .as
>
>public class LearningAS extends WindowedApplication {
>
>    public var myImage:Image;
>
>    public function LearningAS() {
>        super();
>        addEventListener(FlexEvent.CREATION_COMPLETE, init);
>    }
>
>    protected function init(event:FlexEvent):void {
>        myImage.source = '/assets/myimage.png';
>    }
>}
>
>I also added the src/assets folder to AIR package contents. And I added
>-use-network=false to my compiler directives. (I'm using FDT, and Flex
>4.6).
>
>(PS: I know that the spark image is preferred to the mx Image nowadays.
>But
>the Spark image definitely doesn't support runtime image paths like this.)
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Flex-mx-Image-source-path-a
>t-runtime-tp11240.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.