手機應用程式的手指觸控滑動 (Swipe)效果

在先前的文章, 我們討論了如何在手機應用程式上使用放大縮小(Zoom)的手指觸控手勢 (Gestures), 現在看看如何使用另一個最常用的手指觸控 – 滑動 (Swipe)。所謂滑動手勢, 就是用手指按在屏幕上, 然後快速的在屏幕上滑動, 主要目的是滑動畫面的內容或轉換下一個畫面。

滑動手勢一般提供上、下左、右四個方向。當手指按在屏幕上向右滑動, 畫面便向右捲動; 如手指按在屏幕上向左滑動, 畫面便向左捲動; 同樣, 上下滑動便產生畫面上下捲動的效果。

今天就簡單討論如何使用 Flash CS6 製作Android 手機應用程式的滑動 (Swipe)效果。

我會用以下的例子來討論如何控制滑動這效果。

flash-cs6-android-app-swipe-gesture-02

這手機應用程式例子十分簡單, 在舞台上只有一個藍色方塊的 MovieClip (box_mc)。為了方便解釋, 在舞台的上、下、左、右方各劃了一條參考直線。

測試一: 滑動效果 (沒有 Tween Effect)

我們先嘗試可否將藍色方塊向左、右及上、下滑動。為了簡單, 滑動是沒有加入 Tween 的效果。

要容許應用程式可以在手機屏幕上使用 Swipe (滑動) Gestures, 要在 Flash CS6 加入以下幾行的 AS3 程式碼:

// set the inputMode to MultitouchInputMode.GESTURE to fire event listeners
Multitouch.inputMode = MultitouchInputMode.GESTURE;

// Use addEventListener listen for swipe gestures.
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

// Function response to swipe gestures
function onSwipe(e:TransformGestureEvent):void
{
switch (e.offsetX)
{
case 1 :    // Right
{
// Decide destination location move to right
box_mc.x = stage.stageWidth - (box_mc.width/2);
break;

};
case -1 :    // Left
{
// Decide destination location move to left
box_mc.x = box_mc.width / 2;
break;

}
};
switch (e.offsetY)
{
case 1 :    // Down
{
// Decide destination location move to down
box_mc.y = stage.stageHeight - (box_mc.height/2);
break;

};

case -1 :    // Up
{
// Decide destination location move to up
box_mc.y = box_mc.height / 2;
break;

}
}
};

以上的 AS3 程式碼都十分簡單, 應該十分容易明白。

接著檢視 Apps 的效果。

當手指按在屏幕上向左右滑動, 藍色方塊便隨即向左右滑動; 同樣, 當手指按在屏幕上向上下滑動, 藍色方塊便向上下滑動。以下電影可以更清楚顯示滑動的效果:

上述的藍色方塊因為沒有加入 Tween 的效果, 所以看來沒有滑動的感覺。

測試二: 滑動效果 (加入 Tween Effect)

手機應用程式上使用的滑動一般都會加入一些效果, 以免使用者覺得沈悶。現在就在上述的滑動加入 Tween Effect, 令滑動的過程更加明顯。

在手機應用程式的 Swipe (滑動) Gestures 加入 Tween Effect 是十分容易,  在 Flash CS6 的 AS3 程式碼稍作更改便可以了, 如下:

import fl.transitions.*;
import fl.transitions.easing.*;

var TweenX:Tween;
var TweenY:Tween;

// set the inputMode to MultitouchInputMode.GESTURE to fire event listeners
Multitouch.inputMode = MultitouchInputMode.GESTURE;

// Use addEventListener listen for swipe gestures.
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

// Function response to swipe gestures
function onSwipe(e:TransformGestureEvent):void
{
switch (e.offsetX)
{
case 1 :    // Right
{
// Decide destination location move to right
//box_mc.x = stage.stageWidth - (box_mc.width/2);

//Apply Tween animation to the Box
TweenX = new Tween(box_mc, "x", Regular.easeOut, box_mc.x, stage.stageWidth - (box_mc.width/2), 2, true);

break;

};
case -1 :    // Left
{
// Decide destination location move to left
// box_mc.x = box_mc.width / 2;

//Apply Tween animation to the Box
TweenX = new Tween(box_mc, "x", Regular.easeOut, box_mc.x, box_mc.width/2, 2, true);

break;

}
};
switch (e.offsetY)
{
case 1 :    // Down
{
// Decide destination location move to down
// box_mc.y = stage.stageHeight - (box_mc.height/2);

//Apply Tween animation to the Box
TweenY = new Tween(box_mc, "y", Regular.easeOut, box_mc.y, stage.stageHeight - (box_mc.height/2), 2, true);

break;

};

case -1 :    // Up
{
// Decide destination location move to up
// box_mc.y = box_mc.height / 2;

//Apply Tween animation to the Box
TweenY = new Tween(box_mc, "y", Regular.easeOut, box_mc.y, box_mc.height/2, 2, true);

break;

}
}
};

接著檢視 Apps 的效果。

藍色方塊加入了 Tween 動畫後, 滑動的效果十分明顯了。以下電影顯示了 Tween 滑動的效果:

利用手指觸控滑動 (Swipe)效果, 可以設計出很多有趣的手機應用程式, 以後有機會在這裡在大家一起討論。

 

Leave a Reply

Your email address will not be published. Required fields are marked *