Animate a Cartoon Explosion With Flash Professional – Basix

Sep 6, 2011 Posted on Sep 6, 2011 in Hints and Tips | 10 comments

Animate a Cartoon Explosion With Flash Professional – Basix

In this tutorial we’ll show you how to animate an awesome explosion in Flash, which you could use for an cartoony action game. We take you from conception to completion, then show you how to export it as well as how to import it into other scenes.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: Choose the Type of Explosion You Would Like

Decide what kind of explosion would be best fitting for your scene. Is it a small explosion? A nuke? A 60′s Batman-esque, flashy, “WHAM”? In this case we will be doing a smaller explosion, but with experience you could do anything you want.

What you will be creating in this tutorial.

Step 2: Look for References

Once you know what you want to animate look for reference. The Internet is amazing for this because you can just search for movie clips related to what you’d like to do and carefully study them.

Step 3: Begin to Draw

Once you are ready grab a few pieces of paper and begin to draw your explosion. Animation is planned through keyframes, which are generally the most extreme parts of the animation which tell the rough story of how something is going to move. In this case, the first thing that you should be thinking about is the initial flash of light.

Step 4: Draw All the Keyframes

Next, draw the keys explaining how the smoke and light comes out of the bomb. You will at the very least want one where the smoke is first coming out of the light, then one when the smoke is at its largest and most extreme, and then a frame at the end. Here are our keyframe drawings, which illustrate this process:

Step 5: Draw All the In-Betweens

Draw the in-betweens for these frames. Basically, you are now drawing all of the frames which fit in the middle of these keyframes. We will include our sketches here for reference.

Step 6: Scan Your Drawings

At this point we scan all of our drawings so that we can trace them in Flash.

Step 7: Change the Basic Flash Settings

Open Flash and change your settings to whatever would be the best fit for your current scene. You can see all of your basic settings in the properties panel on the right hand side of the screenshot. In our case, we will be working at 550x500px and 24 frames per second, with a white background.

Step 8: Import Your Drawings

Next you should import all of your line drawings into Flash Pro’s Library. The Library is basically a place where all of the files that you are using in your animation are stored for safe-keeping. You can do this by going to File > Import > Import to Stage, then selecting all of your drawings and hitting Open.

After this they will appear all on the same keyframe, but if you select them all, right-click and hit “Distribute to Layers,” they will appear as seperate layers, all on the same keyframe. Then you can simply drag and drop individual keys into the right positions, either on their own layers on all on one layer, whichever you’d prefer.

Step 9: Draw Your Initial Lines

Add a new layer to your timeline, then begin to draw over your old lines using the Line tool. We generally do not bother using the brush tool because you end up with too many nodes on the lines which can make things extremely difficult to change in any way later. What you will basically need to do is draw lines using the line tool, then use the selection tool to manipulate the curve between the two points. (More Flash drawing tips are available here.)

Showing me drawing and then manipluating a line.

Step 10: Convert Lines to Fills

Once the frame has been entirely traced with the line tool we select all of the lines, then go to Modify > Shape > Convert Lines to Fills. Occasionally there will be glitches where bits of the line disappear. If this happens then start off by selecting smaller chunks of the image, then eventually doing the whole graphic together. Once you do this you can then edit the line depth using the selection tool and clicking and dragging on the edges of lines.

Showing the Convert Lines to Fills Dialogue Box

Step 11: Color Your Drawings

Color in the lines using the paint bucket tool.

Step 12: Finish All of the Frames of Animation

Repeat Steps 9-11 until all of the frames are finished.

Step 13: Organize Your Animation

Select everything on a frame, hit F8 and turn it into a Symbol. Properly name it and it will appear in your library to be used and re-used at any time. Organization is really important while you’re animating. Things can get confusing fast if you don’t name and sort everything properly so please do so. You can even create folders in the library.

Step 14: Onion Skinning

One important tool which can really help you animate is the Onion Skin tool. With Onion Skinning you can easily view the frames closest to the one that you are editing so that you can tell right away if a piece of animation is going to work as planned or not. The Onion Skin button is located at the bottom of your timeline.

Step 15: Preview the Animation

To preview your full animation at any time, go to Control > Test Movie > Test. It will preload your whole animation and then show you exactly how it will look once exported.

Step 16: Export the Movie

When you’re ready to export just go to File > Export > Export Movie. Name it whatever you’d like, pick .swf from the drop down menu, and then hit save. Depending on the size of your animation you may have to wait a short while.

Step 17: Export as a GIF

Exporting .gif images is nearly the same. When you hit File > Export > Export Movie just pick .gif instead of .swf from the drop-down menu.

Step 18: Import your Animation into an Existing Scene

To import an explosion into an already exisitng scene, first open both scenes. Then, select all of the frames of the explosion animation on the timeline, copy all of the frames, and then hit Ctrl + F8. A dialogue will appear. Name the explosion, then save it as a Graphic. Hit OK. A blank screen should appear with no animation on it. Then click on the first frame of the new timeline and paste all of your frames. After this hit the “Scene 1″ button under the timeline but above the animation window to go back to your original timeline. Once you do this your animation should be in the Library. Select your animation in the library, right click and copy it. You will then be able to paste it into the library of any other FLA that you have open.

A compilation of screengrabs related to the text.

Step 19: Create a Movie Clip

Making movie clips is almost the same as what we described in the previous step. To create a movie clip, follow the instructions from the last step exactly, but pick “Movie Clip,” instead of “Graphic,” when you reach the dialogue after hitting Ctrl + F8. The difference between a Graphic and a Movie Clip is that the Movie Clip can be uniquely identified using ActionScript, which is the coding language that Flash uses to make games and interactive media. When the movie is compiled a copy is created from the library and transformed for the animation. The copy can be blurred, scaled, etc., during runtime, without having to create separate animations at design time, thus cutting down on the amount of computer memory needed and keeping the SWF file size small.

Step 20: Create a Sprite Sheet

To create a sprite sheet of your animation, first hit File > Export > Export Movie and select PNG sequence to create a set of PNG graphics, one for each frame. After they are created you can use any image editing software (such as Photoshop) to import them as a batch and then copy/paste them all into one larger image file.

Alternatively, you could make your Flash scene larger, make each frame of animation appear at once, and then move the individual images into place before exporting a single image.

Click to enlarge.

A third option is to use Keith Peters’s tool, SWFSheet.

We hope you enjoyed this tutorial! If you make an explosion with it, please share it in the comments

View full post on Activetuts+

10 Responses to “Animate a Cartoon Explosion With Flash Professional – Basix”

Dru Kepple says:

September 6, 2011 at 5:04 pm

It’s time for another debugging Quick Tip. We’ll continue our focus on specific (and common) errors that tend to stymie less-experienced ActionScripters. In this case, we’ll cover Error #1063, the argument count mismatch error.

Step 1: Being Bad

First, let’s create a situation where the error occurs. Open up a new Flash document (assuming you’re following along with Flash Pro CS3+, otherwise this sample is easily adapted to a Flex project). Open the Script Editor and enter the following code:
```
import flash.events.MouseEvent;

function onClick():void {
    trace("click.");
}

stage.addEventListener(MouseEvent.CLICK, onClick);
```
You can probably spot the problem already; if you’ve spent any amount of time writing ActionScript 3 you’ll have found yourself writing event handlers. If not, don’t feel bad — we’ll go over it all in due course.

If you run the Flash file as is, and then click on the stage, you’ll produce the following run-time error message:
```
ArgumentError: Error #1063: Argument count mismatch on Untitled_fla::MainTimeline/onClick(). Expected 0, got 1.
```
And we never get to the trace statement that should have run after clicking.

Step 2: Breaking It Down

So what’s going on? In this case, Adobe’s verbiage for the error is actually not so bad, and if you’ve gotten used to parsing a run-time error message, its meaning might be pretty clear. But not everyone is as smart as you, so here’s the breakdown for everyone else.

ArgumentError — This is someone inconsequential information, but it shows the specific Error class that was thrown. We’ve got something that’s not as general as a simple Error, and we’ve entered a specific categorization of error associated with arguments (to functions and methods).

Error #1063 — Here we’re just giving the formal error number, like all good run-time errors. You can use this code to more easily locate it in Adobe’s run-time error documentation.

Argument count mismatch… — In more proletarian terms, there were the wrong number of arguments sent to a function. Which function? It’s…

…on Untitled_fla::MainTimeline/onClick(). — This simply identifies the function that received the wrong number of arguments.

Expected 0, got 1. — We get a bit of extra information in this error description. This details the count mismatch. This phrase will change according to the nature of the specific error, but in our case it’s saying that the function was written without any arguments in the signature, but a single argument got sent to it anyway.

Flash likes its ducks in a row. So, it notices this discrepancy and decides to throw a ~~tantrum~~ error, because it would rather you (the developer) figured out what went wrong than that you simply ignored the problem. This is good, because if the count mismatch went the other way (expected 1, got 0), then we’d be stuck without an argument for a required parameter, and the function would do Dog knows what.

Step 3: The Root of the Problem

The nature of the error should be clear at this point, but you may still be wondering why it occurred at all. Where did that superfluous argument come from?

The argument isn’t exactly superfluous. It’s expected, actually, since we’ve hooked up our function to be an event listener. The event system in Flash has the notion of an event object that encapsulates aspects of the event that occurred. This object gets passed to the listener function as the sole argument. So, we expected 0 because we wrote our function without any parameters, but we got 1 because the event dispatcher sent along an event object.

Now you may be wondering why the compiler didn’t catch this error. It’s true: if you wrote this:
```
function sayClick():void {
    trace("click.");
}
sayClick(42);
```
Then the SWF won’t even compile, because you’ll get this error:
```
1137: Incorrect number of arguments.  Expected no more than 0.
```
The difference is that in the latter example, we have actual code that calls the function with the wrong number of arguments. That is, we wrote the line down that calls the function incorrectly. The compiler can look at the line that defines the function, and the line that calls the function, and compare them for discrepancies, and sound the alarm when they occur.

Image by Alan / Falcon

However, in the original example, there is no line of code written down that literally calls the function by name. Instead, the function is called by reference. When we add the event listener, we pass in the function, and at that point it’s a variable, not a function call. This reference gets stored by the event dispatcher, and then executed dynamically when the event occurs (that’s a real high-level overview of how the event system works, but we don’t have time to go deeper). So, the line of code that ultimately calls the error-causing function is a rather generic line of code that uses indirection to get the job done, and therefore something much harder for the compiler to catch.

(In my opinion, Adobe could at least register the addEventListener line at compile time, and go looking for the function reference by name. If it finds a match, it could check the function signature for a proper event argument, and produce errors accordingly. It still couldn’t be done in a foolproof way, but it might go a long way to catching these errors before actually running the SWF.

The main point, though, is that this run-time error has a compile-time counterpart, but that the run-time error occurs when the function is called by reference and not directly by name.

Step 4: Fixing the Hole

The rain is getting in when we call the function by reference, and have a discrepancy in the number of arguments. We generally have two options: we can modify the call, or modify the function’s arguments. In this particular example, we can’t modify the call, as that happens inside EventDispatcher, code to which we don’t have access. That leaves us with modifying the arguments.

This, again, has two options. First, we can simply add the argument. This lines up the number of arguments and from here on out, everything will be copacetic. We don’t need to use the argument, we just need to have the function “catch” it when it’s called.
```
function onClick(e:MouseEvent):void {
```
The second option is to, again, add the argument (no way around that, I’m afraid). However, if you originally wrote the function as a regular function and not an event listener, and are calling it from elsewhere in your code without arguments, you may appreciate this variation. Make the argument optional, and default it to null:
```
function onClick(e:MouseEvent=null):void {
```
This will work well with the event system: it gets sent an event object and can catch it. It also works well with your existing code; if no argument is sent, the parameter default is used and the function proceeds.

Step 5: Callbacks

Note that this error is not limited to event listeners, although that’s probably the most common context where you’ll experience it. Ultimately it’s the using of functions stored in variables, as opposed to called by name, that leads to the error. This is how the event system works. We can rework the original example to produce more or less the same error, only without the click:
```
function sayMyName(name:String):void {
    trace("Hello, " + name);
}

var funcRef:Function = sayMyName;

funcRef();
```
Again, we get past the compiler error because we have a layer of indirection between the function definition and the function call. Thus, we get the run-time error (expected 1, got 0).

It’s not always this cut and dry, though. If you utilize callbacks in your code, you might fall prey to error 1063. Callbacks are sort of like event listeners, only there is no formal, built-in mechanism for implementing them. They’re basically just functions you pass around by reference, which are stored (either temporarily or long-term) by some other process, which then calls the callback function at the appropriate time.

Tweening engines typically implement these. Some go for a more formal event-driven system, but TweenLite, for example, utilizes callbacks for receiving notifications about the tween progress. This line:
```
TweenLite.to(someClip, 1, {onComplete:tweenFinished, onCompleteParams:[42, "answer"]});
```
…would call a function named tweenFinished at the end of the tween, passing in two parameters to the function. This technique is ultimately more flexible then events, as you are not limited to just the single event object as a parameter. But it does yield itself to similar vulnerabilities to error 1063 due to the nature of passing functions around by reference.

That Is All

That wraps up another Debugging Quick Tip. Thanks for reading, and I hope you learned something along the way!
Islam Wazery says:

September 6, 2011 at 5:37 pm

In this tutorial, I will introduce you to the concept of isometric content creation and the basics of designing with it, using the open source library As3isolib. We will use these skills to create a simple level editor, suitable for an isometric game.

Final Result Preview

Let’s take a look at the final result we will be working towards:

The SWF has been squashed slightly to fit in the page; click here to see it full-size.

Step 1: What is Meant by “Isometric”

First, it’s important to know what we mean by isometric. Isometric is a Greek term which means having equal measurement: all measurements are to scale, no matter how far close or how far in the distance they are from the viewpoint. So in mathematics, isometric projection is a type of projection which preserves distance along objects.

Suppose you are in an isometric view; you will have a 3D view (e.g. when a camera takes a photo of you) where no matter you are, you will be shown at the same scale according to that camera. This is in contrast to a true perspective, where you will be reduced in size when you are far away from the camera.

As3isolib handles all the underlying math involved in creating your scenes and views, so don’t worry about the math!

Step 2: What Does Tile-Based Mean?

Tile based is a term used for any graphical content that uses tiles as a fundmental element. The concept itself is a bit old — it was used in older games for technical reasons — but this doesn’t mean that tile based games are now dead; these days 3D rendering is, but these 3D games can be tile based (and many are). This is where isometric games come in. Tiles are usually rectangular, but there are also square tiles, triangular tiles and even hexagonal tiles (as in some Civilization titles).

Step 3: Rectangular Maps vs. Isometric Maps

Rectangular tiles are the easiest of all to work with, though most of the time, when working in rectangle land, you use square tiles. You can use other sizes, of course, but square seems to be a favorite. The point of view for games with square tiles is usually top down or overhead. This just means that all your graphics must be drawn as though you are looking down on the object. Sometimes you can give your game a slightly angled view so that you are looking mostly down, but you can see some of the front or back.

Another point of view for square tiles is the “side-scroller” view, where you are looking at the world from its side. This was very popular among older action games like Super Mario Bros and the original 2D Duke Nukem. In a rectangular map, moving along the X-axis means moving east, and moving along the Y-axis means moving south. In an isometric tilemap, depending on its type, moving along the X-axis might mean moving southeast, and moving along the Y-axis might mean moving southwest. In isometric tiles we still use rectangular areas to contain the tiles; this is not going to change. What will change is how you will render them.

(Editor’s note: a great guide to different types of perspective can be found here.)

Step 4: Isometric Map Types

There are three types of isometric tilemaps: slide, staggered, and diamond. Each has its own set of quirks, its own methods of rendering, its own way of representing a tilemap, and its own method of navigating them. I will introduce them briefly in this step.

Slide Maps: The slide tilemap is probably the easiest to render, navigate, and interact with. Unfortunately, it has limited uses. It’s mainly used to scroll action games. Usually, a slide map has a horizontal X axis and a diagonal Y axis, although it is possible to have a vertical Y axis and a diagonal X axis. The tiles are blitted in horizontal rows top to bottom.

Staggered Maps: Staggered maps works perfectly in turn-based strategy games. It is also very useful in simulating a round world; it is best suited for maps that wrap around (move from one edge to the other). Each new row of the map is alternately shifted one-half of a tile left or right, which results in a zigzag pattern of tiles. The X axis is usually horizontal (increasing to the east), and the Y axis is southeast and southwest. Staggered maps are the most irregular of the three. The tiles are blitted in horizontal rows, top to bottom.

Diamond Maps: This type of map is very popular in real-time strategy games. These maps are the least offensive; slide maps have “tattered” tops and bottoms, and staggered maps have “tattered” edges, so diamond maps are the smoothest. In diamond maps, the only requirement is that both the X- and Y-axis are diagonal, so you can increase X-axis or Y-axis as fits you, like the X axis increasing to the southwest and the Y axis to the southeast.

Time to Code

That’s enough context — time to start developing!

Step 5: Downloading As3isolib

The first step is to download As3isolib (ActionScript 3 Isometric Library) which is an open source library for creating isometric projected content. One example of a game created using it is Empires and Allies from Zynga.

The library contains some assets like primitive shapes (rectangles, cubes, and so on) and some utilities to facilitate the creation of your isometric content. It is also free and can be used in any commercial work (though you can donate to it if you want).

Let’s now download it from here. After downloading it uncompress the zip file to a new folder and name it Level Editor.

At any time while using As3isolib you can refer to its documentation through this link

Step 6: Setting Up the Scene

Fire up Flash and create a new ActionScript 3.0 FLA. Now we need to import the PSD file for the Level Editor interface which I have created (it’s in the tutorial source files), or you can redesign the interface to what you feel looks good. So click on File>Import>Import To Stage, select the PSD file, and mark the “set stage size to same size as Photoshop canvas” option.

Now we have the raw images for our Level Editor. We need to create our Document Class in which we will implement our Level Editor: in the Properties panel in the Publish section you will find a Class field; write CDoc and click on the pencil button. Now save the ActionScript file which appears and name it CDoc.

Step 7: Making the Buttons

Lets make our three buttons in the bottom panel; right click on the button background image and select Convert to Symbol like what you see in the image, then rename the button to btnClear, insert text in the Up, Over, Down and Hit frames, and type into it CLEAR ALL. In the Over and Hit states insert the Hover image just like in the screenshot.

Then repeat this step to make the remaining two buttons.

Step 8: Creating the Tabs

Now we will create the three tabs: one of them will be for Soild Colors, another for Bricks, and the last one for Grass.

Draw a black gradient rectangle, right-click on it, and choose Convert to Symbol, then name it to Tab and choose its type to be a Movie Clip. Now mark the Export for ActionScript option, then in the Class field write CTab which will the class name for this Tab Movie Clip.

Double click on the Tab Movie Clip and insert text in it; inside this, write NAME. This text will be changed with the name of the tab; to allow this, convert this text to Dynamic Text with the name txt, just like in the image below.

Step 9: Implementing Our Tabs

Now we have a Movie Clip for our tab, we need to instantiate three copies of it and name them, so let’s do that in our Document Class.
```
package
{
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.display.MovieClip;

	public class CTab extends MovieClip
	{
		public var txt:TextField;

		public function CTab(Name:String)
		{
			txt = this.txt as TextField;
			txt.text = Name;
			addEventListener(MouseEvent.ROLL_OVER, onRollOver, false, 0, true);
			addEventListener(MouseEvent.ROLL_OUT, onRollOut, false, 0, true);
		}

		protected function onRollOver(e:MouseEvent):void
		{
			this.alpha = 0.9;
		}

		protected function onRollOut(e:MouseEvent):void
		{
			this.alpha = 1;
		}
	}
}
```
```
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class CDoc extends MovieClip
	{
		// Instantiating The Tabs
		private var Solid:CTab;
		private var Bricks:CTab;
		private var Grass:CTab;

		public function CDoc()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
		}

		protected function onAddedToStage(e:Event):void
		{
			// Creating the tabs
			Solid = new CTab("SOLID");
			Solid.y = 469;
			Solid.addEventListener(MouseEvent.CLICK, onSolidClick, false, 0, true);
			addChild(Solid);

			Bricks = new CTab("BRICKS");
			Bricks.y = 494;
			Bricks.addEventListener(MouseEvent.CLICK, onBricksClick, false, 0, true);
			addChild(Bricks);

			Grass = new CTab("GRASS");
			Grass.y = 521;
			Grass.addEventListener(MouseEvent.CLICK, onGrassClick, false, 0, true);
			addChild(Grass);
		}

		protected function onSolidClick(e:MouseEvent):void
		{
			// will be implemented later
		}

		protected function onBricksClick(e:MouseEvent):void
		{
			// will be implemented later
		}

		protected function onGrassClick(e:MouseEvent):void
		{
			// will be implemented later
		}
	}
}
```
Step 10: Creating the Isometric View

Now let’s learn about one of the most important things in As3isolib: the isometric view which serves like a camera that shows the isometric objects. It has a lot of helpful functions, like panning and zooming and focusing on a point or any object. It also provides the capability to hide/clip objects outside its boundaries and also lets us change its background and foreground content.

We will create two views in our Levels Editor, the first one is for our viewport which will have a grid in it and also the objects of our level, the other view is for the Objects Browser that will have a lot of object types that can be used in designing the level.

Now we will add the following code in our CDoc class — be sure to check the line numbering, or just take a look at the source files of the tutorial.
```
//Add this line before the constructor
private var viewPort:IsoView;
```
```
viewPort = new IsoView();
viewPort.setSize(800, 600);
viewPort.centerOnPt(new Pt(-100, 100, 0), false);
addChildAt(viewPort, 0);
viewPort.addEventListener(MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true);
viewPort.addEventListener(MouseEvent.MOUSE_WHEEL, onZoom, false, 0, true);
```
In the first line we created our IsoView and named it viewPort then in the second line we set its size to 800x600px. We need to center it on a point or on an object, so we created a new point from the built in as3isolib.geom package and gave it some x and y values in 3D isometric space (which we will discuss in the next step).

Now we need to show our viewPort so we added it to the display list of the document as a child, and to make it in the bottom of our interface to make sure it will not overlap with any other element we added it at index 0. Then we added two event listeners on our viewPort, one for panning and the other for zooming (which again I will explain later).

Step 11: Cartesian vs. Isometric Space

The coordinate system used in Flash is called the Cartesian coordinate system. The Cartesian coordinate system is grid-based (made up of many equal-sized imaginary squares), with a horizontal axis called the x-axis and a vertical axis called the y as in the top left corner of the below image.

The isometric space is a bit different; each of its three axes appear equal in size and the angles between any two of them are 120 degrees. As3isolib provides a way to convert a point from Cartesian to isometric coordinates (and vice versa) by calling IsoMath.screenToIso(Point:Pt) to convert one way, and IsoMath.isoToScreen(Point:Pt) to convert the other.

Step 12: Creating the Scene

It is very simple to create the isometric scene which will hold our objects. (These objects will all be inherited from IsoDisplayObject (ex. IsoBox, IsoRectangle, IsoSprite, etc) which is the base class that all primitive and complex isometric display objects are extending.)

We will instantiate a new IsoScene and then add our scene to the viewport to be shown.
```
//Add this line before the constructor
private var scene:IsoScene;
```
```
scene = new IsoScene();
viewPort.addScene(scene);
```
Step 13: Creating the Grid

To add a grid in the viewport we need to simply instantiate a new IsoGrid then we can set its width and length to 10 to give us a 10×10 grid. Also, we can set its cell size to whatever we want (I picked 30). The last and very important step is to add the grid to the scene.
```
//Add this line before the constructor
private var grid:IsoGrid;
```
```
grid = new IsoGrid();
grid.setGridSize(10, 10, 1);
grid.cellSize = 30;
scene.addChild(grid);
```
Step 14: Rendering the Scene

We need to add an event listener to render the scene, and it is very simple, just add the listener and in its body call the render() function on the scene.
```
//Add this code in onAddedToStage listener
addEventListener(Event.ENTER_FRAME, onRender, false, 0, true);
```
```
private function onRender(e:Event):void
{
 	scene.render();
}
```
Step 15: Implementing the Bottom Panel Buttons

In this step we will add the listeners for the click events on our bottom panel buttons, but first we need to access them, which we can do with the function getChildByName().

On the first event handler for the Clear button we will remove all the children of the scene, and then we need to re-add the grid. In the Fit to Screen button we will set the current zoom of the viewport to 1, which resets it to its default, then we will pan it to its default position with the panTo() function. The final button is where we will show/hide the origins of the grid, so we will invert its display state; if it is shown we will hide it and vice versa.
```
this.getChildByName("btnClear").addEventListener(MouseEvent.CLICK, onbtnClearClick, false, 0, true);
this.getChildByName("btnFit").addEventListener(MouseEvent.CLICK, onbtnFitClick, false, 0, true);
this.getChildByName("btnShow").addEventListener(MouseEvent.CLICK, onbtnShowClick, false, 0, true);
```
```
protected function onbtnClearClick(e:MouseEvent):void
{
	scene.removeAllChildren();
	scene.addChild(grid);
}
protected function onbtnFitClick(e:MouseEvent):void
{
	viewPort.currentZoom = 1;
	viewPort.panTo(-100, 100);
}
protected function onbtnShowClick(e:MouseEvent):void
{
	if (grid.showOrigin)
		grid.showOrigin = false;
	else
		grid.showOrigin = true;
}
```
Step 16: Viewport Panning 1

When we created our viewport we added an event listener for the MOUSE_DOWN event. In this event listener we will handle the starting of panning: we will first create a point and name it panPt as a global point to use it in different places as it will handle the location of the mouse in every frame. We’ll give it the X and Y positions of the mouse (I will explain why in the next step).

Then we remove the mouse down event listener and add two new event listeners: one for the actual handling of the panning and the other when we stop our panning.
```
private var panPt:Pt;
private function onStartPan(e:MouseEvent):void
{
	panPt = new Pt(stage.mouseX, stage.mouseY);

	viewPort.removeEventListener(MouseEvent.MOUSE_DOWN, onStartPan);

	viewPort.addEventListener(MouseEvent.MOUSE_MOVE, onPan, false, 0, true);
	viewPort.addEventListener(MouseEvent.MOUSE_UP, onStopPan, false, 0, true);
}
```
Step 17: Viewport Panning 2

This event listener is called when the mouse moves and what it does is very simple: it pans the viewport according to the X and Y positions of the mouse’s initial position panning minus its current positions, to calculate the difference in location from the last frame. Then we set the X and Y to the current mouse positions.
```
private function onPan(e:MouseEvent):void
{
	viewPort.panBy(panPt.x - stage.mouseX, panPt.y - stage.mouseY);

	panPt.x = stage.mouseX;
	panPt.y = stage.mouseY;
}
```
Step 18: Viewport Panning 3

When we stop panning we need to remove both the onPan and onStopPan event listeners as we don’t need them any more, then re-add the onStartPan event listener to let the user pan the viewport again.
```
private function onStopPan(e:MouseEvent):void
{
	viewPort.removeEventListener(MouseEvent.MOUSE_MOVE, onPan);
	viewPort.removeEventListener(MouseEvent.MOUSE_UP, onStopPan);

	viewPort.addEventListener(MouseEvent.MOUSE_DOWN, onStartPan, false, 0, true);
}
```
Step 19: Viewport Zooming

We added the onZoom MOUSE_WHEEL event listener previously, so now we will implement it.

It’s really simple: to know if the mouse moves up or down we need to check the property of the mouse event (e) which is called ‘delta’; if this is larger than 0 then we should zoom in, otherwise we should zoom out. To do this we increment or decrement the zoom value. The final step is to set the viewport’s currentZoom property to our zoom value.
```
private var zoomValue:Number = 1;
private function onZoom(e:MouseEvent):void
{
	if(e.delta > 0)
		zoomValue +=  0.10;

	if(e.delta < 0)
		zoomValue -=  0.10;

	viewPort.currentZoom = zoomValue;
}
```
Keep in mind that we didn’t set any boundary checking in the zoom values or panning, which means you can zoom or pan the view off the edge of the stage. It is very simple to add them but I will leave that to you.

Step 20: Creating the Objects Panel

After finishing our viewport and adding its functionalities, we need to create the objects panel in which we can view our objects and add them to the viewport.

We start with creating a new isometric scene, named objectScene, to hold our objects. Then we create a new isometric view to render the objects in the scene and set its size to 215x468px, which fits the objects panel. Now we need to align it so we center it on a point of 40x80px. Finally we add the objectScene to the objectview using the addScene() function, and add the objectView to the display list of our document.
```
//Add this code in onAddedToStage listener
objectScene = new IsoScene();

objectView = new IsoView();
objectView.setSize(215, 468);
objectView.centerOnPt(new Pt(40, 80, 0), false);
objectView.addScene(objectScene);
addChild(objectView);
```
Step 21: Creating the Solid-Colored Objects

Now we need to create some solid-colored objects for the solid tab, so we will add a mouse click event listener.
```
protected function onSolidClick(e:MouseEvent):void
{
	objectScene.removeAllChildren();
	var p:Pt = new Pt(0, 0);
	var solidColors:Array = [0xD15415, 0xFF6600, 0xFFCC00, 0x66FF00, 0xFF6699, 0x6699FF, 0x99FF00, 0xFF0066];
	for (var i:int = 0; i < 8; i++)
	{
		if (i % 2 == 0)
		{
			p.x = 0;
			p.y += 50;
		}
            var obj:IsoRectangle = new IsoRectangle();
	    obj.setSize(30, 30, 0);
 	    obj.fill = new SolidColorFill(solidColors[i], 1);
	    IsoMath.screenToIso(p);
	    obj.moveTo(p.x, p.y, 0);
	    IsoMath.isoToScreen(p);
	    p.x += 80;
	    obj.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
	    obj.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
	    obj.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true);

	    objectScene.addChild(obj);
	    objectScene.render();
	 }
}
```
First we remove all the children from the objectScene to remove all objects if we actually pressed on another tab. Second we need to make a Point to store the X and Y positions of the objects, then we make an array of solid colors and place some color hex values in it. After that we will make a loop in which we will create our eight objects and show them in a grid. Then we actually create each isometric rectangle, using a built-in As3isolib isometric primitive shape, and set its size to 30x30px and fill its color with a solid color (also built in As3isolib) using a value from our array, with an alpha of 1.

Now we need to change our point values to be in isometric coordinates, so we use the aforementioned screenToIso() function, then move our object to the new position and reset our point to be in screen coordinates — this makes it easy for us to align our objects in a grid with our familiar screen (Cartesian) coordinates, while we move our objects with what suits them best (isometric coordinates).

Then we simply increment the X value by 80 and add three event listeners: the first two will handle the ROLL_OVER events, for highlighting the object when rolled over, and the third will handle the CLICK events. Finally we add the object to the scene and rendered everything.

Step 22: Creating the Brick Objects

This step is very similar to the previous one, except we change the array contents to our Bricks, which we will create and importe in our next steps.
```
protected function onBricksClick(e:MouseEvent):void
{
	objectScene.removeAllChildren();
	var p:Pt = new Pt(-20, -10);
	var bricks:Array = [Bricks1, Bricks2, Bricks3, Bricks4, Bricks5, Bricks6, Bricks7, Bricks8];
	for (var i:int = 0; i < 7; i++)
	{
		if (i % 2 == 0)
		{
			p.x = -30;
			p.y += 50;
		}
	var sprite:IsoSprite = new IsoSprite();
	IsoMath.screenToIso(p);
	sprite.moveTo(p.x, p.y, 0);
	IsoMath.isoToScreen(p);
	p.x += 80;
	sprite.sprites = [bricks[i]];
	sprite.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
	sprite.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
	sprite.addEventListener(MouseEvent.CLICK, onObjClick, false, 0, true);
	objectScene.addChild(sprite);
	objectScene.render();
	}
}
```
The other difference from the previous step is that we created an isometric sprite object whose look we can entirely change to be whatever we want; we added our bricks to it by passing a reference to sprite.sprites which is an array of sprites.

Now you can create the grass objects just like we did with the bricks, you need to just change the bricks array to the grass array.

Step 23: Creating Texture Assets

We are going to make our texture assets, so start a new Flash document and import our assets from an image or from a PSD file. From File click Import > Import to Stage, then choose to import the layers as Bitmap image with editable layer styles.

Now we need to convert every bitmap to a movie clip by right clicking on it and choosing Convert to Symbol, then writing its name as in the Bricks and Grass arrays (Brick1, Brick2, etc).

Mark the Export for runtime sharing option and type textures.swf in the URL field. Finally go to File > Publish Settings and mark the SWC option in the PUBLISH section, then click Publish. Now we have a SWC that contains all of our assets, which we can import into our LevelEditor to be used.

Step 24: Importing Texture Assets

It is very simple to import our SWC file. From the File menu click ActionScript Settings, and from the Library path tab click the Flash button which appears in the image below and browse to our SWC.

That’s it! Now our assets are loaded.

Step 25: The Objects’ Mouse Roll Functions

We need to handle mouse events for our objects — remember in Steps 18 and 19 we added three event listeners for every object. We will implement the ROLL_OVER event listeners in this simple step.

I’d like our objects to have a glow effect when we roll over it, so we need to access the objects themselves. For this, As3isolib has a built-in event type called ProxyEvent which we can use to access the event object using via e.target. We should cast it as IsoDisplayObject (which is the base class for any isometric display object) just to make this event listener as generic as possible, and then add a glow filter using Flash’s built-in filters.

The first parameter of the GlowFilter constructor is its color; the second is its alpha, which we’ll just set to 1; we will leave the blurX and blurY values at their default, 6, as we don’t need any blurring; and finally we’ll set the quality to 64.

In the roll out handler we’ll just reset the filters.
```
private function onRollOverHandler(e:ProxyEvent):void
{
   var glow:GlowFilter = new GlowFilter(0xC24704, 1, 6, 6, 64);
   (e.target as IsoDisplayObject).container.filters = [glow];
}
private function onRollOutHandler(e:ProxyEvent):void
{
   (e.target as IsoDisplayObject).container.filters = [];
}
```
Step 26: Handle Clicks on the Objects

The third event listener for our objects is the CLICK event. What will happen when we click on any object? Well, we need to make a copy of it in the viewport and add a drag-and-drop facility to it, to make it easy for us to move to any place in the scene.

It is very simple to do this. We will first create an object of type IsoDisplayObject and pass it our object that we clicked, just as we did before.

Now we need to clone the clicked object; this is easy, as As3isolib has a built in method called clone(), which belongs to the IsoDisplayObject class, that returns a copy of the cloned object retaining its dimensional and style properties. This will work perfectly for isometric rectangle objects (which we created in the solid color tab), but in the sprites’ case (bricks and grass) we need to also copy the sprites array for every object, so we’ll do a simple check to see whether the object is of type IsoSprite, and if its sprites property is not null, then we will set the object’s sprites property to match the clicked object’s sprites.

Then we will move our objects upwards (along the Z-axis) by 50 to avoid overlapping with the grid. Finally we will add three event listeners for our created object: two of them for roll over/out and the last one to handle drag and drop (which we will cover in the next step), then add our object to our scene and render it.
```
protected function onObjClick(e:ProxyEvent):void
{
            var obj:IsoDisplayObject = e.target as IsoDisplayObject;
            obj = obj.clone();
            if(obj is IsoSprite && (obj as IsoSprite).sprites != null)
            {
                        (obj as IsoSprite).sprites = (e.target as IsoSprite).sprites;
            }
            obj.moveTo(0, 0, 50);
            obj.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
            obj.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
            obj.addEventListener(MouseEvent.MOUSE_DOWN, onPickup, false, 0, true);

            scene.addChild(obj);
            scene.render();
}
```
Step 27: Drag and Drop 1

There is a remaining event listener called onPickup which is a MOUSE_DOWN event to handle the start of dragging. We will start by creating a private variable called dragObject, which will be of type IsoDisplayObject, to use in reference to our dragged object as it appears from its name. Also we will create a point to handle the position of the dragged object.

In the pickup handler we will assign the dragged object to our dragObject variable, then to obtain the current isometric point of the mouse we use the viewPort.localToIso() method. This point will be helpful in calculating the distance between the dragged object and the current mouse position, also it will stop the dragged object from snapping to the mouse position.

Finally we’ll remove this event listener, as when our object is picked up we do not want to pick it up again! Instead, we’ll add two event listeners for dropping: one to the dragged object and another to the viewPort. Finally, you might ask where the actual move happens; the answer is that it happens in the onMoveObject handler which we will cover in the next and final step.
```
private var dragObject:IsoDisplayObject;
private var dragPt:Pt;
private function onPickup(e:ProxyEvent):void
{
            dragObject = e.target as IsoDisplayObject;
            dragPt = viewPort.localToIso(new Pt(stage.mouseX, stage.mouseY));
            dragPt.x -= dragObject.x;
            dragPt.y -= dragObject.y;

            dragObject.removeEventListener(MouseEvent.MOUSE_DOWN, onPickup);

            dragObject.addEventListener(MouseEvent.MOUSE_UP, onDrop, false, 0, true);
            viewPort.addEventListener(MouseEvent.MOUSE_UP, onDrop, false, 0, true);
            viewPort.addEventListener(MouseEvent.MOUSE_MOVE, onMoveObject, false, 0, true);
}
```
Step 28: Drag and Drop 2

The two final event listeners for our Levels Editor are onDrop — which just removes all the listeners for the dragged object and the viewport, because when an object is dropped these listeners will be useless — at which point we re-add the onPickup listener for the dragged object to make dragging and dropping available again.

To allow the actual movement of an object, we take a point that corresponds to the mouse position in isometric space and move our object according to the offset between the mouse’s original position and its current position.
```
private function onDrop(e:Event):void
{
            dragObject.removeEventListener(MouseEvent.MOUSE_UP, onDrop);
            viewPort.removeEventListener(MouseEvent.MOUSE_UP, onDrop);
            viewPort.removeEventListener(MouseEvent.MOUSE_MOVE, onMoveObject);

            dragObject.addEventListener(MouseEvent.MOUSE_DOWN, onPickup, false, 0, true);
}
private function onMoveObject(e:MouseEvent):void
{
            var pt:Pt = viewPort.localToIso(new Pt(stage.mouseX, stage.mouseY));

            dragObject.moveTo(pt.x - dragPt.x, pt.y - dragPt.y, dragObject.z);
}
```
Conclusion

In this tutorial we covered the basics of the open source library As3isolib and creating isometric contents with it like isometric rectangles and sprites. We also covered how to make scenes, cameras and grids, and a lot of useful topics like panning, zooming, dragging and dropping.

Now you can start creating your isometric Flash project with As3isolib. Look out for my next tutorial, about making a game with As3isolib. Hope you have fun!
David Appleyard says:

September 6, 2011 at 6:27 pm

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!
- Vehicle Rendering With Fryrender
  
  Rendering realistic vehicles is no easy task, the complexity of the surfaces and high reflectivity make getting good renders a time consuming, and often frustrating process. So we’ve enlisted the help of author Shaun Keenan to guide you through the process of creating a high quality, realistic vehicle render using Maya 2011 and Random Control’s physically accurate Fryrender.
  
  Visit Article
- Epic Blender Tutorials
  
  We’ve scoured the web in search of the best Blender tutorials out there and compiled a list of 45 of the most epic we could find. This collection includes a variety of tutorials covering everything from modeling and animation, to rigging and VFX. So grab a coffee and savor the Blender goodness!
  
  Visit Article
- An Introduction To Keyshot Rendering
  
  In this tutorial, new author Ivan Momchilow will introduce you to the Keyshot rendering engine and get you started on working with the software. Ivan will go through the process of setting up a model for importing and cover the basic settings for rendering inside the software. Keyshot features a surprisingly simple interface that’s both intuitive and easy to use. Featuring only six main UI buttons, rather then the hundreds of options most render engines throw at the user. Ivan has provided our premium members with a fantastic model of the Sony PSP Go, as well as the scene file from Keyshot, so get started after the jump!
  
  Visit Article
- Create a Medieval Landscape in Photoshop
  
  In this tutorial we will demonstrate how to create a medieval landscape using digital painting and photo manipulation techniques. We will begin by sketching out a rough idea of how we want our image to look. Then, we will then add various stock images and build upon them until we produce the scene below. Let’s get started!
  
  Visit Article
- Sketching the Human Form in Photoshop
  
  Photoshop is an excellent tool for manipulating photographs but it can also be used as a means to create stunning digital art. This tutorial is part of a 25-part video tutorial series demonstrating everything you will need to know to start producing digital art in Photoshop. Digital Art for Beginners, by Adobe Certified Expert and Instructor, Martin Perhiniak will begin by teaching you how to draw in Photoshop. At the conclusion of this series you will know all you need to produce your own concept art and matte paintings in Photoshop.
  
  Visit Article
- Interview With Martin Perhiniak: Getting an Adobe Certification
  
  I recently had the opportunity to chat with Psdtuts author, Martin Perhiniak. Martin is the author of our Photoshop Basix and Digital Art for Beginners Series, and is an Adobe Certified Expert and Instructor. I frequently introduce Martin as an Adobe Certified Expert so in this interview I decided to ask him exactly what that means.
  
  Visit Article
- Getting Started with the Fuel PHP Framework
  
  This two-part tutorial will get you up and running with the Fuel PHP framework. We’ll start with the basics, and then move onto some more advanced topics in part two! Let’s get started.
  
  Visit Article
- How to Create an Advanced Twitter Widget
  
  As of March 2011, the current average number of “Tweets” the world sends per day is 140 million. This tutorial demonstrates how to create a custom Twitter widget from scratch that uses the Twitter API, Web Intents and @Anywhere. Using the Twitter platform to create a fun, interactive tool for your website can be beneficial both in the learning and promotion departments!
  
  Visit Article
- Sublime Text 2 Tips and Tricks
  
  I consider Sublime Text 2 to be the spiritual successor to TextMate – particularly when the likelihood of TextMate 2 coming to fruition becomes bleaker and bleaker. When Duke Nukem Forever is released before TextMate 2, you know you’re in trouble! But that’s okay, because Sublime Text 2 is one of the fastest and most incredible editors to come out in a long time! I’ll show you my favorite tips and tricks today.
  
  Visit Article
- Free Packs of Animal Vector Graphics: Cute Cartoon Characters
  
  Jump in and download these free animal vectors. We’ve rounded up an assortment of cute animal characters drawn in a quirky styles. There are a variety of looks represented, such as: flat vintage, shiny modern anime, childish crayon, chibi characters, and more. The glue holding these together are their must have lovable construction. All are available in various vector formats for free download. Add them to your next design project to add some character warmth, playful fun, and huggable character goodness.
  
  Visit Article
- How to Create a Seamless Bookshelf Pattern in Illustrator
  
  I admire the complex, inspiring seamless patterns of several vector artists and have always wanted to attempt to create my own. In today’s tutorial I’m going to show you how to make a seamless bookshelf pattern in Adobe Illustrator.
  
  Visit Article
- Create a Lace Text Effect in Adobe Illustrator
  
  Follow this tutorial and you will learn how to create a beautiful lace text effect. You will use many effects and you will define many personalized Art and Pattern Brushes that will help you create a Lace Pattern Brush that works with any color. Jump into creating this delicate text effect now.
  
  Visit Article
- Perfectly Rotate and Mask Thumbnails With CSS3
  
  Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard! Learn how to do it right!
  
  Visit Article
- Designing for a Responsive Web
  
  The web as we know it is changing. In the past, designers and developers only had to concern themselves with one medium: the computer screen. In recent years, however, a plethora of fully internet-enabled devices with scores of different shapes and capabilities have cropped up, meaning that we now have to design our websites to fit comfortably in as many screen sizes, shapes, and resolutions as you can possibly think of.
  
  Visit Article
- Exclusive PSD Freebie: Vue UI Kit
  
  Vue is a complete UI kit, prepared in Photoshop and exclusively available to Webdesigntuts+ readers. Check out preview shots after the jump, download it and use it in your projects!
  
  Visit Article
- A Neutral Density Filter Primer
  
  Neutral Density (ND) filters are a bit like sunglasses for your lens. Except that sunglasses typically tint the light coming through in one form or another. As true color rendition is often important to photographers, neutral density filters strive to lessen the amount of light passing through them without coloring or changing the nature of the light.
  
  Visit Article
- Top Tips to Help Define Your Personal Photographic Style
  
  So you’ve spent time developing your camera techniques and skills. You’ve aimed to understand exposure settings and endeavoring to get the perfect shot each time. But sometimes, you’re just not happy with the results and you don’t feel like your work expresses what you want it to. How do you refine your art so you can truly express yourself as a photographer and make your shots recognizable as your work? Well, here are a few tips to help you on your way.
  
  Visit Article
- Super Surreal Photographs
  
  Today, we look at some of the most biazarre and unreal photos ever taken. Surreal means have the disorienting, hallucinatory quality of a dream. It is a very creative style of photography as you have to have a good sense of vision and creativity to create things others wouldn’t normally see.
  
  I hope you enjoy these 50 examples of surreal photography.
  
  Visit Article
- Realistic Cloud Fly Through – AE Premium
  
  In today’s tutorial, we’re going to recreate this cool cloud scene using Trapcode Particular and a stock clip from Digital Juice’s Compositor’s Toolkit (although other stock elements are available elsewhere). I hope you learn some neat tips and tricks for working with Particular.
  
  Visit Article
- Summer Time Swimming Pool Logo Reveal
  
  In this tutorial we are going to keep the summer going as long as we can by creating a cool looking water logo reveal animation using some interesting textures and techniques. Also we are going to create a cool looking caustics effect as well as some interesting displacement effects to simulate water surface.
  
  Visit Article
- Aetuts+ Hollywood Movie Title Series -” Harry Potter V2
  
  We created a Harry Potter title tutorial 2 years ago, but in today’s tutorial we’re going to step it up a notch by emulating the style of the last movie. Using Cinema 4d, we’ll model the beveled text and do animation of the logo and lightning elements. Then in After Effects, well complete our project with clouds, audio, and final compositing. Enjoy!
  
  Visit Article
- Simple Tricks to Fit the Kick and Bass Together
  
  One of the most commonly asked questions in audio is how to make the kick drum and bass sit well together in the mix. There are a few techniques that have been used throughout the years to take care of clashing bass guitar and kick drum. In the following tutorial we’ll go through two of them: carving out EQ areas and side chaining.
  
  Visit Article
- Making Your MIDI Strings Even More Realistic
  
  Since my last tutorial, I haven’t had the chance to try Hollywood Strings or LASS, so I’ll be doing this tutorial with my good old friend East West Quantum Leap Orchestra Complete, without blending different patches, using just one!
  
  So, before going to the tutorial, there is no point in lying to you. MIDI is always a temporary option. For us, the film composer guys, MIDI is a solution till the time we can record a live orchestra.
  
  Visit Article
- Audiotuts+ Top 6 Software Synths
  
  I remember discovering pro synths way back in 1982. I was amazed – with one instrument you could create almost any sound you could imagine. I fell in love with them. Now we can do all that with software.
  
  Visit Article
- Activetuts+ Has a New Focus: Browser-Based Apps and Games
  
  From today onwards, our focus is changing. Instead of covering everything to do with Flash, Unity and Silverlight, we’ll be covering the design and development of browser-based apps and games in general. This means no more tutorials on full-Flash websites or AIR, and lots of new content on game design, UI, and HTML5. Read on to find out what we’ve got in store!
  
  Visit Article
- Build a 2D Portal Puzzle Game With Unity: Getting Started
  
  In this tutorial (part free, part Premium), you’ll learn how to create a 2D puzzle game in Unity which uses a Portal-style game mechanic to teleport objects across the level. In this first part, we’ll lay out the main concepts of the game, put some graphics together, and get the basic (portal-less) physics working.
  
  Visit Article
- Beginner’s Guide to Powerflasher’s FDT 4
  
  Flash Professional isn’t the only tool you can use for making Flash apps and games. Earlier in the year we looked at FlashDevelop; now, we’ll take a look at FDT 4, a powerful IDE designed specifically for ActionScript, MXML and haXe development. Read on to find out what it can offer you!
  
  Visit Article
- WP101 Basix Training
  
  Welcome to the WPtuts+ WP101 tutorial series, the perfect beginning spot for those just getting started with WordPress! It’s also a valuable resource for designers & developers who are teaching your clients & colleagues!
  
  Visit Article
- Add Facebook Comments To Your WordPress Theme
  
  Facebook launched the social plugins for developers in 2010. You all know at least one of them, the “like” button that you see on lots of blog posts across the net (like this one, pardon the pun!) Today we are focusing on the Comments Box system. Adding Facebook comments allows the user to comment on your blog using his Facebook account. There is no need for him to enter his name and email address or even register an account on your site.
  
  Visit Article
- Using Custom Post Types to Create a Killer Portfolio
  
  Quite possibly the best addition to WordPress 3.0 was that of Custom Post Types. This took WordPress from being a CMS that can manage posts and pages to being able to manage anything the user can think of rather easily. You no longer have to add custom fields to posts- you can add high level support to your own types, creating their own theme page files and admin areas. One of the first things I did using custom post types was revamp my portfolio and today I’m going to show you how I did it!
  
  Visit Article
- Corona SDK: Create a Memory Match Game
  
  The Corona SDK makes game development for the iPhone, iPad, and Android easy. Corona uses the Lua programming language to create cross-platform apps. In this tutorial, we will explore how to create a memory match game with the Corona SDK.
  
  Visit Article
- Building a Jabber Client for iOS: Server Setup
  
  In this tutorial we will build a Jabber Client for iOS. The application developed in this series will enable users to sign in, add buddies, and send messages. In the process of building this app, we will describe how to install and configure a jabber server, create accounts, and interact with the server from an iOS application. To simulate a chat environment we will build a scenario with two users: one user will be chatting from an iPhone app and the other will be using iChat.
  
  Visit Article
- Building an iPad Reader for War of the Worlds
  
  This tutorial will use the Leaves open-source project to build a simple iPad reader for The War of the Worlds by H.G. Wells. Along the way, we’ll take a quick look at the code powering the Leaves project, discuss implementation details, and explore a few alternative options for achieving a similar effect.
  
  Visit Article
Thanks for Reading!

We love bringing you the latest and greatest tutorials each month, and would like to take this opportunity to say thanks for reading, subscribing, and offering your feedback. If you have any suggestions for tutorials, or Tuts+ in general, feel free to leave them below in the comments!

As ever, the best way to support the sites (and get your hands on superb, industry-leading tutorials) is to join our Premium program. It costs just $9 per month, and will be the best few dollars you ever spend! There’s also no risk, thanks to our 100% money-back guarantee.
Melissa and Jared Davidson says:

September 6, 2011 at 6:50 pm

In this tutorial we’ll show you how to animate an awesome explosion in Flash, which you could use for an cartoony action game. We take you from conception to completion, then show you how to export it as well as how to import it into other scenes.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: Choose the Type of Explosion You Would Like

Decide what kind of explosion would be best fitting for your scene. Is it a small explosion? A nuke? A 60′s Batman-esque, flashy, “WHAM”? In this case we will be doing a smaller explosion, but with experience you could do anything you want.

Step 2: Look for References

Once you know what you want to animate look for reference. The Internet is amazing for this because you can just search for movie clips related to what you’d like to do and carefully study them.

Step 3: Begin to Draw

Once you are ready grab a few pieces of paper and begin to draw your explosion. Animation is planned through keyframes, which are generally the most extreme parts of the animation which tell the rough story of how something is going to move. In this case, the first thing that you should be thinking about is the initial flash of light.

Step 4: Draw All the Keyframes

Next, draw the keys explaining how the smoke and light comes out of the bomb. You will at the very least want one where the smoke is first coming out of the light, then one when the smoke is at its largest and most extreme, and then a frame at the end. Here are our keyframe drawings, which illustrate this process:

Step 5: Draw All the In-Betweens

Draw the in-betweens for these frames. Basically, you are now drawing all of the frames which fit in the middle of these keyframes. We will include our sketches here for reference.

Step 6: Scan Your Drawings

At this point we scan all of our drawings so that we can trace them in Flash.

Step 7: Change the Basic Flash Settings

Open Flash and change your settings to whatever would be the best fit for your current scene. You can see all of your basic settings in the properties panel on the right hand side of the screenshot. In our case, we will be working at 550x500px and 24 frames per second, with a white background.

Step 8: Import Your Drawings

Next you should import all of your line drawings into Flash Pro’s Library. The Library is basically a place where all of the files that you are using in your animation are stored for safe-keeping. You can do this by going to File > Import > Import to Stage, then selecting all of your drawings and hitting Open.

After this they will appear all on the same keyframe, but if you select them all, right-click and hit “Distribute to Layers,” they will appear as seperate layers, all on the same keyframe. Then you can simply drag and drop individual keys into the right positions, either on their own layers on all on one layer, whichever you’d prefer.

Step 9: Draw Your Initial Lines

Add a new layer to your timeline, then begin to draw over your old lines using the Line tool. We generally do not bother using the brush tool because you end up with too many nodes on the lines which can make things extremely difficult to change in any way later. What you will basically need to do is draw lines using the line tool, then use the selection tool to manipulate the curve between the two points. (More Flash drawing tips are available here.)

Step 10: Convert Lines to Fills

Once the frame has been entirely traced with the line tool we select all of the lines, then go to Modify > Shape > Convert Lines to Fills. Occasionally there will be glitches where bits of the line disappear. If this happens then start off by selecting smaller chunks of the image, then eventually doing the whole graphic together. Once you do this you can then edit the line depth using the selection tool and clicking and dragging on the edges of lines.

Step 11: Color Your Drawings

Color in the lines using the paint bucket tool.

Step 12: Finish All of the Frames of Animation

Repeat Steps 9-11 until all of the frames are finished.

Step 13: Organize Your Animation

Select everything on a frame, hit F8 and turn it into a Symbol. Properly name it and it will appear in your library to be used and re-used at any time. Organization is really important while you’re animating. Things can get confusing fast if you don’t name and sort everything properly so please do so. You can even create folders in the library.

Step 14: Onion Skinning

One important tool which can really help you animate is the Onion Skin tool. With Onion Skinning you can easily view the frames closest to the one that you are editing so that you can tell right away if a piece of animation is going to work as planned or not. The Onion Skin button is located at the bottom of your timeline.

Step 15: Preview the Animation

To preview your full animation at any time, go to Control > Test Movie > Test. It will preload your whole animation and then show you exactly how it will look once exported.

Step 16: Export the Movie

When you’re ready to export just go to File > Export > Export Movie. Name it whatever you’d like, pick .swf from the drop down menu, and then hit save. Depending on the size of your animation you may have to wait a short while.

Step 17: Export as a GIF

Exporting .gif images is nearly the same. When you hit File > Export > Export Movie just pick .gif instead of .swf from the drop-down menu.

Step 18: Import your Animation into an Existing Scene

To import an explosion into an already exisitng scene, first open both scenes. Then, select all of the frames of the explosion animation on the timeline, copy all of the frames, and then hit Ctrl + F8. A dialogue will appear. Name the explosion, then save it as a Graphic. Hit OK. A blank screen should appear with no animation on it. Then click on the first frame of the new timeline and paste all of your frames. After this hit the “Scene 1″ button under the timeline but above the animation window to go back to your original timeline. Once you do this your animation should be in the Library. Select your animation in the library, right click and copy it. You will then be able to paste it into the library of any other FLA that you have open.

Step 19: Create a Movie Clip

Making movie clips is almost the same as what we described in the previous step. To create a movie clip, follow the instructions from the last step exactly, but pick “Movie Clip,” instead of “Graphic,” when you reach the dialogue after hitting Ctrl + F8. The difference between a Graphic and a Movie Clip is that the Movie Clip can be uniquely identified using ActionScript, which is the coding language that Flash uses to make games and interactive media. When the movie is compiled a copy is created from the library and transformed for the animation. The copy can be blurred, scaled, etc., during runtime, without having to create separate animations at design time, thus cutting down on the amount of computer memory needed and keeping the SWF file size small.

Step 20: Create a Sprite Sheet

To create a sprite sheet of your animation, first hit File > Export > Export Movie and select PNG sequence to create a set of PNG graphics, one for each frame. After they are created you can use any image editing software (such as Photoshop) to import them as a batch and then copy/paste them all into one larger image file.

Alternatively, you could make your Flash scene larger, make each frame of animation appear at once, and then move the individual images into place before exporting a single image.

Click to enlarge.

A third option is to use Keith Peters’s tool, SWFSheet.

We hope you enjoyed this tutorial! If you make an explosion with it, please share it in the comments
Michael James Williams says:

September 6, 2011 at 7:01 pm

Ready for another quiz? This month, it’s one for the Flash developers among you. Let’s see how well you know your Events…

Let’s Get Quizzy

Just So You Know…

This quiz was built with the jQuizzy Quiz Engine by Siddharth, ace reviewer for Envato. jQuizzy is available for purchase over on Codecanyon

Thanks also to Orman Clark and MediaLoot for their graphical contributions to the Activetuts+ Coffee Break Quizzes.

What Would You Like To Be Tested On?

If you’ve got an idea for an Activetuts+-related quiz subject, let us know in the comments!
Collis says:

September 6, 2011 at 7:42 pm

It’s kinda crazy to think, but our little internet startup, Envato, has been on the air now for five years. We started back in 2006 as four very enthusiastic and totally green entrepreneurs with a shoestring budget and a love of the web. Fast forward five years and while we’re hopefully a little less green, we’re still incredibly passionate about Education, Marketplaces and the web! It’s been an amazing time and we’d like to share a look inside our Melbourne HQ offices, some stats about Envato and a big thank you to the community.

Behind the Scenes

With such a big milestone, we thought it might be good to give an inside glimpse into our Melbourne HQ offices and some of the people that work here. So we invited a Melbourne film crew called Compulsive to come in and shoot a 3 minute video about Envato. I hope you enjoy it!

As you may know, we also have a large remote team working around the globe on our sites. Next year we’re hoping to gather all of Envato and as much of the community as possible for an epic meetup, but in the meantime if you’re curious to see who’s who, you can check out this little video from our remote staff meetup last year in Chicago.

Some Stats

Looking back at five years of exciting and sometimes exhausting Envato work, I put together some stats about Envato from our time online so far. In five years we have:
- Published over 10,000 tutorials and articles helping people learn everything from Photoshop to Freelancing
- Hosted over 300,000 items for sale on our marketplaces from WordPress themes to Stock Photos
- Showcased over 12,000 items of inspirational design, photography and a host of other creative mediums on Creattica
- Listed over 8,000 jobs on our freelance job board
- Reviewed and rounded up over 3,000 apps on our AppStorm network
- Launched 9 marketplaces, 11 tutorial sites, 9 blogs, 18 books, 7 bundles, 4 Regular Podcasts, and more social media accounts than you can poke a stick at
- Accumulated close to 1 million RSS subscribers and twitter followers
- Signed up almost 1 million marketplace members, 90,000 Creattica members, 50,000 FreelanceSwitch members, and 40,000 Tuts+ Premium subscribers
- Served up well over 1.5 billion pageviews across all our sites since inception
Holy toledo batman!!

Thank You

I can’t say thank you enough to all of you for supporting Envato all these years. Whether you are long-time user of the Marketplaces, Tuts+, AppStorm, FreelanceSwitch or Creattica, or just a casual visitor, we’re really proud that you stop in and use our sites. If you’re one of the thousands of contributors, authors, writers, and subscribers, we’re honored and humbled that you have helped us build this company and filled these sites with such amazing content. And regardless of who you are, we hope that we can continue to provide value and service to you for many more years to come!

On behalf of the whole team, thank you all!
Collis
CEO, Chief Tea Drinker and Web Designer Who Doesn’t Get to Design Anymore
Envato

P.S. If you’re not all video’d out, you can check out this video of one of our early Envato staff
James Tyner says:

September 6, 2011 at 7:57 pm

In this tutorial, available exclusively to Tuts+ Premium members, you’ll learn to build a card-matching game, in Flash, that uses Flickr as the source of its images. The first part of this two-part series will get you started, leaving you with a basic game structure that you can improve on later.

Become a Premium member to follow this awesome tutorial, as well as hundreds of other advanced tutorials and screencasts.

Preview

Here’s what you’ll create in this part of the tutorial:

In the second part of the series, you’ll add multiple levels and improve the interface, ending up with this:

What You’ll Learn

Naturally, you’ll learn how to search for and retrieve images from Flickr, so that you can use them in other apps and games. But since this tutorial explains how to build a Pairs game from scratch, you’ll also learn about game logic (such as how to detect a match) and interface tweaks (such as the way the cards “flip” over when clicked).

Active Premium Membership

We run a Premium membership system which costs $9 a month (or $22 for 3 months!) which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium and Photo Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
Michael Plank says:

September 6, 2011 at 8:41 pm

Flash Professional isn’t the only tool you can use for making Flash apps and games. Earlier in the year we looked at FlashDevelop; now, we’ll take a look at FDT 4, a powerful IDE designed specifically for ActionScript, MXML and haXe development. Read on to find out what it can offer you!

FDT’s Great Timesaving Features

The difference between FDT and the Flash Professional code editor or other tools is that it offers tons of timesaving features that let you concentrate on the logic of your code, so you don’t have to bother with syntax problems like a missing closing bracket or a misspelled function call. Like a spell checker, FDT gives you instant feedback about your code and identifies problems before you even compile the project. Before we install and start working with FDT I’d like to give you a taste of some of its most exciting features.

Code Completion

The most important feature of FDT, that you will probably use most often, is code completion, also called auto completion. You will never have to type in the whole name of a variable or function again. Simply start writing and hit CTRL + Space to bring up the list of proposals. You can change the auto completion behavior to be triggered on every keystroke (like FlashDevelop does) by going to Preferences > FDT > Editor > Code Assist and turning on “Every Key”.

Continue typing to narrow down the list of choices. Use the mouse to select a proposal from the list or use the “Up” and “Down” arrow keys followed by pressing “Return”. You can also use “camel case auto completion” — for example, someMovieClip.gap will offer the function gotoAndPlay().

Quick Fixes

My favorite feature of FDT is using its Quick Fix functionality. FDT will not only immediately tell you what is wrong in your code, but also gives you the option to fix it automatically by inserting the missing code. If, for example, you call a function that is not yet available, FDT will add an error marker on the left of that line. The yellow light bulb indicates, that there is a Quick Fix available for this problem. Hit CMD/CTRL + 1 and check out the proposal in the Quick Fix popup:

FDT offers you to create the function sayHello(). Hit “Return” and FDT will automatically insert the function. Use the “Tab” key to cycle through the code statements surrounded by the blue rectangles and change them. Again hit “Return” to finish the Quick Fix procedure.

This feature is not only great for fixing problems with just a few keystrokes, but will also change your coding workflow. You will start forcing problems to make use of a Quick Fix!

Organize Imports

Using the shortcut CMD/CTRL + SHIFT + O or choosing Source > Organize Imports from the menu will add all missing import statements at the top of the class. You don’t have to add any imports manually any more. The nicest thing about FDT’s Organize Imports feature is that it will also remove unused imports automatically.

Color Chooser

I’d like to have a purple label in my Flex app, but what hex color code does purple have? Without having to switch to Flash Pro or Photoshop you can simply use FDT’s color picker to choose a color. Put your cursor over the hex code and activate Quick Fix (CMD/CTRL + 1). Choose “Select color” and use the color picker.

Code Templates

As a developer you find yourself typing in recurring code snippets over and over again, like a “for loop” for example. In FDT we can simply use code templates for that. Type in fori, use auto completion (CTRL + SPACE) and select “fori – iterate over array”. This will insert the code snippet for you. Make changes by using the “Tab” key and press “Return” to finish.

To browse through the code templates that are shipped with FDT go to Preferences > FDT Editor > Templates. This is the place where you can also create your own templates! Just take a look at the other templates and you will quickly learn how to create them and use the powerful variables to make them even smarter.

Refactoring

FDT has two great refactoring features: Move and Rename. If you want to move a class to another package, you normally need to change the import statements in all classes that use it. Move refactoring in FDT takes care of this automatically. Simply drag and drop the class from one package to another in the Flash Explorer and FDT will take care of the rest.

If you want to rename a class, function or variable, simply use the Rename refactoring feature (ALT + SHIFT + R). FDT will change the name everywhere in the whole project.

Code Navigation Features

Navigating through your source code is especially important in large projects. Here are some of the most important shortcuts to navigate:
- F2 – Show Class in Flash Explorer
- F3 – Open declaration
- Alt + (CMD) + Left Key – Jump back in History
- CMD/CTRL + T – Quick Type Hierarchy
- CMD/CTRL + O – Quick Outline
- CMD/CTRL + R – Search for References
The FDT Community

FDT started out as the first professional ActionScript 2 editor in 2004. There’s a huge and very active community around FDT, that contributes tutorials, blogs about using the new features that are constantly added, helps out on Twitter and posts feature requests and bug reports. The FDT development team gives back this love to the community by listening to their requests and integrating community tools like Joa Ebert’s Apparat or haXe.

To become part of the FDT community check out the Blog and follow FDT on Twitter or Facebook.

Installing FDT 4

Installing FDT is straight forward. Follow these 3 steps to set up your FDT development environment:
1. Download and install FDT
2. Download Flex SDKs
3. Install Debug Flash Player
To install FDT simply go to http://fdt.powerflasher.com and navigate to the download page. Select one of the installers for Windows, Mac or Linux. If you want to try FDT and don’t have a license yet, fill out the form above to register for a 30 day trial license. After downloading follow the instructions to complete the installation.

FDT is distributed without any Flex SDK. The Flex SDK is basically a folder that contains compilers, core classes and other tools to compile your Action Script and Flex code to a SWF. You can develop both pure Action Script projects as well as Flex projects using Adobe’s Flex SDK. Go to Adobe Open Source and download the SDKs you want to use in FDT. After downloading and unzipping the SDKs go to FDT > Preferences > Installed SDKs and click the “Add” button to add a Flex SDK.

In order to debug your Flash applications using FDT’s visual debugger, you need to make sure that the Debug Flash Player is installed on your system. Go to Adobe Flash Player Download:
- Mac: Download and install Flash Player Plugin content debugger
- Windows: Download and install Flash Player Active X control content debugger as well as Flash Player Plugin content debugger
Congratulations, you’ve successfully set up your FDT development environment and can now start coding!

The FDT Workbench

Click to enlarge
- Toolbar (top): Find the most important actions like creating new files or compiling your application in the toolbar
- Flash Explorer (left): This is where you will organize your projects, files and folders
- Outline (left): A list of properties and functions of the currently opened class
- Editor (middle): If you open a file, it will be displayed in the editor area
- Problems (bottom): A list of problems and warnings in your source code
The panels described above are called “Views” in FDT. You can close views, minimize them or rearrange them by simply dragging a view to a different location. If you would like to reset the views to their default positions go to Window > Reset Perspective. To open additional views go to Window > Show View and select the one you are missing. Views are grouped into so called “Perspectives”.

Choose Your Workflow

FDT can be integrated into every Flash/Flex development workflow, whether you want to use FDT in combination with Flash Pro, use FDT without any other tool, or use FDT as a code editor for Flash Pro. This chapter describes those three popular workflows which are most commonly used by Flash developers.

Workflow 1: FDT Only

In this workflow we will use FDT as a standalone tool to develop Flash/Flex projects. You don’t even have to have Flash Pro or the Adobe Creative Sweet installed. We will just use FDT to write code and compile it to a SWF.

Creating a New Project

Start by right clicking somewhere in the Flash Explorer and select New > New Flash Project. The “Flash Project Wizard” appears.

This wizard let’s you choose from a list of project templates for web, mobile and desktop. We will create a pure Action Script project at this time. Type in the project name “HelloFDT”, select Web > AS3 and click on “Finish”.

In the Flash Explorer on the left hand side we now see the created project with some files and folders. Double-click the Main.as class in the src folder to open it.

FDT stores some project specific settings in the .settings folder and in the .project file. Because you shouldn’t touch those files let’s hide them by clicking on the small down arrow in the top right corner of the Flash Explorer and selecting “Filters”. Now check the “.*” filter and hit “OK”. The .settings folder and the .project file should now be hidden.

Testing and Compiling the Project

Let’s add some lines of code before we compile our project:
```
package
{
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		public function Main()
		{
			graphics.beginFill(0x0000ff);
			graphics.drawCircle(100, 100, 40);
			trace("Hello FDT");
		}
	}
}
```
To compile and debug our simple application, right-click the Main.as class in the Flash Explorer and select Debug As > FDT SWF Application. After the compilation finishes successfully, FDT will launch your application using the “External SWF Viewer”. Take a look at the “Console”; you should also see the “Hello FDT” trace statement there. (If you don’t see it, make sure you have the Debug Flash Player installed.)

Embedding Assets

In order to embed an asset like a JPEG image into our SWF we can use the [Embed] Metadata Tag. First of all create a new package named assets in the src folder and drag an image from the Finder/Explorer to the assets package.

Now we can use the following lines of code to embed the JPEG into our SWF and display it on the stage:
```
package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		[Embed(source="assets/image.jpeg")]
		private var ActiveTutsLogo : Class;

		public function Main()
		{
			var logo:Bitmap = new ActiveTutsLogo();
    		addChild(logo);
		}
	}
}
```
We can now use the Debug or Release button in the Toolbar on the top to launch our application. They will always launch the previously launched application. Debugging your application using breakpoints and trace() statements only works if you choose Debug.

After compilation has finished you should see your SWF with the embedded image. Congratulations!

Workflow 2: FDT with Flash Pro Assets

This workflow is ideal if you are working together with a designer, who creates graphics and animations in Flash Pro, while you are adding the logic using ActionScript. In this workflow, we will create an animated MovieClip in Flash Pro and control it using ActionScript in FDT. These are the steps:
- Setup and prepare the project in FDT
- Create a new FLA file and an animated MovieClip in Flash Pro
- Export the FLA as SWC library file
- Instantiate and control the MovieClip using AS3 in FDT
Setting Up the Project in FDT

Let’s get started! First of all we will create a new Flash project in FDT. To do so, please follow the exact same instructions as described in Workflow 1: FDT Only > Creating a New Project. As project name I will use “FDTwithFlashPro” this time.

Creating the FLA and a MovieClip

In this example I will create a very simple key frame animation with a bouncing ball. Launch Flash Pro and create a new Flash File (ActionScript 3). Select Insert > New Symbol from the menu. Enter the name BouncingBall and check the “Export for ActionScript” check box. If you don’t see the check box, click on the “Advanced” button.

Don’t forget to check the “Export for ActionScript” check box, otherwise we will not be able to use this asset later on. Next up, I’ll create a simple key frame animation to let the ball bounce. It should look like this. (Basically you can create whatever animation you like in this step; it doesn’t have to be a bouncing ball).

Now it’s time to save the FLA. Go to File > Save As and select the libs folder from the previously created FDT project. Choose Assets.fla as filename and hit “Save”. To use the animated ball MovieClip within our FDT code project, we need to export the Flash Pro Project as a SWC library file. Let’s do this by going to File > Publish Settings and find the “Export SWC” checkbox in the publish dialog. Click “Publish” and Flash Pro will generate the SWC file for you.

Using the MovieClip in FDT

Now let’s switch back to FDT. Our project should look like this:

Notice that if you expand the Assets.swc library, you’ll see the BouncingBall MovieClip class included in that library. This is a great feature of FDT, which lets you inspect a SWC library to see which asset classes it contains.

The final step of this workflow is to instantiate the bouncing ball animation and add it to the stage. Open the Main.as class and insert the following lines of code:
```
package
{
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		public function Main()
		{
			var bouncingBall:BouncingBall = new BouncingBall();
			bouncingBall.y = 200;
			addChild(bouncingBall);
		}
	}}
```
That’s it! Hit the “Run” button and you should see the bouncing ball on the stage.

Workflow 3: FDT as Flash Pro’s Code Editor

The last workflow I want to show you is using FDT as a code editor for a Flash Pro project. You will write code in FDT but compile your project using Flash Pro. FDT has a great feature to automatically switch to Flash Pro and start compilation with just one click. We’ll have a look at this little timesaver as well.

Setting Up the Project in FDT

Again, we will start by creating the project in FDT. Simply go to New > New Flash Project and select Web > Flash Professional from the list of project templates. Set the project name to “FDTforFlashPro” and click “Finish”

FDT needs to know the location of your Flash Pro installation. Go to Preferences > FDT > Tools > Flash and set the path to your Flash Pro installation by clicking the “Browse” button. Select your copy of Flash Pro and close the preferences window. Next open the Main.as class and add a trace statement to the constructor like trace("Hello Flash Pro"). Now double click the FDTforFlashPro.fla file from the Flash Explorer to open it. Notice, that the Main class is already set in the Properties panel in Flash Pro. You can click on the pencil button to verify that the class really exists.

The Main class is in place, so we can now launch the project in Flash Pro by selecting Debug > Debug Movie from the menu or by using the shortcut. In the output panel of Flash Pro you should now see the trace output:

Great, now we can switch back and forth between FDT and Flash Pro. Write some lines of code in FDT, add classes and logic and switch to Flash Pro to create the assets and debug the project.

Launching From Within FDT

To enhance this workflow, there’s a great feature in FDT, which let’s you switch to Flash Pro by just hitting the “Run” button from within FDT to compile and debug the project. In FDT select Run > Run Configurations from the menu.

In the Run Configurations panel double click the “FDT Flash IDE” entry from the menu on the left. This will create a new empty configuration. Now simply set the project and the FLA file using the “Browse” buttons and select TestMovie. That’s it, hitting the “Run” button will switch to Flash Pro and will launch the project! From now on, you can simply hit the “Run” button in the FDT menu bar to launch your project in Flash Pro.

Next Steps

If you want to learn more about FDT and it’s features visit the FDT Docs page. You will find a great number of tutorials, videos, shortcuts, project templates and a lot more there. Happy coding!
Daniel Branicki says:

September 6, 2011 at 9:04 pm

It’s time for another excellent Active Premium tutorial exclusively available to Premium members. At the end of the second part of this series, we had just about got the portals to hide part of the Roly character that was inside them. In this part, we’ll make the portals actually teleport the character.

Preview

Let’s take a look at the final result we will be working towards, across the whole of this multi-part tutorial:

Please view the full post to see the Unity content.

Hit the number keys 1-8 to try different levels. The aim is to get the little yellow Roly character to the designated end point, using portal mechanics. The demo shows off a few of the different mechanics we’ll introduce.

Click here to see how far we’ll get by the end of this part.

Warning: this tutorial is huge! It’s as long as the first and second parts of the series combined.

Active Premium Membership

We run a Premium membership system which costs $9 a month (or $22 for 3 months!) which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium and Photo Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
Eugene Potapenko says:

September 6, 2011 at 9:11 pm

In the previous post about Realaxy Editor we spoke about the Traits language, which lets you take advantage of multiple inheritance. Now we turn to another noteworthy opportunity: operator overloading.

Realaxy ActionScript Editor (RASE) is available here (for Windows, Macintosh OS X, and Linux). Note: if it is your first experience with the editor, please read the RASE how-to.

Intoduction

One of the major features added to the RASE beta 10 is operator overloading support, allowing developers to change how the operators (*, +, etc) behave in different circumstances. This feature, as well as multiple inheritance, is an object of a holy war between ardent supporters of two different programming paradigms.

The advantages of overloading operators are obvious:
1. Compact style. Your programs might become shorter and more readable; for example, it's much easier to use something like a*b*c than a.multiply(b).multiply(с).
2. Code often looks more natural. Well defined operator is easier to understand and remember than the name of function a function name. For example, combining two variables of type Point you would prefer to see something like point1 + point2, but not point1.plus(point2).
The real argument against operator overloading is the losing of the control over your code. It is unclear, sometimes, where an operator is overloaded, and where it is not. Adding an overloaded operator invokes changes in the behavior of existing code that might lead to some unexpected consequences.

Operator overloading is not included in ActionScript (ECMA3) even though it is proposed for Standard ECMA4. Java does not support operator overloading but both Groovy (“Java with syntactic sugar”) and Scala do. Furthermore, C#'s operators may be overloaded.

One cannot say whether it is a good or bad thing. However, it is also practically assured that sometimes it is a virtual must-have. For example, when chaining multiple mathematical operations, operator overloading really makes code much more concise, thus improving your understanding of the way it works. But enough theory — let's refer ourselves to practice.

We talk about a language extension overloadedOperators that was introduced in RASE since Beta 10 (build 8145+).

An easy way to import it (or any other language) to your project is to press Ctrl+L (Cmd+L) within Realaxy Editor.

By the way, overloadedOperators in RASE is just a port of the overloadedOperators language from the Jetbrains MPS platform. We just decided not to reinvent the wheel and after investigating the target application domain, came to the conclusion that the Jetbrains solution appears to be sufficient, and meets all our needs. We have added some small bonus features from us.

We believe, that this is the right way of the Language Oriented Programming that takes the best from other languages and customizes it for own needs. Read more about this later in our forthcoming articles on the creation of language extensions.

Step 1

Create a new project with a module inside.

Step 2

Call the new root “operators”.

Step 3

Add some code for testing to the main class.

Here we have created two variables, p1 and p2 (type Point). Now we’d like to get a third variable, p3, which would be a result of combining these two points.

Output these three values: p1, p2, p3. We used expression values from language logging in order to implement the string message for the console output.

Our code provokes an error message: “Operation can't applied to these operands”. Compiling is impossible.

Step 4

Let’s declare the operator overloading. Import com.realaxy.actionScript.overloadedOperators.

Step 5

Add a new “OverlodedOperatorsContainer” root: right-click on the package node and choose from a pop-up menu.

Step 6

Name it “MyOperators”.

Here we see two declaration blocks: “overloaded binary operators” and “custom operators declarations”.

Step 7

Move to the first block and press Enter. A new operator declaration is added.

Step 8

Choose “+” operator. Choose type Point for both sides. Set return value Point (change it from default “void” setting).

Now we can add a code that would be executed on combining Point with Point (using “+” operator).

That’s all.

The red highlight that indicated an error in our class has disappeared.

Step 9

Start compiling.

Step 10

Create run-configuration for our module.

Step 11

Assign the main class (if you had not done it earlier).

Step 12

We get the following message on the console:

Step 13

Now let’s try to complete a slightly more sophisticated task and re-define operations of subtraction, multiplication, and division. For both Number and Point.
```
operator + (Point, Point) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x + right.x, left.y + right.y);
}

operator + (Point, Number) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x + right, left.y + right);
}

operator - (Point, Point) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x - right.x, left.y - right.y);
}

operator - (Point, Number) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x - right, left.y - right);
}

operator * (Point, Point) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x * right.x, left.y * right.y);
}

operator * (Point, Number) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x * right, left.y * right);
}

operator / (Point, Point) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x / right.x, left.y / right.y);
}

operator / (Point, Number) -> Point
commutative: false
(left, right)->Point {
  return new Point(left.x / right, left.y / right);
}
```
Step 14

Imagine that you need to calculate a point that is located to the left and down by 50 pixels from the center of the distance between the two points.

This is simple:

Or even simpler:

But don’t forget that in a Flasher’s real life it would be like this:

Compare these figures. It’s good enough reason to use operator overloading in ActionScript projects.

Step 15

Now let’s learn how to create our own custom operators.

First, return to MyOperators declaration and go to custom operators declarations.

Press Enter to create a new declaration. Visual presentation would be ~=.

Step 16

Our custom operator has to check a string for matching a regular expression. To describe such operator’s behavior we add a new overloading, just like we have done it 10 minutes ago with Point. The only difference is adding ~= to autocomplete.

The left operand must pick up a String, while the right one must be RegExp. Returning value should be Boolean.

Then add some code that would be executed by our operator, calling test method from the value.

Step 17

Create a test operation in Main () to see how it works:

Fast and easy.

To avoid confusion in all these custom operators, you should memorise a single keyboard shortcut related with navigation: Ctrl-B (or Ctrl+click on an operator) will lead you to operator’s declaration.

A good hint: to make a difference between reloaded operator and a built-in one, hover a mouse on it and press Ctrl.

Of course, if you’re on a Mac, use Cmd instead of Ctrl.

Step 18

Let’s extend the behavior of our custom operator with a new feature, commutativity.

Select the operator and press Alt-Enter. Choose Flip Binary Operation from a pop-up menu. This will swap the two sides, however with an error message, because ~= operator is not yet defined for such operands.

Proceed to operators declaration. Set commutative = true. The red error highlight should disappear (sometimes you should press F5 to refresh a view).

In other words, this “commutative” setting is a good old rule that changing the order of summands doesn't change the sum. Now, our ~= operator will still work if we put the RegExp before the String.

Word of Warning

OOP gurus warn against overusing this behavior. Sometimes, it involves unexpected effects. Let’s take it on faith and remember it.

That's all there is to it. We have operator overloading in ActionScript 3.

About Our Site:

Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more

Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!

May 2012
M	T	W	T	F	S	S
« Apr
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Final Result Preview

Step 1: Choose the Type of Explosion You Would Like

Step 2: Look for References

Step 3: Begin to Draw

Step 4: Draw All the Keyframes

Step 5: Draw All the In-Betweens

Step 6: Scan Your Drawings

Step 7: Change the Basic Flash Settings

Step 8: Import Your Drawings

Step 9: Draw Your Initial Lines

Step 10: Convert Lines to Fills

Step 11: Color Your Drawings

Step 12: Finish All of the Frames of Animation

Step 13: Organize Your Animation

Step 14: Onion Skinning

Step 15: Preview the Animation

Step 16: Export the Movie

Step 17: Export as a GIF

Step 18: Import your Animation into an Existing Scene

Step 19: Create a Movie Clip

Step 20: Create a Sprite Sheet

10 Responses to “Animate a Cartoon Explosion With Flash Professional – Basix”

Step 1: Being Bad

Step 2: Breaking It Down

Step 3: The Root of the Problem

Step 4: Fixing the Hole

Step 5: Callbacks

That Is All

Final Result Preview

Step 1: What is Meant by “Isometric”

Step 2: What Does Tile-Based Mean?

Step 3: Rectangular Maps vs. Isometric Maps

Step 4: Isometric Map Types

Time to Code

Step 5: Downloading As3isolib

Step 6: Setting Up the Scene

Step 7: Making the Buttons

Step 8: Creating the Tabs

Step 9: Implementing Our Tabs

Step 10: Creating the Isometric View

Step 11: Cartesian vs. Isometric Space

Step 12: Creating the Scene

Step 13: Creating the Grid

Step 14: Rendering the Scene

Step 15: Implementing the Bottom Panel Buttons

Step 16: Viewport Panning 1

Step 17: Viewport Panning 2

Step 18: Viewport Panning 3

Step 19: Viewport Zooming

Step 20: Creating the Objects Panel

Step 21: Creating the Solid-Colored Objects

Step 22: Creating the Brick Objects

Step 23: Creating Texture Assets

Step 24: Importing Texture Assets

Step 25: The Objects’ Mouse Roll Functions

Step 26: Handle Clicks on the Objects

Step 27: Drag and Drop 1

Step 28: Drag and Drop 2

Conclusion

Cgtuts+ — Computer Graphics Tutorials

Psdtuts+ — Photoshop Tutorials

Nettuts+ — Web Development Tutorials

Vectortuts+ — Illustrator Tutorials

Webdesigntuts+ — Web Design Tutorials

Phototuts+ — Photography Tutorials

Aetuts+ — After Effects Tutorials

Audiotuts+ — Audio & Production Tutorials

Activetuts+ — Flash, Flex & ActionScript Tutorials

Wptuts+ — WordPress Tutorials

Mobiletuts+ — Mobile Development Tutorials

Thanks for Reading!

Final Result Preview

Step 1: Choose the Type of Explosion You Would Like

Step 2: Look for References

Step 3: Begin to Draw

Step 4: Draw All the Keyframes

Step 5: Draw All the In-Betweens

Step 6: Scan Your Drawings

Step 7: Change the Basic Flash Settings

Step 8: Import Your Drawings