Tutorial – getting started with Sandy 3D and FlashDevelop

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

3D for the web, it has been coming to you ever since virtual reality was the mot-du-jour and VRML the format to support, but it’s still not there yet. The latest craze now are Flash 3D engines. There are three worth mentioning: Papervision3D, Away3D and, the one I’ll be talking about here, Sandy3D.

Flash development (or more specificically Action Script) is all fine and dandy, but it does require an investment in some software products. If you’d go the route of least resistance, you need Adobe Creative Suite 3 ($999 for the web standard edition) and some 3D software, Autodesk 3ds Max ($3495 for 2009 edition) is the most widely supported. I don’t know about you, but as a hobbiest that leaves me only 2 options. Pirate the software, or go look in the free and open source community.

Luckely there are a few options for creating Flash and 3D. This post is about the Flash part. FlashDevelop is an open source development environment for Flash Actionscript and integrates seamlessly with the Flex SDK (free from Adobe). As you will see in this post, it is missing the designer features that the CS3 tools have (vector graphics, timeline editing), but as far as Actionscript editing goes, it’s on par with anything out there and better than most.

As an introduction, here is a short tutorial on how to get the Sandy3D getting started video example working on FlashDevelop.

First set up your environment

  1. If you want to use the latest release of Sandy3D, as we will do in this tutorial, get and install TortoiseSVN.
  2. Get FlashDevelop (currently 3.0.0 beta 6) and the Adobe Flex SDK. Install both.
  3. Start up FlashDevelop and open Tools > Program Settings… Click on AS3Context on the left and fill in the Flex SDK location:

flash develop setup

Lets get started

  1. Watch the getting started video and follow along.
  2. Create a project directory, eg “New Sandy Project”.
  3. Inside it, create a “sandy” directory and use TortoiseSVN to check out the latest Sandy3D release, as shown in the video. Use the current release URL here at your own risk (best to follow the video and find the latest release yourself)
  4. In your project folder, create a Demo1.as file.
  5. No need to create the Demo1.fla file as this is not used by FlashDevelop.
  6. Unlike with CS3, you will need to manage your resource library (images, etc) by hand. So create a “library” directory inside your project folder.
  7. Search two images on the Net and place them in the library directory. One will be used for the background, one will be used as a texture for the plane object we are going to draw.
  8. Open FlashDevelop and start a new Project: Project > New Project...
  9. Choose an empty ActionScript3 project. Enter any project name you like. In the location field browse to the project directory you created. Leave the package name empty and click OK.
  10. Select an output file name in Project > Properties…. For instance “New Sandy Project.swf”.
  11. In the Project view, open the library directory and right click on both images and select “Add to library“.
  12. Again in the Project view, right click on Demo1.as and select “Always compile“. Double click on the file to open it. You should have a view similar to this one:

fdreadytogo.png

Enter the code

This one is the bulk of the work. In the Demo1.as view, type the code for the example:

package
{
	import flash.display.Sprite;
	import sandy.core.scenegraph.Camera3D;
	import sandy.core.scenegraph.Group;
	import sandy.core.scenegraph.Shape3D;
	import sandy.core.World3D;
	import sandy.materials.Appearance;
	import sandy.materials.WireFrameMaterial;
	import sandy.primitive.Plane3D;

	public class Demo1 extends Sprite
	{
		private var world:World3D;

		public function Demo1()
		{
			world = World3D.getInstance ();
			world.container = this;

			world.camera = new Camera3D (this.width, this.height);

			var scene:Group = new Group ('scene');
			var shape:Shape3D = new Plane3D ('plane', 100, 100, 10, 10);
			shape.appearance = new Appearance (new WireFrameMaterial ());

			scene.addChild (shape);
			scene.addChild (world.camera);
			world.root = scene;
		}
	}
}

Hit ctrl-enter or select the little play button (test movie). Everything should compile and run fine, but you will see an empty movie. FlashDevelop automatically imports classes for you, so if you typed in everything by hand, like in the video, you could skip the step where you locate the missing import statements.

There are two reasons the code is not displaying anything:

1. The “this” object does not have a width and height. In the demo video a vector image is attached as background. I don’t think this is possible with FlashDevelop only (let me know if it is), so my option is to get a bitmap from the net “gradient.jpg” in this case and use that one. We can do this by embedding an image. Just before the “private var world:World3D;” line, add this:

[Embed(source = 'library/gradient.jpg')]
private var gradient:Class;

And now add this to the main sprite class. Just before “world = …” add

this.addChild (new gradient ());

Run again and you should already see your background.

2. The second issue is that the camera is not pointed in the right direction. Add the code as instructed in the video. Your entire program should now be:

package
{
	import flash.display.Sprite;
	import sandy.core.scenegraph.Camera3D;
	import sandy.core.scenegraph.Group;
	import sandy.core.scenegraph.Shape3D;
	import sandy.core.World3D;
	import sandy.materials.Appearance;
	import sandy.materials.WireFrameMaterial;
	import sandy.primitive.Plane3D;

	public class Demo1 extends Sprite
	{
		[Embed(source = 'library/gradient.jpg')]
		private var gradient:Class;

		private var world:World3D;

		public function Demo1()
		{
			this.addChild (new gradient ());

			world = World3D.getInstance ();
			world.container = this;

			world.camera = new Camera3D (this.width, this.height);

			var scene:Group = new Group ('scene');
			var shape:Shape3D = new Plane3D ('plane', 100, 100, 10, 10);
			shape.appearance = new Appearance (new WireFrameMaterial ());

			scene.addChild (shape);
			scene.addChild (world.camera);
			world.root = scene;

			world.camera.setPosition ( -100, -100, -100);
			world.camera.lookAt (0, 0, 0);
			world.render ();
		}
	}
}

Run the movie again and the plane should be visible.

There’s a little more in the video than that, but that’s for another post. At least you should already be well on your way to running all the other Sandy3D tutorials.

  • Pingback: 3D en Flash con ActionScript - Sandy « Shift F12()

  • Pingback: Streamhead » Blog Archive » How to use images in ActionScript 3 with FlashDevelop (and some other AS3 tips)()

  • you know, when I wrote that demo I totally forgot about stage.stageWidth/Height. when I have found it non-working, it would take too much time to re-edit video, hence I just added a gradient to “work around” it.

  • you know, when I wrote that demo I totally forgot about stage.stageWidth/Height. when I have found it non-working, it would take too much time to re-edit video, hence I just added a gradient to “work around” it.

  • Pingback: Streamhead » Blog Archive » Howto: Getting started with ActionScript 3()

  • Pingback: Streamhead » Blog Archive » The Secret of Reading Mouse Input in Flash Sandy3D - part 1()

  • Hello, can you tell me which differences between the first, the second and the third version of sandy script 3D, apart from difference between AS2 and AS3?

    Thank you

  • Hello, can you tell me which differences between the first, the second and the third version of sandy script 3D, apart from difference between AS2 and AS3?

    Thank you

  • Basically, each newer version is better than the previous one. The most important thing is performance, but also the API has changed. If you can, I would suggest you try the latest version 3.0. This will make sure you are using the latest API (less work when you need to upgrade) and that you enjoy the best performance.

    If you want to take a look at the detailed comparison: here’s the difference between 1.1 and 1.2: http://www.flashsandy.org/changes_1_2 and between 1.2 and 3.0: http://www.flashsandy.org/versions/3.0

    I hope this helps

  • Basically, each newer version is better than the previous one. The most important thing is performance, but also the API has changed. If you can, I would suggest you try the latest version 3.0. This will make sure you are using the latest API (less work when you need to upgrade) and that you enjoy the best performance.

    If you want to take a look at the detailed comparison: here’s the difference between 1.1 and 1.2: http://www.flashsandy.org/changes_1_2 and between 1.2 and 3.0: http://www.flashsandy.org/versions/3.0

    I hope this helps

  • Now there is also a 3.1 release candidate http://www.flashsandy.org/versions, which you may like to test.
    The World3D, which was deprecated for some time, is now completely gone, and Scen3D is used instead.
    While World3D was a singleton class ( You could only have one world ), you can use multiple instances of Scene3D.
    The 3.1 version uses a cache to speed things up and a lot of other enhancements.

  • Jan Hrabowski

    The last step in the video was to add an image to the plane and I did not find a way to do it in FD. This is how I did it code(perhaps someone knows a better way)
    1. Added a second 800×600 .jpg (called it gradient2). Then added this 2 lines:
    var data:BitmapData = new BitmapData(800, 600);
    data.draw(new gradient2());
    2. Use the data variable to construct new appearance:
    shape.appearance = new Appearance (new BitmapMaterial(data));

  • Your solution should work, there are many good ways to do this. I usually embed the image, as I explained in this post: http://www.streamhead.com/how-to-use-images-in-

    One little tip to shorten your code: If you have a flash.display.Bitmap, you can get to the BitmapData via the “bitmapData” property, no need to draw it.

  • Pingback: Tutorial: Applying and Manipulating a Mask in ActionScript 3 - Streamhead()

  • al

    Hello,

    he say to me “cant find world:World3D” and give me some errors!!!

  • obirajt

    i don't understand this tutorial…. Why You didn't write point 1. (Watch the getting started video and follow along)??? This vide is completly diffrent than rest of this tutorial… So I've got errors…………………………. !!!!!!!!! for me this is makes chaotic tutorial (video + text). It somethink like my comment in polish language: jak zwykle leniwe towarzystwo zamiast opisa? cos krok po kroku wysluguje sie jakims filmikiem z youtube. Nie dosc ze filmik za szybki to i scrypt pokazany w nim jest calkiem inny niz w tym zalosnym tutorialu. Teraz oczywiscie takie niemoty jak my, nowi uzytkownicy musimy sie zastanawiac jak to wszystko uruchomic bez bledow. Zenujace dziadostwo choc wtyczka bardzo interesujaca.
    Do You understand me..? Don't? I've the same problem with this tutorial, heheheheheeeeeeeee

  • obirajt

    this toutorial should not be. We don't need chaos

  • World3D is no longer supported by Sandy. You now need to use a Scene3D object. I'm working on a new post, with the latest Sandy library, which will appear next Tuesday. So stay tuned.

  • Yes, maybe it was a bit lazy on my part to point you to the video. But I thought the video was perfectly clear. In particular, I didn't feel like reiterating how to check out the files using Subversion, etc.

    The idea is that you start the video and try to follow along, every time something is not clear, you come back to my notes in the post.

    If you have a problem with a particular step, please let me know and I'll try to help you out.

  • Again, can you point out what is not working for you?

    As mentioned above, World3D might not work if you have the latest Sandy. I haven't tested it, but if you just replace it with Scene3D it will most likely work.

    If you are new to FlashDevelop and ActionScript in general, you might want to check out other tutorials. Immediately starting with 3D programming is probably not a good idea (it can get complicated real quick). For instance, you might want to take a look at these slides: http://www.streamhead.com/howto-getting-started

  • Pingback: Sandy 3D Tutorial: Getting Started with Sandy and FlashDevelop - Streamhead()

  • @ oobirajt: Don't complain!
    Show us some netiquette.
    Peter is doing this kind of stuff on his spare time, to help you get started.
    If you have problems, you are welcome to the Sandy forum, with all your questions.
    flashsandy.org/forum
    Normally you get answers fairly fast.
    Sandy3D, like the other 3D engines are under constant development, so any tutorial will age.
    The Sandy API hasn't changed much lately, but it is getting more efficient and bugs are stamed out.
    Visit us and learn!

    Cheers!
    /Petit

  • I have to agree, Petit. The Sandy 3D forums are always helpful.

    I have also updated the tutorial. You can find it at http://www.streamhead.com/sandy-3d-tutorial/
    I've given it an easy so remember name and I'll try to keep that page up-to-date and add more information.

  • I have to agree, Petit. The Sandy 3D forums are always helpful.

    I have also updated the tutorial. You can find it at http://www.streamhead.com/sandy-3d-tutorial/
    I've given it an easy so remember name and I'll try to keep that page up-to-date and add more information.

  • Pingback: Exporting Models From Blender to Flash Sandy 3D, Experiments in 3D – Streamhead()

  • David

    Hi,
    I am new with AS3, FlashDevelop and Papervision. I just downloaded the FlashDevelop 3.0.6 RTM. My problem is very basic, i create a new empty project and i am expecting a folder class and Library. Only the library folder is not in my project. Since i find no Flash Library i can't attach files from the library.

  • Hi David, sorry I'm a bit late with this reply.
    Did you create an AS3 project? This is the best option if you want to follow the tutorial. The latest version of FlashDevelop uses a slightly different project structure. The library directory is now simply called “lib”. Apart from the name change, it really is exactly the same thing.
    Let me know if that still doesn't work for you.

  • ncote

    While this tutorial is a bit sketchy, it's still mighty useful. I started Flash development 45 minutes ago (downloaded FlashDevelop, Flex SDK, Flash stand-alone debug player, Sandy, etc, etc) and got this working in 5 minutes, including the obvious change of World3D to Scene3D. Thanks Peter.