Install Flash Player 11 Beta 2

To view Flash Stage 3D content, you will need to install the beta version of flash player 11.

• Download and install Flash Player 11 Beta 2.

Setup FlashDevelop 4 with Flex 4.5 and Away3D 4

To publish Flash Stage3D content, you will need the new Flex 4.5 SDK. In my case, I will be using FlashDevelop 4 and Away3D 4.

• Download and install Java runtime.

• Download and install FlashDevelop 3.3.4

• Download and extract Flex 4.5 SDK. When you installing FlashDevelop 4, It will give you an option download this SDK too.

• Download and extract Away3D Core FP11

• Download flashplayer11_b2_playerglobal_080811.swc and rename it to playerglobal.swc

• Copy playerglobal.swc to [Flex 4.5 SDK Path]frameworks>libs>player>11.0 folder. FlashDevelop 4 will create this folder for you when setting up, if not create the folder and put the SWC here.

• Download and extract Away3D Core FP11 Examples

• Launch FlashDevelop and start a new AS3 Flex 4 Project. Set your project folder to Away3D examples folder you extract earlier. A warning message about folder not empty and template files will pop up, click OK to copy them. FlashDevelop will then generate the index file for you.

• Go to Tools>Program Settings>AS3 Context>Installed Flex SDKs. Fill in the location where you extract Flex 4.5 SDK.

• Go to Project>Properties>Class Paths. Click Add Class Path and browse to the location where you extract Away3D 4. Remember to target the sub folder name src, not the main folder.

• Go to Project>Properties>Output>Platform. Make sure it is Flash Player 11.0.

• Go to Project>Properties>Output>Test Project. Select Open document from dropdown list. Click Edit button and type bin\index.html

• Go to Project>Properties>Compiler Options>Additional Compiler Options. Key in -swf-version=13

• Done. Right click on any of Away3D example source files which can be found at src folder, choose Set Document Class, compile and profit!

The Tower of Hanoi or Towers of Hanoi is a mathematical game or puzzle. It consists of three rods, and a number of disks of different sizes which can slide onto any rod. The puzzle starts with the disks in a neat stack in ascending order of size on one rod, the smallest at the top, thus making a conical shape. The objective of the puzzle is to move the entire stack to another rod.

Game rules

The description from wiki might sound confusing, but the game is actually quite simple. Let’s look at the pictures that I quickly draw. The game start with 3 rods, A,B and C. Initially, all disks are stack on rod A, and you have to move all the disk in ascending order on rod C to win.

Of course, there are few criteria or rules when moving the disk around. First, only 1 disk can be move at a time. Second, only the top most disk can be move. Third, disk can only be placed on top of a larger disk.

Gameplay Programming

After looking at the game rules, you will find out that how easy the game logic can be script. Use 3 arrays to represent the 3 rods, which contain list of values that represent all the disks. The bigger the disk, the larger the number (or the other way round, depend on how you do the condition statement later). Then, use array/stack PUSH and POP function to “move the disk around”. In this case, the PUSH and POP function work exactly like what we want, removing and adding items from the top of the array/stack. Last, just do a condition check to see if a disk can be move on to another rod base on target rod top most disk size. To check the top most disk size, just POP it.

Recursive Solution

The puzzle can be solve by using a recursive function using the following algorithm. Assume N equals to total number of disks.
STEP 1) move DISKS N−1 from A to B.
STEP 2) move DISK N from A to C.
STEP 3) move DISKS N−1 from B to C.

Play The Game

You can play “Tower of Hanoi” in my labs page. I have include the recursive puzzle solving function as well.

Download

If anyone is interested, here is the Flash CS4 source files. Code might not be most optimized and tidy, but can be a good starting point for your project. This source is without graphics and music.
Tower of Hanoi FLA Source – 20KB

Reference

Tower of Hanoi Wikipedia Entry
Recursion: Towers of Hanoi

Adobe just released Flash Player 11 beta 2 earlier this month and their “Molehill” 3D API is now known as “Stage 3D“. This blog entry is not applicable now, so please refer to my new blog entry about this topic FlashDevelop Stage3D Away3D.

Install Flash Player Incubator

To view Flash Molehill content, you will need to install the alpha version of new flash player.

• Download and install Flash Player Incubator

Setup FlashDevelop with Flex Hero Framework and Away3D

To publish Flash Molehill content, you will need the new Flex Hero SDK. In my case, I will be using FlashDevelop and Away3D.

• Download and install Java runtime.

• Download and install FlashDevelop 3.3.4

• Download and extract Away3D Version 4.0.0 Alpha (Broomstick).

• Download and extract Flex HERO SDK build 4.5.0.19786.

• Download flashplayer_inc_playerglobal_022711.swc and rename it to playerglobal.swc

• Copy playerglobal.swc to [Flex Hero SDK Path]frameworks\libs\player\10.1. You will need to create the 10.1 folder

• Launch FlashDevelop and start a new AS3 Project. You can set your project folder to Away3D examples, if you downloaded them.

• Go to Tools>Program Settings>AS3 Context>Flex SDK Location. Fill in the location where you extract Flex Hero SDK.

• Go to Project>Properties>Class Paths. Click Add Class Path and browse to the location where you extract Away3D 4.

• Go to Project>Properties>Output>Platform. Change Target to Flash Player 10.1.

• Go to Project>Properties>Output>Test Movie. Select Open document from dropdown list. Click Edit button and type in FlashDevelop output location, usually bin\index.html

• Go to Project>Properties>Compiler Options>Additional Compiler Options. Key in -swf-version=13

• Add wmode: “direct” parameter for swfobject in the output HTML which usually at [Project Path]bin\index.html. Software fallback will be used if you do not include this parameter.

• Done. Right click on any of Away3D example source files which can be found at [Project Path]src, choose Always compile and GO!

Problem?

• If you get error message like Type was not found or Call to a possibly undefined method. In FlashDevelop, open the libs folder in the project file list, right click and select Add To Library for both lib_simplegui.swc and MinimalComps_0_9_9.swc
• If you get an error about LZMA Decoder, download it here. Then extract it to [Project Path]libs. In FlashDevelop, select apparat-lzma-decoder-1.0-RC9.swc in the project file list, right click and select Add To Library.
• If you cant view the MD5 and MD2 examples, most probably the assets path is wrong. Just copy the assets folder from [Project Path]srcassets to [Project Path]bin

Quick Sketch

Before drawing anything, I always try to visualize on how the final artwork going to look like. Some peoples will start to do rough sketch to generate ideas. Some peoples will look for references. So, it depend on what work best for you. After getting a brief idea, I will then do a quick sketch to see if I am happy to proceed with it.

If I can see where I am heading to with it, I will clean up and refine the lines of the sketch. The lines doesn’t need to be super clean as we are just using it as guidance to trace the image into vector format.

Tracing

Most people will use Illustrator for vector tracing, but I am doing it in Flash. If you are doing it for print, you should trace it in Illustrator since that the standard file format for printing. Beside that, I will also lower down the opacity of the sketch and use a blue color line while tracing. This make it easier for me to see the vector line.

Base Color

After finish tracing, I start to put in the base color for the vector. For a color blind person like me, I always use reference images for color scheme. In this case, I google some pipit bird photos and use color picker to pick the color from it.

Outlines

Some people prefer vector art without outlines, some prefer dark bold outline. There is no wrong or right, it is just different style of vector art. In this artwork, I will proceed with a bold black color outline. It still look a bit ugly in this stage, but will start to look way better after the next step.

Highlight and Shadow

Some vector art skip this step completely. But for the type of vector art I am doing, it always look better with the shading. In this case, I imagine there is a light source on top left, so everything will be brighter on top left, darker on bottom right. With this two band of color shading, the artwork will start to look a bit like cell shaded 3D.

Optional step

We can always import our artwork into Photoshop to do some final touch up although it won’t be a pure vector art anymore. In my case, I added the wood texture background, frame the artwork inside polaroid image and did some color adjustment. I can still do the background and polaroid in vector, but for what? Adding them in Photoshop look way nicer.

I didn’t really go deep into each of these steps but I will try to do a more detail tutorial soon. In the mean time, I hope you will learn something from this brief tutorial.

Introduction

FlashDevelop is an open source script editor which primary use for editing ActionScript (Can be use for XML, HTML, CSS… etc as well). Flex is a free open source framework use for compiling Flash SWF. Both of them are free and open source, so it is good for those who want to learn ActionScript without purchasing Adobe Flash.

Steps to Setup

Below is a brief steps on how to setup FlashDevelop with Flex Framework.

• Download and install Java runtime.
• Download and install FlashDevelop.
• Download and extract Flex SDK.
• Launch FlashDevelop.
• Go to Tools>Program Settings>AS3 Context>Flex SDK Location. Fill in the location where you extract flex SDK.
• Go to Tools>Program Settings>Flash Viewer>External Player Path. Fill in the location of the debug Flash player 10. It is include in the flex SDK package in this location \runtimes\player\10\win.
• Done. You can compile flash10 stuff now. Just create a new project, and edit the Main.as in the src folder

Different Flex Framework Version

You can use different version of Flex Framework for different projects. Just set a custom path in the project properties at

• Project>Properties>Compiler Options>Custom Path to Flex SDK

This will be useful to test if your project got screw with a new Flex SDK release without affecting other projects.

Using Preloader

If you want a preloader in your AS3 project, just start a new project and choose “AS3 Project with Preloader“. You will want to add in your own script inside the “progress” function. You can check how many percents of content are loaded by using the following script.

percent = e.bytesLoaded / e.bytesTotal * 100

Free Adobe Flash Builder 4 Standard

Actually Adobe is providing free copies of Flash Builder 4 Standard to students, event attendees, and people who are jobless now. You can get your copy in this page.