Flash: Multitouch a Gesta

Interakce s počítači a mobilními telefony se postupem času mění. Hitem sezóny jsou displeje schopné rozpoznat více bodů dotyku a touchpady. Flash Player 10.1 vychází trendu vstříc a nativně podporuje multitouch i ovládací gesta, známá např. z iPhone, jako jsou zoom, rotate nebo scale.
Nálepky:
Multitouch jako nový způsob ovládání mění celkové vnímání a pojetí uživatelského rozhraní aplikací. Akce, u kterých bylo třeba používat více kliků či pomocné klávesy, lze nyní zvládnout pomocí chytých gest.
Podpora multi-touche ve Flash Playeru a AIRu
(V případě iPhone se jedná o možnost kompilace do nativního kódu pomocí Adobe Packager for iPhone, který bude dodávaný s Flash CS5)
Flash a AIR nabízí více způsobů, jak pracovat s dotykovými zařízeními a multitouchem. V první řadě je to přímý přístup k dotykům – MultitouchInputMode.TOUCH_POINT (ve Windows 7 a iPhone OS 3.0+), nebo Gesta – MultitouchInputMode.GESTURE
(ve Windows 7, v Mac OS X 10.5.3+ s multi-touch trackpadem – v tuto chvíli pouze AIRové aplikace, a v iPhone OS 3.0+)
Plánuje se i podpora multi-touche ve Flash Playeru a AIRu v Androidu.
Počet dotykových bodů
Každé zařízení podporuje různý počet dotykových bodů – to se odvíjí od použité technologie. Pokud jsou například použité kamery pro snímání, lze dosáhnout téměř „neomezeného počtu“ dotyků, v případě kapacitního displeje se počty bodů rok od roku neustále zvětšují – iPhone má např. 5 dotykových bodů. Počet na daném zařízení zjistíte přes Multitouch.maxTouchPoints
.
Podporované gesta
Seznam podporovaných gest na daném zařízení získáme pomocí Multitouch.supportedGestures
. Rozlišujeme tři různé události gest, které obsahují další specifická gesta:
GestureEvent

GESTURE_TWO_FINGER_TAP
Dotyk dvou prstů současně.
TransformGestureEvent
(gesta vyvolané změnou)

GESTURE_ROTATE
Otáčení je jedno ze základních a nejpoužívanějších gest, při němž dvěma prsty otáčíte v kruhu. Vrací se rozdíl otočení rotation
.

GESTURE_ZOOM
Zvětšení nebo zmenšení. Dva prsty se od sebe diagonálně vzdalují. Vrací se scaleX a scaleY
– tedy rozdíl zvětšení.

GESTURE_PAN
Posouvání dvěma prsty. Vrací se offsetX a offsetY
– rozdíl pozice.

GESTURE_SWIPE
Tohle gesto třemi prsty se používá např. při listování v prezentaci či stránce. Je to rychlý pohyb prsty do strany.
PressAndTapGestureEvent

GESTURE_PRESS_AND_TAP
Gesto známé z Windows na vyvolávání kontextového menu. Nejprve s dotknete jedním prstem a hned po něm přidáte druhý.
Ukázky práce s multitouchem
Ukázka č. 1 / Gesta
import flash.events.TouchEvent; import flash.events.TransformGestureEvent; Multitouch.inputMode = MultitouchInputMode.GESTURE; stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate); stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom); stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan); stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe); function onRotate(event:TransformGestureEvent):void{ mySprite.rotation += event.rotation; } function onZoom(event:TransformGestureEvent):void{ mySprite.scaleX *= event.scaleX; mySprite.scaleY *= event.scaleY; } function onPan(event:TransformGestureEvent):void{ mySprite.x += event.offsetX; mySprite.y += event.offsetY; } function onSwipe(event:TransformGestureEvent):void{ trace("swipe"); }
Přímý přístup k multi-touchi
Tato metoda umožňuje přistupovat ke všem dotykům současně a pracovat s nimi jakýmkoliv způsobem. Každý dotyk má unikátní touchPointID
a první dotyk zjistíme pomocí isPrimaryTouchPoint
. Na pokročilejších typech displayů můžeme zjistit i tlak pressure
a velikost dotyku sizeX, sizeY
.
Sprite má nově k dispozici o novou podporu pro drag and drop pomocí startTouchDrag
a stopTouchDrag
.
Události můžeme registrovat na jakékoliv instanci InteractiveObject, odkud postupně probublají na vybraný objekt – což je velmi účinné, neodchytáváme tedy dotyky jen na globální úrovni, ale přímo na daných objektech.

TouchEvent
- TOUCH_BEGIN – Začátek dotyku
- TOUCH_END – Konec dotyku
- TOUCH_MOVE – Pohyb s dotykem
- TOUCH_ROLL_OVER – Vyvolaný po najetí prstem na InteractiveObject chápaného jako kontejner
- TOUCH_ROLL_OUT – Vyvolaný po odjetí prstem z InteractiveObject chápaného jako kontejner
- TOUCH_OVER – Vyvolaný po najetí prstem na jakýkoliv Child objekt InteractiveObjectu
- TOUCH_OUT – Vyvolaný po odjetí prstem z jakékoliv Child objekt InteractiveObjectu
- TOUCH_TAP – Krátký dotyk, podobný události MouseEvent.CLICK. Tato událost je zavolaná až po TOUCH_END.
Ukázka č. 2 / vypisování dotyků
import flash.events.TouchEvent; Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; var mySprite = new Sprite(); mySprite.graphics.beginFill(0x336699); mySprite.graphics.drawRect(0, 0, 320, 40); mySprite.cacheAsBitmap = true; mySprite.addEventListener(TouchEvent.TOUCH_BEGIN , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_END , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_MOVE , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_OUT , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_OVER , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_ROLL_OUT , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_ROLL_OVER , onTouch ); mySprite.addEventListener(TouchEvent.TOUCH_TAP , onTouch ); addChild(mySprite); function onTouch(event:TouchEvent):void{ if(event.type==TouchEvent.TOUCH_MOVE){ trace(event.touchPointID+", "); }else{ trace(flash.utils.getTimer()+": "+event.type+" "+event.touchPointID+"n"); } }
Simulátor: Testování multi-touche bez multi-touch zařízení
Pokud nemáte k dispozici multi-touch zařízení, můžete využít k testování Adobe Device Central, který podporuje testování dvou dotykových bodů se stisknutou klávesou Alt.
Další zdroje:
- Videotutoriál o multitouch programování ve Flashi (Lee Brimelow)
- Gesturecons – použité ikonky se souhlasem Ryana Lee
- E-seminar o multi-touch programování ve Flashi (Piotr Walczyszyn)
jeste k tomu tak 50 palcovej dotykovej LCD „panel“ a daji se s tim delat veci – kde se to da koupit takova vec?
Mrkni na:
http://j4w.cz/page/produkty/interaktivni-velkoplosne-obrazovky
Vdaka za clanok! Tesim sa kedy to budem moct vyskusat.
V podstate lze vyzkouset uz nyni. Staci mit AIR 2.0 SDK a Flash Builder 4
http://labs.adobe.com/technologies/air2/