Posts tagged "Flash CS6"

Flash Professional CS6 Update2 | Now Available

We are happy to announce the availability of Flash Professional CS6 Update 2 (Ver:12.0.2)! As promised earlier, the update brings you several exciting features, but importantly, Flash Professional CS6 will now extend support for AIR 3.4 and Flash Player 11.4, courtesy the Update! Quite an incentive to revise your target versions when developing AIR applications, no?

  • The Direct Deployment to iOS Devices feature allows you to deploy an AIR application on iOS devices without having to use iTunes. (Please note that iTunes 10.5.0 or greater must be installed on the user’s machine to use this feature.)
  • The Native iOS Simulator Support feature facilitates testing and debugging AIR applications for iOS devices on the native iOS Simulator. This is a MAC only feature, where Flash Pro can be integrated with the Simulator by installing XCode.
  • The High Resolution Retina Display Support feature provides High-resolution Retina Display support for newly introduced iOS devices like iPAD3. Earlier, this feature was available only for iPhone and iPod devices but now richer content, with the concept of pixel doubling, is available for iPAD devices too.

Detailed descriptions for the new features is available in the What’s New for Flash Professional CS6 doc. Also, look at the Release Notes and Known Issues docs to avoid surprises, should you encounter any issues while trying the new and exciting features. The update also has Toolkit for CreateJS 1.1 bundled along with it. Soon as the update completes installing, the Adobe Extension Manager CS6 is launched to install Toolkit for CreateJS 1.1. The new version of the Toolkit has added support for converting Shape Tweens, Motion Tweens, Mask Layers, and Multiframe bounds to HTML5. The update includes fixes for several critical bugs you reported to us on Adobe Flash forums and various other channels:

  • Flash Professional CS6 crashes on launching – without warnings! An issue that occurred due to the presence of corrupt fonts, and one that several users reported on forums.
  • Rendering content using Stage 3D targeting Starling framework rendered content inappropriately.
  • ANEs would go unrecognized when referenced using relative paths in Flash Professional CS6, throwing compilation errors.
  • XML files generated by XFL files have an inconsistent end of lines between the CDATA section and the rest of the file.
  • Adobe Debug Launcher crashes when publishing AIR application for desktop with AIR 3.2.

For a complete list of all issues fixed in this Update, see this link.

[Updated on October 19th, 2012]  The Flash Professional CS6 Update 2 now facilitates silent installation. See this link.

Flash Professional CS6: Creating and using Spritesheets with starling

Flash Professional CS6 release brings in several exciting new features and one of the features worth elaborating is the Sprite Sheet Generator feature.

In simple words, A Sprite Sheet is a bitmap image file that contains several smaller graphics in a tiled grid arrangement. By compiling several graphics into a single file, you enable Flash Professional and other applications to use the graphics while only needing to load a single file.

The biggest advantage of using Sprite Sheets is that the GPU does not have to load all graphic assets on to the primary memory. By having to load only a single file, (the sprite sheet, that contains all necessary graphics), the performance of the GPU is enhanced significantly.

Here’s a bird’s eye view of how Sprite Sheets work:

How does spritesheet speedup the render

How does spritesheet speedup the render

As you can see spritesheets can be loaded into the GPU at once and hence, will reduce the draw calls as all Flash assets are loaded at once..

With the Sprite Sheet generator feature available with Flash Professional CS6, you can now contain all your Flash assets in to a Sprite Sheet at the click of a button!

Creating a Sprite Sheet

To create a Sprite Sheet of your assets in Flash Professional, follow the steps below:

  1. Select one or more symbols in the Library or symbol instances on the Stage. The selection can also contain bitmaps.
    <insert screen shots of the assets before the sprite sheet is created>
  2. Right-click the selection and choose Generate Sprite Sheet.
  3. In the Generate Sprite Sheet dialog box, select Starling as the Data Format.
  4. Click Export.

 

The picture below is how the spritesheet looks once generated from Flash Pro.

A typical snapshot of a spritesheet created using Flash Pro

A typical snapshot of a spritesheet created using Flash Pro

For more information, see Create a Sprite Sheet.

How to leverage the Sprite Sheet you just generated?

Starling is a pure ActionScript 3 library that mimics the conventional Flash display list architecture. In contrast to conventional display objects, however, all content is rendered directly by the GPU (Graphics Processing Unit) — providing a rendering performance unlike anything before. This is made possible by Stage3D technology available with Flash.  For more information, see http://gamua.com/starling/.

Starling provides a set of APIs to use the spritesheet generated using Flash Pro CS6. The APIs are similar to the AS3 Display List API.

Mapping Flash Professional library to Starling:

  1. Download and unzip the latest starling framework from http://gamua.com/starling/
  2. Launch Flash Professional CS6.
  3. In Flash Professional CS6, go to File > ActionScript Settings… > click the Library Path tab.
  4. Click the   button to add a new Library path.
  5. Enter the path to the location where you unzipped Starling or browse to the location by clicking the   button.
  6. Click Ok.
  7. Now that you have added the Starling framework to the library. You can start using spritesheet that you created from Flash Pro right back in it.
  8. Starling can consume spritesheet exported as JSON ( A png and an xml file combo ).

Using Starling to access the spritesheet using starling:

  • Create a new AS3 FLA with the name SpriteSheet
  • Create a document class SpriteSheet.as

In SpriteSheet.as put the following code:

package  {	
	import flash.display.Sprite;
	import starling.display.Sprite;
	import starling.core.Starling;

	public class Spritesheet extends Sprite 
	{
		private var myStarling:Starling;		
		public function Spritesheet() 
		{
			//Create a new instance of starling 
			myStarling = new Starling(SpriteSheetExample,stage);
			myStarling.start();
		}
	}	
}

Create the SpriteSheetExample class that the starling instance calls !

package  {
   import starling.display.Sprite;
   import starling.events.Event;
   import starling.core.Starling;
   import starling.textures.TextureAtlas;
   import starling.textures.Texture;
   import starling.display.MovieClip;
   import flash.display.Bitmap;

   public class SpriteSheetExample extends Sprite
   {
     [Embed(source="/mySpritesheet.xml",mimeType="application/octet-stream")]
     private var AnimData:Class;
     [Embed(source="/mySpritesheet.png")]
     private var AnimTexture:Class;		
     public function SpriteSheetExample() 
     {
	super();	
	this.addEventListener(Event.ADDED_TO_STAGE, initialize);
     }
     protected function initialize(e:Event):void
     {
 	var hungryHeroTexture:Texture = Texture.fromBitmap(new AnimTexture());
        var hungryHeroXmlData:XML = XML(new AnimData());
	var hungryHeroTextureAtlas:TextureAtlas = 
                                new TextureAtlas(hungryHeroTexture, hungryHeroXmlData);
        //Fetch the sprite sequence form the texture using their name
	var _mc:MovieClip = new MovieClip(hungryHeroTextureAtlas.getTextures("fly_"), 20);		 
	addChild(_mc);
	Starling.juggler.add(_mc);
     }		
  }	
}

Note:

  • The fly_ value in the getTextures method specifies the sequence of images that are present in the SpriteSheet. For example in this case it would be fly_1,fly_2 and so on. On specifying this parameter, the GPU loads the sequence of images from the SpriteSheet.
  • 20 value in the getTextures method specifies the frame rate of the animation or graphic that is loaded in to the GPU from the SpriteSheet. Substitute this value with the number of frames you have created for your graphic.

Test the movie and your animation should be running on GPU ! Make sure that you publish the movie with render mode as “Direct” . For more information on how you can use SpriteSheets created in Flash Professional CS6 with the Starling framework, see SpriteSheets in Flash Professional CS6 Video Tutorial by Hemanth Sharma.

See also:

For more information about creating and exporting Sprite Sheets to different target frameworks, see Create a Sprite Sheet.

Credits:
Hemanth Sharma, Gaming Evangelist @Adobe, for his extremely knowledgeable inputs and the really cool graphic assets used in this post (originally created for Hungry Hero the game). And to learn how to build the Hungry Hero game, see Starting with Starling tutorial series.