手機應用程式的手指觸控滑動 (Swipe)效果
在先前的文章, 我們討論了如何在手機應用程式上使用放大縮小(Zoom)的手指觸控手勢 (Gestures), 現在看看如何使用另一個最常用的手指觸控 – 滑動 (Swipe)。所謂滑動手勢, 就是用手指按在屏幕上, 然後快速的在屏幕上滑動, 主要目的是滑動畫面的內容或轉換下一個畫面。
滑動手勢一般提供上、下左、右四個方向。當手指按在屏幕上向右滑動, 畫面便向右捲動; 如手指按在屏幕上向左滑動, 畫面便向左捲動; 同樣, 上下滑動便產生畫面上下捲動的效果。
今天就簡單討論如何使用 Flash CS6 製作Android 手機應用程式的滑動 (Swipe)效果。
我會用以下的例子來討論如何控制滑動這效果。
這手機應用程式例子十分簡單, 在舞台上只有一個藍色方塊的 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)效果, 可以設計出很多有趣的手機應用程式, 以後有機會在這裡在大家一起討論。