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

Odebírat
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře
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.

Přístupnost není jen o splnění norem: nový pohled na inkluzivní design

Přístupnost a inkluze možná nepatří mezi nejžhavější témata digitálního světa – dokud o nich nezačne mluvit Vitaly Friedman. Na WebExpo 2024 předvedl, že inkluzivní design není jen o splněných checkboxech, ale hlavně o lidech. S energií sobě vlastní obrátil zažité přístupy naruby a ukázal, že skutečně přístupný web je nejen možný, ale i nezbytný.

Efektivnější vývoj UI nebo API: Co si odnést z WebExpo 2025?

Různé
Komentáře: 0
Jak snadno implementovat moderní uživatelské rozhraní? Které funkce brzdí rychlost vašeho webu? A kdy raději sami přibrzdit, abychom využitím AI nepřekročili etické principy? Debatu aktuálních dev témat rozdmýchá sedmnáctý ročník technologické konference WebExpo, která proběhne v Praze od 28. do 30. května. Který talk či workshop si rozhodně nenechat ujít? Toto je náš redakční výběr z vývojářských hroznů.

Zapřáhněte AI jako nikdy předtím. Květnová konference WebExpo přivítá hvězdy technologického světa

Od 28. do 30. května 2025 promění pražský Palác Lucerna na tři dny technologická konference WebExpo. Na programu je více než 80 přednášek a workshopů od expertů z celého světa. WebExpo tradičně propojuje vývojáře, designéry, marketéry i byznysové lídry a nabízí praktické dovednosti, strategické myšlení a přináší nejnovější trendy nejen v oblasti AI.