flex multi-screen development

32
Flex | .Net | Mobile

Upload: easelsolutions

Post on 22-Apr-2015

3.154 views

Category:

Technology


0 download

DESCRIPTION

This is a presentation delivered to the MN .Net Forum about multi-screen development with Adobe Flex

TRANSCRIPT

Page 1: Flex multi-screen development

Flex | .Net | Mobile

Page 2: Flex multi-screen development

Dustin [email protected]@dtauer

Page 3: Flex multi-screen development

I Teach

Page 4: Flex multi-screen development

I Use

Page 5: Flex multi-screen development

• Brief overview of mobile development with Adobe AIR• Compare mobile platforms– iOS, RIM, Android

• Developing a multi-screen mobile application– Flash Builder 4.5– Developing | Debugging | Distributing

• Q&A

Page 6: Flex multi-screen development
Page 7: Flex multi-screen development

Device Landscape

Page 8: Flex multi-screen development

Adobe AIR

• Desktop application• Requires the free AIR Runtime• Build once, Publish many– File.desktopDirectory;– CameraRoll.browseForImage();

Page 9: Flex multi-screen development

Adobe AIR

• Eliminates the need to learn multiple programming languages– iOS -> Objective C– Android -> Java– Windows -> Silverlight– Blackberry -> Java

• Develop in Flash, export to your desired platform– iOS -> IPA file– Android -> APK file– Blackberry -> BAR/COD file

Page 10: Flex multi-screen development

Adobe AIR

• With most platforms, you’re exporting an AIR application• AIR app is “wrapped” with a native installer (i.e. APK file)• Application is installed

– If user doesn’t have AIR, they will be prompt to download– AIR app is then installed

• iOS is the only exception– App is converted to a NATIVE iOS application because iOS does

not support Adobe AIR

Page 11: Flex multi-screen development

What do I need to get started?

Page 12: Flex multi-screen development

Tool

• Flash CS5.5– Export Android, iOS, and BlackBerry Tablet applications– More platforms coming…

• Flash Builder 4.5– Build Flex/ActionScript mobile applications

• Flex 4.5 SDK contains mobile optimized-components• Currently supports Android apps• iOS and BlackBerry Tablet OS coming in June update

Page 13: Flex multi-screen development

Understanding Flex

Flash Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Debuggers

• Open Source Flex• 2 languages (MXML, ActionScript 3)• Compilers• Rich component library• Data visualization libraries• Debuggers

• Flash Builder IDE• Eclipse plug-in or turn-key install• Accelerates design and development• Design view and code view

Page 14: Flex multi-screen development

• Standalone AIR applications for Android, BlackBerry, and iOS

• New, mobile-specific components added for application navigation and state management

• UIs tailored for different form factors• Optimized for mobile device performance• Existing Spark components retro-fitted for mobile• Customizable components through skinning and

styling

Flex 4.5 – A single framework for web, desktop and mobile

Page 15: Flex multi-screen development

What about .Net?

• GET/POST using HTTPService or URLLoader• SOAP using WebService• AMF Remoting using RemoteObject– Map C# class to ActionScript Classes

http://www.adobe.com/devnet/flex/flex_net.html

Page 16: Flex multi-screen development

Create a new Flex Mobile Project

Design View is Mobile-Optimized

Page 17: Flex multi-screen development
Page 18: Flex multi-screen development

Detecting Device Capabilities

Page 19: Flex multi-screen development

Device Capabilities

• Multitouch• Accelerometer• Orentation• Microphone• Keyboard• GPS• Camera

Page 20: Flex multi-screen development

Check for support

Page 21: Flex multi-screen development

GPS

Page 22: Flex multi-screen development

Orientation

Page 23: Flex multi-screen development

Multi-touch: You CAN touch this

Page 24: Flex multi-screen development

Raw touch points

Gestures

Page 25: Flex multi-screen development

Optimization

Page 26: Flex multi-screen development

Optimization Considerations

• Consider bitmaps over vectors• Keep bitmaps as small as possible• When in doubt, use ActionScript– MXML can be more costly

Page 27: Flex multi-screen development

Event propagation

Page 28: Flex multi-screen development

Frame Rate and Memory Management

https://github.com/mrdoob/Hi-ReS-Stats

Page 29: Flex multi-screen development

Developer Programs

Page 30: Flex multi-screen development

• $99/year• You get 70% of sales revenue

• Blackberry Tablet OS• $200 for 10 applications, you get 80% of sales revenue

• Free to develop applications– One-time $25 fee if you want to submit to marketplace

• You get 70% of sales revenue

Page 31: Flex multi-screen development

Resources

• Flash Builder 4.5 and Flex 4.5– http://www.adobe.com/products/flash-builder.html– http://www.adobe.com/devnet/flash-builder.html– http://www.adobe.com/devnet/devices/mobile-apps.html– http://www.adobe.com/devnet/flex.html

• Flex and .Net– http://www.adobe.com/devnet/flex/flex_net.html– http://www.themidnightcoders.com/products/weborb-for-net/– http://www.fluorinefx.com/

Page 32: Flex multi-screen development

Q & A

Thank you!blog.easelsolutions.com

adobe.com/devnet/mobileadobe.com/devnet/flex