Problem embedding images

Sorry ADMIN I posted this twice, my bad.

I am having a problem loading images from folder src, I am getting multiple 1120 error access of undefined property.
I have a src folder with .fla and .as files inside and a images folder with background.png and character.png images.

I was using a URLRequest and loader and displaying the images from the folder instead of embedding them. It was displaying the images so Im sure my folder hierarchy is correct. I have commented out the code there.

my code is here:

package {

import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.events.Event;


public class Dungeon extends Sprite {


//create game character objects
/*public var characterURL:URLRequest = new URLRequest("../images/character.png");
public var characterImage:Loader = new Loader();
public var character:Sprite = new Sprite();*/

//embed the background image
[embed(source="../images/background.png")]
public var BackgroundImage:Class;
public var backgroundImage:DisplayObject = new BackgroundImage();
public var background:Sprite = new Sprite();

//embed the character image
[embed(source="../images/character.png")]
public var CharacterImage:Class;
public var characterImage:DisplayObject = new CharacterImage();
public var character:Sprite = new Sprite();


//Create and Initialise the vx and vy variables
public var vx: int = 0;
public var vy: int = 0;

//Add the background
background.addChild(backgroundImage);
stage.addChild(background);
background.x = -1005;
background.y = -762;

//Add the character
character.addChild(characterImage);
stage.addChild(character);
background.x = 225;
background.y = 250;


public function Dungeon() {
//Load the image into sprite and place it on the stage

/*characterImage.load(characterURL);
character.addChild(characterImage);
stage.addChild(character);
character.x = 225;
character.y = 150;*/




// Event Listeners
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}


public function keyDownHandler(event: KeyboardEvent): void {
if (event.keyCode == Keyboard.LEFT) {
vx = -5;
} else if (event.keyCode == Keyboard.RIGHT) {
vx = 5;
} else if (event.keyCode == Keyboard.UP) {
vy = -5;
} else if (event.keyCode == Keyboard.DOWN) {
vy = 5;

}

}
public function keyUpHandler(event: KeyboardEvent): void {
if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT) {
vx = 0;
} else if (event.keyCode == Keyboard.DOWN || event.keyCode == Keyboard.UP) {
vy = 0;
}
}

public function enterFrameHandler(event: Event): void {
//feed the vy vx velocity to hero object position
character.x += vx;
character.y += vy;

//Stop hero from moving over the stage boundaries 50 pixels inside stage

//Top Boundaries
if (character.x < 50)
{
character.x = 50;
}
if (character.y < 50)
{
character.y = 50;
}
if (character.x + character.width > stage.stageWidth)
{
character.x = stage.stageWidth - character.width;
}
if (character.y + character.height > stage.stageHeight)
{
character.y - stage.stageHeight - character.height;
}

//Bottom Boundaries(slightly different code adds heros width

if (character.x + character.width > stage.stageWidth - 50)

{
character.x = stage.stageWidth - character.width - 50;
}
if (character.y + character.height > stage.stageHeight - 50) {
character.y = stage.stageHeight - character.height- 50;
trace("here");
}

}

}
}

any help is greatly appreciated.


admin edit:
no problem, merged posts and edited the title for the typo, added backticks for source code etc.
all things you will be able to do yourself later on

I’m not sure of the answer but maybe inside the “publish” pane, there’s somewhere you can include all the files needed for packaging. There might be a bug including folders. Try adding the embebded file path directly into the list of included stuff.

I personally include stuff like images using the “Library Pane”, make a new MovieClip Class and export it to AS3. I find it organizes my code well by keeping everything visible in Adobe Animate. I also use the Library pane to embed fonts.

I am following a tutorial. The book uses animate as the IDE but uses strictly as3 code and assets created in a images folder. The point is I don’t wish to use the Animate library panel.
I have this code working in the eg file but when I try to use the script myself it throws errors.

I embed the images in the class definition:

             //embed the background image
	[embed(source="../images/background.png")]
	public var BackgroundImage:Class;
	public var backgroundImage:DisplayObject = new BackgroundImage();
	public var background:Sprite = new Sprite();
	
	//embed the character image
	[embed(source="../images/character.png")]
	public var CharacterImage:Class;
	public var characterImage:DisplayObject = new CharacterImage();
	public var character:Sprite = new Sprite();

Then I add the character and background inside the constructor:method:

                    background.addChild(backgroundImage);
		stage.addChild(background);
		background.x = -1005;
		background.y = -762;
								
		//Add the character
		character.addChild(characterImage);
		stage.addChild(character);
		background.x = 225;
		background.y = 150;

EDIT: So now I get this error.:

TypeError: Error #1007: Instantiation attempted on a non-constructor.
at Dungeon()[C:\Users\Dell\Desktop\2DGame Design\Dungeon\src\Dungeon.as:22]

jcmailer, Sorry for not thanking you before my post. I am new to the forum and still getting used to where everything is here.

This is my first post here. Hi to all members. :smile:

I am having a problem loading images from folder src, I am getting multiple 1120 error access of undefined property.
I have a src folder with .fla and .as files inside and a images folder with background.png and character.png images.

I was using a URLRequest and loader and displaying the images from the folder instead of embedding them. I have commented out the code there.

my code is here:

package {

import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.events.Event;

	
public class Dungeon extends Sprite {
	

	//create game character objects
	/*public var characterURL:URLRequest = new URLRequest("../images/character.png");
	public var characterImage:Loader = new Loader();
	public var character:Sprite = new Sprite();*/
		
//embed the background image
	[embed(source="../images/background.png")]
	public var BackgroundImage:Class;
	public var backgroundImage:DisplayObject = new BackgroundImage();
	public var background:Sprite = new Sprite();
	
	//embed the character image
	[embed(source="../images/character.png")]
	public var CharacterImage:Class;
	public var characterImage:DisplayObject = new CharacterImage();
	public var character:Sprite = new Sprite();
	
	
	//Create and Initialise the vx and vy variables
	public var vx: int = 0;
	public var vy: int = 0;
	
//Add the background
		background.addChild(backgroundImage);
		stage.addChild(background);
		background.x = -1005;
		background.y = -762;
		
		//Add the character
		character.addChild(characterImage);
		stage.addChild(character);
		background.x = 225;
		background.y = 250;


	public function Dungeon() {
		//Load the image into sprite and place it on the stage

		/*characterImage.load(characterURL);
		character.addChild(characterImage);
		stage.addChild(character);
		character.x = 225;
		character.y = 150;*/
		
	
		
		

		// Event Listeners
		stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
		stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
		stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	}

	
	public function keyDownHandler(event: KeyboardEvent): void {
		if (event.keyCode == Keyboard.LEFT) {
			vx = -5;
		} else if (event.keyCode == Keyboard.RIGHT) {
			vx = 5;
		} else if (event.keyCode == Keyboard.UP) {
			vy = -5;
		} else if (event.keyCode == Keyboard.DOWN) {
			vy = 5;
			
		}

	}
	public function keyUpHandler(event: KeyboardEvent): void {
		if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT) {
			vx = 0;
		} else if (event.keyCode == Keyboard.DOWN || event.keyCode == Keyboard.UP) {
			vy = 0;
		}
	}

	public function enterFrameHandler(event: Event): void {
		//feed the vy vx velocity to hero object position 
		character.x += vx;
		character.y += vy;

		//Stop hero from moving over the stage boundaries 50 pixels inside stage
		
		//Top Boundaries
		if (character.x < 50) 
			{
			character.x = 50;
			}
		if (character.y < 50) 
			{
			character.y = 50;
			}
		if (character.x + character.width > stage.stageWidth) 
			{
			character.x = stage.stageWidth - character.width;
			}
		if (character.y + character.height > stage.stageHeight) 
			{
			character.y - stage.stageHeight - character.height;
			}

		//Bottom Boundaries(slightly different code adds heros width
						
		if (character.x + character.width  > stage.stageWidth - 50)

			{
			character.x = stage.stageWidth - character.width - 50;
			}
		if (character.y  + character.height > stage.stageHeight - 50) {
			character.y = stage.stageHeight - character.height- 50;
			trace("here");
			}

		}

}

}
any help would be much appreciated.

so quickly

your Dungeon class extends Sprite
so you have to think this class as part of the display list

basic rules are

  • stage is not necessarily available right away
  • if not added to stage first then stage is definitively not available
    even though you can still instantiate the class
  • new something() vs addChild( something ) is not exactly the same thing

so first control your constructor

instead of

public function Dungeon()
{
    
    // Event Listeners
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
    stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

do wait and test the stage

public function Dungeon()
{
    if( stage )
    {
        onAddedToStage();
    }
    else
    {
        addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
    }
}

private function onAddedToStage( event:Event = null ):void
{
    removeEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
    _init();
}

private function _init():void
{
    // here you are sure your instance have been added to the stage
    // and the stage property is available
    
    // Event Listeners
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
    stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

in general you want to do things in separate steps, not altogether

for ex:

  1. wait to be added to the display list (eg. Event.ADDED_TO_STAGE)
  2. instantiate all things: new Sprite(), new TextField(), etc.
    and general setup, changing width/height, etc. that kind of things
  3. build your graphic tree
    in short use addChild() but be aware in which order you add things
  4. connect the events of the different properties etc.

Now specifically about embedding

something like that will work

//embed the character image
[embed(source="../images/character.png")]
public var CharacterImage:Class;
public var characterImage:DisplayObject = new CharacterImage();

but can be a bit problematic
see you do the instantiation right into the property

you would want to do that during a later step as showed above

[embed(source="../images/character.png")]
public var CharacterImage:Class;

public var characterImage:DisplayObject;
// ...

private function _init():void
{
    characterImage = new CharacterImage();
    
    // Event Listeners
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
    stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

also, optionally you could do the embed a bit differently

package myassets.images
{

    [Embed(source="character.png")]
    public class Character extends Bitmap
    {
        public function Character()
        {
            super();
        }
    }

}

later on

import myassets.images.Character;

public var character:Character;
// ...

private function _init():void
{
    character = new Character();

    character.width *= 0.5;
    character.height *= 0.5;

    addChild( character );
    
    // Event Listeners
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
    stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

by making it a real class it allows you to have shorter / more meaningful names, use package to organises the assets, etc.

and you can apply the same principles for bitmaps, vector graphics, sound etc.

check the ActionScript 3.0 Developer’s Guide
the part Display / Display programming

No worries. Zwetan gave a perfect answer for a pure as3 image embedding solution and at the same time reminded me why I love using the Library panel so much. I don’t really even use “images” like .png anymore so my as3 code knowledge was a bit rusty. I find vector based graphics designed in Adobe Animate perform amazing. I love how vector images are able to scale in size to fit any screen resolution. If you ever run into pixelation issues on some devices, vectors will become your friend. You should be able to include .svg vector images using the same as3 code above.

yep but there are a couple of tricks

take for example Font-Awesome icons
and their open source repository

let’s say you want to embed the bomb.svg
https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/bomb.svg

which is basically

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z"/>
</svg>

the viewBox attribute is important, it gives you the default size of the SVG

and so the trick is to use an intermediary class, I call mine VectorGraphic

package flash.display
{
    import flash.display.Sprite;
    import flash.geom.Rectangle;
    
    /**
     * The VectorGraphic class.
     * 
     * <p>
     * Small utility class to easily embed SVG assets.
     * </p>
     * 
     * <p>
     * <b>Usage</b>:
     * Inherit from <code>VectorGraphic</code>
     * and embed an SVG file.
     * </p>
     * 
     * @example Embed an SVG file
     *
     * <listing>
     * [Embed(source="bomb.svg")]
     * public class bomb extends VectorGraphic
     * {
     *     public function bomb()
     *     {
     *         super( "bomb", 512, 512 );
     *     }
     * }
     * </listing>
     */
    public class VectorGraphic extends Sprite
    {
        public function VectorGraphic( name:String = "", width:Number = 0, height:Number = 0,
                                       autoAlign:Boolean = false )
        {
            super();

            this.name = name;
            this.width = width;
            this.height = height;

            if( autoAlign )
            {
                var bounds:Rectangle = getChildAt(0).getBounds( this );
                //trace( name + " bounds = " + bounds );
                getChildAt(0).x -= bounds.left;
                getChildAt(0).y -= bounds.top;
            }
        }

        public override function get width():Number
        {
            return getChildAt( 0 ).width;
        }
        
        public override function set width( value:Number ):void
        {
            getChildAt( 0 ).width = value;
        }
        
        public override function get height():Number
        {
            return getChildAt( 0 ).height;
        }
        
        public override function set height( value:Number ):void
        {
            getChildAt( 0 ).height = value;
        }
        
        public override function get scaleX():Number
        {
            return getChildAt( 0 ).scaleX;
        }
        
        public override function set scaleX( value:Number ):void
        {
            getChildAt( 0 ).scaleX = value;
        }
        
        public override function get scaleY():Number
        {
            return getChildAt( 0 ).scaleY;
        }
        
        public override function set scaleY( value:Number ):void
        {
            getChildAt( 0 ).scaleY = value;
        }
        
        public override function get rotationX():Number
        {
            return getChildAt( 0 ).rotationX;
        }
        
        public override function set rotationX( value:Number ):void
        {
            getChildAt( 0 ).rotationX = value;
        }
        
        public override function get rotationY():Number
        {
            return getChildAt( 0 ).rotationY;
        }
        
        public override function set rotationY( value:Number ):void
        {
            getChildAt( 0 ).rotationY = value;
        }
    }
}

and to embed the bomb.svg you would use it like that

package myassets.something
{
    import flash.display.VectorGraphic;
    
    [Embed(source="bomb.svg")]
    public class bomb extends VectorGraphic
    {
        public function bomb()
        {
            super( "bomb", 512, 512 );
        }
    }
}

the trick is to pass the width and height of the SVG (the ones from the viewBox)
the other trick is to name the SVG so via the VectorGraphic class you access the asset directly

in short super( "bomb", 512, 512 );

and a 3rd trick when the icon is not perfectly square, the autoAlign property

so for the beer.svg icon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M368 96h-48V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24v-42.11l80.606-35.977C429.396 365.063 448 336.388 448 304.86V176c0-44.112-35.888-80-80-80zm16 208.86a16.018 16.018 0 0 1-9.479 14.611L320 343.805V160h48c8.822 0 16 7.178 16 16v128.86zM208 384c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16zm-96 0c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16z"/>
</svg>

here the viewBox is 0 0 448 512
so you would use

package assets.fontawesome.solid
{
    import flash.display.VectorGraphic;
    
    [Embed(source="beer.svg")]
    public class beer extends VectorGraphic
    {
        public function beer()
        {
            super( "beer", 448, 512, true );
        }
    }
}

the autoAlign set to true will calculate the bound rectangle of the asset
and so align it to the center, either horizontally or vertically.

and so you can use the embed SVG as if it was a native vector (like a symbol from Flash/Animate)

var icon1:beer = new beer();
    icon1.scaleX = 0.5;
    icon1.scaleY = 0.5;
    icon1.opaqueBackground = 0xff0000;

addChild( icon1 );