The Monster Match App released! (using FDT and Starling for iOS)

Hello You All,

We just released The Monster Match an iOS app built with AIR and Starling that will let You Mix, Match and discover the monstrous, the eerie, the wacky and funny combinations of characters that renowned artists created exclusively for The Monster Match, once you created a Monster of your liking you can save it to your camera roll or share with your friends via E-Mail, Twitter or Facebook.

mmiP5_ss_01

We choose Flash as the development platform because is a tool that we know well and also knew it will let us take the concept and design faster and accurately to a working application.

The whole app was coded in FDT IDE  and some of the animations where prototyped on Flash C6 , we use the  Starling framework  by GAMUA as the base of our code and found out it has a lot of improvements since the last time we’ve used, the Assets Manager was a time saver, and we also used some of the new device detection features (Originally the app was going to be a released both for iPhone and iPad but we had to push the release for the iPad version to a later time) . The core of the app’s functionality was done using Feathers UI by Josh Tynjala and the sharing features were done using the GoViral ANE extension by MilkMan Games.

mmiP5_ss_02

We are very happy with the end result and hope to be releasing the iPad version of the app pretty soon.

mmiP5_ss_04

Enjoy this new free app from Team-O mixing, matching and sharing monstrous characters and remember …. not to play alone in the dark!

Links:

The Monster Match Official Website

http://wrto.co/mash

The Monster Match Support Website
http://wrto.co/mashsupport

The Monster Match Press Kit zip file (In case You want to share the love ).

http://wrto.co/mashpresskit

App Store
http://wrto.co/mashappstore

Vimeo
http://wrto.co/mashvideo

Facebook
http://wrto.co/mashfb

 

Thanks for reading and happy  coding!

Dave

Adobe Scout and how to use ANT to enable Advanced Telemetry in FDT

Hello there,

So as you might have heard by now adobe just launched the Game Developer Tools in their Creative Cloud including the Adobe Gaming SDK 1.0 which includes the latest Adobe Flash platforms tools to get started creating cross-platform desktop and mobile games.

The SDK contains the following:

  • The AIR SDK 3.5 for compiling and packaging your mobile (AIR) and web (Flash Player) based games.
  • Native Extensions (ANE) Beta including extensions for iOS Game center, Product Store, SOcial, StageAD, BetaTesting.
  • Starling The 2D (Stage3D) open-source framework.
  • Feathers The 2D (Stage3D) open-source UI component framework.
  • Away3D The 3D open-source framework to power your 3D games.
  • ATF Tools Command-line utilities for the creation of ATF ( compressed textures) for Stage3D
  • Samples 3 Flash Builder 4.7 example Projects that use a combination of the tools included in the SDK.

Alongside the release of this SDK Adobe also released the first public beta of Adobe Scout (previously codenamed Monocle) the next-generation advanced profiling tool for Flash Player and AIR.

Quoting Adobe:

“Adobe Scout will revolutionize the way developers profile and optimize ActionScript based content. For the first time, developers have access to very granular information about CPU and GPU rendering, network or ActionScript stack.”

Which lead us to the second part of this post

Using ANT to enable Advanced Telemetry in FDT

So if you follow me on twitter or are a frequent reader of this blog you must know by  now that my weapon of choice for Flash Platform projects is FDT  so i wanted  to try the advanced features of Adobe Scout in my FDT projects, in order to use those advanced features Scout relies on the telemetry feature that was introduced in Flash Player 11.4 and Adobe AIR 3.4. This feature gathers detailed information about the internals of the Flash runtime, as well as the ActionScript code that it executes, and sends it all to Scout. To access all the data that is available, such as information on your ActionScript code and detailed information about DisplayList rendering and Stage3D, you need to enable advanced telemetry on your SWF.

If You’re a Flash Builder 4.7 user the enable advanced telemetry is built in so all you need to do is to click a checkbox in order to enable it. The FDT is currently working to implement an advanced telemetry option in the FDT IDE. But being the obsessive folk that i am i wanted to try those features “RIGHT NOW!” so i build a little ANT task file that enables advanced telemetry in your SWF by using a Python script (add-opt-in.py).

Heres how to use it:

To use this ANT task You need to have the following components:

1.- At least Adobe Flex 4.6 SDK with AIR 3.4 or the Flash Player 11.4.
Adobe Scout desktop application. You can find the Adobe Scout and the latest AIR SDK at:
http://gaming.adobe.com/

2.- In order to run the add-opt-in.py script  you’ll need to have python installed (I’m using Python 2.7.3 Mac OS X 64-bit/32-bit x86-64/i386)

Download Python at:
http://www.python.org/download/

3.- You can download or fork the add-opt-in.py script (it’s already included in this project in the scripts folder)  from:
https://github.com/adamcath/telemetry-utils

4.- Learn more about Adobe Scout reading the “Getting started with Adobe Scout” article by Thibault Imbert:
http://www.adobe.com/devnet/flashruntimes/articles/adobe-scout-getting-started.html

Here’s the ANT task project:

The Ant project has instructions and comments on how to use each of the tasks.

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
<!--?xml version="1.0" encoding="UTF-8"?-->
<?xml version="1.0" encoding="UTF-8"?>
<project name="Advanced Telemetry" default="03. Run Application">
	<!--/////////////////////// Project Properies //////////////////////-->
	<!-- Your Project's name -->
	<property name="project_name" value="AdvancedTelemetryAntExample"/>
	<!-- Your Project's source folder. -->
	<property name="src_dir" value="${basedir}/../../src/classes"/>
	<!-- Your Project's deploy folder. -->
	<property name="deploy.dir" value="${basedir}/../../bin"/>
	<!-- Your Project's script folder (where your Python Script is). -->
	<property name="scripts_dir" value="${basedir}/scripts"/>
	<!-- Path to the 'Main' or 'Document' class for your .SWF file.-->
	<property name="main_class" value= "${src_dir}/com/swfgeek/test/AdvancedTelemetryAntExample.as"/>
	<!-- Flag whether to compile the SWF for debugging.-->
	<property name="debug_enabled" value="false"/>
	<!-- The name of your swf file.-->
	<property name="swf_name" value="${deploy.dir}/AdvancedTelemetryAntExample"/>
	<!-- The launcher you'll be using once your SWF is compiled.
	The below values are applicable when using the swflauncher argument:
		External SWF Viewer
		Adobe Flash Player
		Browser
		Internal SWF Viewer
		AIR Debug Launcher -->
	<property name="launcher" value="Adobe Flash Player"/>
 
	<!-- The "Build SWF File" task will compile your SWF and add it to your deploy directory.-->
	<target name="01.Build SWF File">
		<fdt.launch.application 
			projectname="${project_name}" 
			mainclass="${main_class}" 
			debug="${debug_enabled}"  
    		target="${swf_name}.swf" 
    		startswf="false" 
    		swflauncher="${launcher}"/>
	</target>
 
	<!-- The "Add Advanced Telemetry" task will execute the add-opt-in.py thon script on  your SWF and add the  EnableTelemetry tag to for use with Adobe Scout (You can also run this task if you've already compiled the SWF).
	When adding [password] just after the ${swf_name}.swf advanced telemetry will only be visible
	if a matching password is entered in Adobe Scout. -->
	<target name="02. Add Advanced Telemetry"  depends="01.Build SWF File">
		<exec dir="${scripts_dir}" executable="python" failonerror="true">
		    <arg line="add-opt-in.py ${swf_name}.swf" />
		</exec>
	</target>
 
	<!-- The "Run Application" task is the default in your ANT project and will compile, add telemetry and run your SWF. Once your SWF is running you'll be able to see the Advanced Telemetry options in Adobe Scout.-->
	<target name="03. Run Application" depends="02. Add Advanced Telemetry">
		<fdt.loadProjectProperties/>
		<fdt.startSwf projectname="${project_name}" swflocation="${swf_name}.swf" swflauncher="${launcher}" />
	</target>
</project>

Examples

Here are the examples with advanced telemetry enabled, you can open both this SWFs in your browser and if you have Adobe Scout opened you’ll see the the advanced telemetry information the file outputs to Scout.

Starling Example (with a cool animated character stolen from Chris Georgenes).
Flash Display Example (just random color circles)

Here is the zipped project including the AdvancedTelemetryANT Project and the source code for compiling both examples:

Advanced Telemetry ANT Example Project

Using FDT 5.6 AIR for iOS Project Template

Hello Everyone,

I know my blog posting has been kind of slow this last months but I promise I’ll make it up for all my readers, part of my latest work  have  included  a few Starling projects for mobile devices and can’t wait to share my findings with You all.
That said, let’s move on to the subject of this post.

In this blog post I’m going to show You how easy is to set up and publish an AIR for iOS project in FDT 5.6, in previous versions of FDT if You wanted to publish Your AIR application for iOS (.ipa file) You needed to create Your own ANT task file or use some custom project template, FDT 5.5 introduced new mobile project templates, one of them is the AIR for iOS Project Template that let’s You easily create, set up, debug and publish Your AIR for iOS projects.

So let’s get started!

Step 1.

First You need to create a new FDT Project, You can do so by going to the upper menu  then File > New > New FDT Project (see Fig .1  below) this will open the New FDT Project panel which leads us to step 2.

New Project
Fig.1

Step 2.

The New FDT Project panel (See Fig.2 below) is where You set your project’s name, it’s location, kind of project template, SDK, etc. For my project’s name I choose AIRForIOSExample and used the default location in the template selection part You must choose AIR > iOS this will setup a basic project targeting the iOS platform.

In the Application Setup  for  Application ID I used a reverse domain name of com.swfgeek.examples for  this will set Your package structure so give it the “path” that you’ll be using in your project. for Application Title I used AIR For IOS Template  and leaved Application Version as is.

In the Project Setup part choose the Flex SDK that You’ll be using, if You want to taget iOS 5.1 You’ll be needing at least AIR 3.3 included in your SDK.

You can download this combined version of the Flex and AIR SDKs (Flex SDK 4.6.0.23201 and AIR 3.4.0.2710 SDK) from Adobe’s Gaming Site  if You want to save the trouble of finding and merging SDKs.

Once done with these settings click the finish button.

New FDT Project Panel
Fig.2

Step 3.

Open Your main class ActionScript file, mine is located at “com.swfgeek.examples” and it’s named AIRforIOSExample for this example we  will be only adding some text in order to display something on screen once we are testing our project. You can copy the ActionScript below or add your own.

?View Code ACTIONSCRIPT3
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
package com.swfgeek.examples {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
 
	public class AIRforIOSExample extends Sprite {
		public function AIRforIOSExample() {
			var tFormat : TextFormat = new TextFormat();
			tFormat.align = TextFormatAlign.CENTER;
			tFormat.color = 0xFF0000;
			tFormat.size = 45;
 
			var tField : TextField = new TextField();
			tField.x = stage.stageWidth * .5 - tField.width * .5;
			tField.y = stage.stageHeight * .5 - tField.height * .5;
			tField.autoSize = TextFieldAutoSize.CENTER;
			tField.text = "Hello iOS!";
 
			addChild(tField);
			tField.setTextFormat(tFormat);
		}
	}
}

If You used this script You’ll see a text in red saying “Hello iOS!” centered on screen once you test your application, how to test and publish? keep reading below.

 

Step 4.

Time for testing, to test/debug Your application on the AIR Debug Launcher (ADL for short) you must create a new debug/run configuration, you can do so by going to Menu>Run>Debug Configurations or clicking on the little bug icon on the upper toolbar  ( see Fig.3 below) and select Debug Configurations.

Fig.3

Here You will select FDT AIR Application from the left and click on the new icon on the upper left, this will  create a new debug configuration with Your project’s name ( see Fig.4 below). You can give it a different name and select a different class as your main application class, i’ll leave the one we just created so i can see the text we created in the previous step.

The Debug Configurations Panel
Fig.4

Now You must choose your primary Target Platform which is Apple iOS. On the Launch Method section You must select the launch method this will be either Desktop or on Device we will be focusing on Desktop for now.

You can select Custom size and  set Your device dimensions manually or select one of the included Mobile Presets i will select Apple iPhone  but you can also choose a different size  depending on  what device you need to simulate, the options are: Apple iPad 1/2, Apple iPad 3, Apple iPhoneApple iPhoneRetina and Apple iPhone.  See Fig.5 below.

Launch Method
Fig.5

With all set hit the Debug button (down left corner) give it a few seconds to compile and you should be seeing the ADL opening Your application on the selected simulator size (Apple iPhone) like Fig.6 below.

Fig.6

Step 5.

Ok so You’ve got your application running nice and smooth on your Desktop, you wrote a few traces to see the debugger pop those messages in the console, everything is working great but now you need to actually test your app on a physical device. Let’s setup things to do so.

To compile and export Your application to an .ipa file You need to be enrolled in the Apple iOS Developer Program, have a certificate in .p12 and the mobile provisioning profile of Your application, how to do so it’s outside of the scope of this tutorial and You can find plenty of examples on the web on getting your certificate ready for AIR development.  

So now that You have your Apple certificate and your application provisioning profile ready You must set AIR Properties for Your project, You can do this by opening the Launch Configuration window (check Step 4.) scroll down and click on the Configure project properties button or by right clicking in your project’s main folder and click on the Properties button located at the very bottom of the contextual menu ( see Fig.7).

Fig.7

Either way You choose will open up the Project Properties panel once is open click on the FDT AIR Properties on the left side and click the iOS button ( see Fig. 8 below).

FDT AIR Properties Panel
Fig.8

The first tab you’ll see once iOS is selected is the Building tab here you can set Your Application Description file ( FDT created one for You when You started Your project) You can browse to locate your descriptor in your system or click the create button and let FDT create it for you. Just below that box is the SWF File Name box where you enter your application’s main .SWF file.

Next to the right is the Properties tab ( see Fig. 9 below).

Properties tab.
Fig.9

In this window You must set:

Application Name ( the one that will appear below your application icon once is on the iPad/iPhone) the File Name (the name of the .ipa file).

The Application ID (This is the ID You gave to Your application in Apple’s Developer Center when You created your provisioning profile) Note: It’s important to remember that this might differ from the package structure that you gave to your project if You enter an ID different from the one you specified in Apple’s Developer Center Your application will fail to install on your device. 

The Air SDK Namespace is the version of AIR that will be defined in your descriptor file You can leave it as is ( it will use the number of the AIR SDK that you defined when creating your project).

The Version number of your project.

The Aspect Ratio here you can choose between portrait, lanscape or default depending on the aspect ratio of your application.

There are two checkboxes to choose if your application will be Full Screen and support Auto Orientation

Next is the Rendering Mode selector, you can select auto, gpu, direct or cpu depending on the rendering mode you want the application to run.

The Devices selector let’s you choose the iOS devices in which your application is supported the options are: iPhone/iPod, iPad and iPhone/iPod/iPad .

And the last one is the Resolution to choose high or standard resolution. Note: If you choose high but not prepare Your files (graphics) for the iOS higher resolution your application can look pixelated/blurry when running in an iOS retina device.

Digital Signature Tab
Fig.10

The next tab is the Digital Signature ( See Fig. 10) where you need to add the files provided to You by Apple in the Developer Center.

The first section of that panel in the Development Profile in the Certificate enter the path to where you have your iOs certificate .p12 file or use the button next to it to browse your system and find that file.

The second section is the Password field and here you need to enter the password you generated when creating you .p12 file yo can use the checkbox so FDT remembers it in the current development session.

Next is the Provisioning Profile field, the same as the development profile, enter directly on the field or use the Browse button to set the path to your .movileprovision file.

Below that section You can enter a different  iOS certificate and Distribution  profile (That will be a different one than the provisioning one) in order to publish a Release/Ad Hoc distribution file.

The next tab is the Icons one ( see Fig. 11 ) here you must browse for each one of the icon files in the corresponding size.

Fig.11

 

The next tab Package Contents (Fig.12 ) is where you can browse and add any additional file required by your application: images, xml, swf, swc, audio files, etc. In the Add Directory section you can also choose a folder and all files in it will be included in your .ipa file.

Fig.12

 

Next is the Extensions tab (Fig. 13) where You can add ANE (Short for Application Native Extension) files in case your application uses one.

Fig.13

 

And the last one is the Deploy tab (See Fig.4 below)

Deploy Tab
Fig.14

The first thing on that tab is the Pre package launcher where you must select the last run configuration before building the .IPA  file here you must select one of the “Run Configurations” to make sure the final file does not include a debug version of your .SWF.

In the Package Type  you get to select if is a final distribution release (the one that goes to Apple for approval and release on the App Store) or an Ad hoc package for testing and limited distribution.

Next is the Platform SDK where You can select and use the iOS SDK that Your application will be using.

And finally the Export Application section where you choose the place in your hard drive where your .IPA file will be saved.

 

Step 6.

Time to package and deploy.

Now You’re ready to package and export your application  in orded to do so you need to open up the Run configuration window ( See Fig.5) but this time instead of choosing On desktop as Launch Method you will select On Device (See Fig. 15 below) and here you can select two different package methods Standard (packaging takes longer & application performance is similar to deploy build) or Fast (packaging is quick & runs slower  than a deploy build) for testing is ok to use the Fast method but if you need to measure performance on the device is best to go with the Standard method.

 

On Device Launch Method
Fig.15

Then hit The Apply button and then click on the Run button, you will see the AIR compile process in your Console window ( See. Fig. 16)

Console Window
Fig.16

 

If you packaged it for debug you will see a pop-up window (See Fig. 17)  it will wait for you to install the application in your device and when ready hit the Start Debugger button to begin debugging Your application( Note: There are quite a few methods of installing an application on an iOS device without the cumbersome process of installing it via iTunes, you can install it directly via ADL using the Terminal for example but that will be matter that we’ll takle in another tutorial .

If You packaged your .IPA for deploy  your work is ready to install (See Fig. 18).

Fig.18

 

Hope it clears out how to use the AIR Project Template for iOS on FDT5.6 , write any issues of this process or further questions in the comments below  or You can always reach me on twitter as @swfgeek.

 

Thanks for reading and Happy Coding.
Dave

 

 

 

Using Flash Player 10.2 in FDT4

In this post I will tell You how you can start playing with the new features of the Flash Player 10.2 Beta in FDT 4. I started using “Flash Builder Burrito” for the examples that I’ve been posting but I really missed the quick code hints and mostly the auto-import features of FDT4 that let me explore the new SDK without leaving my code to read the documentation, that said let’s move on.

Figure 1.

1.- The first thing You need to do is go to the Hero Stable Builds table and download the Flex SDK  build 18623 from there.

I usually have all my SDKs located in the same place in my disk “C:\SDKs” but You can put it on the desktop for easy location, once you have downloaded it decompress the zip in the location you chose. (Note: These builds do not contain any Hero mobile features or runtimes but it appears that the flex.swc that should be located in \frameworks\libs  is also missing you’ll need to include this from a previous build or FDT will output errors when adding the SDK to your project ).

Figure 2.

2.- Open FDT4 and go to >Window>Preferences and open the FDT tab and select Installed SDKs from that menu as shown in figure 3.

Figure 3.

Click on the Add  button and the SDK definition Panel will pop up select the directory where You have downloaded the Flex Hero SDK, if you have a previous Flex Hero SDK installed be sure to give a different name I called mine Flex Hero ( Flash Player 10.2  Beta).

Figure 4.

3.- Go to >File>New>New Flash Project select Empty AS3 project give your project a name and click the next button that will take You to the Flash Project Settings  in the SDK Configuration select your newly added SDK( see figure 5.) you will see that the Player Version changes to 10.2, click finish.

Figure 5.

4.- Right click in the project You just created select properties, go to the FDT Compiler menu and change the -target-player from “playerVersion” to “11”  this will let you test your projects without getting any version errors.

EDIT:   In this step You don’t need to change the “-target-player” argument leave it as is it will use the 10.2 version but you need to add the “-swf-version=11” argument, that way it won’t show errors when compiling.( Thanks to John Olson for pointing it out).

Figure 6.

5.- That’s it now You can test and compile the features including in the beta of  the Flash Player 10.2 and get  all the coding comfort of FDT4.

Figure 7.

Latin Flash Tour México (Reloaded)

The next week on the 29 and 30 of October 2010, The Latin Flash Tour returns to México City for the second time, the event is the second edition of an initiative of Adobe’s Flash Platform Evangelist Lee Brimelow to visit Latin American countries to show the latest innovations, applications and functionalities of the Flash Platform, this year the tour starts in México and ends in Rio de Janeiro passing by Bogotá, Lima, Santiago y Buenos Aires.

The event will be held at the Universidad Iberoamericana in México City and will count with the talks of Grant Garrett (Influxis), Jerry Chabolla (Influxis), Enrique Duvos (Adobe) y Lee Brimelow (Adobe). Besides that the two days will be filled with talks and workshops that You simply can’t miss.

I will be giving a talk on Powerflasher FDT 4 new features and how those can help You in speeding Your workflow called FDT to the extreme.

The site of the event is http://www.latinflashtour.com and the site of the México city event is: http://www.latinflashtour.com.mx where You can find the agenda and registration.

Last year event was really great and this year will be awesome, there are a lot of talks and workshops on diverse themes from Illustration with Flash and The Flash Platform for Designers Plataform to AS3 in the iPhone for Flash Designers, Multitouch Experience and a ton of themes more, if You are into Flash you really need to go, is a great place to learn and share with México’s Flash Platform community… so what are You waiting for go there register and be part of it.

See You there.