View
11
Download
0
Category
Preview:
Citation preview
ActionScript 3.0 Multi-touch pt.2
Designing, coding & publishing for a touch-device
Thomas Lövgren
Flash developer, designer & programmer
thomas.lovgren@humlab.umu.se
Introduction to
Umeå Institute of Design, 2011-09-20
Lecture outline
As a preparation for this lecture, please have look at:
Multi-touch pt. 1 Terminology & techniques
In this lecture we‟ll discuss and practice the following topics:
Programming introduction, examples & exercises:
• Flash CS5/CS5.5 & AIR Multi-touch API
• Input Mode, classes & events
• TouchEvents & Gestures (coding examples)
• Adobe AIR
• Publising for Android & iOS
• Optimizing for Mobile-devices
• Adobe Device Central (tests)
• Multi-touch examples
Introduction to ActionScript 3.0 Multi-touch pt. 2
Multi-touch
The latest Flash Multi-touch API supports Single-touch, Multi-touch and Gestures on various
platforms, browsers and devices (Windows 7, Flash Player +10.1, AIR +2.0, Android & iOS etc)
The technique can handle as many touch points as the touch-device and underlying operating
system supports
All Touch-inputs are very similar to the standard AS3 Mouse/keyboard - events, which makes
it easy and intuitive to work with
The AS3 classes that handles Touch-inputs are:
TouchEvent, TransformGestureEvent, GestureEvent, PressAndTapGestureEvent, GesturePhase
Supported Gestures on various platforms: PAN, ROTATE, ZOOM, TWO_FINGER_TAP, GESTURE_PRESS_AND_TAP
The Adobe AIR technology also support Multi-touch for
publishing on: Web, Desktop, Android, iOS and TV
Adobe Flash CS5/CS5.5 & AIR Multi-touch API: Overview
http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html
Multi-touch
Multitouch InputMode: This property is necessary to tell the runtime what types of events
we want to receive, the three options are:
MultitouchInputMode.TOUCH_POINT
MultitouchInputMode.GESTURE
MultitouchInputMode.NONE
Examples of TouchEvents & Gestures (classes & events):
• TouchEvent.TOUCH_BEGIN
• TouchEvent.TOUCH_END
• TransformGestureEvent.GESTURE_ROTATE
• TransformGestureEvent.GESTURE_ZOOM
• TransformGestureEvent.GESTURE_PAN
• TransformGestureEvent.GESTURE_SWIPE
Adobe Flash CS5/CS5.5 & AIR Multi-touch API: Input mode, classes & events
Multi-touch
In this example we are using the TouchEvent class and the event TOUCH_BEGIN for
creating a new ‟circle-instance‟ on stage where the touch occurs
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
function onTouchBegin(event:TouchEvent):void{
circle = new Circle();
circle.x = event.stageX;
circle.y = event.stageY;
addChild(circle);
}
Note! Make sure you have set the
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
Flash CS5 Multi-touch API: TouchEvent coding example (TOUCH_BEGIN)
Multi-touch
Here is an example of using the TransformGestureEvent class and the Event
GESTURE_ROTATE for rotating a movie-clip (square_mc)
Multitouch.inputMode = MultitouchInputMode.GESTURE;
square_mc.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
function onRotate(event:TransformGestureEvent):void{
square_mc.rotation += event.rotation;
}
Note! Make sure you have set the
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Flash CS5 Multi-touch API: Gesture coding example (GESTURE_ROTATE)
Multi-touch
In this example we are using the GESTURE_ZOOM event for scaling a movieclip (Zoom &
Pinch)
Multitouch.inputMode = MultitouchInputMode.GESTURE;
square_mc.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoomPinch);
function onZoomPinch(event:TransformGestureEvent):void{
square_mc.scaleX *= event.scaleX;
square_mc.scaleY *= event.scaleY;
}
Flash CS5 Multi-touch API: Gesture coding example ( GESTURE_ZOOM)
Multi-touch
The following example shows event handling for the GESTURE_SWIPE event;
When the user performs a „Swipe-Gesture‟ the square_mc moves
Multitouch.inputMode = MultitouchInputMode.GESTURE;
square_mc.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
function onSwipe (event:TransformGestureEvent):void{
if(event.offsetX == 1){ //user swiped towards right
square_mc.x += 100;
}
if(event.offsetX == -1){ //user swiped towards left
square_mc.x -= 100;
}
}
Note! Another name for the Swipe-gesture is ”Flick”
Flash CS5 Multi-touch API: Gesture coding example (GESTURE_SWIPE)
Multi-touch
The following example demonstrates „Drag & drop‟ of a circle-movieClip, touchPointID is an
unique identifier for each circle created on stage
var circle:Circle;
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
function onTouchBegin(event:TouchEvent):void{
circle = new Circle(); //add cricle from library
circle.x = event.stageX; //touch x-pos
circle.y = event.stageY; //touch y-pos
addChild(circle); //add to display list
circle.startTouchDrag(event.touchPointID, true);
circle[event.touchPointID] = circle;
}
function onTouchEnd(event:TouchEvent):void{
circle = circle[event.touchPointID];
removeChild(circle);
}
Flash CS5 Multi-touch API: ’Drag & Drop’ with touchpointID
Multi-touch
Adobe AIR (Adobe Integrated Runtime) is a powerful technique for developing Flash-based
cross-platform standalone applications that can run on several operating system including
computers/desktops, mobile phones/tablets & TV’s etc
The Adobe Flash/AIR technology makes it possible to reach a wide audience - content can be
published for the web, smart-phones, tablets, desktops & TV‟s
An easy-to-use API for installation and updates; Installed applications have more persistence,
power, and functionality
Adobe AIR requires an installation of „AIR runtime‟ (plug-in, PC & Mac)
The current version of AIR is 2.7 (3.0 beta is available)
Adobe AIR: Standalone applications
Multi-touch
http://www.adobe.com/products/air/
Adobe AIR applications can be developed with Flash CS5/5.5 and ActionScript 3
AIR applications & Games can be „ported‟ for Android & iOS (growing market today!)
Access „native functions‟ like: Back-, home-, Search button, camera, file-system, USB
This cross-platform technology allows developer/designers publishing content as „standalone‟
applications on various type of devices, systems & screens
Open Screen Project: “Enable consumers to engage with rich Internet experiences seamlessly across
any device, anywhere” (http://www.openscreenproject.org/)
Adobe AIR: Developing with AIR
Multi-touch
Pixel Wipeout (2011)
Adobe AIR with ActionScript 3 and the latest Multi-touch API offers an easy, fast and intuitive
way of developing and publish applications for mobile-devices
The publishing dialogue includes settings for: FullScreen, orientation, icons, permissions etc
Access „native functions‟ like: Back-, home-, search buttons on the device with AS3 code
Positive feature “one-click”: Export, install and debug directly on the device!
Developing and publish for an Android device can be done in the following steps (see video below for more info):
1. Start by creating a new „AIR for Android‟ document from the template
2. Build (Design/program) your application
3. Publish the app, by using the “AIR Android settings” dialogue
4. Transfer the apk-file (Android application package file) to the device
5. Install and test the application on the device
6. Done!
Adobe AIR: AIR applications for Android
Multi-touch
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/flash-professional-cs55-publishing-an-air-for-android-app/
Adobe Flash Platform tools and ActionScript 3.0 code can be used to build Adobe AIR applications for
iPhone, iPad & iPod-touch. These applications are distributed, installed, and run just like other iPhone
applications
Flash CS5.5 includes a „Packager for iOS‟
The „Packager‟ compiles ActionScript 3.0 bytecode into native iOS code
You need to obtain an iOS developer certificates from Apple (Apple Developer program)
When publishing from Flash CS5.5, you‟ll sign the certificate and then use iTunes for
transferring the file to your device
Below: A video-clip from Adobe how to publish Flash/AIR apps on iOS devices
Adobe AIR: Building Flash/AIR applications for iOS (Flash CS5.5)
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/flash-professional-cs55-publishing-content-to-ios-devices/
Multi-touch
Make your application more optimized by taking into consideration the following factors:
Performance: Smart-phones and tablets have in general fewer hardware resources than desktop
computers today (RAM, CPU power, GPU resources, etc)
Screen size: The physical size and resolution limit the amount of information that can be displayed at
one time
Interactivity: Interface, menus (single or multi-user) , interaction, navigation (orientation, touch-
inputs, touch-events & gestures etc)
„Programming-technical‟ optimizing parts for Mobile-devices (PDF):
http://help.adobe.com/en_US/as3/mobile/flashplatform_optimizing_content.pdf
To the left: Adobe Max-video about Optimizing
(by Ben Stucki)
Optimize Flash-content for mobile devices: Guidelines
Multi-touch
http://2010.max.adobe.com/online/2010/MAX126_1288126140366VDFJ
Adobe Device Central provides designers and coders a comprehensive testing facility that
approximates how pages and graphics will look on a variety of cell phones
A library of over 200 mobile device profiles are updated quarterly in the Device Central
Example of supported test-features: Multi-touch, Screen resolutions, color depths, memory
constraints, and other performance characteristics
Adobe Device Central: Preview & simulate tests on a device (Flash CS-suite)
Multi-touch
http://www.adobe.com/products/devicecentral.html
Step guide: 1. Open the .SWF file
2. Select the Flash Player 10.1 device
3. Embedded in HTML 4. Test Multi-touch (see below)
Commands for testing Multi-touch
Multi-touch and the Flash Platform (Adobe TV 64 min)
Example of GestureWorks running on a 3M 22" Multitouch Screen
Tanki online on Multi-touch
Adobe Flash Player 10.1 on Galaxy tab
Flash-technology: One App, Five Screens
Flash-based Multi-touch: links & examples
http://www.youtube.com/watch?v=QF3-D0SvxEs
http://tv.adobe.com/watch/max-2009-design/multitouch-and-the-flash-platform
http://blog.alternativaplatform.com/en/2010/01/11/multitank/
http://www.youtube.com/watch?v=L-TPvllj8fs
http://blogs.adobe.com/cantrell/archives/2010/04/one_application_five_screens.html
Multi-touch
Recommended