Přejít k navigační liště

Zdroják » Různé » Flash: Multitouch a Gesta

Flash: Multitouch a Gesta

Články Různé

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.

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 – MultitouchInput­Mode.TOUCH_PO­INT (ve Windows 7 a iPhone OS 3.0+), nebo Gesta – MultitouchInput­Mode.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

Flash multitouch

GESTURE_TWO_FIN­GER_TAP

Dotyk dvou prstů současně.

TransformGestu­reEvent

(gesta vyvolané změnou)

Flash multitouch

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.

Flash multitouch

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í.

Flash multitouch

GESTURE_PAN

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

Flash multitouch

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.

PressAndTapGes­tureEvent

Flash multitouch

GESTURE_PRESS_AN­D_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í startTouchDragstopTouchDrag.

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.

Flash multitouch

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)

Komentáře

Subscribe
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pf

jeste k tomu tak 50 palcovej dotykovej LCD „panel“ a daji se s tim delat veci – kde se to da koupit takova vec?

Zwick
Matus

Vdaka za clanok! Tesim sa kedy to budem moct vyskusat.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.