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

Starling Tips and Tricks, Slides & Recording

Hello friends,

The slides and recording of my talk Starling Tips and Tricks for the Hawaii Flash User Group are up.

Unfortunately the examples I had for the meeting “the workspace to be more precise” got corrupted and wasn’t able to present them live, as an apology for this issue I’ll be writing a series of tutorials covering each topic of the meeting and will be including the corresponding exercises.

Cheers,
Dave

Combined version of the Flex 4.6 and AIR 3.5 SDK for the lazy ones.

Hello You all,

I’m sure about this time you’ve already heard that  Adobe’s  AIR 3.5 SDK and Flash Player 11.5 are out of beta and ready to download for production work, if You have been staying up to date You know that in order to use the new features of AIR and the Flash Player runtimes you have to merge it with the Flex SDK and then add/remplace the playerglobal.swc file and unless you have a tool like FDT IDE that makes this process less cumbersome by doing the merge for you with a single click, but when you’re not using FDT you need to go and use the terminal of some other tool for merging.

So in order to save You the effort I’m uploading a combined version of the Flex 4.6 and AIR 3.5 SDK so all you have to do is download the zip file uncompress add it to your IDE of choice SDK’s path and start playing with AIR 3.5 and Flash Player 11.5.

 

Download the Combined version of the Flex 4.6 and AIR 3.5 SDK

 

Cheers,
Dave

 

 

Starling Tips and Tricks Talk

Hello You all,

I’m pretty glad to announce that I will be giving a Starling talk for the Hawaii Flash User Group the  meeting will be on-line through Connect  the next 22 of November at  05:00 PM – 06:00 PM (GMT-5 Eastern Time US & Canada).

Here’s the description of what we’ll be seeing:

Starling Tips & Tricks

Starling is a free Open Source Game Engine built on top of Adobe’s Flash technology developed by Gamua the creators of the Sparrow Game Framework for iOS, it runs not only in the browser, but on all major mobile platforms out there, including iOS and Android.

 

I’ve been using Starling in my last projects and learned a few tips & tricks that I want to share with You in the course of this meeting.

 

Although Starling can be used for Desktop & Browser projects I’ll be focusing on Starling for Mobile more specifically for the iOS platform, I will show You how to develop a simple game that runs on iPhone/iPad both in SD and HD resolutions using a single code base.

 

Things we’ll see on the meeting:

 

  • How to set up your Starling project in FDT IDE.
  • Create and prepare your Textures using Texture Packer.
  • Set up your main class file so your game runs both on iPhone/iPad SD and Retina displays.
  • Set up your Assets class so it grabs the proper texture based on the device your game is running.
  • Create and implement Bitmap Fonts for your game texts using Glyph Designer
  • Test Debug and Profile your application both on the simulator and on physical devices.
  • Set up and export your final iOS application.

Thanks for reading and hope to see You there!

More info at:

Hawaii Flash Adobe User Group:

http://hawaiiflash.groups.adobe.com/index.cfm?event=post.display&postid=44865

RSVP at Meetup:

http://www.meetup.com/hawaiiflash/events/89770102/

Facebook Event:

http://www.facebook.com/events/402762659797607/

 

Flash AIR to iOS Game Sneak Peek: “Smash -a- Mush”

Ok, so here’s the first sneak peek to one of the games that we are producing for mobile devices as Team-O, for our first game we decide to approach a simple game “Smash-a-Mush” is a whack a mole style game where in order to collect points You need to smash the mushrooms and avoid touching other things like flowers, stones or the radish, when we designed this game Stage3D wasn’t available yet for mobile development so we build a little framework and it’s basically a “get more points game” like those Atari games where the objective was to cross as many stages posible and collect points.

We began doing it in Flash CS5.5 but even when is a simple game I find out that we needed to move it to a pure As3 project done in FDT5, why? performance, the thing that took the most time in the development side was that I needed to be really careful with memory leaks and performance issues and optimize the game to use less vector graphics and do the most of the animation using sprite sheets and partial blitting, Fdt5 Profiler was a real time saver and helped me find those memory leaks that using Flash alone would not have been posible.

We are the in the process of finishing the music and audio of the game and hope Apple’s App Store will approve it in the next few weeks. I would be writing a series of more detailed posts of the process of building games with Flash for mobile platforms and give a few tips/warnings for newcomers so they won’t have to struggle with the same problems that we already had, meanwhile You can watch the video of the game running on an iPad 2.

Thanks for reading,
Dave

Targeting Flash Player 11 & AIR 3 Release Candidates in Flash Professional CS5.5

This post was written before Adobe made the announcement that the Flash Player 11 and AIR 3.0 runtime will be available next month.

Although all of my projects are coded in FDT4 I still use Flash Professional on a regular basis that because a great part of those projects have complex timeline animations usually made by the animation artist working in the project so my workflow usually involves the Flash IDE for exporting the final swf, here is a guide on how to set up Your copy of Adobe Flash Professional CS5.5 to target the Flash Player 11 and AIR 3.0 Release Candidates, let’s get started:

Targeting Adobe Flash Player 11 Release Candidate for Desktops.

1.- Download the Flash Player 11 Release Candidate.
First things first go to the Adobe Labs site and download the Adobe Flash Player 11 Release Candidate for Desktops. Download the proper player for Your system ( Is important that You download and install the runtime on Your browser otherwise you won’t be able to test your SWFs as there is no Standalone RC1 version). You need to download the Flash Player 11 Release Candidate Global SWC “playerglobal.swc” as well.

2.- Once You installed Flash Player in the browser and renamed the swc file from flashplayer11_rc1_playerglobal_090611 to “playerglobal.swc” go to “/Applications/Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0” and create a new folder i named mine FP11_RC1 and copy your playerglobal.swc file inside the folder you just created.

 

3.- Now You need a new player profile so You can choose the Flash Player 11 RC1 from the available player versions when working with Flash, go to ” /Applications/Adobe Flash CS5.5/Common/Configuration/Players/”  duplicate the FlashPlayer10_2 2.xml and give it a new name to the file You just copy I named mine FlashPlayer11_RC1.xml.

4.- Open that file in a text editor and change the id and version in the player tag for id give it the name You wish to be displayed in the Player panel inside of Flash I named mine “FlashPlayer11_RC1” and change the version to “13”.


   Flash Player 11_RC1

5.- In the same file change the path tag so it points to the folder You just created:

   

6.- Save the file open Flash CS5.5 and You’re good to go.

 

*Note* Remember that there’s no Standalone for Flash Player 11 RC1 so when You test your project in Flash ht command + F12 in order to publish to browser (Where You should have the Flash Player 11 RC1 plugin installed by now.

Targeting Adobe AIR 3 Release Candidate.

1.- Download the AIR 3.0 Release Candidate.
First thing You need is the Adobe AIR 3 SDK Release Candidate.

2.- Unzip Your AIR SDK if You’re on Mac the file will be named ” air3_rc1_sdk_mac_090611.tbz2″

3.- Close Flash Professional CS5.5 and browse o the AIR 2.6 folder, on Mac it will be in the following location
“/Applications/Adobe Flash CS5.5”

4.- Change the AIR2.6 folder name to something like AIR2.6_old.

5.- Rename the folder You previously unzipped to AIR2.6 and place it on the Flash Professional CS5.5 folder “/Applications/Adobe Flash CS5.5”.

6.- Browse to the AIR2.6/frameworks/libs/air/ folder and copy the airglobal.swc.

 

 

7.- Paste the SWC file in the folder “/Applications/Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6” it wil replace your copy of  the airglobal.swf file.

8.- Browse to the “/Applications/Adobe Flash CS5.5/Common/Configuration/Players” folder and open the following files with a text editor:  AdobeAIR2_6.xml, AiriPhone.xml, or Android.xml.

 

9.- Change the version attribute in the player tag from 11 to 13 and save the files:

On the Android xml file:

On the AiriPhone xml file:

On the AdobeAIR2_6 xml file:

10.- Browse to the “/Applications/Adobe Flash CS5.5/AIR2.6/samples/” and open the descriptor-sample.xml file.

11.- Change the “http://ns.adobe.com/air/application/2.6” namespace URL to “http://ns.adobe.com/air/application/3.0”.

12.- Save the file and open Flash.

Testing time:

In order to see that You’re targeting the RC1 versions of the Flash PLayer 11 and AIR 3.0 here are 2 quick tests:

To test Flash Player 11:
1.- Open the Flash IDE go to File > New > ActionScript 3.0 to create a new flash document in the Player section of the Properties panel select the “Flash Player 11_RC1” as your player version.

2.- With the first frame selected go to Window > Actions to open the ActionScript panel and write the following.

import flash.display.Stage3D;

var stage3d = new Stage3D();   

var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0xFF0000;
my_fmt.size = 32;
my_fmt.bold = true;
my_fmt.font  = "Arial";
	
var textF: TextField = new TextField;
textF.defaultTextFormat = my_fmt;
textF.autoSize = TextFieldAutoSize.LEFT;
textF.text = "Hello Flash Player: " + Capabilities.version + "\n" + stage3d;
	
addChild(textF);

Here we are importing one of the classes only available to FP11 “Stage3D” and creating a text field to display the version of Flash Player installed in our browser.

3.- Hit Command + F12 to publish to browser if we did everything ok You should see your swf displaying the player version and the Stage3D object.

To test AIR 3.0:

1.- Open the Flash IDE go to File > New > AIR to create a new flash for AIR document in the Player section of the Properties panel select the “AIR 2.6” as your player version.

2.- With the first frame selected go to Window > Actions to open the ActionScript panel and write the following.

import flash.display.Stage3D;
import flash.desktop.NativeApplication;
import flash.text.TextField;

function air3_test(){
	var stage3d = new Stage3D();
	var my_fmt:TextFormat = new TextFormat();
	my_fmt.color = 0xFF0000;
	my_fmt.size = 32;
	my_fmt.bold = true;
	my_fmt.font  = "Arial";
	var textF: TextField = new TextField;
	textF.defaultTextFormat = my_fmt;
	textF.autoSize = TextFieldAutoSize.LEFT;
	textF.text = "Hello AIR Version No. " + NativeApplication.nativeApplication.runtimeVersion +"\n" + stage3d;
	addChild(textF);
	trace ( "+ Flash CS5.5.air3_test() - args: " + [stage3d,"AIR Version: " + NativeApplication.nativeApplication.runtimeVersion ] );
}

air3_test();

Here we are importing one of the classes only available to FP11 “Stage3D” and creating a text field to display the version of Flash Player using the “NativeApplication” class.

3.- Go to Debug > Debug Movie > in AIR Debug Launcher(Desktop) to publish our file if we did everything ok You should see your swf displaying the AIR version and the Stage3D object.

And that’s it, thanks for reading and Happy Flashing.

Quicktip: Uninstall Your Android App from the AVD Emulator

This post is more of a self-remainder but hopefully it will help other mobile developers with the same issue, when working with the Android Emulator You might be in the situation that You’ll need to wipe Your app entirely and there’s no drag and drop in thrash when using the emulator, so in order to delete Your app without erasing Your AVD image just follow the next steps:

1.- Start Your Eclipse IDE (FDT or Flash Builder).

2.- Run the emulator.

3.- Using the terminal navigate to the Android SDK “platform-tools” directory, mine is located at:

/Users/dave/development/flash/SDKs/android-sdk-mac_x86_r12 /platform-tools

 

4.- Do the command “./adb shell” remember that commands must have the “./” before the command name otherwise You’ll get a bash error (-bash: adb: command not found).

5.- Navigate to the app directory using the cd command  ” cd /data/app/”.

6.- Then list the apps using the list command “ls” (This will display the names of the .APKs installed in Your emulator.

 

7.- Then use the remove command “rm YourApp.apk”

8.- You can now type “Exit” to leave the adb shell, relaunch the emulator and Your app will be gone for good.

Happy Coding.

Flash For Android Meeting | Slides and Recording

Here’s the slides of my preso Flash For Android for Hawaii Flash User Group, thanks everyone who attended and to John Barret for the invitation was my first preso in other language so that makes it special ;), if You didn’t make it to the meeting last night below is the link of the recording.

The recording of the session:
http://experts.adobeconnect.com/p305dn8lpzd/

Thanks again and happy coding.

*UPDATE* Flash for Android Talk for Hawaii Flash User Group

Upate: Unfortunately and due to some problems with the Adobe Connect Add-in on Mac OS Lion the presentation couldn’t be held last Saturday, I apology for the inconvenience and the meeting is being rescheduled to August 27, 2011 05:00 PM – 06:00 PM (GMT-10 Hawaii, Fakaofo).
This meeting will be on-line at:
http://experts.adobeconnect.com/hawaiiflash/

I will be speaking this August 27, 2011 05:00 PM – 06:00 PM (GMT-10 Hawaii, Fakaofo) about Flash for Android, In this session I will be showing the basic workflow in Flash CS5.5 to set up and get Your AIR app running on the Android emulator for testing and then pushing it to the Android Marketplace.

You can RSVP here.

The talk will be streamed on connect, Visit Hawaii Flash User Group in Adobe to get the connect details.

See You in an hour 😉