Re-Thinking Mobile Business Applications Using Scaleform for Mobile PlatformsMatthew Doyle – Autodesk

DG6640 With the explosive growth of mobile devices and applications, many questions have arisen around their practical implementation. In this class, we will walk through the creation of a real, deployed app from early concept and design through deployment on multiple mobile platforms. The class will include a basic technical introduction to Autodesk Scaleform for Mobile Platforms, which will be used as an example to show how mobile app creation can be made accessible to a variety of industries, project types, and skill levels.

Learning Objectives

At the end of this class, you will be able to:

Describe basic best practices of mobile development

Understand cross-platform nuances

Identify and avoid common pitfalls of new mobile developers

Create a mobile app using the Scaleform for Mobile Platforms SDK

About the Speaker

Matthew has worked in video game development for the last 8 years, holding positions at Mythic as Lead World Designer on Warhammer Online: Age of Reckoning, Senior Gameplay Designer at the former Midway Games LA Studio, and has worked on indie and mobile projects as well. He speaks regularly at events around the world on development techniques and trends, and currently holds the position of Game Products Specialist at Autodesk. Most recently he has helped Autodesk lead the charge into mobile gaming and application development.

matthew.doyle@autodesk.com

Insert Class Title as per Title Page

Scaleform Overview

Scaleform is a Flash-based user interface (UI) middleware, traditionally used in the video game industry to create impressive user experience (UX) content and games. It provides networking support via ActionScript 3’s sockets API, and can easily be extended to include other native extensions such as Ad support, Analytics, and other popular mobile APIs by providing full source code access to the player.

Core Features of Scaleform

Hardware accelerated graphics engine Patent pending tessellation algorithm Ease of workflow via Adobe Flash editor ActionScript 3 Virtual Machine Fully extensible C++ native player Full Cross-platform support (iOS, Android, Windows Phone, PC, Linux, Mac, PS3, Wii,

Xbox 360, PSP, 3DS) Multi-threaded core architecture and renderer DirectAccess API for native code to Flash communication and vice versa

Other Features of Note

Anti-aliased animated vector graphics High-quality dynamic font system Rich text support Masks for arbitrary-shape clipping Blend modes and filter effects 3D tilting and transformations Scale9Grid for resizable UI without stretching BitmapData Support Mobile Keyboard Input UI Support for Device Events AS3 XML, Shared Object, & Regular Expressions

2

Insert Class Title as per Title Page

Scaleform Workflow

1. UI designer implements UI prototype via CLIK widgets and ActionScript 32. UI artist “skins” UI widgets via bitmap editing tool3. UI designer adds interactivity via ActionScript 3 (or native code as desired)4. UI artist adds animated effects and timeline animation via Flash editor

3

Art 2

Sc1

3

Figure 1 - The Scaleform Workflow

Insert Class Title as per Title Page

Scaleform Hands-On – Planning & Design

In this section, you will build a Scaleform App step by step. The only steps not outlines are skinning the UI elements.

Planning

“He who fails to plan, plans to fail.” – Winston Churchill

The Client

Scaleform apps are generally best designed using the Model-View-Controller design pattern.

Model – a class responsible for maintaining all the data; this class notifies all listeners (in this case the View) that the data has changed. The Model is also considered the “Subject” in the Observer design pattern.

View – a class responsible for displaying the data and all the graphical elements. The View subscribes to the Model and listens for data changes via the Observer design pattern. The View is thus an “Observer” of the subject (Model).

Controller – a class responsible for receiving user input and updating the Model based upon that input.

Figure 2 - MVC Design Pattern

4

Insert Class Title as per Title Page

In the case of our hands on demo, here is how we’ll design the back end:

Model – SModel.as – this class will maintain a limited data set of stock prices, and will send notification events when those prices change.

View – SFFView.as – this class will maintain the UI’s graphics by updating stock prices displayed in the scrolling list of stocks. It will subscribe as a listener to the data model and update itself when the data changes.

Controller – SFController.as – this class will handle user button presses, and other touch events, and communicates with a PHP server via the Networking mediator.

Networking – TalktoServer.as – This class will handle back and forth communication between the client and server. The PHP server will return data responses in JSON format which will be parsed and provided to the model class (SF_Model.as)

These classes will all be compiled into a single SWF file, which we will then publish to an Android application.

The Server

For this demonstration, we will use a simple PHP server. The PHP server will consist of three server side scripts. The scripts are:

List.php – This script will return a complete list of stocks that we’ve added to the database in JSON format.

Add.php – This script will add a new stock to the database Average.php – This script will do a server side average of all the stocks and return the

value.

The PHP server will also contain a simple flat file as our database in this case.

Limited Data Schema

Mobile apps rarely require a full set of data. Remember, mobile is not desktop. You must contend with smaller screen sizes generally, as well as connectivity issues. Users of mobile apps rarely need visible access to all the data on a given object.

In the case of our simple app, we will be working with a very limited dataset of a stock symbol and stock price.

5

Insert Class Title as per Title Page

Design

Screen Mock-ups

Developing a mock-up in Photoshop is the next step to building a Scaleform App. The UI Artist should consult with the UI developer to ensure all the necessary components are present. Remembering that mobile is not desktop, the UI artist should take into consideration:

Device resolution (in this case – 1280x800 or 16:10 – Android Transformer Prime) Device orientation (in this case – landscape) Minimum button size (for touch) Design to interactivity first – then aesthetics

Figure 3 - App Mock-Up

In our case, we will only have one screen that needs to be created (seen above).The UI will consist of five interactive elements:

1. A scrolling list to display the stocks in our portfolio2. A stock symbol text entry box3. A stock price text entry box4. An add stock button5. An Average stocks button

6

Insert Class Title as per Title Page

Client UI Prototype

1. Create a new ActionScript 3 Flash document.2. Choose ModifyDocument and set the Document size to: 1280x800.

Figure 4 - Document Settings

3. Open FilePublish Settings and disable HTML Wrapper.

Figure 5 - Publish Settings

7

Insert Class Title as per Title Page

4. Save the document.5. Publish the document via Scaleform Launcher.

Figure 6 - Scaleform Launcher

6. Select FileImportImport to Stage and import the screen mockup.7. Position the mockup on the stage.8. Right click Layer 1 and choose Guide to set this layer to not export.9. Double click Layer 1 and change the name to guide.10. Click the lock button to lock this layer.

Figure 7 - Guide Layer

8

Insert Class Title as per Title Page

CLIK UI Widgets

To create a quick prototype of the UI, we need to add the five UI widgets to the “stage” of the Flash file. We’ll do so be copying and pasting four CLIK widgets from the CLIK widget library onto our document. These widgets are:

ButtonSkinned DefaultLabel TextInputSkinned ScrollingListSkinned ListItemRendererSkinned

1. Open [ScaleformSDK]\Resources\AS3\CLIK\demos\Component_Library.fla2. Open the library panel, and then open the Button folder.3. Right click on ButtonSkinned, and choose Properties.

Figure 8 - ButtonSkinned

9

Insert Class Title as per Title Page

4. Uncheck export for runtime sharing.

Figure 9 - Export for runtime sharing

5. Repeat this process for: TextInputSkinned, ScrollingListSkinned, DefaultLabel, and ListItemRendererSkinned

6. Select the four components on the stage that you see in this image:

Figure 10 - Component_Library

10

Insert Class Title as per Title Page

7. Right click and copy, then return to the app document, go to the library panel and paste them

Figure 11 - Library Panel

8. Return to the Component_Library FLA, open the library panel, and browse to the ScrollingList folder.

9. Open that folder, and choose ScrollingListSkinned by right clicking and selecting Copy

Figure 12 - ScrollingListSkinned

10. Return to the main app document and paste this widget into the library.

11

Insert Class Title as per Title Page

Adding Widgets to Stage

1. Click the new layer button to create a new Flash layer.2. Drag a button from the library onto the stage, and position it roughly where the Add

Stock button is on the guide layer.3. Now do the same for the Average button.4. Repeat this process for the Symbol and Price text labels.5. Repeat the process for the Symbol and Price text input boxes.6. Finally, repeat the process for the ScrollingList.

Figure 13 - The Stage (without guide layer visible)

12

Insert Class Title as per Title Page

Creating the MarketWatch Movie Clip

1. Select all of the widgets on stage, then right click and choose Convert to Symbol.2. Give the new symbol a name: MarketWatch.

Figure 14 - MarketWatch Symbol

3. In the Properties Panel, set the selected movie clip instance name to: marketWatch

Figure 15 - Properties Panel - Instance Name

4. Right click the MarketWatch library symbol in the Library Panel, and select Properties.5. Check Export for ActionScript.6. Enter the Class name: SFView7. Leave Base Class field blank. 8. Press the pencil icon to create this class.9. Save the class as SFView.as in the same directory as the Flash app. We’ll get back to this

class later.

13

Insert Class Title as per Title Page

Figure 16 - MarketWatch ActionScript Class Linkage

Widget Setup

1. Double click on any of the widgets to enter the MarketWatch movie clip.2. Select the label widget for Stock Symbol, and open the Properties panel.3. In the Properties Panel, open the Component Parameters rollout.4. Type the world Symbol in the field labeled text.

Figure 17 - Label Component Parameters

5. Repeat this process for the Price label, this time typing the word Price.6. Select the TextInputSkinned component next to the Symbol label, and then open the

Properties Panel.7. In the Properties Panel, give the symbol an instance name of: stockSymbolTF

14

Insert Class Title as per Title Page

8. Repeat this process for the Price TextInputSkinned widget. This time, give it an instance name of: stockValueTF

9. Select the Add Stock button, and give it an instance name of: addStock10. In the Component Parameters of the button, set the label field to: Add Stock11. Repeat this process for the Average Stock button. Give it an instance name of:

getAverage and set its label parameter to: Average12. Select the ScrollingList UI Widget on the stage.13. Give it an instance name of: scrollingList14. Change its physical dimensions - W: 512 and H: 96

Figure 18 - scrollingList Properties

15

Insert Class Title as per Title Page

In the itemRenderer filed of the Component Parameters, enter: ListItemRendererSkinned

15. In the rowHeight parameter, enter: 96

Figure 19 - scrollingList Parameters

16

Insert Class Title as per Title Page

16. Right Click scrollingList on the stage, and select Convert to Symbol.17. Give the symbol a name of TouchList18. Set the registration point to top left.

Figure 20 - TouchList Symbol Name and Registratrion

19. Double click TouchList to enter the movie clip.20. Name Layer 1: scrollingList21. Create a new layer, drag it bellow the scrollingList layer, and name it touchList22. On the touchList layer, create a new gray shape (box) with dimensions of: W: 512, H:

528

(Optional) Extending the ScrollingList to Add Flick Gesture Support

1. Select the TouchList component in the Library Panel, right click it and choose properties.2. Put a check in Export for ActionScript.3. Enter: TouchList in the Class field.4. Set Base Class to blank/empty.5. Press the pencil icon next to the Class field to create the new TouchList.as class file.

Figure 21 - TouchList Properties

17

Insert Class Title as per Title Page

6. Enter the code necessary to add flick gesture support to the scrollingList. (Code supplied via DemoCode.ZIP file on AU website)

7. Save this file in the same directory as the FLA file.

Modified Scrolling List

Now, we need to make a few classes that will subclass the following CLIK classes in order to add additional functionality to our stock list. Normally, a scrolling list widget displays a single label/data item. We need our list to display at least two items (stock symbol and stock price). To do that, we’ll write three classes that subclass the CLIK ScrollingList class, the CLIK ItemRenderer class, and the CLIK ListData class.

We’ll save all three of these classes in the project directory with the rest of the files:

StockItemRender.as

This class overrides the normal CLIK ListItemRenderer and adds support to display the stock price and stock symbol.

1. package2. {3.     import scaleform.clik.data.ListData;4.     import scaleform.clik.controls.ListItemRenderer;5.     import flash.text.TextField;6.  7.     public class StockItemRenderer extends ListItemRenderer8.     {9.        public var stockSymbol:TextField;10.        public var stockPrice:TextField;11.  12.         public function StockItemRenderer() {13.             super();14.         }15.  16.         override public function

setListData(listData:ListData):void {17.             index = listData.index;18.             selected = listData.selected;19.  20.          stockSymbol.text = listData.label;

18

Insert Class Title as per Title Page

21.          stockPrice.text = "$" + StockListData(listData).stockPrice;

22.         }23.     }24. }

StockListData.as

This short class extends the CLIK ListData class, adding the stockPrice data.

1. package {2.    import scaleform.clik.data.ListData;3.  4.     public class StockListData extends ListData  {5.  6.        public var stockPrice:String = "0.0";7.  8.         public function StockListData(index:uint,

label:String="Empty", stockPrice:String="0.0", selected:Boolean=false) {

9.          super(index, label, selected);10.          this.stockPrice = stockPrice;11.         }12.     }13. }

StockScrollingList.as

Finally, this class extends the normal CLIK ScrollingList, also adding support for the stockPrice.

1. package {2.     import scaleform.clik.controls.ScrollingList;3.    import scaleform.clik.interfaces.IListItemRenderer;4.  5.     public class StockScrollingList extends ScrollingList {6.  7.         public function StockScrollingList() {8.             super();9.         }10.  

19

Insert Class Title as per Title Page

11.         override protected function populateData(data:Array):void {

12.             var dl:uint = data.length;13.             var l:uint = _renderers.length;14.             for (var i:uint = 0; i < l; i++) {15.                 var renderer:IListItemRenderer =

getRendererAt(i);16.                 var index:uint = _scrollPosition + i;17.                 var listData:StockListData = new

StockListData(index, itemToLabel(data[i]), data[i]["stockPrice"], _selectedIndex == index);

18.                 renderer.enabled = (i >= dl) ? false : true;

19.                 renderer.setListData(listData);20.                 renderer.setData(data[i]);21.                 renderer.validateNow();22.             }23.         }24.     }25. }

20

Insert Class Title as per Title Page

In order for our Scrolling List to make use of these classes, we need to link StockItemRenderer to our ItemRenderer in the Library Panel, and StockScrollingList to the ScrollingList as well:

1. Right click DefaultListItemRenderer in the Library Panel and choose Properties.

2. Change the Base Class to StockItemRenderer

Figure 22 - StockItemRenderer

3. Right click DefaultScrollingList in the Library Panel and choose Properties.4. Change the Base Class to StockScrollingList

Figure 23 - StockScrollingList

21

Insert Class Title as per Title Page

Client Side Code (ActionScript 3)

We’ll now write the main app code.

Document Class (Main.as)

The Document class is the main entry point for the app. In this class, we will instantiate and initialize the Model, View, and Controller classes of our app.

1. Make sure you are on the root timeline, and that nothing is selected, and then open the Properties Panel.

2. In the Class field, type the word: Main and click the pencil icon.

3. This creates and opens the Main.as class. Enter the following code, then save the file as Main.as in the same directory as the Flash file (The code for this class may also be found in the DemoCode.zip which can be downloaded from the class materials on the AU website.):

1. package  {2.  3.    import flash.display.MovieClip;4.    import flash.events.Event;5.  6.    public class Main extends MovieClip {7.  8.        public var model:SFModel;9.        public var marketWatch:SFView;10.       public var controller:SFController;11.  12.       public function Main() {13.          addEventListener(Event.ADDED_TO_STAGE, init);14.       }15.  16.       public function init(e:Event):void {17.          removeEventListener(Event.ADDED_TO_STAGE, init);18.  19.          model = new SFModel();20.  

22

Insert Class Title as per Title Page

21.          controller = new SFController();22.          controller.init( model );23.  24.          marketWatch.init( model, controller );25.       }26.    }27. }

23

Insert Class Title as per Title Page

Model Class (SFModel.as)

SFModel will maintain all the data for our app, client-side.

1. Create a new AS3 Class named SFModel.as, and save it in the same directory as Main.as

2. Enter the following code (The code for this class may also be found in the DemoCode.zip which can be downloaded from the class materials on the AU website.):

1. package  {2.3.    import flash.events.Event;4.    import flash.events.EventDispatcher;5.  6.    public class SFModel extends EventDispatcher {7.  8.        protected var _stocks:Array = [];9.        protected var _average:Number = 0.0;10.  11.       public function SFModel() {}12.  13.       public function get stocks():Array {14.          return _stocks;15.       }16.  17.       public function set stocks(value:Array):void {18.          _stocks = value;19.          dispatchEvent( new Event( "newStocks" ) );20.       }21.  22.       public function get average():Number {23.          return _average;24.       }25.  26.       public function set average(value:Number):void {27.          _average = value;28.          dispatchEvent( new Event( "newAverage" ) );29.       }30.    }31. }

24

Insert Class Title as per Title Page

25

Insert Class Title as per Title Page

View Class (SFView.as)

SFView will listen for data changes in the model, and update the UI widgets appropriately. SFView is tied directly to the MarketWatch movie clip.

1. Create a new AS3 Class named SFView.as, and save it in the same directory as Main.as

2. Enter the following code (The code for this class may also be found in the DemoCode.zip which can be downloaded from the class materials on the AU website.):

3. package  {4.   import flash.display.Sprite;5.   import flash.events.Event;6.   import flash.events.MouseEvent;7. import flash.text.TextField;8.   import scaleform.clik.controls.Button;9.   import scaleform.clik.controls.TextInput;10.  import scaleform.clik.events.ButtonEvent;11.  import scaleform.clik.controls.ScrollingList;12.  import scaleform.clik.data.DataProvider;13.  14.    public class SFView extends Sprite {15.  16.       public var addStock:Button;17.       public var getAverage:Button;18.       public var stockSymbolTF:TextInput;19.       public var stockValueTF:TextInput;20.       public var touchList:TouchList;21.  22.       public var avgPrice:TextField;23.  24.       protected var _model:SFModel;25.       protected var _controller:SFController;      26.  27.       public function SFView() {28.          addEventListener( Event.ADDED_TO_STAGE, configUI

);29.       }30.  31.       public function init( model:SFModel,

controller:SFController ) {

26

Insert Class Title as per Title Page

32.          _model = model;33.          _controller = controller;34.  35.          _model.addEventListener("newStocks",

onNewStocks);36.          _model.addEventListener("newAverage", onNewAvg);37.  38.          _controller.getStocks();39.       }40.  41.       private function configUI(e:Event):void {42.          addStock.addEventListener(MouseEvent.MOUSE_DOWN,

onAddStockBtn);43.          getAverage

.addEventListener(MouseEvent.MOUSE_DOWN, onGetAvgBtn);44.       }45.  46.       private function onNewStocks(e:Event):void {47.          touchList.addStocks(_model.stocks);48. onNewAvg();49.       }50.  51.       private function onNewAvg(e:Event = null ):void {52.          avgPrice.text = "$" + String(_model.average);53.       }54.  55.       private function onAddStockBtn(e:MouseEvent):void {56.          _controller.onAddStockBtn( stockSymbolTF.text,

stockValueTF.text );57.          stockSymbolTF.text = "";58.          stockValueTF.text = "";59.       }60.  61.       private function onGetAvgBtn(e:MouseEvent):void {62.          _controller.onGetAvgBtn();63.       }64.    }65. }

27

Insert Class Title as per Title Page

Controller Class (SFController.as)

SFController will listen for user input, communicate with the server, and update the data model with new stock prices.

1. Create a new AS3 Class named SFController.as, and save it in the same directory as Main.as

2. Enter the following code (The code for this class may also be found in the DemoCode.zip which can be downloaded from the class materials on the AU website.):

3. package  {4.    public class SFController {5.  6.        protected var _model:SFModel;7.        protected var _server:TalkToServer;8.  9.        public function SFController() {}10.  11.       public function init( model:SFModel ) {12.          _model = model;13.          _server = new TalkToServer();14.       }15.  16.       public function onAddStockBtn( symbol:String,

price:String ):void {17.          addStock( symbol, price );18.       }19.  20.       public function onGetAvgBtn():void {21.          avgStock();22.       }23.  24.       public function getStocks():void {25.          _server.requestResponse(26.             "list.php",27.             { }, 28.             function(theResponse: String){29.                var listObj =

_server.parseNameValuePairs(theResponse);30.                var _stocks:Array = [];31.                for(var listKey: * in listObj){

28

Insert Class Title as per Title Page

32.                   _stocks.push({label:listKey, stockPrice:listObj[listKey]});

33.                }34.                _model.stocks = _stocks;35. avgStock();36.             });   37.       }38.  39.       private function addStock( symbol:String,

price:String ):void {40.          _server.requestResponse(41.             "add.php",42.             {"symbol" : symbol, "value" : price}, 43.             function(theResponse: String){44.                var successObj =

_server.parseNameValuePairs(theResponse);45. getStocks();46.             });47.       }48.  49.       private function avgStock():void {50.          _server.requestResponse(51.             "average.php",52.             { }, 53.             function(theResponse: String){54.                   var averageObj =

_server.parseNameValuePairs(theResponse);55.                   _model.average = averageObj["average"];56.             });57.       }58.    }59. }

Server Communication Class (TalkToServer.as)

TalkToServer send requests to the server, and listen for responses. The code for this class is found in the DemoCode.zip which can be downloaded from the class materials on the AU website.

29

Insert Class Title as per Title Page

Server Side Setup & Code (PHP)

Server Setup

For this demonstration, we’ll be using a simple PHP server, run locally on our PC. If we were to run this server on an internet connected PC, we would need to supply the correct internet IP address when running the server, as well as modifying the TalkToServer.as class constant var “serverIP” so that it points to the same address.

1. Download the PHP server from: http://windows.php.net/downloads/releases/php-5.4.8-Win32-VC9-x86.zip

2. Extract the zip to a directory such as C:\Dev\php-5.4.83. Create a new .bat (batch) file called server.bat in the same directory as the Flash files.4. Open server.bat and enter: C:\Dev\php-5.4.8\php.exe -S 127.0.0.1:8000 - then save the

file.5. Create a new text file called: db.txt in the same directory. This flat file will hold all the

data for our app.6. Create the sever scripts below:

Add.php

Create the file add.php in the same directory as the Flash files and server.bat. This script will add a new stock to the database when called.

1. <?php2. // Read the Symbol and the value out of the URL3. $symbol = $_REQUEST['symbol'];4. $value = $_REQUEST['value'];5.  6. // Light sanity checking7. if (empty($symbol) || empty($value))8.     exit('success=false');9.  10. $filename = __DIR__."/db.txt";11. $db = fopen($filename, "a");12. fwrite ($db, $symbol.','.$value."\n");13.  14. exit ('success=true');

30

Insert Class Title as per Title Page

31

Insert Class Title as per Title Page

List.php

Create the file list.php in the same location. This script will return a complete list of stocks when called.

1. <?php2. $filename = __DIR__."/db.txt";3. $db = @fopen($filename, "r");4.  5. if (!$db)6.     exit("Please add some symbols to db.txt");7.  8. $stocks = fread($db, filesize($filename));9. $stocks = str_replace("\n", ",", str_replace(",","=",

$stocks));10.  11. exit ($stocks);

32

Insert Class Title as per Title Page

Average.php

Create the file average.php in the same location. This script will compute and return an average of all stock prices.

1. <?php2. $filename = __DIR__."/db.txt";3. $db = @fopen($filename, "r");4.  5. if (!$db)6.     exit("Please add some symbols to db.txt");7.  8. $stocks = fread($db, filesize($filename));9. $stocks = explode("\n", $stocks);10.  11. $avg = 0;12. $count = 0;13. foreach ($stocks as $stock)14. {15.     $stock = explode (",",$stock);16.     $avg += $stock[1];17.     $count++;18. }19. $avg = $count ? $avg / $count : $avg;20. exit ('average='.$avg);

33

Insert Class Title as per Title Page

7. Now, run the server by executing the server.bat file. You should see something like this:

Figure 24 - PHP Server Window

34

Insert Class Title as per Title Page

Testing the App

Now we’ll test out our application to see if it is communicating with the server. First, verify that your final directory structure looks like the image below:

Figure 25 - Final Demo Directory Structure

1. Open the db.txt file in Notepad++. Take note of what entries it has, if any, and keep it open.

2. Publish the Flash file via the Scaleform Launcher.3. Type: ADSK into the Symbol text input field.4. Type: 100 into the Price input field.5. Press the Add Stock Button.6. Go back to db.txt, and Notepad++ should alert you that a change has occurred. If asked

to reload the file, choose Yes. You should see the new stock listed.7. Add two or three more new stocks, and observe the results in db.txt.8. Now press the Average button. The Average price of stocks textfield should show the

calculated average from the server.

35

Insert Class Title as per Title Page

Installing the App to Android Device

Finally, we’ll install the app to an Android device. The process of installing to an iOS device is very similar, except where noted.

1. Copy the published SWF file to [ScaleformMobileSDK]\Bin\Data\AS3\MyApp\MyApp.swf2. Go to the [ScaleformMobileSDK]\LocalApps\ folder and create a copy of the

Example.def file, renaming it to MyApp.def3. Open this file, and change the DISPLAY_NAME entry to: My App4. Change the STARTUP_FLASH entry to point to: Bin/Data/AS3/MyApp/MyApp.swf5. Uncomment the last two entries: AUTODEPLOY and AUTORUN by removing the #

symbol from the front of these two lines.6. Save the file.7. Launch Cygwin (instructions for setting up the Scaleform build environment are not part

of this demonstration; video tutorials and documentation are available for this however.) (For iOS, launch the Mac Terminal instead)

8. In Cygwin (or the Mac terminal), be sure you are in the Scaleform Mobile SDK root folder, and make sure you have a device connected to your PC via USB cable, with USB debug mode turned on for the device.

9. Enter: Make P=Android C=Shipping+NoRTTI and wait for the build process to finish. When it completes, the app should be launched on your connected Android device. (For iOS, this process created an Xcode project. You will next need to launch Xcode, then choose your device, set the build configuration to Shipping, and then press run.)

10. If the app did not automatically install and run, in Cygwin, cd to the \LocalApps\MyApp\Android folder. In here, you should see the file: MyApp_Shipping_NoRTTI.apk.

11. Enter: adb install MyApp_Shipping_NoRTTI.apk and wait for the app to install (shouldn’t take long).

12. Launch the app manually on your device by using the icon.

NOTE: The app will not currently be able to communicate with the server, as the IP address is set to 127.0.0.1 (localhost). You would need to setup an internet accessible host, and set that IP address in TalkToServer.as to that address. After that, as long as your Android has internet access, it should be able to communicate with the server.

36