I’ve been moving some Flash SWF files over to AIR for Android and while looking into how best to optimize ActionScript code for AIR for Android, I got sidetracked. After reading about the obvious optimizations for memory and CPU resources, I decided to take a look at the AIR .apk file that is installed on my Android phone. I found that the magic was happening in
Ahh, the Adobe AIR runtime kind of runs beside the Dalvik virtual machine rather than completely inside of it.
The libCore.so file is a shared object file using JNI. Java Native Interface(JNI) http://en.wikipedia.org/wiki/JNI code written in C or C++ allows you to access platform specific features and ‘touch the metal’ with your code.
Android provides the Android NDK so you can use native code.
Some words of wisdom from the Android developer page 🙂
The NDK will not benefit most applications. As a developer, you need to balance its benefits against its drawbacks; notably, using native code does not result in an automatic performance increase, but always increases application complexity. In general, you should only use native code if it is essential to your application, not just because you prefer to program in C/C++.http://developer.android.com/sdk/ndk/overview.html
I wanted to try compiling and running some native code on my phone (Android 2.2) so that I have that tool in my toolbox when I need it. I found a great example at Qualcomm.
The sample application that comes with the SDK allows you to detect and track image targets in 3D using your phone’s camera and then it puts a floating teapot (http://www.sjbaker.org/wiki/index.php?title=The_History_of_The_Teapot) over your target. The NDK is required to compile the native C++ code which uses OpenGL ES http://en.wikipedia.org/wiki/OpenGL_ES. It has step by step instructions that will show you how to build the native C++ source files with the NDK package of the Android SDK and then use Eclipse to build the Java sources and create the APK package that can be deployed to the phone.
This is very much like the augmented reality on the new Nintendo 3DS
If you are having a hard time with the NDK, try the sample that comes with it in \samples\hello-jni along with the tutorial at http://www.pocketmagic.net/?p=1332 for a very basic example that will help you understand the proper procedure.
I have some broken antique clocks around the house so I made image targets out of their faces and now have a teapot floating in front of them. Next time I get a little break in the action, I’ll change that teapot to a semi-transparent digital clock so my clocks will no longer be broken provided, I run the program on my phone and point the camera at the clocks 🙂
The NDK combined with current hardware capabilities certainly seem to be enough to make sophisticated and engaging toolkits and engines for game developers and artists.
Anyway, enjoy playing with the code as that is how you learn.
Now that Adobe AIR is available for Android 2.2, it is easy to move your Flash games to Android’s app store and also to add functionality that takes advantage of things like the camera and GPS.
AIR stands for Adobe Integrated Runtime and was originally for
...building rich Internet applications using Adobe Flash, Adobe Flex, Adobe Dreamweaver (HTML or Ajax), AIR SDK, that can be run as desktop applications.
But now seems to be headed toward becoming an easy way to quickly develop powerful applications for smartphones, TV’s, car dashboards, tablets, big computers, tiny computers and everything in between.
1. Get Flash CS5 (you can get a 30 day free trial at http://www.adobe.com/downloads)
2. Install Flash extension for AIR http://labs.adobe.com/technologies/flashpro_extensionforair/
3. Install AIR SDK http://www.adobe.com/products/air/
4. Install Android SDK http://developer.android.com/sdk/index.html
Setting up your development environment with Flash CS5 and AIR for Android
Getting started with Adobe AIR for Android
Build a GPS Speedometer
AIR for Android MazeFM Application
Air for Android: Geolocation
Simple camera application with Flash CS5 and AIR for Android
Publishing AIR for Android Applications to the App Store
The .apk file that is created for AIR for Android has the .swf file in the assets folder and an application.xml file in the assets/META-INF/AIR folder which works with the main AndroidManifest.xml file to set the programs application properties and how it should start (run the swf file).
Now it’s easy to move your Flash apps and games to the mobile market. Enjoy.
Even though this wonderful feature has been around for five years, it has yet to be implemented consistently across the major browsers. Hopefully, this will change soon.
If you know a reason why this is so, please leave a comment. Thanks.
The specification for CSS Multi-column Layout has 10 properties for CSS Multiple Columns.
They are pretty self explanatory except for maybe ‘rule’ which in this context means a vertical divider between the columns that behaves like a CSS border.
columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-fill (Balances columns height)
column-span (Allows for titles or headings to span across multiple or all columns)
Let’s look at the current implementations (as of August, 2010)
Mozilla (Firefox 3.6)
10 standard properties are supported plus an extra one created by Mozilla
Webkit (Chrome 6, Safari 5)
10 standard properties are supported
To further complicate the use of CSS3 multiple columns, even simple examples are rendered differently by Webkit and Mozilla.
If you set both column-width and column-count, visitors with a Webkit browser see a very different result than visitors with a Mozilla browser.
For example, here are images of the following code in Firefox 3.6 and Chrome 6
While Chrome limits the column width to what it is set at (45px) Firefox limits the column width based on the column number. If you allow Firefox to automatically set the column number, it will then limit the column width to what it is set at (45px).
It may be quite awhile before the average webmaster uses CSS3 multiple columns.
Some sites for further reading.
W3C Specification http://www.w3.org/TR/css3-multicol/
Demo page with source code. http://www.quirksmode.org/css/multicolumn.html
Mozilla Dev Page https://developer.mozilla.org/en/CSS3_Columns
In this post we will create a simple pie chart that is easy to feed data to.
This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).
You can copy this code and paste it into a new file called something like simplepie.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the pie chart.Read more on “Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts” »
Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec .
Seeing the need for storing more key-value pair data on the web client than can currently be stored in a cookie, all major web browsers quickly adopted support for a storage object that can hold up to 5MB of data that persists until the web client’s cache is cleared or the storage object is programatically cleared, or in the case of sessionStorage, the browser window (tab) is closed. This quick and relatively consistent adoption by web browsers is a rare treat for web developers.
There are two flavors of the storage object that we will be looking at.
The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.
Data stored in the sessionStorage object is accessible only from the page that initially stored the data.
Data stored in the localStorage object is accessible only from the domain that initially stored the data.
Both localStorage and sessionStorage objects have the same interface, differing only in how the data stored by them persists and who can access the data.
The storage event is fired on the window object whenever something changes in storage. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.
The storage event has the following attributes
HTML5 Demos: Storage
Web Storage Example
Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 5 Opera 10.50
Only Opera supports the Storage event's attributes but I've verified that the storage event can be triggered on Chrome 5 and Firefox 3.6 though, the attributes for the event are all set to undefined.
Introducing HTML5 Chapter 6
I saw the recent announcement by Paul Rouget that Firefox 4 beta 2 has support for CSS transitions and I thought it would be fun to play with it.
Here is a demo with complete source code where I chained together a bunch of CSS transitions using the transitionend event to trigger the transitions sequentially.
DEMO CSS transitions in Firefox 4 beta 2
The demo requires Firefox 4 beta 2
I found that the transitionend event was triggered more often then I expected and had to remove listeners for the event when I was done with them or they sometimes triggered again. I need to learn more about what triggers them.
Have fun with the code as that is the best way to learn.
DEMO Here’s our finished canvas with full source code.
The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context…
There is only one CanvasRenderingContext2D object per canvas, so calling the getContext() method with the 2d argument a second time must return the same object.
Having just one 2d context means that you have to keep track of everything on the context even if you only want to change part of the canvas.
An example of using layers is animation. When I was a child, I loved making animated cartoons and I learned that if I painted them on clear plastic sheets I could stack the sheets and only redraw the parts that moved. I could make an elaborate background and use it over and over instead of redrawing it for every frame. The same principle applies here to our canvases.
In this example, our three canvases have transparent areas that allow you to see what is on the canvas beneath each.Read more on “Using Multiple HTML5 Canvases as Layers” »
This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post. How to Drag and Drop on an HTML5 Canvas
init()to the body.onload event
Sounds like a lot but it really isn’t.
Here’s the DEMO page that should work in all current browsers including IE. The full source code for the page is listed below the canvas.Read more on “IE Compatible Canvas Drag and Drop With jQuery and ExCanvas” »
In this example we will look at slicing images with the
drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to slice out and draw individual sprites.
I made this example as simple as possible to keep from cluttering up the key concepts of slicing and drawing pieces of images on the canvas. It only moves in one direction by pressing the right arrow key on your keyboard.Read more on “Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas” »