Adobe Flash Professional Team Blog

The latest news, tips and insights directly from the Flash team

Tag

Flash Professional

Jul 13, 2015/Errors, Extensions/

Installing Extensions for Flash Professional CC 2015

You have been using Adobe Extension Manager to install your Flash Professional extensions. The Extension Manger CC UI has been phased out as a standalone product due to its integration with the Creative Cloud application. For more information about this change, read Announcement: Extension Manager End of Life Notification.

This post helps you install Flash CC 2015 extensions using the new ExManCmd command line utility. To learn about installing Flash CC 2015 extensions using the Manage Extensions desktop utility, see the blog post Installing ZXP extensions using the Manage Extensions utility.

Installing ZXP extensions using Command Line

If you are a designer or a developer and have .zxp files of a Flash CC 2015 extension, follow these steps to install the extension:

On Windows:

  1. Quit Flash CC 2015 if it is running.
  2. Download the ExManCmd command line tool for Windows.
  3. Extract the .zip file to a location on your Desktop eg: C:\Users\<your user name>\Desktop\ExManCmd_win
  4. Copy and paste the extension (.zxp file) that you want to install to the same folder(C:\Users\<your user name>\Desktop\ExManCmd_win\) for convenience.
  5. Open the command prompt by selecting Start > All Programs > Accessories > Command Prompt.
  6. Type cd and provide the path to navigate to the extracted folder:
    • cd C:\Users\<your user name>\Desktop\ExManCmd_win
  7. Once you are in the ExManCmd_win directory, type the following command in Command Prompt and press Enter:
    • ExManCmd.exe /install <nameoftheExtension say “AnimSlider Pro.zxp”>

Please note that if the extension name has space in between please specify them within quotes (“”).

On Mac OS:

  1. Quit Flash CC 2015 if it is running.
  2. Download the ExManCmd command line tool for Mac OS.
  3. Extract the .zip file to a location on your desktop: /Users/<your username>/Desktop/
  4. Copy and paste the extension (.zxp file) that you want to install to the folder in which ExManCmd is available: /Users/<your username>/Desktop/Contents/MacOS/
  5. Open Terminal by double-clicking its icon under Applications > Utilities > Terminal.
  6. Type cd and provide the path to go to the directory in which ExManCmd is available:
    • cd /Users/<your username>/Desktop/Contents/MacOS
  7. Once you are in the MacOS folder, type the following command and press Enter:
    • ./ExManCmd ––install <nameoftheExtension say “AnimSlider Pro.zxp”>

Please note that if the extension name has space in between please specify them within quotes (“”).

You can refer to Extension Manager Command line basics to know more about all the available commands and its syntax. If you encounter any error, refer to the error codes and their descriptions.

Installing Extensions available through Add-ons

If you are a designer or a developer and you have the required extensions for Flash CC 2015 available at Adobe Add-ons website as add-ons, follow the below steps to acquire them:

  1. Launch Adobe Create Cloud application and sign-in with your Adobe ID.
  2. Ensure File Sync is turned ON under Assets > Files.
  3. Launch Flash CC 2015 and click Window > Browse Add-ons.
  4. Click on the add-on name that you want to acquire on the Adobe Add-ons page (you can also search by the add-on that you are looking for).
  5. Click Acquire/Install.
  6. Wait for the notification from Adobe Creative Cloud application regarding the installation of the add-on that you have acquired.

Making your extensions available as an Extension Developer

If you are a developer or producer of Flash Professional add-ons, Adobe provides you the following alternatives to distribute your Flash add-ons:

  1. Adobe recommends that you distribute your products through the Adobe Add-Ons website. You can distribute add-ons publicly (free or paid) or privately (free to named users). Learn more about sharing products privately.
  2. If you still want to sell extensions through your own websites or via other channels, you can build your own installer or provide instructions to your users on how to use the Extension Manager command line to install your extension. Refer the section Installing ZXP extensions using Command Line in this blog post for details.

Please reach out to us in case you have any issues or feedback.

Jul 12, 2012/ActionScript, Animation, Flash Player, Flash Professional CS6, Gaming, Introduction/

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.