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]

Pyco Flash Framework (Beta)

Pyco Flash Department has just released its beta version of Pyco Flash Framework (PFF). Its capabilities are demonstrated via our team’s minisite at www.pycoflash.co.cc

This framework is aim to

• Set up a standard foundation for almost all Pyco Flash projects. I must say “almost” because some projects may not benefit from deploying PFF, especially ones that are too small and their file size is really a matter. (PFF and PureMVC take up to ~ 90 kB in the main swf).
• Reduce the time and hassle of setting up the same project’s frame and common components over again. And therefore, reduce the effort spending on the project.
• Drive team members to a new development approach which helps improve teamwork collaboration and source code’s maintainability

PFF features some of the latest techniques and approaches in the Flash universe:

• Flex SDK compilation:

• Deploy FlashCS 3/4 & Flex SDK workflow
• Using precompiled libraries SWC extensively to separate UI and logic and to accelerate project build time
• All SWFs are compiled using Flex SDK compiler
• Build and deployment can be automated using build script like FlexANT, ANT, batch…

• The framework core is based on PureMVC and Loadup utility
• An MVC-based page manager.

• The page manager supports external (loaded) and internal pages. Demo: Login form is an internal page (no waiting for loading). Researches' framework top page is a internal blank containing page
• Popups are supported (special pages which appear on top of other pages) Demo: Login form is a popup
• Custom transition for each page. Demo: Member page
• Page redirection. Demo: Redirection from Researches top page to Research Intro
• Linking page redirect users to an external URL. Demo: Forum
• Page accessibilty which requires authentication. Demo: Works (who wants to see this page may contact me for the password)

• Deep linking (AKA SWFAddress).

• The deeplinking module can be activated or omitted completely from project's build
• Page system has deep linking by default (if deep linkng is activated). Demo: All pages in the demo
• Especially, each page can implement its own sub-deeplink logic. This is an unprecedented feature which never be seen in other frameworks. Demo: Gallery page

• Multilingual support and dynamic fonts loading. A unique text style manager which centralized all fonts assets and styles. No character is embeded twice.
• A tracking manager which is designed to handle multiple tracking services at the same time. Trackers can be activated/deactivated completely from source code. Currently support Omniture, Webtrends and GoogleAnalytics. Future tracking services can be plugged in easily.
• Common utilities and controls: Scrollbar, Tooltip, StringUtil, Cookies, Random...
• Other modules and features to bundle in the framework: TBD

We are currently making the documents and API reference for it. Next step is to train every member of the team the usage of PFF.

OpenZoom library & SDK

I intended to note this on twitter but afraid that it will be washed away by other tweets. So I decided to bookmark any interesting ActionScript library here in a special category: ‘libraries’

Here’s the first:

“OpenZoom SDK

The open source OpenZoom SDK is a toolkit for the Adobe Flash Platform that enables you to easily build powerful applications, beautiful sites and stunning maps which use a zooming metaphor and high-resolution images. It is freely available under the MPL/GPL/LGPL trilicense.”

Main site: http://openzoom.org/
Code: http://openzoom.org/go/code
Document API: http://docs.openzoom.org/sdk
Author’s blog: http://gasi.ch/blog

Checkout this example. (Try: + – W A S D click wheel drag)
Interestingly, there is a Vietnamese showcase: http://www.albawater.com.vn/