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

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

Book Review: ActionScript Developer’s Guide to Robotlegs

So quite some time after I got this book on my hands I’ve finally taken the time to sit down and read it and let me open this post saying that I really enjoyed it. ActionScript Developer’s Guide to Robotlegs will guide You through the inner workings of the Robotlegs framework in a very straightforward and concise way, the authors Lindsey Fallow (Stray) and Joel Hooks (who also are part of the Robotlegs core team) do so by taking real-life applications and break them apart showing You how Robotlegs gets things done in the process, each chapter is full of tips equally appealing to Robotlegs newcomers and seasoned users of the framework. The book is written in such a way that has a very “Head First Series” nice feel to it taking You from the basics to more advanced features, troubleshooting, tips, good practices and power-ups in a very clear way.

What I liked the most about this book is the fact that Is really well explained, from the table of contents to the appendixes is a step by step companion as You dive deeper in the core concepts of Robotlegs such as Context, Commands, MediatorMaps and DI ( Be sure to check the Appendix B dedicated entirely on how Robotlegs handles dependency injection).

When You’re entirely new to a framework such as Robotlegs You might find yourself lost in nomenclatures and concepts previously unknown to you, well this book untangles it all for You and gently clears your way as you read along and event when you’ve used Robotlegs before is full of juicy tips and best practices that will surely help you have a better understanding on how you wire your applications using the framework.

You can get the book in digital or print format at O’Reilly in case you haven’t already done so, I definitely recommend it for anyone thinking on using the Robotlegs Framework or anyone who is already using it on a regular basis.

I like to thank Stray and Joel for taking the time to write this book and the Robotlegs team for the efforts on the framework (keep up the wonderful work guys).

Don’t forget to visit Robotlegs.org for the latest on the framework.

Happy Reading.

Greensock’s ThrowPropsPlugin iPad Test

Heres a quick video showing how You can use the Greensock’s ThrowPropsPlugin to emulate the bouncy effect of the iOS devices, on the example I used an image but it can also be used with TextFields or Lists and it performs equally good on the iPad.

ThrowPropsPlugin is a plugin for TweenLite and TweenMax that allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown

For the code part I just used Jack’s sample with some minor tweaks to use an image instead of a TextField.
Here is the class:

package com.swfgeek.mobile.ThrowPropsPlugin {
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.utils.getTimer;
	import com.greensock.TweenLite;
	import com.greensock.easing.Strong;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.ThrowPropsPlugin;
	import flash.geom.Rectangle;
	
	public class MainApp extends MovieClip {
		private var bounds : Rectangle;
		private var mc : MovieClip;
		private var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number;
		
		public function MainApp() {
			TweenPlugin.activate([ThrowPropsPlugin]);
			initialize();
		}
		
		private function initialize():void {
			bounds = new Rectangle(-128, 0, 768+128, 1024);
			mc = getChildByName("robots_mc") as MovieClip;
			setUpTPBounds(mc, bounds);
			mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		}

		
		private function mouseDownHandler(event:MouseEvent):void {
			TweenLite.killTweensOf(mc);
			x1 = x2 = mc.x;
			y1 = y2 = mc.y;
			t1 = t2 = getTimer();
			mc.startDrag();
			mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

		private function enterFrameHandler(event:Event):void {
				x2 = x1;
				y2 = y1;
				t2 = t1;
				x1 = mc.x;
				y1 = mc.y;
				t1 = getTimer();
		}

		private function mouseUpHandler(event:MouseEvent):void {
			mc.stopDrag();
			mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
			var time:Number = (getTimer() - t2) / 1000;
			var xVelocity:Number = (mc.x - x2) / time;
			var xOverlap:Number = Math.max(0, mc.width - bounds.width);
			var yVelocity:Number = (mc.y - y2) / time;
			var yOverlap:Number = Math.max(0, mc.height - bounds.height);
			ThrowPropsPlugin.to(mc, {throwProps:{
										 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
										 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
									 }, ease:Strong.easeOut
									}, 10, 0.3, 1);
		}

		private function setUpTPBounds(container : MovieClip, bounds : Rectangle):void {
			var crop:Shape = new Shape();
			crop.graphics.beginFill(0xFF0000, 1);
			crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
			crop.graphics.endFill();
			container.x = bounds.x;
			container.y = bounds.y;
			container.parent.addChild(crop);
			container.mask = crop;
		}


	}
	
}

To know more about this plugin visit Greensock’s ThrowPropsPlugin page and check out the ASDocs.

Note: ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). If you’re not a member yet,I suggest you sign up, believe Me is really worthy.

Happy Coding

Flash Player 11 & AIR 3 Betas at Adobe Labs

Adobe in his secret plan of not letting Me catch up with the latests runtimes 😉 has just released new beta versions of Adobe Flash Player 11 and Adobe AIR 3 and are available at Adobe Labs.

Some of the new features are:

Adobe® Flash® Player 11 desktop beta drives innovation for rich, engaging digital experiences with new features for cross-platform browser-based viewing of expressive rich internet applications, content, and videos across devices. Some of the features from the Flash Player Incubator, such as Stage 3D and 64-bit support, have been moved into this beta release.

Key benefits of the Flash Player 11 desktop beta include:

Stage3D APIs — Create highly interactive visuals to improve collaboration on 3-dimensional models.
64-bit support — Support for 64-bit operating systems and browsers on Linux, Mac OS, and Windows.
G.711 audio compression for telephony — Integrate voice/telephony into business apps using G.711 codec.
H.264/AVC SW Encoding — Encode higher quality video locally using H.264 video.
Socket Progress Events — Build advanced file sharing apps like FTP clients that send large amounts of data.
HD surround sound — Deliver full HD videos with 7.1 channel surround sound directly to AIR powered TVs.

More info at Adobe Labs

Adobe® AIR® 3 introduces enhanced features that provide developers a consistent and flexible development environment for the delivery of out-of-browser applications across devices and platforms.

AIR 3 delivers innovation for rich engaging applications with unparalleled performance improvements that deliver advanced graphics rendering, high-definition video, and consistent reach across operating systems and devices. AIR 3 is packed with features that will benefit all developers but has a special focus for those interested in developing console quality games, delivering high quality video, or scalable enterprise applications.

Note: The AIR 3 desktop runtime beta is provided to ensure current AIR 2.7 and AIR apps targeting older version of AIR are compatible if You want to test the new SDK You must enrole in the private prerelease program.
More info at Adobe Labs

Seems like a lot of good stuff to play with.

Happy Coding.
Dave

Away3D 4.0 “Broomstick” + JigLibFlash on “Molehill” example: CubeWall

CubeWall
So here’s a quick example (extending one of the examples of Away3D) using the latest versions of Away3D 4.0 Alpha (Broomstick) and JigLibFlash using the new APIs included in FlashPlayer 11 “Molehill”. In order to see the example You’ll need the FlashPlayer 11 Incubator installed in your browser. There is a lot of new stuff to test on “Molehill” and it’s new features but wanted to share this, once I get some more free time I’ll write a tutorial about it.

Instructions: Click the image to open the example, use Your arrow keys to make the pink box collide with the CubeWall (once the pink box leaves the scene another one will drop above the wall) use the spacebar to lift the pink cube.

To find more information visit one of the following links:
Away3D 4.0 Alpha release – “Broomstick”

3D Physics Engine Jiglibflash update for flash 11 incubator build with Away3D 4.0 Broomstick support

Flash Player Incubator

 


Flash Player Incubator “Molehill” 3D APIs for Adobe Flash Player and Adobe AIR

So this has been quite a Sunday  full of Adobe surprises and news, this morning Lee Brimelow and Thibault Imbert gave a keynote at Flash Gaming Summit and one of the big news was the announcement of the new Flash Player 11 “Molehill”  APIs is now available at Adobe Labs.

So what is “Molehill”?
Molehill is the code name for a new set of low-level, GPU-accelerated 3D APIs that will enable advanced 3D experiences across screens through the Adobe® Flash® Platform runtimes. These new low-level APIs will provide advanced 3D and 3D engine developers the flexibility to leverage GPU hardware acceleration for significant performance gains.

How to target the “Molehill” player and start building some cool 3D stuff?
First of all You’ll need to download the Adobe AIR and Adobe Flash Player Incubator from Adobe Labs page in order to see and play with “Molehill” demos like the “Zombie Tycoon” by Frima Studios:

If You want to author and target Molehill here is an excerpt from Adobe’s Authoring for Flash Player 11,0,0,58 Incubator :

Download the documentation for Flash Player 11,0,0,58 by clicking here.

Download the playerglobal.swc for Flash Player 11,0,0,58 by clicking here.

To use the new Flash Player 11,0,0,58, you will need to target SWF version 13 by passing in an extra compiler argument to the Flex compiler: -swf-version=13. Directions are below.

If you are using the Adobe Flex SDK:

  1. Download build 19786 from the Hero Stable Builds table. (Note: This is an in-development build of Flex SDK “Hero” and may contains bugs and incomplete features).
  2. Install the build in your development environment
    1. In Flash Builder, create a new ActionScript project: File -> New -> ActionScript project.
    2. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    3. Use the ‘Configure Flex SDK’s’ option in the upper right hand corner to point the project to Flex build 19786. Click ok.
  3. Configure your project to target SWF version 13
    1. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    2. Add to the ‘Additional compiler arguments’ input: -swf-version=13. This ensures the outputted SWF targets SWF version 13. If you compile on the command-line and not in Flash Builder, you need to add the same compiler argument.
    3. Ensure you have installed the Flash Player 11,0,0,58 Incubator nuild in your browser.

If you are using Adobe Flash Professional:

You can create your own profile to publish to a specific SWF version in Adobe Flash CS5. See this package, it contains a sample FlashPlayer11.xml file file you need to copy into the right place.

  1. FlashPlayer11.xml goes into: Adobe Flash CS5\Common\Configuration\Players
  2. Place the playerglobal.swc related to the Incubator build you are working with into: Adobe Flash CS5\Common\Configuration\ActionScript 3.0\FP11
  3. Restart Flash Professional after that and then select ’Flash Player 11’ in the publish settings. It will publish to a SWF13 file.

Important: Always remember to set wmode=direct in your HTML parameters. Software fallback will be used if you do not use wmode=direct.

Can I still use my Flash 3D Framework?

As announced in Adobe MAX 2010 all the mayor Flash 3D  frameworks (Alternativa3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D or Yogurt3D.) have been working alongside with Adobe to bring support for Flash Player’s new 3D APIs being Away3D  the first one to release a “Molehill” supported version.

Away3D 4.0 Alpha (codename “Broomstick”).

Shortly after Adobe announcement Away3D’s team was released a new version(4.0 Alpha) of their framework codenamed “Broomstick” and let me say it runs great I’m really looking to have some free time to test and post about the new features in Away3D but for the time being You can check some of the examples and tests made by the team here.

To start playing with “Broomstick” You need  to download this version from their googlecode repository or their downloads page.

Adobe Flash and Unity3D


Unity3D’s team has a blog post about Flash Player plugin support here is an excerpt:

“In the past few months, our engineers have been investigating the possibility of adding a Flash Player exporting option to Unity. That investigation has gone very well, and we’re moving into full production.” read the full article here.

So this are some of the things announced at the Flash Gaming Summit if hurry up You can still catch the live stream.

Later 😀

RobotLegs – Flash CS5 Project Template for FDT4

Projects Templates are an extremely useful tool introduced in the version 4 of PowerFlasher’s FDT it lets You write and include Your own project templates  and are available for you to use when creating a new project in: File>New>New Flash Project.

One of the frameworks that I used the most in 2010 ( expect upcoming post on the 10 frameworks that I used the most last year) is Robotlegs created by Shaun Smith a pure AS3 micro-architecture framework that  is pretty handy when You work in large projects, so the project template that I made is a pretty basic setup of Robotlegs It has a loader class and loader. fla and the MainApplication and main.fla, that fla is where all the Robotlegs magic happens it has the main context 3 views and its mediators 3 commands and an event. This template can be used as a sandbox for starting a small Flash CS5 based Robotlegs project.

How to install the project templates:

In mac open up the Finder and navigate to your home folder. After you installed FDT4 you’ll find a folder called “FDT” there. Navigate to FDT/projectTemplates/Web and copy the RobotlegsFlashCS5 folder in there and Youre good to go.

In Windows 7 go to C:\Users\User\AppData\Roaming\FDT\projectTemplates\Web copy the RobotlegsFlashCS5 folder in there and You’re all set.

Hope it helps the code is not commented I’ll try to push a commented version to  github as soon as i have the chance.

Ups almost forgot You can download the ProjectTemplate at my FDT-Resources fork in github.