Case Study: WebGL 360° Panorama

A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.

Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle

Finally, check out the demo and grab the source code.

Case Study: In2 Profile

This is a case study that my team set out to explore HTML5 / CSS3 but it is also served as pitch deck for my company's profile presentation. This one-page parallax scrolling website is inspired by the one of the 2010 buzzing HTML5 experiences, nikebetterworld.com. Everything was coded from scratch.

We developed 2 versions. The first version features usual parallax scrolling with arrow drawing effect using canvas. The second version is a revamped one with additional animation on the illustrating graphics. I also experimented CSS3 transitions effect on the menu and some buttons.

My role: JavaScript + HTML Developer, Technical Researcher

Technical features:

• jQuery (library)
• HTML5 Boilerplate (library)
• HTML5 Canvas
• CSS3 transitions

Project: Turbo Race Track

This full flash minisite is part of a campaign to interactively inform users about Intel's partner membership program (APAC only) and guide them to earn more credits to enhance their membership level. There is a web service-driven section where weekly leading credit earners are listed to make the "race" more excited. The mechanism is relatively simple and straightforward. There's no demo link since this is a membership-only website.

My role: Flash developer
Technical highlights:

• MVC approach with Robotlegs framework
• AS3-Signals
• Greensock's TweenLite

Project: Training Credits Estimator

The aim of this site is to support Intel's partners and distributors in estimating their attendance in training courses offered by the company in order to maintain their privileged membership. For each type of membership, users have to select the courses with number of attendees, various training types and courses. The system will automatically calculate the credits members would be able to gain from said inputs. Disclaimer and a notice box will appear at the beginning and at the end respectively congratulating users having fulfilled the required credits. The most tricky part making text components flexible so that the site is interchangeable within 6 different languages.

My role: Flash Developer
Technical features:

• MVC approach 
• Multilingual with external fonts & texts loading
• Robotlegs framework
• AS3-Signals (AS3 Events replacement)

Bắt đầu với Molehill (Stage3D) - Phần 2

[This is a translation and edit of the article “Molehill Getting Started” from labs.jam3.ca]

PHẦN 2. TÌM HIỂU MOLEHILL (STAGE3D) API

Trình độ: Cao Cấp	Phần mềm	File mẫu
- Vững ActionScript 3 - Biết FlashDevelop - Biết Flash 3D hoặc 3D Engine	- Flash Develop 4 (tải về) - Flex SDK 4.5 r.19786 (tải về)	molehill_getting_start_p2.zip

(TTT) Đây là bài viết giới thiệu về Molehill (Stage3D) API ở khía cạnh cơ bản của nó. Molehill API là một tập lệnh cấp thấp nên đòi hỏi bạn phải vững về ActionScript 3 và có chút kinh nghiệm về 3D (Flash) để có thể dễ dàng tiếp cận hơn.

(Dịch)
Trước khi chúng ta bắt đầu, có một số thuật ngữ các bạn nên biết:

Các thuật ngữ:

• Vertex: Một điểm trong không gian 3D. Một vertex sẽ xác định đỉnh của một tam giác. Tuy nhiên trong MoleHill, vertex định nghĩa cả vị trí và màu của đỉnh.
• Matrix: Bạn dùng Matrix (ma trận) để biến đổi các Vertex. Hãy hình dung Matrix giống như là các "phương trình" để xoay, thay đổi tỉ lệ hoặc thay đổi vị trí của Vertex.
• Shader: Shader là một chương trình nhỏ dùng để xử lý Vertex. Shader có thể dùng Matrix để làm các phép biến đổi lên Vertex. (Hay nói cách khác, chương trình thực thi một phương trình lên tất cả các điểm trong 3D). Không như tôi nghĩ, Shader trong MoleHill không chỉ xử lý hoa văn và giao diện mà nó còn dùng để xử lý vị trí của các đối tượng.

Bây giờ chúng ta có thể bắt đầu xem xét các thành phần tạo nên MoleHill

Bắt đầu với Molehill - Phần 1

[This tutorial discusses How to get started with Molehill API via Away3D. You can find English equivalents from other sources easily]

PHẦN 1. TIẾP CẬN MOLEHILL THÔNG QUA FLASH ENGINE AWAY3D

Trình độ: Trung Cấp	Phần mềm	File mẫu
- ActionScript 3 - Biết FlashDevelop - Từng sử dụng Flash 3D engine	- Flash Develop 4 (tải về) - Flex SDK 4.5 r.19786 (tải về)	molehill_getting_start_p1.zip

I. Molehill và những câu hỏi thường gặp.

1. Molehill là gì?

Molehill là tên mã của một tập lệnh (API) cấp thấp trong Flash Player cho phép tận dụng sức mạnh của chip đồ họa (GPU) để hiển thị hình ảnh 3D phức tạp và các hiệu ứng đồ họa đòi hỏi tốc độ xử lý cực nhanh, từ đó mang lại cho người dụng trải nghiệm 3D ấn tượng trên hầu hết các máy tính và thiết bị kết nối internet.

Dự kiến Molehill sẽ được phát hành chính thức trong Flash Player 11 và Adobe AIR phiên bản tiếp theo.

Ảnh: Ứng dụng demo Max Racer viết bằng engine Alternativa 3D hỗ trợ Molehill. Xem demo. 

Playing with Wallaby

This is my attempt to convert an old Flash animation (my old animated signature when I was young ;) )  to HTML5 using Adobe's Wallaby tool.

Because of the nature of this animation, a lot of SVG files were generated. The total size of the HTML5 animation is 1.1MB compared to 21.6KB of the Flash counterpart. (OMG, way to much less efficient). I had to edit some JavaScript to add a preloader for it. Another side note is that Wallaby only works with Flash CS5's fla. (The tool failed to open my old animation in CS3 format).

AS3 Wordle Tag Cloud

You should have seen the aesthetic tag cloud above somewhere on the web. It originates from the famous Wordle words cloud (closed source). For the past few days, I have ported an open source Java class to ActionScript and able to render the tag cloud in Flash as seen above. Please refer to this article to have the Java author explain the basic of the algorithm. (Thank Pierre Lindenbaum for the nice implementation)

Flash on multiple screen demo

2011 undoubtedly expects the multiple screen applications trend. Flash platform is one of the best solutions to deliver same experience across multiple devices and platforms. Here is a demo of Flash-based games on multiple (device) screens: PC, iPhone, iPad, Android phone (Motorola Milestone 2), Android tablet (Samsung Galaxy Tab).

All the coding effort is credited to my Flash team. The iOS applications were created by using Flash CS5’s iPhone Packager. I repackaged the Flash builds to AIR for Android using Flex SDK Hero. Some of the applications are not complete and/or Android-optimized yet.

FYI, the video was created with Cinelerra, the most advanced non-linear video editor and compositor for Linux. (Quite close to Adobe Premiere, and require some learning curve)

Tips on encoding videos for Android using Adobe Media Encoder

As a Flash Professional user, you probably have Adobe Media Encoder installed on your computer. This is a great tool to encode videos not only for Flash video player but also for other H.264-enabled devices like iPhone and Android. However, when I tried to encode a video using a random H.264 preset, my phone (a Milestone 2) could not play the video. This means that not every export settings is compatible with the phone’s internal video encoder.

So which preset should we choose for the export settings?