Flash/ActionScript 3.0 programming

cabbagetreatmentSoftware and s/w Development

Jul 4, 2012 (5 years and 3 months ago)

358 views


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