By paddloPayday loans

Design Pattern Variation and Intents Table

January 15, 2013 7 comments

Pie500
On several different occasions I have meant to create an easy look-up table for quickly finding all of the GoF design patterns, their general purpose, their scope, what can vary and their intent. I finally did it! Click Play to view and Download to get it for your desktop.(It’s just an HTML table; so don’t get too excited.)
play buttondownload this sucker
The next time you’re wondering what pattern to use, just give it a click and the table will faithfully appear before you.

Share

Concurrent Programming and Parallel Patterns

January 1, 2013 6 comments

concurrentConcurrent Programming Patterns

If you’ve viewed the posts that we’ve had on both parallel (//P) and concurrent (||P) programming, most of what you’ve seen has been long-standing attempts at borrowing what’s been published on parallel programming and applying it to ActionScript 3.0. The examples originated in other languages, especially in C#, and attempting to simulate parallel programming in AS3 has been more hope than reality. However, now that all of the development software has been made available (at least in Adobe Labs), you can write honest-to-goodness ||P programs with ActionScirpt 3.0. You’ll need Flash Builder 4.7 or newer, and the latest Flash player. (I have not tried this with Flash CS6 yet, but feel free to do so and let me know how it works out.) At this time, the concurrent programming features are only available for desktop AIR 3.4+; so forget about using workers for developing mobile apps at this point in time.

Why Concurrent Programming?

Design patterns in ActionScript 3.0 (or any other language) are not for speeding up programs. They are for speeding up development time. Re-use is the key to understanding and effectively using design patterns. However, concurrent programs are decidedly for speeding up programs. A task is given to more than one worker (a Primordial Worker and Background Worker(s)). By having two processes running simultaneously, the program should run faster. (For more details on how Adobe has implemented this model see the Concurrent Graphic Novel on this blog and anything written by Thibault Imbert on the topic.)

Despite the fact that design patterns in computer programming are associated with speeding up development time, the design patterns in Design Patterns for Decomposition and Coordination on Multicore Architectures by Colin Campbell, Ralph Johnson, Ade Miller, and Stephen Toub are all about using parallel programming (in C#) for writing programs with certain built-in features that use C# statements that call parallel operations. (See the chapter on Parallel Loops.) For example, C# has statements like Parallel.For() and Parallel.ForEach().

In ActionScript 3.0, we do not have a set of for statements to use with ||P, but we do have statements that will allow us to speed things up by dividing a single task into multiple ones that are handled simultaneously. While AS3 statements are different than those used with //P, we can go ahead and make concurrent versions of parallel programming design patterns. The place to start is with with Parallel Loops. (See Parallel Loops: The First Multicore Design Pattern on this blog.) Essentially, a Concurrent Loop is the same as a Parallel Loop in that a single task is broken down into two (or more) tasks and handled simultaneously. By “broken down” I refer to decomposition. (See the post on decomposition on this blog for more details.) However, instead of decomposition breaking down tasks handled by separate cores, in concurrent programming in AS3, they’re handled by separate workers.

An Example of a Concurrent Loop Using Workers

In previous attempts at creating simultaneously running loops in ActionScript 3.0, I could not get the speed advantage because of the Rube Goldberg contraptions I constructed. So the first challenge is to create a loop and first run it with two or more workers acting concurrently and compare it with a single loop with no concurrent component. If everything went according to plan, two concurrent loops could process a set number of iterations twice as fast as a single loop. After setting up a timer and some helper classes, I tested it, and it worked. I set up a loop with 200 million iterations. The concurrent loop was handled by two workers, each with 100 million iterations. After both workers were done, a timer would show how long the operation took. The same was done with a single loop using the same timer. It took twice as long. Click on the Play button to see. (You can download all of the source code and helpers as well.)

play buttondownload this sucker

When you click on the Play button, you can start the concurrent loop and single loop separately. You’ll see that the concurrent loop and make the same number of iterations in about half the time of the single loop.
Read more…

Share

‘Twas The Night Before OOPSLA

The annual meeting of the world’s most influential and best programmers can be found at OOPSLA (Object-Oriented Programming, Systems, Languages & Applications.) In the early 1990s, it was at OOPSLA meetings that the Gang of Four first began spooling out the design patterns that became the core of their book, Design Patterns. Ever since I began going to OOPSLA meetings in 2006, I’ve been able to slip in some of the internet languages like PHP and ActionScript 3.0. I first posted this thinly-disguised version of the Night Before Christmas a couple of years ago and have decided to make it an annual event.

As the role of ActionScript changes and we begin to do more with Starling, concurrent programming and programming mobile apps, I’m going to have to make some changes in the Night Before OOPSLA to reflect the changes in computing. For now, though, I’ve done little to change this from the original. So here it is with a few tweaks:

Read more…

Share

Democratic Design Patterns

Design Patterns and Many Languages

Way back in 2001, Mark Winstanley and I wrote a book, Server-side Flash: scripts, databases, and dynamic development. I ended up writing code for PERL, ASP and PHP all integrated with Flash through ActionScript. At that time, PHP and ActionScript were relatively young. PHP 4.0 had just been introduced the year before and ActionScript was still ActionScript with no number. However, Flash 5 set ActionScript free from an early version that was tied into the original IDE and life was good.

In any event, I discovered PHP and MySQL and have been a fan ever since. I’d really like to write a mobile app in ActionScript that uses PHP and MySQL, and someday I may. However, some of you may have noticed that I’ve not been very active on this blog. The truth of the matter is that I haven’t been active on any blog since about last June because I’ve been working on a new design pattern book with O’Reilly, Learning PHP Design Patterns. The book is nearing completion (the first draft is done), and O’Reilly has an Early Release available if any of you want to add your comments prior to the final version.

A while back I had started a PHP Design Pattern Blog and I found that while there were differences in the way I had to write the patterns because PHP does not have strongly typed code (no data-typing required or allowed). Most of the patterns could be transferred from those Chandima and I have done in ActionScript 3.0. Of course I had to use new examples and ones that were aligned with how PHP is implemented, but the general idea of design patterns was easily transferable. (A major regret of this new design pattern book is that Chandima was unable to co-author it with me because of his time constraints.) Originally, Chandima and I had to work out how ActionScript 3.0 code could replace SmallTalk and C++ used in the original Gang of Four design pattern book, but moving from ActionScript 3.0 to PHP 5 turned to be far easier than expected.

So if you use design patterns in ActionScript 3.0, you might be interested in how they can be used with PHP. I plan to continue to develop games using ActionScript 3.0, Design Patterns and Starling as well as mobile apps. With PHP (with the help of design patterns and jQuery Mobile), I’ve been working on “all weather” Web pages that can be dynamically changed from desktop views to mobile views. My very favorite will be incorporating both ActionScript 3.0+ and PHP 5+ into design patterns developed interactive applications.

Let’s hear from you about this topic!

Share

Adobe Starling and Design Patterns

December 6, 2012 5 comments

Book on Starling by Thibault Imbert

As you may have noticed, Flash and ActionScript 3.0 and Flex have been going through metamorphic change. One of the new roles for ActionScript 3.0 involves game development, and part of that involves Starling. By sheer good fortune, Thibault Imbert not only has written a great little book on Starling published by O’Reilly, but it is available free from O’Reilly. Just click the download button below and choose Introducing Starting at the O’Reilly site:

download this sucker

You check out the book like the ones you buy at O’Reilly, but the e-book is absolutely free, and you’ll have it in the time it takes to read this post. You may already know about Starling and have Thibault’s new book, but if not, Introducing Starling provides a great introduction and more. I see it as part of a larger strategy at Adobe to re-position Flash/Flex in response to the new reality brought about by the mobile web and the need for game development tools tied into ActionScript 3.0.

What’s Starling?

Obviously if you want to learn about Starling, you’ll download Thibault’s book, but here’s a succinct description of Starling from that book:

Starling is an ActionScript 3 2D framework developed on top of the Stage3D APIs
(available on desktop in Flash Player 11 and Adobe AIR 3, and Adobe AIR 3.2 on
mobile). Starling is mainly designed for game development, but could be used for many
other use cases. Starling makes it possible to write fast GPU-accelerated applications
without having to touch the low-level Stage3D APIs.

You may well be asking, What does this have to do with ActionScript 3.0 design patterns? That goes back to previous posts on design patterns for parallel programming and/or concurrent programming.(Click on the Parallel Programming and Concurrent Programming categories on your right to see what’s going on in this area. I’ve already written one program in Flex for parallel loops based on the set of design patterns available in Parallel Programming with Microsoft .NET: Design Patterns for Decomposition and Coordination on Multicore Architectures by Colin Campbell, Ralph Johnson, Ade Miller, and Stephen Toub. (Ralph Johnson is one of the original Gang of Four, and I learned about the book a few years ago in an early morning chat with Ralph at an OOPSLA conference in Reno, NV.) By the way, the book is freely available online. Just click the //P button below:

You’ll see the topics to the left on the MS site, but the whole book is there. Of course, all of the patterns for parallel programming are shown in C#, but I’ve been able to write the parallel loop in ActionScript 3.0, and soon I hope to post it on this blog. In fact, I’d like to go through the entire set of design patterns for parallel programming using ActionScript 3.0 concurrent programming.

In the meantime, you can get started on Starling, and I’ll catch up soon on patterns for concurrent programming in the coming year. 2013 is going to be exciting!

Share

ActionScript Concurrency: A Graphic Novel

Thibault Imbert Lets the Cat Out of the Bag

Recently I tweeted Thibault Imbert’s post at ByteArray.org about a sneak preview of Adobe’s strategy with ActionScript Workers for concurrency. Some of you may have read it, and I thought I’d follow up with a graphic novel of Thimbault’s post. You may remember that about a year or so ago, I got excited about parallel programming after talking with GoF member Ralph Johnson at the 2010 OOPSLA meeting in Reno, NV and reading Design Patterns for Decomposition and Coordination on Multicore Architectures by Colin Campbell, Ralph Johnson, Ade Miller, Stephen Toub. (This book is available free here.) I wrote a number of blog posts on parallel programming with the hope that Adobe would do with ActionScript what Microsoft had done with C#. However, instead of developing a multi-core plan, they decided on concurrency using workers; one of the approaches to concurrency. Campbell and his associates define concurrency as:

Concurrency is a concept related to multitasking and asynchronous input-output (I/O). It usually refers to the existence of multiple threads of execution that may each get a slice of time to execute before being preempted by another thread, which also gets a slice of time. Concurrency is necessary in order for a program to react to external stimuli such as user input, devices, and sensors. Operating systems and games, by their very nature, are concurrent, even on one core.

Using threads is one approach employed successfully in C# to achieve concurrency, but another approach is using workers. In some definitions, threads and workers are used almost interchangeably, but in others the line is quite distinct. In one distinction, Apple advocates replacing threads with a different approach that sounds a lot like Adobe’s strategy that Thibault Imbert provides in his sneak peek.

A Graphic Novel

Since Thibault provided a sneak peek, I can do no more than try to touch upon some of the key elements in his blog post with the following ‘Graphic’ novel. (I strongly suggest that you read Thibault’s post before or after this heroic attempt at graphic novelizing.)

The whole point of concurrency is to do more than one task simultaneously. In that way, things will move along faster, which is very important for using AcitonScirpt with mobile devices. However, there must be communication between the different Primordial Worker and the Background Worker. (For now, we’ll just focus on two workers, but you can have more than a single background worker.) In order to get things done, you need some kind of coordination between workers and have the ability to pass information and objects.

The background workers can send and receive messages.

The messages can be different things. They can simply be values set into a shared value, they can tell the workers to start or stop some task or just about anything else that the developer has in mind. One of the important tasks involved is image processing, and in order to share a processed images and to work with shared memory, the plan is to include a method to copy pixels into a byte array.

Key to this arrangement is shared objects. For those of you who have worked with Flash Media Server and are familiar with remote stared objects, the concept is pretty much the same. In FMS, the client-side and server-side processes both use the same objects. This allows, for example, the ability for one use to type in a URL and the other user to see it appear remotely. (It looks like your screen has been taken over, but in this case, it’s just sharing URLs and using them to bring up remote Web pages.)

In the case of multiple workers, the shared objects allow each worker to process a part of the object while the other worker does the other part. For example, consider an iteration of 2 million. One worker can work on processing the first million and the other worker work on processing the second million. Since they are doing it at the same time, it would take roughly half the time of a single worker.

For game processing where moving images is important to do fast, concurrent workers should save a good deal of time.

For more details about concurrency, you should read Thibault Imbert’s post. Also, I have no idea when the Flash Player/AIR drops will show up in Adobe Labs, but if I find out, I’ll pass it on. Your best source of current information is Thibault’s blog and of course keep an eye on Adobe Labs for the upcoming drop that includes what you need for concurrent programming. At that time, I can have some working examples to get started.

Share

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

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

ActionScript 3.0, Flash CS6 and Mobile Apps

Cave drawing from Chauvet-Pont-d'Arc

Games, Art and Flash

In looking for some game images for this post, I came across one of the cave drawings from Chauvet-Pont-d’Arc, France created about 17,300 years ago. All told, about 2,000 images decorate the cave walls in Lascaux. Some years ago, I copied one of the cave drawings and made a Flash animated bison based on the works of Eadweard Muybridge. (See the running bison here.)

I decided to kick things off with Flash CS6 and Flash Builder 4.6 with a simple animation to find out where things break with Flash and mobile—primarily iOS. This is not to criticize either Adobe or Apple. Things have changed, and I want to see what in Flash and ActionScript 3.0 we can take with us and what will have to be changed further. In this next series of posts, I want to create a simple animation. After all, animation was the original sine qua non of Flash. Once a mobile animation is established, move on to using ActionScript 3.0 in a mobile environment with the new versions of Flash.

Starting from Scratch: Animation Without Tweens

The first thing I want to do is to create a simple mobile app; so I took my animated buffalo (bison) and placed him on the desktop using an AIR for iOS template. Figures 1 and 2 show the basics of the app:

Figure 1: Desktop animaiton

Figure 2: Timeline and keyframes

All of the tweens have been removed from the Timeline because tweens have not worked well with mobile (up to now, at least). The bison is made up of several moving parts that are positioned following Muybridge’s images. With only three frames between keyframes and ticking by at 24fps, it is about a third rougher than Muybridge who used roughly 12fps. (He just had the animals run by triggering a series of 12 cameras; so depending on how fast/slow the object was moving, the fps varies.) A remarkable feature of Muybridge’s work is that it was done before Edison’s movie camera, and the images now removed by two centuries, still stand as one of the primary resources for animators in studying human and animal locomotion. The University of California, Riverside collection simply took Muybridge’s photos and placed them into animated GIFs. You can do the same thing using keyframes in Flash.

World’s Easiest Mobile App: 1, 2, 3

While this example shows how to set up a mobile app for an iOS device, Android is just as simple. Just use the AIR for Android template instead of the iOS one. All this does is to show an animated bison on the screen. You can download the files in Flash CS5 format here (just in case you don’t have CS6 yet.)
download this sucker

Once you have your animation set up (use the download), you follow three steps to get your ipa file for putting into your mobile device. You’ll have to set up the accompanying files required by Apple (use Xcode) or check out the developer’s guide for Android. In either case you can easily create an app using nothing more than the simple animation discussed (the download). Before going on, save the FLA files as ‘MobileBison.fla.’

First, select the Properties panel and open it, as shown in Figure 1. Now, click on the little wrench icon highlighted in Figure 1. Figure 3 shows what comes up. It’s a lot like CS5.5 with a few differences:

Fgiure 3: General menu in AIR for iOS settings


I left it as the default. The Aspect ratio is Portrait by default, and you might want to change it to Landscape or Auto. However, because the Render mod and orientation are both ‘Auto’ when you tilt your device, it will automatically change orientation.

Second, at the top of the AIR for iOS Settings window click the Deployment option. Figure 4 shows an example of what you will see with your Certificate and Provisioning profile set. My only advice on this is to work patiently with your Xcode developer (for iOS) to get your certificates and provisioning profiles squared away. Once that’s done, you can use the same ones for about a year (for development purposes). When I added my new iPad, it worked but only for my iPhone. All I had to do was to update my Xcode app to the latest version, and my new iPad was recognized. I didn’t even have to change my certificate or provisioning profile (or it was done automatically for me.) I leave mine on Quick publishing for device testing just to move the project along. Figure 4 shows the Deployment window after being filled out:

Figure 4: Deployment window

Third, and this step is optional, add your icons. I just took my logo and using Fireworks made sizes to match most of the sizes they had for iPhone and iPad. The same graphic was employed and re-sized in Fireworks. When I added two more for my iPad, a little jiggling around was required, but that proved to be just a matter of using the same folder as used for my certificate. Figure 5 illustrates what my icon page looks like:

Figure 5: Added icons

Finally, click on the Languages tab to include the languages that may be relevant to your app. I’ve been trying to think in terms of icons that transcend languages, and then I can check off all of them. Once you’re all set, just click the Publish button and wait for it to generate your ipa file. On your computer, open iTunes, select “Apps” and drag and drop your ipa file into the iPhoe, iPod touch, and iPad Apps folder. Connect your iPad and/or iPhone, select iPad or iPhone in iTunes and select Apps. Click the Sync button, and your new app will be installed. Figure 6 shows the app and app button created with the single operation:

Figure 6: Completed Flash App and App Launch button

So there you have it, a Flash animation (such as it is) app on a mobile device—actually 2— an iPhone and iPad. It was easy, Flash CS6 made it so, and other than lacking a tween, we ought to be all set. In some respects, only.

Where’s The ActionScript 3.0 and Design Patterns?

The next step is to do something with the movie clip using ActionScript 3.0 and a design pattern. Further, I’d like to use Flash Builder 4.6, and I’d like to begin looking at AIR 3.3 (download) and Flash Player 11.3 (download)—while you’re downloading Flash Player, be sure to get the Flash Player 11.3 Beta Global SWC at the same URL. We can really extend Flash and Flash Builder with these Adobe Labs player and AIR updates. I’m expecting some very exciting things coming out of the labs and I think we would be well-advised to begin using them. The emphasis will remain on design patterns, but some new tools can be used even if they’re “Lab” tools that will make our creations run faster in a mobile environment. The operational speed will not be in the design patterns but in the new statements that we can use in classes that will be participants in a pattern. (DPs are for development and maintenance speed!)

Finally, I’d like to begin working with a little more sophisticated examples for the class content. Chandima and I have tons of easy design pattern examples so that we could focus on the structure. However, now I think we’ve reached a point where we can start working with SDKs in both Flash Pro and Flash Builder. I have no idea where Flex is going, but most Flex developers don’t need a lot of help with the nitty gritty of setting up their work environment, and through examples with Flash Pro and Flash Builder, there’s no doubt they’ll miss out on anything since most of what this blog does is with ActionScript 3.0.

Share

ActionScript 3.0 Bitmaps, Clones and ColorTransforms

Less is More

Ever since I started working with mobile devices with Flash and ActionScript 3.0, I’ve been looking for faster ways to move my objects through those little windows on iPhones, Androids and Blackberries. Lag time is huge and the action looks geriatric. I’ve seen some interesting things done with the bitmapped classes, and in previous posts we’ve discussed what may be helpful. However, since I haven’t used them extensively (or fully), I thought it’d be a good idea to walkthrough my thinking on the topic. For a while now I’ve been working on a a Samurai action game, and while I’ve been making progress, I keep looking for speed tweaks. In general my thoughts regarding bitmapped graphics and Bitmap classes can be summed up in Figure 1. If I create a single Bitmap object using the BitmapData objects (or convert graphic files into BitmapData elements) and then clone the object, I should be able to save processing time.

Figure 1: Cloned and Colored

Of course, I have to assume a good deal. First, I assume that processing a single instance of an object and cloning it is more efficient than creating multiple instances of the same object. I got the idea from how Flash originally used symbols over the Internet. You create one symbol and then re-used it. My idea is pretty much the same. Create once; clone many.

Second, in order for an object to look like more than a single object, I want to change something about the cloned object. With my simple samurai fighter, I can change its color because it is a Bitmap object. So, first we’ll look at how to create a bitmapped object from scratch using both the Bitmap and BitmapData objects.

Making Bitmapped Objects from Code

I like drawing bitmapped objects or using digital photography. However, in order to best understand what’s going on, let’s start from scratch with BitmapData objects. Figure 2 shows the fundamentals of creating a bitmapped data object:

Figure 2: Implementing BitmapData Object

The ActionScript 3.0 BitmapData object contains a 32-bit integer made up of four 8-bit values (0-255). The first parameter expects a width, the second height—this is the Bitmap shape; a rectangular data matrix. The third parameter is the objects transparency, which has a default value of true (it is transparent). By setting the transparency argument to false, you make the object opaque. The 32-bit integer is the final parameter with the first two hexadecimal values being the alpha value with the final six values expressing an RGB color. The following class provides a basic example:

?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
package 
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
 
	public class Basic extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
 
		public function Basic()
		{
			burntOrange = new BitmapData(50, 50, false, 0x00CC5500);
			bm=new Bitmap(burntOrange);
			bm.x=100,bm.y=100;
			addChild(bm);
		}
	}
}

That’s really pretty simple. All you have to do is to define the BitmapData object and then use it as an argument in creating a new Bitmap object. At this junction we’re just making squares; however, from previous posts that have converted bitmap files into BitmapData objects, we can generate far more complex figures. For now, though, we’ll stick with the squares. When you test the code, you’ll get a nice burnt orange square. Try changing the size of the square and experiment with different colors and transparency levels.

A Clone of a BitmapData Object

The next step is to copy the implemented BitmapData object. Fortunately, the BitmapData object contains a clone() method so it’s also easy to do as you can see in the following example:

?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
package 
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
 
	public class Clone extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
 
		public function Clone()
		{
			burntOrange = new BitmapData(50, 50, false, 0x00CC5500);
			bm=new Bitmap(burntOrange);
			bm.x=100,bm.y=100;
			addChild(bm);
 
			burntOrangeClone=burntOrange.clone();
			bmClone=new Bitmap(burntOrangeClone);
			bmClone.x=200,bmClone.y=100;
			addChild(bmClone);
		}
	}
}

Original and Cloned Objects

The two boxes are the results. In looking at the code you can see that the clone is based on the data from the original BitmapData object. However, because a second bitmap object must be created to use the bitmapdata, is there really any savings memory-wise? In other words would we be just as well off just creating a new object from the initial class, Basic as in creating a clone of the object?

Using BitmapData.colorTransform()

The real value in using BitmapData objects, whether clones are quicker to create than new objects, is the colorTransform() method in the BitmapData API. For this post, I am only touching on one aspect of using the method with a ColorTransform object, and that is changing colors by using the ARGB color multipliers. If I create a BitmapData object, and clone it with different colors, I’ve effectively created a new useful object. If I change the multiplier value (0-1) for the alpha channel, I change the tint of the color. Likewise, if I change the RGB values, I change the colors in those channels.

The BitmapData.colorTransform() method has two parameters, Rectangle and ColorTransform, objects available in the flash.geom package. As a result both must be imported. Both the ColorTransform and Rectangle classes may be used on their own, but here they are employed as part of a BitmapData class method with the name colorTransform(), which may be a little confusing; so bear with me here. The full format of BitmapData.colorTransform() is BitmapData.colorTransform(Rectangle, ColorTransform). The following program will be the starting point:

?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
package 
{
 
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;
	import flash.geom.ColorTransform;
 
	public class CloneColorTransform extends Sprite
	{
		private var burntOrange:BitmapData;
		private var burntOrangeClone:BitmapData;
		private var bm:Bitmap;
		private var bmClone:Bitmap;
		private var clrTransform:ColorTransform;
		private var rect:Rectangle;
 
		public function CloneColorTransform()
		{
			burntOrange = new BitmapData(50,50,false,0x00CC5500);
			bm = new Bitmap(burntOrange);
			bm.x = 100,bm.y = 100;
			addChild(bm);
 
			burntOrangeClone = burntOrange.clone();
			clrTransform=new ColorTransform();
			clrTransform.alphaMultiplier=0.75;
			//clrTransform.redMultiplier=0.0;
			//clrTransform.greenMultiplier=0.0;
			//clrTransform.blueMultiplier=0.0;
			rect=new Rectangle(0,0,50,50);
			burntOrangeClone.colorTransform(rect,clrTransform);
			bmClone = new Bitmap(burntOrangeClone);
			bmClone.x = 200,bmClone.y = 100;
			addChild(bmClone);
		}
	}
}

In the code, notice that the BitmapData and Rectangle instances both have the same 50 x 50 size. That is very important lest you end up with strange results. The first two parameters of the Rectangle object are the x and y position values. The results (seen at the right) illustrate how to change a cloned object’s tint based on the original tint. Try changing the alpha multiplier to see how to tint the color darker or lighter. Also note that even thought the clone is identical except for the tint, it is clearly distinguishable as different even though the same BitmapData values were employed in both.

Changing Colors of Images from Bitmap Files

The real payoff for using BitmapData objects is that a colorful object can be changed in different useful ways. In the paired images at the top of this post, each has a different set of colors. By changing color multipliers, you can change individual colors in a single multicolored file. For example, take the simple Adobe logo. Support Adobe decided to open a branch office on the moon and wanted some changes to indicate that the office was off-earth. They may want to make some subtle changes so that the logo is instantly recognizable but clearly different. Consider the following:

Making a special logo for Adobe's office on the moon

The following program was employed in creating all of the different images. Its design allows you to put in any file you want; so use your own if you like.

?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
package 
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.display.Sprite;
	import flash.geom.Rectangle;
	import flash.geom.ColorTransform;
 
	public class BitMapColorCloneTransform extends Sprite
	{
		private var fileData:BitmapData;
		private var fileDataClone:BitmapData;
		private var file2Bit:Bitmap;
		private var file2BitClone:Bitmap;
		private var imageLoader:Loader;
		private var url:String;
		private var rect:Rectangle;
		private var clrTransform:ColorTransform;
 
		public function BitMapColorCloneTransform()
		{
			//url="samGif.gif";
			//url="trans.png";
			url="logo.png";
 
			imageLoader = new Loader();
			imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			imageLoader.load(new URLRequest(url));
		}
		private function onComplete(e:Event):void
		{
			fileData = e.target.content.bitmapData;
			file2Bit = new Bitmap(fileData);
			file2Bit.x=10, file2Bit.y=20;
			addChild(file2Bit);
 
			fileDataClone=fileData.clone();
			rect=new Rectangle(0,0,file2Bit.width,file2Bit.height);
			clrTransform=new ColorTransform();
			//clrTransform.alphaMultiplier=0.75;
			clrTransform.redMultiplier=0.75;
			//clrTransform.greenMultiplier=1.0;
			clrTransform.blueMultiplier=0.0;
			fileDataClone.colorTransform(rect,clrTransform);
			file2BitClone = new Bitmap(fileDataClone);
			file2BitClone.x=270, file2BitClone.y=20;
			addChild(file2BitClone);
 
		}
	}
}

An important element to note in the program is that the Rectangle object is the same dimensions as the BitmapData object that was loaded from a file. Using the width and height properties of the BitmapData object for the width and height of the Rectangle object simplified the process.

More on Bitmapped Objects and their Properties

I want to create a program using a design pattern that allows experimentation with the different properties of Bitmap and BitmapData objects and look further into ColorTransform. All of this attention is to see if using clones with different colors can add some speed to the process of object creation and differentiation on mobile devices. Also, I hope to see if we can find a design pattern to accommodate the development time in changing and maintaining larger programs designed for the mobile user.

Share
Categories: Mobile, OOP for Artists