Posts in Category "ActionScript"

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.

Recap

In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code
114

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);

}

141

removeEventListener(MouseEvent.CLICK,onClickJump);gotoAndPlay(“startWait”);

removeEventListener(MouseEvent.CLICK,onClickJump);this.gotoAndPlay(“startWait”);

142

removeEventListener(MouseEvent.CLICK,onClickJump);

this.instance.removeEventListener(“click”, onClickJump);

278

import flash.events.MouseEvent;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“http://www.adobe.com/”),”_blank”);}

stop();

this.stop();stage.onClick = function() {window.open(“http://www.adobe.com”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process:

Exciting changes to Flash Professional in 2013

Hi Everyone,

In 2013, you’ll see dramatic changes to the next version of Flash Professional. We’ve been hard at work making the next generation of Flash Pro faster, more reliable, and more extensible. These and many other changes are paving the way for the tool to stay ahead of the curve, for many years to come.

The changes include making Flash Pro more focused and efficient. With twelve releases under our belt, there are a number of legacy features and support for older technologies that are losing relevance. In order to make Flash Pro more streamlined, we had to make some tough decisions based on customer usage and feedback, on what we should no longer support.

One of the key changes in the next version of Flash Pro is dropping support for AS2. As you may know, we introduced AS3 six and a half years ago, and today it is the most widely used language for the Flash Platform. Given AS2’s dwindling usage and misalignment with the future of the Flash runtime such as AIR mobile app development and Stage3D, we felt it made sense to move forward with AS3 only.

We understand this change impacts those of you who continue to use AS2, and hope this gives you time to prepare for the transition. Please note that AS2 content will still work in Flash Player (and future versions of it).

We’re really excited about what’s coming for Flash Pro, and can’t wait to share more details with you. Stay tuned to this blog for sneak peeks and more after the holiday break.

Cheers,
Rich Lee
Product Marketing Manager

Announcing Flash Professional CS6 updater, coming this September!

Come September and you will see some exciting new features added to Flash Professional CS6 along with several critical bug fixes. By extending support for Flash Player 11.4 and AIR 3.4, Flash Professional CS6 will now have the following new features added to its powerful armory:

  • Support for native iOS Simulator (Mac Only)
  • Direct deployment of AIR for iOS applications to iDevices (bypassing iTunes)
  • iPad retina high-resolution support

As mentioned earlier, the update will also contain several critical bug fixes along with the new features and it is recommended that you install the update when it will be made available. For more information, see Flash Player Blog.

Until September then, wait with that baited breath!

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.