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/

Red5 Data Mapping

When sending data to Red5 handlers, it is important to know the counter-part data types used in the server’s Java code.

There’s is one article mentioning about this at http://jira.red5.org/confluence/display/codecs/Data+Type+Mappings

However, for an unknown reason, the page is not accessible any more. I have to produce a test and observe the conversion of data as following:

From Flash to Red5 (valid to Red5 0.8 / 0.9)

ActionScript 3	Red5
Boolean	java.lang.Boolean
String	java.lang.String
uint (< 2147483647) int (-2147483648 to below 2147483647) Number (integer value within int range)	java.lang.Integer
uint (>= 2147483647) Number (integer value out of int range)	java.lang.Long
Number (fraction value)	java.lang.Double
Date	java.util.Date
Array	java.util.ArrayList
Object / Custom Object	org.red5.io.utils.ObjectMap
XML, XMLDocument	org.apache.xerces.dom.DeferredDocumentImpl (this class seems not to be in Red5’s lib folder)
ByteArray	org.red5.io.amf3.ByteArray
Special Values:
NaN	NaN

Notes:

• Negative integer value is limited at –2147483648 even if the variable is declared as Number. If you try to send a value less than this number, it will be rounded up to –2147483648.
• If one of the params in the remote call is null or undefined, the handler will not be executed.

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

  

Project - Female Form Factor

A campaign microsite for the Sony Ericsson mobile phone - T303. The site includes 4 stylish studios in which you will try out the new phone with its featured features: camera (capture a photo from the room and display it in a frame), music player (listen to some pieces of music that are chosen to match with the room's mood) and Internet access (buy some items and put them in the room). There is also a quiz to help user choosing the matching room for them. This site was finished in 8/2008.

The site is integrated as iframe in www.sonyericsson.com under T303 phone page. However, you can google the phrase 'Female Form Factor' to receive this direct link.

My role: Team leader, Flash developer

Technical notes:

• Flash 8 / Actionscript 2
• Object Oriented
• Displacement Map Filter: used to make the camera viewport look wider
• Dynamic font embedding: load the font set specific to a localized language. Since there's no dynamic font registering in Flash 8, a special technique was used involving dynamic shared library.
• .NET service.

Google Map for Flash with daylight layer

When I visit this site: www.daylightmap.com, I was excited how it could show the daylight on the world map in real time. Very interesting because I can visually know some friends of mine in other part of the Earth are in the light of sun or in the shadow of darkness. :)

The site is using Google Map API (javascript) for the map and its own service for the daylight layer. Although the author provides a limited free service there was no code for the Google Map API for Flash so I decided to examine the service call to get the input needed and port it to Flash-based Google Map.

I assume that you already know how to use TileLayerOverlay or extends the TileLayerBase in the API to create a new map layer above default ones.

Basically, like other tile layer, the Google map need to get the correct tile image via the tile's x and y coordinate in a certain zoom level.

Here's the service call break down:

tileURL = "http://www.daylightmap.com/tiles/cache/" + "tile_" + lightOn + zoom + "_" + tileX + "_" + tileY + "_" + secs + ".png";

Luckily, since the service is for Google Map API, there's no need to convert the zoom, tileX, tileY values forwarded from the API.

What we need to manipulate are:

- lightOn ("n_"|""): if you want to get the shadow images with city lights or not

- secs: number of seconds since 01/01/1970 00:00:00 UTC which, in AS3, can be get by:

1. var now: Date = new Date(); //get local time
2. var secs: int = int(now.getTime() / 1000); //convert from milliseconds to seconds

Here's the demo:

Download source code here.

Side notes:

• There's also a service in which we can get local time as well as current position of the Sun (in lat/long). However, the site currently doesn't allow crossdomain service call. So I just left an example in the demo but commented it out. If you need those features, you might need to ask the site's author to create a crossdomain.xml file in his website.
• Since daylight layer is a kind of real time data, obviously, we need to reload the map after an interval of time. I haven't done this in my demo. But you should understand the situation: When I wrote this demo, the API was 1.9 and it doesn't support any way to force a tile layer to reload new data. However, a work-around is hinted on its developers' group forum that we can force the map to reload completely by resizing the map (maybe just 1 or 2 pixels). By the time of this article, API v1.16 was released and it provides a new refresh() method in the TileLayerOverlay which can be used to solve our problem. I leave this to anyone who wants to improve it.

Project - Offset The Evil

Like its name, this flash site is to offset the evil from those played the bloody game Condemned 2. The site includes 3 simple fun games (one of them was removed for the reason I don't know) which are totally unrelated to Comdemned 2 and some other activities related to the game. This site was finished in 4/2008. By the time of this post, the site is still live at: http://www.offsettheevil.com/

The 3 games were developed by my team and I was in charge of the Lolipop Parade.

My role was: Flash Developer

Technology notes:

• Object Oriented
• Flash Player 8 / ActionScript 2
• Tweener