手機應用程式的手指觸控滑動 (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)效果, 可以設計出很多有趣的手機應用程式, 以後有機會在這裡在大家一起討論。