Adding swipes to your App

Adding swipes to your App
23rd December 2011 Shane

The sample code in this tutorial shows you how to add swipe gestures to your app, it is the same test app from the last tutorial, however this time we call the function showTxt() by swiping right, clear the text field with an instance name of “outputTxt”, by swiping left, change the Click Me buttons label by swiping up and change it back again by swiping down.

Here’s the skeleton swipe code;

function swipeMe (e:TransformGestureEvent) :void {
if (e.offsetX == 1) {
//Do stuff on swipe right
}
else if (e.offsetX == -1) {
//Do stuff on swipe left
}
else if (e.offsetY == -1) {
//Do stuff on swipe up
}
else if (e.offsetY == 1) {
//Do stuff on swipe down
}
}

See sample code comments for more information, of course we could have set any of the swipes to do anything we liked, for example, we could have used gotoAndStop(x) or gotoAndPlay(x) where (x) is a frame number, to jump to another frame, which could contain a help screen with different graphics or MovieClips, or use, nextFrame() and prevFrame(), to cycle through frames consecutively.

For example, to create a book type app from a Flash AS3 document with 3 frames, (Add in some “Variables”, “Conditional Statements”, “Buttons” , some fancy graphics and a good story line and you could easily create an interactive point and touch type game).

The swipe code could look like this:

function swipeMe (e:TransformGestureEvent) :void {
if (e.offsetX == 1) { // swipe right
nextFrame() ;
}
else if (e.offsetX == -1) { // swipe left
prevFrame();
}
else if (e.offsetY == -1) { // swipe up
gotoAndStop(1);
}
else if (e.offsetY == 1) { // swipe down
gotoAndStop(3);
}
}

We can target an individual “MovieClip’s” Properties using dot syntax, type your instance name followed by a period and Flash will display a list of available options (note: if nothing happens after you have typed the period, press Ctrl+Space on a PC or Cmd +Spacebar on a Mac, or press the icon that looks like a speech bubble at the top of the Actions Panel to bring up Code Hinting (Note: if you can’t see the Actions Panel, press F9 to show it), here’s some examples.

tutorialTxt.y = 40;
Will move the “tutorialTxt” MovieClip, to the top of our test App.

Some of the other properties you can set are alpha, rotation, rotationX, rotationY, x, y, z, visible, enabled, here’s how to disable the button with the instance name of clickBtn.

clickBtn.enabled = false;

Or we could completely remove the button:

removeChild(clickBtn);

Why not change the button so that it hides the ScaleViz logo on touch, you now have more than enough knowledge to achieve this
Note: The Adobe Flash help files are there if you need them and are quite detailed, also most topics include example code, press F1 for help.
Hint: remember the object you are targeting with ActionScript 3.0 should have an instance name, see previous tutorial for details.

To access code samples, Click Here.
Tutorial files were created using Flash CS5 Professional version 11.0.2.489.

Contents of Archive (6 Files)
swipe.fla: non commented version.
swipeC.fla: commented version.
hideLogo_start.fla: skeleton code for swipe
hideLogo_complete.fla: non commented version.
hideLogo_completeC.fla: commented version.
swipe.txt:Contents.
// ====================================
// AS3 Swipe Tutorial code sample
// Downloaded from http://mds.scaleviz.com
// Copyright © 2011 Shane Hogan
// Developer of ScaleViz – A Theory App Designed for Guitarists.
// http://www.scaleviz.com
// Coded in Flash with ActionScript 3.0
// =====================================

if you Study the code comments, you can find out how to;
Run a function with a swipe.
Clear a text field with a swipe.
Modify a buttons label with a swipe.
Use swipes to navigate the frames in your timeline.
Toggle an items visibility with a button.

Note:swipeC.fla: Shows our test app with the swipe code added.
hideLogo_start.fla: Contains a skeleton of the swipe code, so
you can experiment, (there is no commented version of this file).
hideLogo_completeC.fla contains the swipe timeline navigation
as discussed in the tutorial, and the code snippet to
toggle visibility, note: 2 more frames have been added.

Copyright © Shane Hogan
Do not copy this article.

My first iOS App ScaleViz created entirely in ActionScript 3.0, went live July 2011, and shows how music theory relates to your guitar fretboard, you can check it out here http://appstore/scaleviz I have also created Annual Reviews for companies like Mind, FAQ's for Epson UK, taught ECDL and I'm a zombie in the feature film Wasteland UK My hobbies include playing the guitar, watching horror films, astronomy, snorkeling, hypnosis NLP and expanding my knowledge in all areas of programming and graphic design.