Demo: Stage3D Fireworks with Flare3D

My going back to Flash to experiment on Stage3D. The animation make use of Flare3D engine. Thanks to its built-in shaders and particles components, I was able to create the fireworks and the lightning effects without much trouble. However there's still room to improve the fireworks effect with more particles.

View the demo.

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)