Flash Board, opportunistic communication

Following the release of Count the Dots, I started work on a new app called Flash Board.

The idea came during a conversation with my wife about having an app to share your thoughts with others without using a pen and paper. After testing on the iPad, it tuned out that you could see the messages from quite far too!

Production:

Flash Board was built using AIR 2.7, coded in Flash Builder and designed in Illustrator. I first started using the new Text Layout Framework, but quickly grew frustrated. It introduced an unnecessary level of complexity and since I wasn’t using any of its advanced features, I reverted to using the Classic text engine. Most of the work went into creating an optimized layout algorithm to display the messages.

One annoyance on Android was that even by giving a text field focus and selecting its content the software keyboard won’t display unless the user taps the field. This is unfortunately an OS level UX problem.

On iOs the keyboard would slide up as expected but that field is replaced on screen by a system one. If you use a custom font, the new field will ignore it and use the default OS one.

Publishing:

Flash Board was released as a free app on both stores. As of this post, total installs on iOs just passed 3000. That represents about 1000 per week. Sadly Android is another story. Last I checked there was only 60 installs. The sheer amount of apps in the Market makes it very hard to stand out and users are weary of free apps. As a consequence, I am now wondering if it is worth publishing to the Android Market.

Surprisingly, search on the Android Market is not as straight forward as it should be. I noticed that “Count the Dots” did not rank high for a long time. Even if it is the only app called Count the Dots. The same behaviour was true for Flash Board. I am guessing the ranking might follow an algorithm dependent on AdSense and AdWords spending

What’s next?

I am working on an update to the app with some cool tweaks and additions. Including a favorites system to save your messages. I implemented more multi-touch controls and ported the whole thing to Robotlegs to prepare for a possible paid pro version with more features. Sadly, due to the selection bugs on Android and the few installs, I probably won’t be updating that version for now.

Visit the Flash Board page to get the App!

First level of Count the Dots

Fresh off the heels of the AIR 2.7 release, I submitted my first App to both Android Market and iOs App Store.

A little development background:

Count the Dots was coded in Flash Builder 4.5.1. Visual assets were packaged using Flash Pro and were designed in Illustrator. Originally the sound was to be dynamic, using the sion framework , but latency on Android meant that the sounds had to be converted to static files. Generally, dynamic audio performance on Android in AIR is poor. From the frameworks I tested only Andre Michele’s Tonfall performed well, of course! The app is wired with Robotlegs and all view events are handled via AS3 Signals.

The code base between the Android and iOs version is identical. The only difference is in the App’s XML declaration where render mode is set to CPU on iOs and GPU on Android. Other than that the app scales (thanks to the vector assets) to adapt to all devices.

Publishing:

I released Count the Dots as a tier one paid app. This is the lowest price for apps at $0.99 on the iOs App Store. I set up pricing on Android to match the iOs one. Following user feedback I pushed an update a week after release with an updated GUI and the addition of a simple physics interactive system. The physics is a very basic particle system and gravity is based on the device orientation.

I have been publishing ad-hoc apps on iOs and the process of publishing to the App Store had no real surprises. The process is quite streamlined on both platforms. Since there’s no approval process on Android the publishing is almost instant. On iOs, approval took about 5 days.

Marketing and sales:

The only marketing I did was publishing the release on Twitter, Facebook, Linkedin Groups and contacting publications online that review kids apps. I picked the top 5 seach results for Apps for Kids on Google and submitted Count the Dots for review. Two publications replied and one of them actually followed up with a very positive review: Apps4Kids

I wasn’t expecting much in term of sales as the targeted user base for this app is quite narrow. But even without much marketing it managed almost 50 sales in a month.

Is it worth it?

A web developer needs a website and web portfolio, an app developer needs apps on the various markets. I wanted to design and build a project from start to finish and make a counting app for young children that was both stylish and minimal. These were the main motivations behind Count the Dots. I am pleased with the results!

Construction site's sign

2010 was the year the Flash platform died, replaced by the fifth revision of the HTML standard. Or so I am told. That was a great debate/flame war and we are all very happy that html finally caught up to Flash 8. Enough said.

But under that blanket of ignorance fueled hatred for Flash rose the true winner: the age of UX. The web has become the front line of User Experience. Many of the websites we use reflect this trend: Experience over Features (read/watch/follow Aral Balkan for more). Previously reserved for Flash, sophisticated layouts, animations and effects are now possible using CSS, JS and HTML and render properly in most modern browsers.

Most of my work in 2010 was offline and under NDAs.

In March I started freelance Away3D work with Neutral here in London, and soon found myself in a whirlwind of interactive demos. Mixing desktops, laptops, iPod Touches, iPads and Galaxy Tabs. Using AIR 2.0, the iPhone Packager and later AIR 2.5 with even some native Android Java development.

What we were able to achieve with a small team, short deadlines and extremely complex setups was pretty amazing. Being able to rely on Flash to output to all these devices made it all possible. Porting an App from iOs to Android with only GUI tweaks, freely switching from Mac OS to Windows to run demos, manage all the code in one location… Priceless.

I also created my first interactive app using Unity3D and C#. The tooling and performance are amazing.

It was a year of extreme learning and I would like to thank all the community members for sharing so much of their knowledge on Flash, iOs, Android and Unity3D. I was able to find answers for 99% of the issues I ran into.

Some special thanks to:

• The Away3D team and community.
• Carlos Ulloa for giving us a look inside his brilliant Unity3D work.
• Lee Brimelow & Thibault Imbert.
• The dotBrighton crew for their awesome online meetings.
• The Gaya Framework
• AS3 Signals.
• Mina from Apache.
• The Unity3D Wiki.

So what’s next? 2011… More Unity3D. Molehill and Away3D. More AIR 2.5. More NDAs. Maybe a little web. I am betting on a lot more learning! It’s going to be a great year.

2010 online projects highlights:
www.newworldready.com
GMES Map
Sasha Waltz

Interactive 3D World Map for TATA Communications

STC Associates asked me to produce yet another coverage map for TATA Communications! This time, since the data was pretty light and it included satellites, we thought doing it in 3D would add a bit of shinny. Truth be told, I am a 3D junky (obviously).

In comes Away3DLite, picked for its small footprint and performance. The location data is XML driven and uses actual geo-locations to place the PoPs and satellites around the earth.

I had ported to Away3D the original script, from Andy Zupko’s excellent tutorial, for a previous project. The scroll menu is based on this demo by Soulwire.

I modeled & texture the satellites and marker.. yea, these are some high class models

Check out the map!

Dynamic 3D Animation

A cool little flash project built in collaboration with STC Associates for an event during International Telecoms Week (ITW) 2010 in DC. The party was attended by over 1700 guests. They were asked to vote for a keyword to best represent the future of telecom. The result were rendered using this animation.

Originally I started using the built in 3D of FP10: that was a waste. Text looked horrible and native AS3 3D controls are not great. So I switched to Away3D and the amazing TextField3D class. The DOF is a simple blur applied to the ObjectContainer3D. I had a random movement on the camera but that was turned off in the event’s version.

Here are pictures of the animation and projection setup during the event.

OSM Mapped to a 3D Plane with as3Dmod

Building on my first experiment with OpenStreetMaps and Away3D, I decided to cook up two more!

The first one uses a block grid to display the map in 3D space. On zoom the blocks rotate 360. I used the ModestMap TweenMap, displayed in on the left, to allow control and capture the map’s bitmap data.

The second example uses a 3D plane to display the map’s data. I added a Perlin deformation with as3Dmod to create a wave or fabric like floating look.

The stats shows a rapidly increasing memory usage due to ModestMaps’ tile caching (defaults to 256 tiles). Once I have it cleaned up, I will upload the source code for these

3D Cubes Roaming in Away3D

Though a bit late, this month’s experiment builds on last month setup and adds a bit of AI. Cubes now roam and avoid each other when near collision. A very basic detection system using a vector and couple of recursive functions. All calculations are made using Away3D’s functions like distanceTo() and movement is handled by moveForward(). The newer post are represented by bigger cubes. The icons are from PJ Onori’s excellent iconic.

Click here to view this experiment. Source code can be viewed here.

Update: For Valentine’s Day here is a special version and its source code.

Randomized 3D Layout using Coordy and Away3D

New year, new homepage! My new year’s resolution: Publish a new experiment every month… And update this blog more often!

This month it is using a newly discovered layout API called Coordy. The 3D is rendered using Away3D and tweens are handled via TweenMax. For coloring the cube I draw a random feed from the Kuler API and the blog data is a custom RSS Feed from my WordPress blog.PureMVC was used to structure the application. Coded in Flash Builder Beta 2 and designed in the Flash IDE.

Update: Added a new component: as3sfxr. This is a Flash 10 library to dynamically generate sounds for classic arcade games. It even included a random function!

Update: Souce code here.

Dashboard and content bubles...

After sitting in limbo for a while TATA Communications and STC Associates finally launched the updated New World Ready site. Due to launch in October 2009 and subject to a very aggressive timeline for completion, I decided to use the GAIA Framework to build the site. On top of SEO optimization and Deep Linking, GAIA handles dynamic assets loading (like XML Data, Images, etc…) flawlessly. A real time life-saver.

Developed for the earlier version of the site, I had to update the 3D quiz to run in the flash site. I also developed a simple but custom video player. Coded in Flex and designed in the Flash IDE.

3D Carousel using Away3D

Latest iteration of my 3D carousel. Built for re-use, since this is a popular format these days. It uses Away3D, an extensive XML config and external XML data. Constructed using PureMVC, it makes extensive use of the ExternalInterface to interact with the site (and Google Analytics).

Abylity’s website.

Video of interactive 3D projects

While going through some of the recent interactive 3D work I produced, I thought it would be nice to create a video showcase. I also wanted to explore the workflow for capturing and editing these flash projects in action. Music is by Danger.

Motifs of the TCL Interactive Card

The 2009 version of the TCL holiday card was to offer multiple options of colors, motifs, logos and message.

Click to view the Flash card and the External Interface Controls via Javascript

The design department created the static mosaics (except for the tree, which I did.) I then re-created the whole thing in Illustrator (using symbols) and imported the final mosaics in Flash for some coding fun. A little OOP magic and I setup a particle like system to animate each of the little triangles in sequence.

The second part was to expose some of the functions to be controlled via Javascript. I used the External Interface API to do so. It was then sent of to be coded into the html template.

New Homepage Flash Animated Banner

As part of the new S&D branding and website, I was to produce a new banner loader along with the banners. The usual tricks (XML driven, using external assets, etc…)

I did experiment a bit with duplications (see here for a great tutorial from Lee Brimelow). I stated to use the Natzke like animation but ended up writing a custom animation class that uses Tweener and its special Bezier modifier. I will post some of these experiments soon.

New Switch & Data Homepage

Complience 2008 Flash Animation

Back in October, I was tasked with animating this banner. It was a nice return to basic keyframe animation, away from pure AS3 coding! I only wish I could have used the new Bones feature of CS4/FP10…

Compliance 08 Microsite