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

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

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/

 

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

 

 

 

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

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.

What I’ve been up to.

After quite some time of not writing a post due to projects I like to share with You what I’ve been up to, begging this year I decided to leave Grupo W and start working on my own one of the things that influenced that move was the fact that even when working in W was awesome I was spending more and more time at the office and less and less time with my family so based upon that I decided to start working at my place to give more time to my kids and my personal projects, at first I was doubtful that I could pull it off (having 4 kids to feed makes anyone nervous about leaving a stable job) and last time I’d freelanced was a long time ago, but as soon as I started I found out that the lack of projects was the last thing that should worry Me things rolled out just fine and before I knew it I was enrolling in new contracts that had me working full time, the difference of doing it by my own is that I decided what projects to take and when to take them.

To make things shorter and less sentimental most of the projects I’ve been doing are for mobile platforms and even when I had previous experience in that field I’ve really enjoyed the process of learning new tools and development languages I reluctantly moved back to Mac OS after almost 4 years of working with PC but if You plan to do mobile development there’s one platform You don’t want to miss (at least my clients wouldn’t wanted to miss it) Yes I’m talking about Apple’s iOS I decided to go native and get to dusting my old Objective-C books and get a MacBook Pro, and to be sincere I kinda of liked it( I’m talking about the code, to talk about how I feel about Apple cornering You to give them their 30% of almost every app You build is a matter that will need a post of it’s own) but almost immediately Adobe started unveiling the path they where taking for mobile development in the Flash Platform and the sun shined again, it’s not that I hate iOS or xCode but the fact of stop working with the tools that I know and love was something I didn’t like at all. And Adobe sure didn’t let Me down using the newer AIR and Flex SDKs I was deploying a single code based project across multiple devices including iOs, Android and BB Playbook( that last one only on emulator “You should have submitted Your app for that contest Dave”) so event some client’s work was being done native I kept doing Flash based mobile development in all my other projects, one of those projects is a game I’m doing with Cecy Meade and let me say it runs like butter on iOS devices can wait to update it to AIR 2.7 SDK (which Adobe publicly released today) and push to Apple’s AppStore.

So that’s what I’ve been up to, oh yes and Piñatarama 2.0 😉 a project I secretly worked on with Cecy Meade and Vertigo Gallery’s Jorge Alderete and Clarisa Moura  this last few months that features the works of artists from all over the world reinterpreted by Mexican artisans in the form of Piñatas which had it’s opening last weekend in the Museum of Modern Arts of México City if You go to D.F. be sure to pay a visit the artists and artisans did a really amazing work.

So, thanks for reading I promise I’ll keep updating this blog more often.
See You on Twitter and Viva el Flash 😉

Quickguide: Using AIR 2.6 in FDT 4

So finally I got some free time to write this post about using the new Adobe AIR 2.6 in your FDT 4 environment, so let’s get to it:

As you know Adobe recently released the Adobe 2.6 runtime and SDK with significant improvements including iOS support bringing feature parity for Android and iOS platforms, more info on Adobe AIR team’s blog.

Some of the new features are:

AIR for iOS

  • Updated AIR for iOS support with improved performance. Developers can take advantage of new features in iOS 4 like multitasking, Retina display for higher screen resolutions, and front and back camera support. Developers can now build application that capture audio with the microphone and take advantage of the same graphics hardware method used in AIR for Android using OpenGL ES2 for fast graphics.
  • Packager for iPhone (PFI) is now replaced with and the functionality integrated with AIR Developer Tool (ADT) a comand line tool for compiling application in the AIR SDK. ADT can now be used to package AIR files, native desktop installers, AIR applications for Android and iOS.

AIR for Android

  • Submit apps to be included in the Amazon Appstore for Android when the store launches.  Companies now have an additional distribution option with one of the largest online shopping destinations on the web.
  • USB debugging was added as an additional debugging option to WiFi.

So what do You need to start testing this new capabilities in AIR SDK 2.6, if You’re part of Adobe’s Flex SDK and Flash Builder private pre-release program You can start testing this right away. If You like to start working with the Adobe AIR 2.6 SDK inside of FDT4 the following guide should be a good start.

1.-Download the SDKs.

Download The Adobe AIR SDK 2.6 and Flex 4.1 latest stable release.

2.- Merge the SDKs

To start using the AIR 2.6 specific features You need to merge the AIR SDK with your flex sdk to do that I created a new copy of my flex SDK renamed it to “flex_sdk_4.1.0.16076_AIR_2.6” and then copy the entire contents of the AIR SDK in there it will ask You to replace files and folders  just click ok and move on to next step.

3.- Adding the SDK to FDT


Fire up Your copy of FDT then go to “Preferences->FDT->Installed SDKs “ click the Add button located in the top right of the panel this will open a new panel asking for the “Path:”  select the folder path to Your newly created SDK, mine is located in “C:\SDKs\flex_sdk_4.1.0.16076_AIR_2.6” give it a name I called mine: “Flex 4.1 AIR 2.6 SDK” hit Ok and  now You’re ready to build a project using AIR 2.6 features, on to next step.

4.- Create a project.

Create a new Flash project by going to “File->New->New Flash Project” give Your project a name, set the project type to Desktop and in the options section of the window change the Flex version to  Flex 4 AIR click the “next” button it will take You to the SDK configuration panel, select the one You created in the last step in my case it was “Flex 4.1 AIR 2.6 SDK” then click finish.

5.- Change the compiler settings.


Right click the project You just created select Properties–>FDT Compiler and change the target player from “-target-player={playerVersion}” to “-target-player={11}” this will let You compile and debug Your project without any errors. Remember to set the version of  your application to “2.6” in Your descriptor file.

 

I will make a full example on how to deploy and debug both to Android and iOS using an ANT file in another post, until then, happy coding.

 

 

 

 

 

 

Adobe announces Flash Player and AIR for Android

Adobe officially announced at Mobile World Congress the Flash Player 10.1 and Adobe AIR for Android. Kevin Hoyt recorded a video overview of some demos on the Motorola Droid. The demo shows some of the capabilities of Flash on mobile devices.  It looks  pretty good so far the way The Flash Technology is moving into other devices so far. Check the video