The sample code in this tutorial shows you how to simulate swipes to accelerate your mobile development. It sounds complicated but in reality is as simple as duplicating your swipe code so that it works with either button or keyboard presses, the arrow keys are the perfect candidate.

The swipe code in ScaleViz is quite complex and this technique has saved me lots of time and headaches, so I thought I would share it with you, I’m using the test app from our last tutorial.

As mentioned above all we need to do is simulate our swipes with the arrow keys, there are many different ways you can do the same thing in AS3, here I have chosen to use a case statement, which takes a value passed to it through a function from an event listener and compares it with the conditionals inside the case statement.

To add this function to our test app we first add an event listener to the stage, which listens for a keyboard press and then passes the pressed key to the function called “swipeSimHandler”:

stage.addEventListener(KeyboardEvent.KEY_DOWN, swipeSimHandler);

Then we add the handler function that receives the pressed key from the above listener and passes it to the case statement inside the handler, which then does something depending on which key was pressed, in this case I have added in a trace statement that writes out which arrow key was pressed to your output window.

A trace statement is an awesome feature of AS3 that you can use to write out the value of variables and messages to your output window so you know that your code is working.

If your output window is not open then press F2 or go to “Window – output”, although it will usually open itself if there’s a message to show you.

Here is our skeleton case statement.

function swipeSimHandler(event:KeyboardEvent):void
{
switch( event.keyCode )
{
case Keyboard.RIGHT:
trace(“Right Arrow Key Pressed!”)
break;

case Keyboard.LEFT:
trace(“Left Arrow Key Pressed!”)
break;

case Keyboard.UP:
trace(“Up Arrow Key Pressed!”)
break;

case Keyboard.DOWN:
trace(“Down Arrow Key Pressed!”)
break;
}
}

Note: We can listen for any keys, they don’t necessarily have to be the arrow keys.

For example: We could change the above case statement from Keyboard.Right, Keyboard.LEFT,  Keyboard.UP and Keyboard.DOWN to keyboard.R, keyboard.L, keyboard.U and keyboard.D , this would control our swipe code with the R, L, U and D keys, you can find the other key codes in Flash’s help, just highlight the word keyboard and press F1 while in your actions panel (F9), this will show you which other keys are available.

Now all we need to do is copy our current swipe code and paste it into the correct place within the case statement, remembering that the swipes will be reversed on a Mobile device so we need to swap them round again. So, we paste the conditional statement from the right swipe into the keyboard left conditional and the left swipe into the keyboard right conditional, see previous tutorial for details.

Here’s our new swipe code with the added code in bold:

function swipeSimHandler(event:KeyboardEvent):void
{
switch( event.keyCode )
{
case Keyboard.RIGHT:
trace(“Right Arrow Key Pressed =, Simulate Swipe Left!”)
if(currentFrame == totalFrames)
{
gotoAndStop(1);
}
else
{
nextFrame();
}
break;

case Keyboard.LEFT:
trace(“Left Arrow Key Pressed – Simulate Swipe Right!”)
if(currentFrame == 1)
{
gotoAndStop(totalFrames);
}
else
{
prevFrame();
}
break;

case Keyboard.UP:
trace(“Up Arrow Key Pressed!”)
gotoAndStop(1);
break;

case Keyboard.DOWN:
trace(“Down Arrow Key Pressed!”)
gotoAndStop(3);
break;

case Keyboard.V:
showTxt();
break;
}
}

We could also add another conditional inside the case statement, which as you can see I have done above, this adds a listener for the letter V which runs the function “showTxt”, when the “V” key is pressed, which toggles the visibility of text “ScaleViz Rocks!” to either on or off, so not only can you use this technique for simulating your swipes you can also use it to add in keys to work various parts of your app that could rely on the swipes performing a certain function.

You can now run your test app within flash using the arrow keys to simulate your swipes and you know that when you are ready to deploy your app for testing on your device everything will work as you expected, just remember to swap the left and right code back again.

As you can see this is a massive time saver when your app relies on swipes as you don’t have to keep deploying it to your device to test if your latest code change is working as it should.

Download Sample Code
(To access code samples, Subscribe for FREE using the form on the home page or in the side bar. Tutorial files were created using Flash CS5 Professional version 11.0.2.489));

Contents of Archive (2 Files)
simulateSwipe.fla (fully commented test app)
simulateSwipe.txt (info)