fitc android for flashers

Android for Flash (Lite) Developers

14 September 2009, FITC Mobile 2009, Toronto

Weyert de Boer

Sunday, September 6, 2009

About MeWeyert de Boer

Interaction Designer

Co-Author of books about Flash Lite and AIR

Flash Lite since Early 2005

Worked on Flash-based UIs for Motorola, T-Mobile and Vodafone


The Application

This session is about a Flash Lite application converted earlier this year to Android. It’s a simple application where you can get a list of articles and photos near the current location using the GPS.

And my experience about the conversion process.


The Application


Live!


Going Native? Why?

Why not wait until next month for the Flash Player 10 ?


The Good, the Bad and The Ugly


The GoodDeveloper oriented instead of designer

Flex-like ready-to-use components library (like buttons, listviews, grids etc).

You can easily reuse your pngs/image assets of your Flash Lite apps

Good on-device debugging support instead of Flash’s black box

Better memory management compared to Flash

Easy access the hardware of the mobile device.


The Bad Compared to Flash the animation support is limited and basically only supports code-based tweens and film roll like frame-by-frame animations. No timeline!

Way of designing interfaces using layouts has a learning curve

User interfaces are limited to 16-bit colours and use 565 dithering.

No real interface or layout designer comes with the SDK only a limited viewer.


The Ugly

A nasty bug in the Android 1.5 / Cupcake can cause a lot of lost time. If you ever used transparent colour (#00000000, rgba) in your layout. Blacks (#000000) is not black any more, you should use #000001.


Android Fundamentals

AndroidManifest.xml

Activities

Intents

Broadcast receivers


AndroidManifest.xml

AndroidManifest.xml describes the elements of the Android application, which permissions are needed? Which screens/activities does the application have?


Activities

An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window for you in which you can place your user interface.


IntentsAn intent describes what you would like to do. For example, an intent can be that you want to view a page in the browser or pick a person from the address book. A specific interaction moment.

Intents are the way to show the activity.


Broadcast receivers

A way to receive events or notifications from the Android system. This way your application can be notified when the user is back, like when he disabled the keyboard lock, or when a SMS message has been received.


Interfaces from the Flasher’s Eye

Android’s version of the movieclip is the View or ViewGroup (can contain children) and the building blocks for UI components.

Views are responsible for drawing and handling key events similar to the movieclips


Designing interfacesYou can use a declarative xml format to define your screens (so called layout xmls) or code up yourself in Java (similar to Flex MXML)

Android comes with nice layout mechanism to organize child views with.

You need to use the setContentView()-method to load layouts defined in xml files into an activity.


Examples in the Application


Menu Screen

ImageButton ImageView


GridView

PhotoItem layout

Photos Screen


PhotoItem in Flash

Frame Overlay Photo Background


PhotoItem in Android

Frame OverlayPhotoBackground


Warning!

Code snippets will be shown now! Little timesavers for starters


Tips and Tricks

Timesavers, things every Flash Lite developer wants to know when starting with Android development.


Android’s GetURL

As by most other things in Android you have to use an intent. Opening a page in the default web browser of the device.

Intent i = new Intent( Intent.ACTION_VIEW, Uri.parse("http://www.wikipedia.org") ); startActivity(i);


http://www.wikipedia.org

http://www.wikipedia.org

Showing a different screen or activity

Intent mainIntent = new Intent(MainMenu.this, ArticlesScreen.class); startActivity(mainIntent);


Activity in fullscreenOpening an activity window in fullscreen without status bar and application title bar can be hidden by code or by theme

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

<activity android:style="@android:style/Theme.NoTitleBar.FullScreen" />

XML

Java Code


Disabling automatic screen rotation

You can disable the automatic screen rotation by specifying the screen orientation for the activity in the AndroidManifest.xml or setting it to “nosensor”.

<activity ... android:screenOrientation= "potrait" />

<activity ... android:screenOrientation= "nosensor" />


Android’s attachMovie()You can create new views by using the LayoutInflater which creates all the views of a declared layout in code. A nice trick to make new instances of complex views.

LayoutInflater inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE );view = inflater.inflate(R.layout.photo_listitem, null );


Where is my trace()?You can use the Log-class for a similar feature as trace(). The log messages end up in the Logcat or Console panels in Eclipse.

And yes, this works in the emulator and on real devices

import android.util.Log;....Log.w("name", "my logmessage");


Giving views a name in layout xml file

You can specify an identifier or name to a view in the layout xml file via android:id attribute.

<TextView android:id="@+id/summary" />


Android’s way of this[“photo1”]

You can easily obtain child views of a layout by using:

(ImageButton) findViewById(R.id.articlesButton);


Hiding view from the screen

You can hide a view by setting the visibility of the view to View.GONE which means the view disappears from the screen and doesn’t take up space in the layout process while View.INVISIBLE will.

myView.setVisibility(View.GONE);

myView.setVisibility(View.INVISIBLE);


Loading and showing photos on demand

Android mainly supports the image file formats PNG, JPG and GIF. You can load an image in ImageView by using the BitmapFactory class and the Bitmap class.

1. Download the photo from the Internet

2. Convert to photo to a Bitmap-instance

3. Set the bitmap on an image view instancemyImageView.setImageBitmap( myBitmap );

myBitmap = BitmapFactory.decodeByteArray( ba, 0, ba.length );


Android’s Scale9

Android’s version of Flash’s Scale9 is called NinePatch and allows to do the same trick in a bit different way.


Questions?


fitc android for flashers

Technology

flash lite application

android application

flash lite appsgood

flash lite developersweyert

new intent intent

activity intent mainintent

flash player

activity window