Project: In2Ideas HTML5 Website

This is the complete rework of the front page of my (now ex) agency to show case our experiences and expertise. The concept was that the whole site is a mind map which is often associated with brainstorming & ideas generating.

The key feature of the site is the mind-map-like navigation in which you can drag to move in any direction. It works on both desktop and tablet's browsers. Looping animations are made of SVG graphics which were authoring in Flash and then converted to Google Swiffy. The dynamic dash lines were programatically drawn on HTML5 Canvas. To support older browser (IE8+), Flash will be in place of the SVG & Canvas graphics.

My roles: technical researcher, key front-end developer.
Technical highlights: HTML5, CSS3, RequiredJS, jQuery, Google Swiffy, FlashCanvas

Live URL: http://in2ideas.com

More screen shots:

Interaction demo:

Project: ISS 2012

This is a post-event highlighting microsite for Intεl Sοlμtiοn Sμmm!t 2012. The site is to capture the activities and everything related to event in the forms of videos, photos & other kind of materials. Audience of this microsite are participants of the event and other users of APɅC Intεl Channεl Pοrtal which is a member-only partners relation web site.

Live URL: www.%69%6E%74%65%6C.com/apac/channel/ISS2012/index.html [?]

Technical features:

• jQuery
• Galleria photo gallery (library)
• OSMF's Strobe Media Playback (component)

Obfuscation Reasons

Project: Justin Portfolio

One of the projects to challenge my skill in JavaScript and HTML5. The original parallax scrolling experience is coded from scratch with the help of MooTools framework. I learned a lot from this project and  got everything I need to handle larger front-end interactive websites.

Visit the site.

Technical features:

• HTML5 Boilerplate
• MooTools 1.4
• ThreeJS 3D library & its Birds Demo
• CSS3's transition & animation

Related posts:

• Realistic waterfall effect with CSS
• Fish boids

Project: J&J HTML Template

This is an HTML template for a privately developed CMS website. The job involved converting Photoshop .PSD files into HTML/CSS template, Javascripting validation for contact form and Google maps interaction. At the same time, I custom made the Flash banner carousel with the text & images customizable via XML feed. Due to CMS restrictions and corporate's guidelines, the template is rather traditional.

The live site can be visited here: www.comms.%6A%6A%73%65%61.com [?]
Note: the CMS developers have altered some layout and client-size logic. Here's the link to my demo site before integration.

Technical notes:

• jQuery
• Google Maps API

 

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)

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).
 

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

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)

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.

Project - Shiho

Campaign microsite for Sony Ericsson C905 – code name Shiho. This site features Cairngorm MVC framework and a flexible localization mechanism. Every text in the site is configurable via XML. The embedded fonts with specific character sets are selectively loaded for different languages. (For e.g: basic Latin for English, French; Cyrillic for Bulgarian, Russian…) Non-embedded languages like Chinese are also possible. Animations which demonstrate the phone features are made with Flash IDE and loaded into the Flex-based application progressively to optimize bandwidth.

My role: Team leader (during localization phase), Flash developer

Tech notes:

• Flex 3 / Actionscript 3
• Cairngorm MVC micro-architecture framework
• Loaded CSS (dynamic font & styles)
• Flex’ custom effect
• Flash + Flex combination
• XML-based localization