Project Snow Fight

Another internal case-study project of Pyco Flash team to research multiplayer game with Red5. This is a 2D top-view real-time shooting game whose gameplay is similar to CS2D – you control your character moving round with WASD keys and aim and shoot with your mouse. The game showcases real-time synchronization among clients in a precision and fast-pace environment. The team have learnt a lot from the book ActionScript for Multiplayer Games and Virtual Worlds and apply what we learnt successfully to this game.
I designed and proposed the game concept and detailed requirements. I also joint to develop the character control and foundation of client-server synchronization.
My roles: system designer, technical supporter
Tech notes:

• Pyco Flash Framework – based on PureMVC
• Red5
• TweenMax
• Realtime multiplayer synchronization

Click here to try the game. (Because this is a multi-player game, make sure you invite your friends to join).
 

Flash Camp Hanoi 2010

The young and energetic people

It was great honor for me to be invited to the first Flash conference in Viet Nam, Flash Camp Hanoi 2010. The event is a proving fact that Flash/Flex users community in Viet Nam has grown up and stronger than ever. All details and stories can be found at the official website: flashcamphanoi.com.vn 

(Update: the server is temporarily down, please access the overview article on groups.adobe.com or view the event photos on FCH Facebook page)

Me on stage

I brought to the event the presentation about FLARToolKit and augmented reality in Flash. The slide deck (with links to online demos) has been uploaded by the organizer on slideshare.net.

Presentation: Introduction to TDD & FlexUnit

This is a summary of what I studied and practiced with TDD & FlexUnit. This presentation is not for persuading developers applying unit testing but it will highlight benefits & vulnerabilities of TDD objectively.

[Vietnamese tag: Bài thuyết trình về FlexUnit và mô hình phát triển phần mềm dựa trên kiểm thử / kiểm tra]

Using Flash Builder 4 on Ubuntu

So, Adobe has discontinued its Linux version of Flex Builder. That’s sad news for us. Anyway, it doesn’t change much since Linux users already have alternatives long before, e.g. FDT, IDEA. Besides, I have been able to run Flash Builder 4 on my Ubuntu (via Wine) for a while to take advantage of its mxml coding hinting and the unique design view. Let me share some of my experiences of using Flash Builer on Ubuntu so far.

Quick AS3 Language Reference Search with Google Chrome’s custom search engine

ActionScript 3 language reference document is any Flash developer’s bible. Whenever you implement something with Flash, you’ll find yourself checking this document regularly. There are plenty of ways to access this document:

1. Open Flash CS* and press F1 to open it’s internal help panel. (Some of my friends do this even when they don’t have any fla to edit).
2. In FlashDevelop, place the caret on a Flash built-in class name and press F1. FD will open the default browser with Google search results within AS3 language reference’s site. (This requires you to open FlashDevelop anyway).
3. Bookmark this site: http://www.adobe.com/livedocs/flash/9.0/actionscriptlangrefv3/ (Flash Player 9 AS3 & Flash CS3 components) or this: http://help.adobe.com/en_US/AS3LCR/Flash_10.0/ (Flash Player 10 AS3 & Flash CS4 components) and open it with your favorite browser. Then you’ll need to browse through the classes list.
4. Download this offline FlashCS4 help document and open the index.html file locally with your favorite browser. You’ll also need to browse through the classes list.
   You can also bookmark this local document for quick access.

Now, if you’re using Google Chrome, let me propose another way not only help access the online document quickly but also allow to search for a specific term or class with lightning speed!

Announcing as3-karaoke-player, my first open library

Today I’m very excited to announce my first open source library: as3-karaoke-player. It comes from a request to make a small karaoke website. The idea is that karaoke is a popular kind of entertainment in Vietnam so I thought I would make the core rendering engine open source so that everyone especially my fellow developers can make and/or enjoy karaoke online. (About the said karaoke site, of course I only charged the GUI customization and the Red5 recorder)

You can check out or download the source at Google Code site: http://code.google.com/p/as3-karaoke-player/. This library is licensed under Apache License 2.0.

Here's the sample player:

(The background photo is taken by me :P )

How to run Flash CS5 on Ubuntu (with Wine)

Updated on 2011-05-24

After a couple of days testing and examining, finally, I have managed to run Adobe Flash CS5 on my Ubuntu machine. As I say "run", I mean that I did not succeed installing the application but I had to copy the installed files from Windows. However, it is worth noting that this is the first Adobe Flash version that runs with workable quality since Macromedia Flash 8. The last 2 versions (CS3 & CS4) is known to be useless when trying to run with Wine.

No more wandering, let's me show you the how to first and then comments later.

Dark color scheme for FDT & FlashDevelop

Here’s my (dark) color scheme for FDT 3.5:

To install, follow these steps:

1. Save my eclipse preference file (.epf) to your computer. (Don’t worry, this preference file only contains color settings for FDT, your own settings will not be affected)
2. In FDT/Eclipse go to File > Import… > expand General > select Preferences > click Next
3. At “From preference file” box, browse to the preference file > Check “Import all” > click Finished and there you go.

If you want to know how to make these preference files, read this tutorial.

Besides, the black background of the editor is set at global setting. Therefore, other editors (.txt, .xml, .java…) must also be changed to dark theme or they are very difficult to read.

Myth Buster: EnterFrame Event Performance

When dealing with animation and tweening in ActionScript, EnterFrame event is the most important factor. However, it is also one of the frequent factors to cause performance issue for your application. Using it efficiently is critical for every application.

The myths

The EnterFrame events reportedly generate 1500 – 1800 event objects per minutes. Imagine, in every instance of your component (for e.g. a text marquee), you add an EnterFrame handler to its own, that number of objects generated per minute will multiply. Keep in mind that, creating an object is one of the slow actions in ActionScript. So avoid creating too many event objects will theoretically improve application performance.

When discussing AS3Signals, I have mentioned an approach (raised by Robert Penner and AlecMcE) which uses a two-frame MovieClip which has some script attached to its frames. The MovieClip loops continuously between 2 frames. When the play head reach a frame, the script attached to it will call the handling function, imitating EnterFrame’s events. Some claims that: “The idea behind the approach is that a frame-loop is an internal Flash player structure. It sits underneath the AS3 functionality, and so it doesn’t produce ENTER_FRAME events”.

The experiments

To clear the myths about EnterFrame event performance and the 2-frame-loop approach, I have constructed an experiment of moving 5000 objects simultaneously using 4 different approaches:

Project Pop Rox

This part-time project is about making a role playing game with a turn-base battle system. The story and events of the game can be easily scripted via an XML file. I have joined created the basic structure and workflow of the game based on PureMVC framework; created the scriptable story teller. This is a medium project with 4 developers.

My role: Team leader, Flash developer

Tech notes:

• PureMVC framework
• GTween engine
• AddictingGames’ sponsor teaser

Optimal Unicode range for Vietnamese font libraries

As an old-school tip, in order to display correct Vietnamese Unicode characters, we must include these character sets: Basic Latin + Latin I + Latin Extended A + Latin Extended Additional.

Although those 4 sets contain 994 glyphs, Vietnamese characters scatter in those sets and only take about one third of that number of glyphs. It is a waste to include other Latin characters that Vietnamese language never uses.

So I’ve done a quick experiment and come up with an optimal unicode range for Vietnamese characters (for [Embed] tags and compiled with Flex SDK):

Sans serif font improves code editor readability

In Windows, I often use Courier New font for my code editor since it is the default monospace font which support a decent range of Unicode characters. However, the Courier New is a typewriter-like font which is somehow difficult to read because of its short, broad face with over-emphasized serifs. (Serif: a short line at the end of the main strokes of a character).

In Ubuntu, the default editor font in Eclipse is Monospace which is a sans-serif font. (Sans serif is a type of font without serif). To my observation, this font is much more legible than Courier New especially when the characters are small in size. Sadly, the font doesn't support many Unicode letters especially Vietnamese and extended Latin. Looking around in Ubuntu's default font sets, I've found WenQuanYi Micro Hei Mono. This sans serif monospace font contains a broad range of Unicode letters including Vietnamese and other East Asian languages. This is exactly what I'm looking for in terms of readibility and Unicode support.

To my studies, WenQuanYi Micro Hei is an open source derivative of Droid Sans Fallback and is powered by many Linux distros. As you may guess, Droid Sans is the font for the hottie mobile platform - Android. Windows users can download WQY Micro Hei font here (The file format is a true type collection .ttc).

Here's the screenshot of Courier New (top) and WQY Micro Hei Mono (bottom) both in size 11pt, 100% zoom:

Demystify the “root” property of DisplayObject

Every DisplayObject has a property named “root”. What does this property refer to? Do all display objects share the same root object?

According to Adobe’s Help, the root property is the top-most display object in the portion of the display list's tree structure represented by that SWF file. In other words, root is the document class of that SWF. (By saying document class, I mean the movie clip that is linked with document class in Flash CS or the target class which you compile with Flex SDK)

There are other cases mentioned in the document:

• Root of Stage is the Stage itself.
• Root of a loaded image (jpg, png, gif) whose content is a Bitmap is the Bitmap.
• If a DisplayObject is created by code and (for e.g. new Sprite()), its root is null until it is added to a container which has non-null root. (The container’s root will be passed to its child). The container is not necessary to be on stage.

Using Flash Proxy Class

According to Adobe’s Help, the Proxy class (flash.utils.Proxy) lets you override the default behavior of ActionScript operations (such as retrieving and modifying properties) on an object.

The usage note sounds interesting but this is one of the least used classes in AS3. In fact there are some use cases of this class which prove it is extremely powerful and may help you save many lines of code. Some of those are:

• OrderedObject: an object whose properties order are strictly maintained.
• TraversableObject: an object which allow you to traverse through its declared properties by using for loop.

First let’s see how to use it.

Featured Presentation – Quick As A Flash

“One hundred slides on Flash optimization, covering general theory, code, media, and graphics,” by Grant Skinner.

These slides are recommended to any Flasher who seeks for serious code optimization and extreme performance improvement.

Note: When entering the page, press Left or Right to navigate the slides.

Links about Flash vs others

Since the event that Flash is not supported by Apple’s latest “magical” gadget – the iPad, there came a lot of debates with Flash platform against others, from HTML5 (the biggest), to it’s poor performance on MAC/iPhone OS and even to user experiences in touch devices,…

This post of mine is to bookmark any interesting read related to or address those debates, especially, the so-called “The Great Flash vs HTML5 Debate of 2010”. I admit that I’m bias so maybe most of the links here are pro-Flash. Anyway, you can read the comments for counter-arguments but I’ve seen a lot of *bullshit* yell-outs against Flash with no proof or reasonable points at all.

I’ll update this post regularly whenever I come across any read-worthy articles (and sort them in chronological order).

Simple AS3 Line Smoothing

While researching for drawing tools, I’ve come up with a simple implementation of a pencil tool and line smoothing.

Here’s the idea:

• Capture the points drawn by pencil tool in an array.
• Filter a new points array from the original one by skipping points in the middle (to reduce turns & angles)
• Finally, use a simple point-to-point curve drawing algorithm. I use sample code from this article by gskinner.com

The result:

You can find the source of this demo here.

[Vietnamese tag: Làm mượt nét vẽ đơn giản với ActionScript]

as3signals: new approach for AS3 Events

There are times you may find that the built-in events of AS3 are limited and even troublesome. Here are some circumstances that EventDispatchers turn against developers:

1. Objects MUST extend EventDispatcher in order to be able to dispatch events. Implementing IEventDispatcher alone is impossible because the event target is read-only and you cannot change it from outside of EventDispatcher.
2. It’s difficult to manage events. There’s no way you can remove all event handlers attached to an event dispatcher at once. So in some cases, you don’t remove them properly and they start causing bugs. (BTW, using weak references is not reliable and not recommended.)
3. You cannot pass extra data to you listener unless you extends a new Event object
4. You cannot set up your interface in a way that it can enforce implementing classes to dispatch the required events.
5. On performance perspective, creating objects is one of the most evil things. That’s why any advanced programmers must know and practically use objects pool. However, we are still wasting a lot of resources creating event objects, especially repetitive events like mouse move or enter frame.
6. Read here for more critiques on AS3 events

So in order to address those issues, Robert Penner has adopted an alternative to AS3 events namely as3signals. (Follow the link for more info and get the library)

AS3 Type Conversion & Common Mistakes

In this article, I’ll discuss some common mistakes that AS3 developers (including myself) often make when working with (implicit) type conversion.

1. Check whether a dynamic property is set

Dynamic properties can be added to dynamic object at run-time. Consequently, there’s often a need to test whether they are set before using them.

Here’s how some developers do it:

1. var initObj: Object = {embed: true, color: 0xFF0000, text: "Hello" };
2. /* ... */ 
3. if (initObj.embed) { /*apply embed*/ }
4. if (initObj.color) { /*apply this color*/ }
5. if (initObj.text) { /*apply this text*/ }

The first test with Boolean is ok. But be careful when the input for color is black (0x000000) or the text is empty (“”). In that case, zeros and empty strings casted to Boolean equal false, and definitely the code will run incorrectly.

So, the best practice to check whether a dynamic property is set is to do as following:

1. if (initObj.embed != undefined)
2. if (initObj.color != undefined)
3. if (initObj.text != undefined)

Featured Presentation - Moving from Flex 3 to Flex 4

This screen cast is from tv.adobe.com. Any Flex guys should watch it.

Case Study Isometric Multi-player Virtual World

This is my team’s case study to demonstrate our capability to build a MMORPG (Massively Multiplayer Online Role Playing Game). The site features 2.5D isometric scene and realtime multiplayer virtual world utilizing SmartFox server.

My role: key researcher, team leader

Tech notes:

• Flash Player 9 / Actionscript 3
• AS3IsoLib Isometric engine
• Red5 server (in first phase)
• SmartFox multiplayer server (Java backend)

Project ASB Minisites

This is an all-flash minisite for a key flying performer team from Air Show Buzz community. This site is to deliver videos, photos and other information related to the team in a centralized and convenient way. The site features PureMVC framework in the front-end flash site and PHP as backend services. The site was designed in a way that new contents and panels can be added/removed dynamically, and theme color can be changed via XML-based site config. (In fact, with the same swfs, it has been cloned into a few other minisites.)

My role: Technical leader

Tech notes:

• Flash 9 / Actionscript 3
• PureMVC framework
• Flash CS3 & Flex SDK workflow
• Clearspring sharing service
• Google Map API for Flash

Project Smile Shutter

 

This is a another key campaign site (2009) for Sony Ericsson to show off their latest mobile phones with smile capture technology (C510, C903). Apart from Flex and Cairngorm framework, this site features SOAP service communication and complicated back office management to handle a big photo gallery and users database. The site is also localized into over 30 languages.

My role: Flex technical leader; Flex developer

Tech notes:

• Flex 3 / Actionscript 3
• Cairngorm MVC micro-architecture framework
• Loaded CSS (dynamic font & styles)
• Custom effects
• XML-based localization
• SOAP services
• Large scale photo gallery (.NET backend)

Ubuntu for Flash Developers

I love Linux and free (but cool) softwares. But running Linux as a pure environment for Flash development seem to be a mission impossible (at least to the time of this post). Although I have discovered many good alternative programs, the most needed Flash authoring tool – Flash CS4 is not available in Linux. And that prevents me from moving 100% from Windows to Ubuntu.

Here are the list of application choices in Ubuntu which comes from my own experiences that I think necessary for any Flash developers to work comfortably in Linux world:

No	Tool	Windows application	Linux alternative	Note on Linux alternatives
01	Flash IDE or Fla authoring tool	Adobe Flash CS4	N/A	make do with Virtual Box + WinXP + Flash CS4 (cost a lot of RAM)
02	ActionScript editor	FlashDevelop (free and cool)	Eclipse + FDT plugin or Flex Builder 3 alpha	FDT Basic is free but lacks refactoring and debug tool (however it is comparable with current FD version)
03	Flex & MXML tool	Flex/Flash Builder	Eclipse + FDT plugin or Flex Builder 3 alpha	Currently, there is no tool comparable with Flash Builder in MXML design. Flex Builder in Linux doesn’t have MXML design either.
04	Flash trace & debugging	Debugger in Flex Builder and Flash tracer in Firefox.	Flash tracer in FF and MAYBE debugger of FDT	I haven’t tried debugging with FDT.
05	Browsers and web debugging tools	Firefox + Firebug OR IE + Fiddler	Firefox + Firebug	It is as ‘comfy’ and easy as in Wins
07	Personal web host for testing	IIS or Apache	Apache
	Other	professional	tools
08	VPN Client	Cisco  Systems VPN Client	Built-in Network Manager + VPNC package	Very convenient VPN solution
09	Chat / IM	Yahoo, MSN	Pidgin	Pidgin manages both of my Yahoo & MSN accounts. There are, in fact, some limitations compared with the original applications.
10	Voice conference	Skype	Skype for Linux	Not fully functional like Windows’ counterpart but it’s still the best voice chat application
11	FTP client	Filezilla	FileZilla
12	SVN client	TortoiseSVN	RabbitVCS + RapidSVN	Inspired by TortoiseSVN, RabbitVCS is an integrated client working as shell commands in Ubuntu’s default file manger – Nautilus. By the time of this post, there’s still an issue with authentication so I need rapidSVN for first checkout.
13	Screen capture	Fastone Capture (free version)	Shutter	Shutter comes with a handy drawing tool for taking notes and marking. BTW, the Ubuntu default tool “Take Screenshot” really sucks.
14	Remote desktop viewer	Remote Desktop Connection OR VNC viewer	Terminal Server Client OR Remote Desktop Viewer	Terminal Server Client is totally comparable with Windows’ RDC
15	Office suite	Open Office or MS Office	Open Office
16	Image editing tool	Photoshop	GIMP	Honestly, there is no tool comparable with Photoshop. I can make do with GIMP in some simple tasks but for serious “business” (like my wedding photos :D) I’ll need Photoshop anyway.

When I first moved to Ubuntu, I though I couldn’t do anything with it. But now I feel quite comfortable and “workable”. Though it still lacks some tools (like Live Writer which I’m using to post this blog) but thanks to its open environment, sooner or later, there’ll be good (and free) alternatives. (As I’m expecting ScribeFire to be sophisticated enough to replace Live Writer).

It’s high time we moved to Linux not only for the sake of free softwares but also because it has become mature enough.

Update: I have added some links to the softwares’ home page for easy reference. However, most of the Linux alternatives can be found in Ubuntu software center

Happy Vietnamese New Year 2010

It been a while I haven't done any animation/e-card for my dear friends. This year, I want to make something different to mark my mature in the Flash carear after 2 years. Here it is (click on the thumb to open the flash movie:

HAPPY VIETNAMESE NEW YEAR 2010!
WELCOME THE YEAR OF THE TIGER!

The images are loaded from my FaceBook friends list.

You can find the source code of this app here.

Update 14-June-2010: Profile picture URLs were fetched once via FaceBook API tester and stored in an embedded XML. They may be outdated over time.

Quick Note on Local to Global in Papervision3D

Normally, if you want to get the scene coordinates of a child 3D object, use these properties:

1. var x: Number = child.sceneX;
2. var y: Number = child.sceneY;
3. var z: Number = child.sceneZ;

However, if you want to get the screen coordinates of a local point other than the object’s original position (for e.g. side of a plane, some random points on a surface of a sphere…), then you have to deal with Matrix3D transform.

Don’t worry, you don’t need to understand what Matrix3D is because I don’t either :). Let’s use what people have concluded here:

If local to global is:

child.transform.calculateMultiply(parent.world, child.transform);

then global to local is:

child.transform.calculateMultiply(Matrix3D.inverse(parent.world), child.transform);

There are 2 things to note with above conclusion:

• I have to invert method’s arguments (from what’s originally stated in the post) to get the correct conversion. I’m using PV3D 2.1
• I haven’t tried the global to local method, hence I don’t guarantee it works. The global to local transform works correctly.

So here’s how I convert any local positions to global:

1. var matrix: Matrix3D = Matrix3D.IDENTITY; //a recommended way to create new Matrix3D
2. matrix.n14 = localX;
3. matrix.n24 = localY;
4. matrix.n34 = localZ;
5. matrix.calculateMultiply(child.parent.world, matrix); //child must be a DisplayObject3D
6. var scenePos: Number3D = new Number3D(matrix.n14, matrix.n24, matrix.n34);

If you want to convert the rotation as well, use Matrix3D.copy() to copy all transformation info from the child object. And then after calculateMultiply(), apply the matrix to your scene object with DisplayObject3D.copyTransform().

[Vietnamese Tag – Chuyển đổi tọa độ local sang global trong Papervision3D]

3D Paper Flip Effect – First Attempt

Recently, a challenge have been raised to me if I can make a similar page flip effect like the one at this page. The difference from other page flip libraries is that the page turning effect looks more 3D-like and realistic.

At first glance, the effect might look difficult to replicate. But then I realized that it may be even easier to implement from the traditional page flip effect which requires a lot of overly complicated math. Thanks to 3D engines and modifier libraries at my disposal, I’m hoping to be able to create a 3D paper and manipulate it into a page turning animation.

So if I want to bend or fold something in Flash 3D, the first thing came to my mind is using AS3DMod. However, when I look into it, the modifiers are so limited in terms of controlling interactions. For example, the Perlin modifier can makes the plane wavy like cloth or paper but there no way you can control it since Perlin noise is randomly generated. With Bend modifier, I can bend it only at one section. I can add more modifiers to bend at multiple sections but it is still too difficult to simulate the paper physically.

Here my attemp with AS3Dmod and Papervision3D (click to open the Flash demo):

So I decided to quit AS3DMod although I still thought that I might be missing something. (Somebody please prove I’m wrong with AS3DMod).

My only hope now is to access the vertices of the 3DPlane and control them with a physics simulator. Fortunately in the Flipper3Maker mentioned above, the paper is not bent from any direction; the bend lines are in parallel. So I’ve come up with the following demo:

I used a simple 2D chain simulator which I got from here (was AS2) and then apply the transform on the rows of vertices on the 3D plane. The achievement here is that I can interact with the “paper” although it doesn’t look like a page turning effect yet.

My next step is to find the right simulator for this page turning effect and I’m about to begin with Box2D.

You can find the source code of above demos here.

[Vietnamese Tag – Hiệu Ứng Lật Trang 3D – Cố Gắng Đầu Tiên]