Sep 3, 2011
Posted on Sep 3, 2011 in Hints and Tips | 10 comments
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:
- Download and install FDT
- Download Flex SDKs
- 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!
View full post on Activetuts+
Sep 2, 2011
Posted on Sep 2, 2011 in Hints and Tips | 10 comments
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!
View full post on Activetuts+
Sep 1, 2011
Posted on Sep 1, 2011 in Hints and Tips | 10 comments
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 
View full post on Activetuts+
