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