This is the fourth part of Making Games in ActionScript 3 using FlashDevelop.
Last time we got our first enemy on the stage. Now we’ll take a quick look at embedding other formats into your classes. Grab the gnome here to the right and put him in your assets folder.
The syntax is basically the same to embed other formats (png/jpg).
[Embed(source='../../../../../../assets/gardengnome.png')]
FlashDevelop will generate this little string for you if you doubleclick your wanted image in the Project panel. Place the [Embed] tag right before the class declaration as we did last time.
If you compile and run now you will get a runtime exception from the player. This is because our enemy is still defined as a Sprite, and sprites are vector based. We need to change the base class to Bitmap. Do that, and make sure your imports are in order before you compile. Now it all should run just fine again.
Flash does not resize your image, it will be embedded in it’s full resolution. So make sure that it’s a proper size before embedding it, resizing it in code will just add unnecessary bloat to your file and will affect performance.
Having to change the base class like this can be a bit of a hassle, especially when you have multiple levels of inheritance going (maybe a baseclass like GameObject). So there’s a cleaner way to do this. Create these two properties on your enemy:
private static const GfxGnome:Class; private var gfx:Bitmap;
The first one is both a static constant, this means this property is attached to the actual class, and not to the instances of it you create. Wether you make them private or public is up to you, I prefer having things private until otherwise needed, so that’s what I went with.
For now we set the base class for the enemy back to Sprite. But instead of having the [Embed]-tag before the Enemy class we put it before the GfxGnome class. This will make the gardengnome.png attach to that class instead.
Now we need to instantiate that into our gfx property. We do that in the constructor like this:
gfx = new Enemy.GfxGnome();
Since GfxGnome is attached to the class and not this specific instance we need to specify that by using Enemy before it’s name.
If you run your code now you will notice that nothing is showing up. This is because we need to add our graphics as a child, right now they’re just hiding out in memory somewhere.
Adding the graphics as a child works the same way here as it did in our Main class where we first added the Enemy:
addChild(gfx);
Now you should be all set for getting graphics into your games. If you got lost somewhere on the way, the project files are available for download.
This is what your enemy class should look like:
package com.grapefrukt.tutorial.supergame.enemies {
import flash.display.Bitmap;
import flash.display.Sprite;
public class Enemy extends Sprite {
[Embed(source='../../../../../../assets/gardengnome.png')]
private static const GfxGnome:Class;
private var gfx:Bitmap;
public function Enemy() {
trace("I'm alive");
gfx = new Enemy.GfxGnome();
addChild(gfx);
}
}
}
Next time we’ll make stuff move around!
This is my first experience of programming, so it was right about here that I started to think “Huh? Add the what to the what? Where am I supposed to put this code?” I was very relieved to see the project files download link at the end there!
Thank you for having the patience to think like a newcomer. 🙂
Nice tut
clear enough to understand
thx
only one thing: remember that many people are going to be moving through these sequentially, like me.
Since I try to follow all tutorials to the letter (not bringing in habits from other IDEs and APIs with which I’m already familiar), I didn’t know I was going to be deleting the leek picture.
I also didn’t know where to put the properties, or whether I had to change the extension once I added the Gfx properties.
The source code helps, but when you use a new word (property, in this case), I would suggest showing the whole class so the student can know that they’re headed in the right direction.
All in all, these have been great, thanks!
I’m planning to do a second sweep on all these tutorials eventually and correct any mistakes pointed out in the comments, so your feedback is much appreciated!
Very Good, I didn’t get it all so I just downloaded the source code file before I started this part. It helped so much! Thanks and keep putting your file down at the bottom for us to download because without it, I would have been lost WAY ago! Thanks!
Yeah, I agree with most people: this is the most confusing part;
Why exactly do you need to create a class out of the gnome (in the static part)?
And why is needed to addChild in the Enemy, not in the main?
I’m pushing through!
reply to John
What you actually do is that you attach the embedded picture to the GfxGnome Class,and what I suppose happens is that it makes the GfxGnome class a bitmap object class.
So when you use the gfx Bitmap variable it can hold the GfxGnome class which is also a bitmap.
So in short you insert the bitmap object GfxGnome(the Picture) into the variable gfx which holds bitmap objects.
the odd thing here is that the program connects the embedded picture with the class beneath it,mostly AS3 doesn’t behave that way its as if a command that links the GfxGnome class and the embedded picture is missing,and it just does this on it’s own.
Just a side note ,constants are mostly written with all caps so –
you write-
private static const GFXGNOME:Class;
instead of-
private static const GfxGnome:Class;
Hey, I’m stuck way in the beginning of this step where the .png Gnome image is being embedded. When I double click the gnome file in the project manager (on the right) it simply opens the file in the Windows Picture Viewer.
How can I get the gnome image to embed properly like the Leek? If I embed it simply by swapping the file names and extensions manually, I get an error that says “Unable to transcode”
Any advice?
@Chris: Right click the gnome, “Insert into document”.
hi, i got this error when following this tutorial.
I’ve check my code and it’s almos same with yours. And i don’t have any problem running previous tutorial
[Fault] exception, information=VerifyError: Error #1014: Class mx.core::BitmapAsset could not be found.
[Fault] exception, information=ReferenceError: Error #1065: Variable Enemy_GfxGnome is not defined.
do you have any idea why is this happening?
TiA
i think the problem i’m having above is because i’m using Flex 4.
i’ve managed to get it worked by adding a compiler parameter ‘-static-link-runtime-shared-libraries=true’ (without quote)
This part was confusing. I would have had zero chance to figure this out w/o the source file, thanks.
Yes, this tutorial definitely needs to be rewritten. It’s very confusing and many things we not explained.
Many thanks, however, for these tutorials.
Pingback: Flashdevelop embed | ricivt.com
I’m using Flash Builder and the only thing that I’m struggling with is embedding the images. There’s no option to ‘Insert’ them into code from what I can see.
I’ve looked through the right-click options and I’ve even tried dragging and dropping them on to the as file, but so far my only solution is to manually type it in, which is workable, though not as elegant as a simple insert option.
And like others have stated, this tutorial could really do with a rewrite. It’s fantastic that you’ve took the time to write them. The net is a wealth of Flash information, but it’s almost too much for a fresh faced wannabe Flash coder to absorb, and this has the basis of being a great starting point for picking up the basics, syntax and general grasp of writing, compiling and understanding what goes into building a Flash game.
One request I’d like to add is if it’s possible for you to visualise what the code means. Grasping the process of how things embed into classes and such, it’s not clear through text explanations, but I feel it might be easier to under stand with some visual aid, perhaps a flow chart showing how things are linked.
Again, thanks for taking the time to write these, I’m glad the help is out there now I’ve finally decided to give coding another whirl.
Basically I just made sure the import was correct and that it extended bitmap instead of sprite, and it worked fine. I don’t know what that other business is. I even resized them and made them semi-transparent. Maybe you mean that you shouldn’t have flash resize them just because it’s too slow for real time? Anyways I’m skipping all that extra class mumbo jumbo, this works and i’m fine
I’m picking up AS3 from learning C++, and I don’t really understand what’s going on with
[Embed(source=’../../assets/gardengnome.png’)]
private static const GfxGnome:Class;
Is GfxGnome being declared a class? You say “the GfxGnome class” in your article, so I guess it is…but then the ‘class’ is functioning as a static const at the same time? Or is it that GfxGnome is declared a class from within the Enemy class and is made to hold only one thing? ): I know very little about AS3 so an explanation would help greatly
Why is still the Sprite class there, if the bitmap class is the one you need?, you need both? , If we arent working with vectors anynmore, why do we need Sprite?
This is the fourth one, not the third.
It seems like most of the issues in these comments have yet to be addressed, still very confusing, and it’s been two years, though still super grateful for these tutorials!