An introduction to flash mobile technology on android ios and blackberry
This presentation is the property of its rightful owner.
Sponsored Links
1 / 28

Cross-Platform App Development with Flex Mobile PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on
  • Presentation posted in: General

An Introduction to Flash Mobile Technology on Android, iOS , and Blackberry. Cross-Platform App Development with Flex Mobile. Oswald Campesato HTML5 Canvas/CSS3 Graphics Primer Twitter: @ ocampesato. Stephen Chin Chief Agile Methodologist at GXS Twitter: @ steveonjava

Download Presentation

Cross-Platform App Development with Flex Mobile

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


An Introduction to Flash Mobile Technology on Android, iOS, and Blackberry

Cross-Platform App Development with Flex Mobile

Oswald Campesato

HTML5 Canvas/CSS3 Graphics Primer

Twitter: @ocampesato

Stephen Chin

Chief Agile Methodologist at GXS

Twitter: @steveonjava

http://flash.steveonjava.com/


Flash and AIR on Android, iOS, and Blackberry

  • Available on Androidand Blackberry Phones and Tablets

  • Does not run on iPhone or iPad

  • Works in the Browser

  • Limited Access to Device APIs

Adobe Flash

  • Available on Android, Blackberry, and iOS

  • Works on Smart Phones and Tablets

  • Deploys as a Native Application

  • Gives Full Access to Device APIs

Adobe AIR


Flash Tooling


Hello Flash on 3 Platforms…


BlackBerry Playbook Specs

  • “Enterprise Ready" Device

  • 7" Screen (9.7mm Thick)

  • HTML5 and FULL Flash 10.1

  • Hardware Accelerated Video

  • Supports HDMI (TV output)

  • Displays PPT and Documents

  • Front and Rear Cameras

  • 1 GHZ core and 1GB RAM

  • Q1/Q2 of 2011


BlackBerry Deployment

  • Register for Blackberry App World Account

    • Free, but requires ID verification (driver's license)

  • Request code signing certificates

    • Takes 1-2 business days for a response

  • Install Blackberry SDK

    • Integrates with Flash Builder 4.5

  • Install Plug-in Update

    • Manual process right now

  • Setup device in Flash Builder

    • Turn on device debugging

    • Enable via USB or Wifi

  • Setup Flash Builder with 2 certificate files

Difficult Rating:

Moderate 


Android Tablet Flash Devices

  • Samsung Galaxy Tab

    • "enterprise ready" device

    • 7" screen

  • Motorola Xoom

    • First HoneyComb (3.1 device)

  • Samsung Galaxy Tab 10.1

    • Dual-core Tegra processor

    • 10.1", 1280x800 screen

  • Sony Tablet P (not yet available)

    • Dual 5.5" screens


Deploying to Android

  • Turn on Device Debugging

  • Plug in via USB

    • And install necessary drivers

  • Deploy!

Difficult Rating:

Easy! 


iOS Devices

  • iPhone 3/3GS

    • 320x480 Display

  • iPhone 4/4S

    • 640x960 Retina Display

    • A4/A5 Processor

  • iPad 1/2

    • 1024/768 Display

    • A5 Processor


Deploying to iOS

  • Sign up for Apple's developer program

    • This costs $$$

  • Buy a Mac computer (or borrow a friend's)

  • Go through Apple's deployment process to create a certificate

    • Involves cert generation and other annoyances

  • Install in Keychain and export as a P12

  • Create an application profile and export it

  • Install cert and app profile in Flash Builder

  • Build app packaging in Flash Builder

    • Debug mode is quick (but slower performance)

  • Manually install via iTunes (install and sync to device)

    • Remember to uninstall previous app versions

  • Repeat process for each app you develop

Difficult Rating:

Painful 


Device Screen Characteristics


Screen Resolution vs. Density


Density in Flex Applications

1

2

3

4

5


Density Explorer Application

<fx:Script>

<![CDATA[

[Bindable]

protectedvarapplicationDPI:Number;

[Bindable]

publicvardeviceDPI:Number;

]]>

</fx:Script>

<s:VGrouppaddingTop="20" paddingLeft="15" paddingRight="15" paddingBottom="15"

gap="20" width="100%" height="100%">

<s:Label text="Application DPI:"/>

<s:HGroup gap="30">

<s:RadioButton id="ad160" content="160"

click="applicationDPI = 160"/>

<s:RadioButton id="ad240" content="240" click="applicationDPI = 240"/>

<s:RadioButton id="ad320" content="320" click="applicationDPI = 320"/>

</s:HGroup>

<s:Label text="Device DPI: {deviceDPI}"/>

<s:HSlider id="dpiSlider" minimum="130" maximum="320" value="@{deviceDPI}" width="100%"/>

</s:VGroup>


Automatic Resizing

160ppi

240ppi

320ppi


Detecting Orientation

  • Can be done via:

    • Event Callback

      • stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, <function callback>);

    • States

  • StageOrientation Values

    • DEFAULT

    • ROTATED_LEFT

    • ROTATED_RIGHT

    • UPSIDE_DOWN

    • UNKNOWN


Flash/AIR Mobile APIs

  • Screen Orientation *

  • Multitouch *

  • Gestures *

  • Accelerometer

  • Camera

  • CameraRoll

  • GPS

  • Microphone

  • Audio

  • Video*

  • REST

  • JSON/XML

  • ViewNavigator*

  • CSS

  • Etc.

* APIs we will show examples of today


Mulititouch

Gestures

Rotate

Swipe

Two Finger Tap

Pan

Zoom

Illustrations provided by Gestureworks (www.gestureworks.com)


Gestures via addEventListener

public class MultitouchImage extends Image {

public function MultitouchImage() {

addEventListener(TransformGestureEvent.GESTURE_ROTATE,

rotateListener);

addEventListener(TransformGestureEvent.GESTURE_ZOOM,

zoomListener);

Multitouch.inputMode = MultitouchInputMode.GESTURE;

}

protected function rotateListener(e:TransformGestureEvent):void {

rotation += e.rotation;

}

protected function zoomListener(e:TransformGestureEvent):void {

scaleX *= e.scaleX;

scaleY *= e.scaleY;

}}}


Gestures via Events

protected function swipe

(e:TransformGestureEvent):void {

page = (page + e.offsetX +

pages.numElements) %

pages.numElements;

updateVisibility();

}

<s:VGroupgestureSwipe="swipe(event)”/>


Android Scrapbook Example


Sketch Example


Flex Mobile Views/Controls

  • ViewNavigatorApplication

  • Views

  • ViewNavigator

  • Splash Screen

  • Components:

    • ActionBar

    • Text Components

    • List, Scroller, and Touch Gestures


Flex Mobile Controls Demo


Video Example


Development Links

  • Android SDK

    • http://developer.android.com/sdk/index.html

  • AIR 2.5

    • http://labs.adobe.com/technologies/air2/android/

  • Flex Builder 4.5 (Burrito)

    • http://labs.adobe.com/technologies/flashbuilder_burrito/

  • Flex Catalyst 5.5 (Panini)

    • http://labs.adobe.com/technologies/flashcatalyst_panini/

  • Flex 4.5 SDK (Hero)

    • http://labs.adobe.com/technologies/flexsdk_hero/

  • iPhone Packager

    • http://labs.adobe.com/technologies/packagerforiphone/


Blogs to Read

  • Stephen Chin

    • http://flash.steveonjava.com/

  • Duane Nickull

    • http://technoracle.blogspot.com/

  • Christian Cantrell

    • http://blogs.adobe.com/cantrell/

  • Christophe Coenraets

    • http://coenraets.org/blog/

  • Serge Jespers

    • http://www.webkitchen.be/

  • Lee Brimelow (The Flash Blog)

    • http://blog.theflashblog.com/

  • Mark Doherty (FlashMobileBlog)

    • http://www.flashmobileblog.com/


Pro Android Flash

Stephen Chin, Oswald Campesato, Dean Iverson, and Paul Trani

http://steveonjava.com/

  • Includes:

  • UI Controls

  • Media Support

  • Mobile Flex APIs

  • Android Market Deployment

  • Extensive Examples

Available Now!


  • Login