By paddloPayday loans

Home > AIR, Mobile, Speed Tweaks, State > State Machine for Continuous Movement: Desktop, iPad, iPhone

State Machine for Continuous Movement: Desktop, iPad, iPhone

Covering the Bases

On the HTML5 side of the world, most developers/designers have been aware that when you make a site, you need to consider the different environments used to view your site. With Flash and AcitonScript 3.0, there’s a new dichotomy: Web and App. Because mobile devices like smart phones and tablets will not display Flash, it’s pretty much a decision to create a mobile app or to try and do the animation with JavaScript and related technology (e.g., jQuery). As more and more users have mobile hardware, the Web is a funny place. Apps are so much handier than any Web-based app that given the choice, I’ll use a device-based app. The reason is simple: you’re not always within range of a wifi. That’s it. No wifi; no working app. So in sticking with Flash and AS3, I am thinking in terms of the following:

  • Desktop: Standard Flash
  • Table: Mobile Flash Based App
  • Phone: Mobile Flash Based App

Having recently got an iPad 3, I’ve been able to compare the results on it with my iPhone and desktop. Basically, the tablet is right between the two in terms of performance. Using Flash Pro CS6 to develop a revised version of the Aid Game, I was able to create versions for the iPhone and iPad as well as a desktop version. You can play the desktop version on a non-mobile device and play the mobile versions on mobile table and phone devices. Click the buttons below for desktop Play or download all of the versions, including versions for Flash CS5 and Flash CS6.
play buttondownload this sucker

To understand the State pattern used for this this app, take a look at the following three posts from this blog:

The beauty of the design pattern is that the only change for use with a mobile app is the Client class. The UI used SimpleButton objects and the TouchEvent, and all of these could be changed by changing the Client only.

Client for the Mobile Devices

The Client class consists of the UI plucked out of the Flash Pro Library along with a helicopter Sprite. The difference between this version and the desktop version is just a change in the user-initiated events: Click or Touch. Here’s the mobile Client:

?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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
package 
{
	//4F818C,102601,A6986F,D9CAB0,590202 Airport1
	//Client makes requests
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.TouchEvent;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
 
	public class Client extends Sprite
	{
		public var chopper:Sprite=new Helicopter();
		public var mover:Mover=new Mover();
		private var contextNow:Context=new Context(mover,chopper);
 
		private var upBtn:SimpleButton=new UpBtn();
		private var downBtn:SimpleButton=new DownBtn();
		private var stopBtn:SimpleButton=new StopBtn();
		private var leftBtn:SimpleButton=new LeftBtn();
		private var rightBtn:SimpleButton=new RightBtn();
 
		private const HELIPADX:Number=270;
		private const HELIPADY:Number=430;
 
		public function Client()
		{
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
			chopper.x=HELIPADX,chopper.y=HELIPADY,
			addChild(chopper);
 
			//Default
			contextNow.stopMove();
 
			upBtn.x=97.5,upBtn.y=20;
			upBtn.addEventListener(TouchEvent.TOUCH_TAP, doUp);
			addChild(upBtn);
 
			stopBtn.x=91.25,stopBtn.y=86;
			stopBtn.addEventListener(TouchEvent.TOUCH_TAP, doStop);
			addChild(stopBtn);
 
			downBtn.x=97.5,downBtn.y=165;
			downBtn.addEventListener(TouchEvent.TOUCH_TAP, doDown);
			addChild(downBtn);
 
			leftBtn.x=13,leftBtn.y=86;
			leftBtn.addEventListener(TouchEvent.TOUCH_TAP, doLeft);
			addChild(leftBtn);
 
			rightBtn.x=191,rightBtn.y=86;
			rightBtn.addEventListener(TouchEvent.TOUCH_TAP, doRight);
			addChild(rightBtn);
		}
 
		private final function doUp(e:TouchEvent):void
		{
			contextNow.upMove();
		}
 
		private final function doStop(e:TouchEvent):void
		{
			contextNow.stopMove();
		}
 
		private final function doDown(e:TouchEvent):void
		{
			contextNow.downMove();
		}
 
		private final function doLeft(e:TouchEvent):void
		{
			contextNow.leftMove();
		}
 
		private final function doRight(e:TouchEvent):void
		{
			contextNow.rightMove();
		}
	}
}

The values at the top are the values in the color scheme I got from Kuler. I put them in the Client source to keep the values handy during development. I also added a few speed tweaks from previous versions, but otherwise, it’s the same State Machine used in the previous versions.

Making It Mobile

To make the whole thing mobile in Flash Pro CS6 is a piece of cake. Figures 1 to 3 show the settings in the Properties panel:

First, Figure 1 shows the automatic settings in the Publish Settings window. I just used the default.

Figure 1: Publish Settings

Second, Figure 2 shows the AIR for iOS settings. They were changed little from the default. I checked Full screen, Auto orientation, Auto Render mode and indicated both iPhone and iPad. I used the Standard setting for Resolution instead of High in hopes of using less processor resources.

Figure 2: AIR for iOS Settings

Finally, the Deployment settings use the same certificate and provisioning profile I’ve been using since last year. When I connected my iPad, the Xcode app for Apple Developers
included it as a recognized device, and so the same process created an app I could put on either my iPad or iPhone. Figure 3 shows the settings used:

Figure 3: Deployment Settings

Everything goes through the same iTunes app. I just selected the App folder and dragged the IPA file into the folder for iPhone/iPad.

Outcomes

You can see for yourself how the app works on your desktop, and if you placed it on a mobile device, I’d like to hear about it; especially Android developers.

Figure 4: The iPhone app was not too responsive even though it worked

My own experience on the Desktop and the iPad 3 were very good. However, the iPhone implementation (see Figure 4), was way too sluggish to be useful. However, the same file (IPA) on the iPad 3 was extremely responsive and interactive. I plan to go ahead and develop it for the iPad into a playable game.

Because of so much of the app is code, it should not be too difficult to use the downloaded classes for either Flex or FlashBuilder 4.6. If anyone feels so inclined, I’d really like to see a sharable version developed in these other IDEs. In the meantime, we’d really like to get your feedback; especially if you’ve tried out a version on your own system.

If you can give the app a whirl in an Android or Blackberry device (if possible), we’d like to see your settings. Also, we’d like to hear what your experiences are compared with the iPhone (not very good) and the iPad (great). My own hunch is the the iPad simply has a faster, bigger processor, more RAM and so everything works better. (I’m not a hardware guy, but when I put the same app on two different hardware devices, I start looking at processor speed and memory. My iPad has far more of both.) So if you can try it on an Android, let us know the amount of RAM and processor speed. In that way we can get an idea of whether device type or RAM/processor speed is the key to getting ActionScirpt 3.0 working on mobile devices in a practical way.

Share
Categories: AIR, Mobile, Speed Tweaks, State
  1. Jonathan
    June 13, 2012 at 8:51 am | #1

    I installed the Aid Game on my Android phone(Nexus S – running Android 4.0.4) and overall the performance is good. The performance depends on the way you configure the render mode. Although I didn’t test with a performancestat these are my impressions.

    CPU: performance not really good(the chopper sometimes lags a bit)
    Auto: pretty much the same as CPU
    GPU: Good performance

    Other settings were the same as you used with iOS.

  2. William B. Sanders
    June 13, 2012 at 9:25 am | #2

    Hi Jonathan,

    Thank you very much for the Android trial. It sounds like your Android is performing a lot better than my iPhone 4S, and that is good news indeed! (Not for my iPhone, though). As I noted, the performance on my iPad 3 is great, but unusable on iPhone.

    Cheers,
    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>