PreloadJS load external image

vyf5ter's Avatar

vyf5ter

30 May, 2012 02:28 PM

Hi,

I have just started looking at CreateJS and must admit I am not finding may examples of code online. I am a AS3 developer with no JavaScript experience having some trouble connecting the dots to get me going.

I have managed to load an external image onto my canvas:

background = new Bitmap("images/background.jpg");
background.regX = 0;
background.regY = 0;
stage.addChild(background);

So I remove the above and try to use PreloadJS in order to display a progress info while the image loads

var assetloader = new PreloadJS();
assetloader.loadFile("images/background.jpg", false);
assetloader.setMaxConnections(1);

assetloader.progress = assetLoaderProgress();
assetloader.onComplete = assetLoaderComplete();

// in assetLoaderComplete background = new Bitmap(assetloader.getResult);
background.regX = 0;
background.regY = 0;
stage.addChild(background);

I see my console.log() messages for both assetLoaderProgress and assetLoaderComplete which tells me that they are both being fired but I don't know what to target in order to display the image. Are there any online resources that could help me out with this?

Thx.

  1. Support Staff 1 Posted by Lanny McNie on 30 May, 2012 03:35 PM

    Lanny McNie's Avatar

    We have put up a ton of examples in each github repo, and lots of them are on our website as well.
    https://github.com/CreateJS/EaselJS/tree/master/examples
    https://github.com/CreateJS/PreloadJS/tree/master/examples
    http://www.createjs.com/#!/EaselJS (scroll down)

    There are a few issues with your code.

    1. assetLoader's progress handlers are "onProgress" for overall queue progress, and "onFileProgress" for individual file progress.

    2. To access the result, you can use the "onFileLoad" callback, which contains the file that was just loaded (on the "result" property of the event object). To access it otherwise, you need to pass the id/url to getResult function:

      assetLoader.getResult("images/background.jpg");

    It is recommended that you use an ID when loading assets to make it easier to access them:

    assetLoader.loadFile({id:"image", src:"images/background.jpg"});
    var image = assetLoader.getResult("image");
    
  2. 2 Posted by vyf5ter on 31 May, 2012 07:31 AM

    vyf5ter's Avatar

    Thx for the reply.

    https://github.com/CreateJS/PreloadJS/blob/master/examples/PreloadI...

    I see that you make reference to both of these events. What is the difference between the two?

    preload.onComplete = handleComplete;
    preload.onFileLoad = handleFileLoad;

    I do not see a method called handleComplete in the sample code

  3. Support Staff 3 Posted by Lanny McNie on 31 May, 2012 02:28 PM

    Lanny McNie's Avatar

    onComplete is fired when the entire queue is processed.
    onFileLoad is fired after an individual file has completed loading.

    The demo only ended up using the onFileLoad -- we should remove the onComplete handler.

  4. Lanny McNie closed this discussion on 31 May, 2012 02:28 PM.

  5. vyf5ter re-opened this discussion on 18 Jun, 2012 08:06 AM

  6. 4 Posted by vyf5ter on 18 Jun, 2012 08:06 AM

    vyf5ter's Avatar

    Thx for the reply

  7. Lanny McNie closed this discussion on 06 Sep, 2012 04:20 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

21 Dec, 2014 12:47 PM
20 Dec, 2014 12:02 PM
20 Dec, 2014 10:51 AM
20 Dec, 2014 07:30 AM
19 Dec, 2014 09:45 PM

 

19 Dec, 2014 07:11 PM
19 Dec, 2014 06:52 PM
18 Dec, 2014 11:26 PM
18 Dec, 2014 07:26 PM
18 Dec, 2014 12:56 PM
18 Dec, 2014 09:38 AM