手機應用程式手指觸控放大縮小效果討論
在使用電腦桌面應程式時, 我們大部份時間都是利用滑鼠來控制程式的運作。但是, 智能手機都沒有滑鼠這裝備, 一些功能主要都是靠手指觸控來控制。
所謂手指觸控, 從技術層面來看, 主要包括接觸 (Touch) 和手勢 (Gestures) 兩種事件。Touch 是監測手指在屏幕上的活動, 包括手指的數量和接觸點的位置; 而 Gestures 則是監測 Touch 以上層次的活動, 即當 Touch 事件一旦發生, Gestures 接著會產生那些活動行為, 包括放大縮小(Zoom)、旋轉(Rotate)和滑動 (Swipe)等等…
如果設計的手機應用程式是容許使用者使用 Gestures 手指觸控, 那麼便需要考慮 Gestures 對應用程式的效果了。
在所有 Gestures 當中, Zoom 是最常用的手指觸控。Zoom 其實包括了放大和縮小, 當兩隻手指同時按在屏幕上向外拉便是放大, 而向內推便是縮小。
今天就討論在使用 Flash CS6 製作Android 手機應用程式時, 手指觸控放大縮小對手機應用程式的效果。
我同樣以小丑面孔這例子來討論如何控制放大縮小這效果。
測試一: 放大及縮小舞台上的單獨物件
我們先嘗試將小丑面孔(clown_mc)單獨的放大及縮小, 看看效果如何。
要容許應用程式可以在手機屏幕上使用 Zoom (放大縮小) Gestures, 要在 Flash CS6 加入以下幾行的 AS3 程式碼:
// Use addEventListener listen for the zoom gestures.
addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomListener);
// set the inputMode to MultitouchInputMode.GESTURE to fire event listeners
Multitouch.inputMode = MultitouchInputMode.GESTURE;
// Function response to zoom gestures
function zoomListener(e:TransformGestureEvent):void
{
// Multiplies the object by scaleX and scaleY parameters
clown_mc.scaleX *= e.scaleX;
clown_mc.scaleY *= e.scaleY;
// Make sure the resize in X and Y are the same
clown_mc.scaleY = clown_mc.scaleX;
}
接著檢視 Android 應用程式執行結果。
應用程式正常地顯示在手機屏幕上。
接著用雙指按在屏幕上將應用程式放大。小丑面孔單獨的放大了。
請留意: 舞台的尺寸是沒有跟隨放大的。
用雙指按在屏幕上將應用程式縮小。小丑面孔單獨的縮小了。
請留意: 舞台的尺寸是沒有跟隨縮小的。
以下的電影可以更清楚的顯示效果:
如果只希望使用者將某一些物件(例如: 按鈕)放大, 以上的設計是非常合適的。
但是, 一般的手機應用程式都是將整個舞台或畫面同時放大及縮小, 那麼在技術上應該如何處理呢? 以下就繼續討論這點。
測試二: 放大及縮小整個舞台
要將整個舞台或畫面同時放大及縮小, 其實概念和上述的方法是一樣的。只要把所有物件放在一個 Container (例如: Movie Clip)便可以了。 為了使效果更明顯, 我在舞台的背景加了一些彩色氣球, 如下圖所示:
現在, 只要使用 ActionScript 3 將 Container (outerContainer_mc) 容許 Zoom (放大縮小) Gestures, 這樣所有在 Container 的物件都會同時放大縮小, 也就是同時放大縮小整個舞台或畫面了。
程式碼和第一個方法是幾乎一樣的, 唯一不同是放大縮小的對象而已。第一個方法的放大縮小的對象是小丑面孔(clown_mc), 而這方法的放大縮小的對象是 Container (outerContainer_mc)。
// Use addEventListener listen for the zoom gestures.
addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomListener);
// set inputMode to MultitouchInputMode.GESTURE
// to fire event listeners
Multitouch.inputMode = MultitouchInputMode.GESTURE;
// Function response to zoom gestures function
function zoomListener(e:TransformGestureEvent):void
{
// Multiplies the movie clip container by scaleX and scaleY parameters
outerContainer_mc.scaleX *= e.scaleX;
outerContainer_mc.scaleY *= e.scaleY;
// Make sure the resize in X and Y are the same
outerContainer_mc.scaleY = outerContainer_mc.scaleX;
}
以下電影可以清楚顯示同時放大縮小整個舞台或畫面的效果:
到此, 相信大家對手機應用程式手指觸控放大縮小的效果都有初步的認識了。