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]