By paddloPayday loans

Home > Mobile, OOP, OOP for Artists > Flash CS6 Touch Simulator for Development

Flash CS6 Touch Simulator for Development

On Mobile Apps Fingers are like Magic Wands

A Nice Touch

For this post I suggest you download the trial version of Flash Pro CS6 (if you don’t have CS6 already) so that you can see the development tool that’s included for testing the touch events used in mobile development.

This post carries over from the previous one where I’ve been stepping through the functionality of using Flash and ActionScript 3.0 with animation and other Flash features. This little article examines using Flash Pro CS6 with the SimpleButton object and TouchEvent along with the touch simulator.

Big Buttons

Originally I used some of the little buttons in the common library but quickly ditched those when my big fat fingers were unable to give them the proper touch and stop and start the running buffalo. You can re-do the buttons later for a more reasonable size, but for testing, I’ve come to like these big ones. As soon as I put them on mobile devices, they’re a piece of cake to test. Follow these steps:

  1. Download Flash Professional CS6
  2. Download the Mobile App
  3. Open Flash Pro CS6 and open the FLA file, and test it. You should see the Buffalo (bison) and two big buttons; one for ‘go’ (big green arrow) and one for ‘stop.’ There’s not an ounce of subtly here.
  4. Test the app using the Ctrl+Enter or Command + Return (Mac). Figure 1 shows what you should see:

Figure 1: Touch Simulator

To work with the simulator, click the panel, Touch and Gesture. Then, click the checkbox, Touch layer, as shown in Figure 1. Now, when you click on the two buttons, you’ll see a little circle that indicates where the “touch” action takes place. The buffalo will start and stop running.

The Code

The code for all of this is pretty straight forward. You can easily change it and add a Factory Method pattern if you’d like (lots of examples here showing how), but for now, it’s just a straight up OOP program. The Client class just calls objects to load the buffalo and buttons from the Library.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
package 
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.events.TouchEvent;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
 
	public class Client extends Sprite
	{
		private var bisonFarm:AddBison=new AddBison();
		private var bison:MovieClip;
		private var buttonFarm:AddButton=new AddButton();
		private var playIt:SimpleButton;
		private var stopIt:SimpleButton;
 
		public function Client()
		{
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
			bison=bisonFarm.sendBison();
			bison.x=20, bison.y=100;
			addChild(bison);
			bison.stop();
 
			playIt=buttonFarm.sendPlay()
			playIt.x=20, playIt.y=200;
			playIt.addEventListener(TouchEvent.TOUCH_TAP,moveBison);
			addChild(playIt);
 
			stopIt=buttonFarm.sendStop()
			stopIt.x=150, stopIt.y=200;
			stopIt.addEventListener(TouchEvent.TOUCH_TAP,stopBison);
			addChild(stopIt);
		}
 
		private final function moveBison(e:TouchEvent):void
		{
			bison.play();
		}
		private final function stopBison(e:TouchEvent):void
		{
			bison.stop();
		}
	}
}

Note that the Client class uses the TouchEvent and TOUCH_TAP constant. That’s why the Simulator is necessary. Without it, you could not test it unless you had placed it in a mobile device.

Next, two classes pull out the UI (giant buttons) and animated movie clip. The buttons are “flat”—there are no animated sequences in the buttons. They’re just slabs of vector graphics. Because the buttons are in the Library, no Loader object is needed:

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package 
{
	import flash.display.SimpleButton;
 
	public class AddButton
	{
		private var btnNow:SimpleButton;
 
		public function sendPlay():SimpleButton
		{
			btnNow=new PlayBison();
			return btnNow;
		}
 
		public final function sendStop():SimpleButton
		{
			btnNow=new StopBison();
			return btnNow;
		}
	}
}

The reason for using such buttons is because I found that animated SimpleButton objects ran into problems in mobile objects.

The running buffalo is the same animation from the previous post except that it has been placed into the Library as a movie clip.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package 
{
	import flash.display.MovieClip;
 
	public class AddBison
	{
		private var bison:MovieClip;
 
		public final function sendBison():MovieClip
		{
			bison=new BufRun();
			return bison;
		}
	}
}

The running buffalo starts and stops running using a call to the MovieClip TimeLine’s start() or stop() methods. All of this works quite well on the iPhone 4S and iPad 3 (or whatever they call the new iPad.)

Why Mobile Apps?

If Flash and ActionScript 3.0 are to be used to build mobile apps, we need to find the limitations. Early on I learned that tweens just don’t work well with iOS mobile apps, and I haven’t heard that they do with Android either. You may ask why bother with Flash and mobile apps when you can use JavaScript and jQuery to create Internet apps that run just fine on mobile browsers? After all, Flash was originally a development tool for the Internet. Well, times have changed and mobile devices are often out of range of a wifi. On a recent trip from Connecticut to Oregon, everyone of the plane seemed to have a mobile tablet of some kind, and I felt absolutely primitive with my laptop. They were all working away using apps that were not on the Internet—playing games, reading, or working on spreadsheets.

I am hoping that Flash and ActionScript using all of the Flash and AcitonScirpt tools—Flex, Flash Builder and Flash Pro—can be harnessed to develop apps. I’ve got nothing against Objective C, JavaScript (and jQuery) or any other language for that matter, but I like the combined graphic, animation and programming capacity in ActionScript 3.0 and Flash for development.

Next time, I want to see about moving the animated (and controlled) buffalo around the stage. If nothing else, we might be able to bring back a Flash banner to kick off an app.

Share
Categories: Mobile, OOP, OOP for Artists
  1. HB
    June 1, 2012 at 2:17 pm | #1

    Having these features integrated into Flash CS6 is nice, but is it possible to choose which device you want to simulate? you could do it with Device Central, you can do it in Flash Builder… but doesn’t seem to be available in Flash Professional, is it so? I hope not, because it would be a big drawback, I care much more about being able to simulate different screens than multi-touch, geolocation, etc.

  2. William B. Sanders
    June 1, 2012 at 6:11 pm | #2

    Hi HB,

    There seems to be a template for Android under the Create from Template menu, and using Create New you can choose either AIR for Android or iOS. However, I see your point—no simulation of the device itself. I featured the multi-touch simulator because it means that I can test an app for an iOS device without having to generate an .ipa file and then test it with an iPhone or iPad. Let me play around with Flash Builder and see what’s missing in Flash CS6 that’s in FB 4.6.

    Kindest regards,
    Bill

  3. HB
    June 1, 2012 at 7:11 pm | #3

    In FB 4.6 you can run your AIR app simulating any device, whether it is Android or iOS, with their own screen sizes and dpi settings. New devices can be added as well just in case.

    With previous Flash Professional versions you could also run your app simulating different devices with Device Central. In case you never saw it, the new simulator is clearly taken from it.

  4. William B. Sanders
    June 2, 2012 at 7:44 pm | #4

    Hi HB,

    Oh I forgot completely about Device Central! Did that simulate “touch” and “gestures”–anyway the new one pops up whether you call DC or not, and it’s very convenient.

    Bill

    • HB
      June 2, 2012 at 9:49 pm | #5

      Yes, you could simulate them as well. I agree having the simulator integrated is faster and more comfortable, but the thing is Device Central has been removed, and I wonder how do we simulate different devices now (or debug Flash Lite at all, if people is still using it).

  5. William B. Sanders
    June 5, 2012 at 9:33 am | #6

    Hi HB,

    I think that Flash Pro CS6 is geared toward mobile, and they may have taken out Device Central because some of the devices were no longer supported. The new Simulator is probably supposed to replace all of the different ones they had in Device Central. What I’d really like to see is a simulator for all of the major mobile devices—”Mobile Device Central.” Then I’d be able to develop for Android and Blackberry in addition to iPhones and iPads which I have the hardware for (as well as the next piece of hardware) using a simulator that takes into account the unique features of the different platforms.

    Kindest regards,
    Bill

    • HB
      June 5, 2012 at 11:21 am | #7

      But I fail to see how the new simulator could replace Device Central if we can not choose between different devices heh. iOS development is more or less affordable since there are few screen types, but on Android it can be a nightmare.

  6. William B. Sanders
    June 5, 2012 at 2:02 pm | #8

    Hi HB,

    Yeah, that’s why a new device-specific simulator would be great.

    Bill

  1. No trackbacks yet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>