Adobe Animate Team Blog

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

Tag

HTML5

Jun 29, 2016/Gaming/

Part 1: Building a HTML5 Flappy Bird Game Clone with Adobe Animate CC

Adobe Animate CC’s powerful illustration and animation capabilities, combined with its HTML5 export target make it the perfect tool for creating rich web-based content including games.

Over the course of this tutorial series we’ll build a simple Flappy Bird clone. In the first two parts we’ll concentrate on the artwork. In the remaining parts we’ll add interactivity and game logic using the JavaScript programming language. We’ll finish up by adding some sound to our game.

What you will learn in part one…

  • How to create and work with an HTML5 Canvas document
  • How to create artwork suitable for export to HTML5

What you will need…

  • A familiarity of the basic drawing tools provided by Adobe Animate CC or Flash Professional

Flappy Bird has to be one of the most memorable casual mobile experiences. It’s great fun to play, incredibly addictive, and its one-touch gameplay makes it easily accessible to everyone. But on top of all that, its simplicity also makes it a perfect teaching aid for anyone wanting to learn how to make their own games.

EMBED: http://yeahbutisitflash.com/projects/flappy-animatecc/flappy.html

Our Flappy Bird HTML5 clone.

In this tutorial series we’ll build a Flappy Bird clone by walking through Adobe Animate CC’s entire designer-developer workflow. You can see the final result above. Give it a try.

Getting Started

You’ll need Adobe Animate CC. Download a trial version.

A document file has been prepared for you to work from and can be downloaded from a git repository. You can find it within the repository at: start/flappy.fla.

A version of the document containing the finished artwork that we’ll be working towards can also be found within the repository at start/flappy-artwork.fla. Feel free to use this version of the FLA as a reference at any point during the tutorial.

Creating an HTML5 Canvas Document File

Before we dive into the flappy.fla file that has been provided, it’s important you know how to create and set-up an HTML5 Canvas document yourself.

Figure-1

Figure 1. Creating an HTML5 Canvas document.

Open the New Document panel by selecting File | New (Option-N | Ctrl-N) from Animate CC’s dropdown menu. From this panel you will be able to select from many document types. Since we’ll be targeting HTML5, click on the HTML5 Canvas option. Additionally, we’ll use this opportunity to set the size of our stage and also the game’s target frame rate. Set the width and height fields to 300 and 400 respectively. Set the Frame rate field to 60 fps. You can see these changes in Figure 1 above.

Finally click OK to confirm your changes. Your HTML5 Canvas document will be created.

These are the same settings that were used when the flappy.fla file was created. Since it already contains some artwork and reference material for you we’ll work from it rather than the FLA you just created. Close your current FLA document and open flappy.fla instead. Going forward, we’ll work from it.

Exploring the Document File

Our Flappy Bird clone will contain the following objects:

  • A flappy bird
  • A static background
  • A ground strip that scrolls as the bird flies through the game world
  • Pipes for our bird to fly through
  • A handful of user interface elements
  • A screen flash that takes place when the bird collides with a pipe or the ground

The artwork for the game’s background and user interface elements has already been provided within the FLA for us. The rest we’ll create throughout the course of the next two tutorials. To help us do that the FLA contains some reference material. The reference material comes in the form of rough sketches that you can draw over the top of.

Figure-2

Figure 2. The Bird movie-clip with the library.

Take a look at the FLA’s Library panel. Within it you’ll find various folders. There’s a folder for each of our game element types (Figure 2) and within each folder is at least one movie-clip. Each of these movie-clips represents one of our game objects. For example, if you expand the Bird folder you’ll find a movie-clip also named Bird, which represents our game’s little hero.

What about the other game objects? The static background is represented by a movie-clip aptly named Background which lives in the folder with the same name. The ground strip will be made from a series of ground slices that will be chained together. You can find the Ground Slice movie-clip within the library’s Ground folder. Two movie-clips named Lower Pipe and Pipe are used to represent the pipes and can be found in the Pipes folder. Finally, the user interface elements can be found within the library’s UI folder.

Let’s take a look at the Lower Pipe movie-clip in more detail. Double-click on it to move to its timeline. You’ll find a layer named Reference that contains a rough line sketch of a pipe. Soon we’ll add additional layers and artwork to this movie-clip using the rough sketch as a reference.

Find the movie-clip named Background within the library and double-click on it. You’ll find the final artwork for this movie-clip already exists. It depicts a blue sky with a band of clouds near the bottom along with a stylised representation of a forest. Final artwork also exists for various user-interface elements in the following movie-clips: Game Over, Get Ready, and Start Instructions. They can be found within the library’s UI folder. Feel free to take a quick look.

Spend a little time exploring the other movie-clips within the library. You’ll see that each one has a reference layer that contains a rough sketch that will help us create the remaining artwork.

During this tutorial we’ll create the artwork for the ground layer, the pipes, and the screen flash.

Creating the Ground

We’ll begin by recreating the artwork required for the ground. The ground is made up of a series of slices that are joined together to form a horizontal layer that spans across the screen.

Find and double-click on the Ground/Ground Slice movie-clip within the library.

A layer named Reference exists within the timeline. It contains a rough sketch that you can follow.

Begin by creating a new layer named Dirt. Position it directly above the Reference layer.

Draw a brown (#7B6233) rectangle onto the stage that covers the area taken up by the sketch. There’s no need for an outline around the rectangle so ensure that no stroke colour has been selected before you draw it. Use the Properties Inspector to get the size and position of the rectangle just right. Position it at (0,0) on the stage and ensure its dimensions are 193×50. Lock the Dirt layer and temporarily hide it from view so we can see the reference artwork underneath it.

Create a new layer named Grass directly above the Dirt layer. Draw another rectangle of size 193×8. This rectangle should have a black outline and no fill initially. Position the rectangle at (0,3).

Figure-3

Figure 3. Creating a series of line segments.

The next step requires some precision, which will be easier if you you use the Zoom (Z) tool to zoom into your artwork. I’ve gone for 800% magnification but feel free to pick something that you feel comfortable with.

Now select the Add Anchor Point (+) tool. Using the rough sketch as a guide, make your way along the rectangle’s bottom horizontal line, adding anchor points at the end of each curve that you see in the sketch’s line art (Figure 3). Doing this will create a series of line segments that span across the bottom of the rectangle.

Figure-4

Figure 4. Creating curves from the line segments.

Now change to the Selection (V) tool and recreate the curves you see in the rough line art. You can do this by positioning the mouse over the centre of each line segment then clicking and dragging the line downward. Work your way from left to right doing this with each line segment that you’d previously created (Figure 4).

Now, using the Paint Bucket (K) tool, fill your shape using a green colour (#72BE32). Finally, remove the black outline surrounding the shape. Figure 5 below show how your grass layer should now look.

Figure-5

Figure 5. A completed grass layer.

We need two more shapes that are similar to the one you’ve just created. We can do this by duplicating the layer and making adjustments. Right-click on the Grass layer and select Duplicate Layers. A new layer named Grass copy will be created. Drag this layer directly below the Grass layer. Also, hide the Grass layer from view so that we can easily work with our duplicate layer.

Change the colour of the shape in the duplicate layer to a darker green (#5AA11F) and set its y-position to 5.

Make a duplicate of the Grass copy layer. A new layer named Grass copy 2 will be created. Drag the layer directly below the Grass copy layer and also hide the Grass copy layer. Change the colour of this layer’s shape to brown (#665025) and set its y-position to 7.

Now all that’s left to do is add some edges to the top of our movie-clip. You can see this in the reference artwork that’s provided – there are two horizontal lines that are used to cap the ground.

First hide the Grass copy 2 layer then create a new layer named Edges. Place it above all the other layers. Draw a dark green (#4B841D) rectangle across the top of the ground slice. It should be 193×2 pixels in size and be positioned at (0,0). Make sure that the rectangle does not have a stroke applied to it. Create a duplicate copy of the rectangle and place it 2 pixels below the other. Apply a lighter green colour (#85D93D) to the duplicate rectangle.

Figure-6

Figure 6. The finished ground slice.

Make all your layers visible again with the exception of the Reference layer. Instead, hide it from view and change it to a guide layer since it’s no longer required. Figure 6 above shows how the finished version of your ground slice should look.

Creating the Pipes

With the ground slice movie-clip taken care of we can move onto the pipes that our flappy bird will fly between.

Find the movie-clip named Pipes/Lower Pipe within the Library panel and double-click on it. As before, you’ll find a layer named Reference that contains a quick sketch. This time the sketch depicts a vertical pipe. Remember, you can use the Zoom (Z) tool to maximise the size of the sketch when drawing on top of it.

The pipe is split into two sections: a lower vertical column, and a wider top section. We’ll start by drawing the lower part.

Create a layer named Pipe Bottom and place it directly above the Reference layer. Onto that layer, draw a rectangle that has a green (any shade of green will do) colour fill and no stroke. The rectangle should be 48 pixels wide and 179 in height. Position it at (6,24) on the stage.

Next we’ll apply a liner gradient to our rectangle. Click on the rectangle to select it then open the Color panel by selecting Window | Color (Shift-Option-F9 | Ctrl-F9) from the dropdown menu. Within the Color panel, select the Linear Gradient type. Select the left-most colour pointer and set it to a light green (#59C900). Now select the right-most colour pointer and set it to a darker green (#459E00). We’ll use this gradient again so click on the Add to Swatches button so we can reference it again shortly.

Figure-7

Figure 7. Applying a linear gradient to the pipe.

You’ll now see that a linear gradient has been applied to your pipe (Figure 7). Lock your Pipe Bottom layer and also temporarily hide it.

We’ll now make a start on the pipe’s wider top section.

Create a new layer directly above the Pipe Bottom layer and name it Pipe Top.

Now let’s use the Rectangle (R) tool again. From the Properties Inspector, set the fill colour to the green linear gradient we just added to our swatch list and also ensure that the rectangle does not use a stroke. As you can no doubt see from the rough sketch, the pipe’s top section has curved edges. We can achieve this from the Rectangle Options section within the Properties Inspector panel. Simply set a radius of 3 for your rectangle’s corners. Now draw a rectangle of size 60×27 and position it at (0,0) on the stage.

Lock your Pipe Top layer and also hide it from view.

We’ll now add some shadows to the pipe. Let’s start with the shadow at the top of the pipe’s vertical column.

Create a new layer named Shadow and place it directly above the Pipe Bottom layer. To create a shadow, select the Rectangle (R) tool and specify a green fill (#377E00) and no stroke. Also, apply a 40% alpha to the green fill so that the rectangle will be slightly transparent. Also, from the Rectangle Options section, reset the corner radius values back to 0. Now draw your rectangle, giving it a size of 48×11 pixels. Position it at (6,25) on the stage. Finally, use the Selection (V) tool to drag the rectangle’s bottom-left corner up slightly to match what’s shown in the reference sketch (Figure 8).

Figure-8

Figure 8. Creating a shadow near the top of the pipe.

Lock your Shadow layer. Now create a new layer also named Shadow, and place it directly above the Pipe Top layer. We’ll use this layer to apply a shadow to the pipe’s top section.

Once again we’ll use the Rectangle (R) tool. Create another rectangle that has the same green fill (#377E00 and 40% alpha) and no stroke colour. From the Rectangle Options section, set a radius of 3 on the top-left and top-right corners. The other two should have a corner radius of 0. To set each corner radius independently remember to click the Lock corner radius controls to one corner toggle. Now draw your rectangle at position (0,0) and with a size of 60×3.

Once finished, lock your second Shadow layer.

Now all that’s left to do is to add some highlights to the pipe. Create one more layer and name it Highlight. Drag it above all the other layers.

Select the Line (N) tool. From the Properties Inspector set the line’s stroke width to 5 and assign a light green colour (#6BDB12) to it. Using these settings draw two vertical lines. Give the first line a height of 12 and place it on top of the pipe’s top section at position (6,8). Draw a second vertical line over the pipe’s bottom section. Give it a height of 166 pixels and position it at (13,33).

Lock the layer once you’re finished. Make all the other layers visible with the exception of the Reference layer. Instead set it to a guide layer and change its visibility to hidden. Figure 9 shows how your finished pipe should look.

Figure-9

Figure 9. The finished pipe artwork.

In Flappy Bird, the player has to navigate through a gap between two pipes. If you find and double-click on the Pipes/Lower Pipe movie-clip within your library then you’ll see exactly that. Two instances of the pipe you just created are being used together to create the gap that the player must fly between. You may need to zoom out of the stage slightly to see both pipes together.

Click on either one of the two pipe instances and take a look in the Properties Inspector panel. Within the Display section, you should see that the pipe’s Render field is set to Cache as Bitmap (Figure 10). This setting will give a performance boost during gameplay. It will convert our pipe to a bitmap, which can be drawn to the screen faster than the original vector artwork. Typically this setting should only be applied to movie-clips that don’t contain timeline animation, and don’t change size or rotation frequently.

Figure-10

Figure 10. Setting Cache as Bitmap.

Caching vectors as bitmaps is a very handy optimisation technique that, when used right, can give great performance boosts to your HTML5 games. We’ll use it again in part two on some of our other game objects.

Creating the Screen Flash

When our little flappy bird crashes into a pipe we’ll trigger a quick screen flash. We’ll achieve this by applying an alpha tween to a white rectangular movie-clip that covers the screen. In a future tutorial we’ll write some JavaScript to perform the tween but for the time being let’s create the actual white rectangle.

Create a new symbol within the library by selecting Insert | New Symbol (Option-F8 | Ctrl-F8) from Animate CC’s dropdown menu. The Create New Symbol panel will appear. Set the symbol’s name to Screen Flash and ensure its type is set to Movie Clip. Now click OK to create the symbol. You’ll be taken to its timeline.

Using the Rectangle (R) tool, draw a white rectangle (#FFFFFF and 100% alpha) that’s 300×400 pixels in size. Before you actually draw the rectangle, you’ll also need to set the radius for each of its corners to 0. Position the rectangle at (-150,-200) on the stage.

With that done, exit back to your document’s main stage. Also, if your Screen Flash movie-clip isn’t sitting within the library’s UI folder then drag it in there so that it’s sitting with all the other user interface elements.

This is probably a good point to save all your changes.

Summary

We’ve made quite a lot of progress with our HTML5 game. You’ve drawn the artwork for the game’s ground layer, the pipes that our little hero will fly between, and also created a movie-clip that will be used to produce a screen flash when the player crashes into an obstacle. You’ve also seen how to take advantage of Animate CC’s Cache as Bitmap feature to help optimise your content for HTML5.

In part two we’ll finish off the game’s artwork and also use the stage to set up the game world that our flappy bird will inhabit. Along the way, we’ll learn how to use Animate CC’s new vector brush tool and also spend some more time working with bitmap caching. We’ll also learn how to publish our finished artwork to an HTML5 compatible browser and see how it looks.

See you soon.

 


skoren

Artwork by: Steve Koren

Steve Koren is a professional illustrator, character designer, and animator whose portfolio spans web, print, and mobile. His body of work includes a number of iOS apps that have been featured by Apple and downloaded several million times. Steve also has many years experience creating highly engaging virtual content for online distribution across social networks including Viber, Kik, Line, and WeeWorld.

You can see more of his work at www.popjunk.co.uk

Mar 30, 2016/General/

Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles

The ability to publish to HTML5 Canvas from Animate CC (and Flash Professional before it) is nothing new… however, with the release of Animate CC we now have a number of additional options when managing how a project gets published – especially in terms of how the HTML output is constructed.

 

HTML5 Canvas Output

When publishing to HTML5 Canvas from Animate CC, the resulting HTML file is hugely important in terms of the project’s ultimate destination. This can be clearly seen in terms of the differing specifications which ad distribution networks expect content producers to conform to when submitting their projects.

 

figure1

Figure 1. We are using an HTML5 Canvas document for this project.

 

In the Properties Panel, we can easily see it specified that we are working on an HTML5 Canvas Document. You might also notice that the Publish Profile is listed as Default. This is an often overlooked features of Animate CC and we will be examining it later in this article.

 

figure2

Figure 2. The Properties Panel indicates the type of document and Publish Profile being used.

 

Before moving on, if we go ahead and test our document in the web browser by choosing Control > Test, we’ll see the result of this Default Publish Profile. The canvas element which is our published project is aligned to the upper left and the HTML background color is a sad grey.

 

figure3

Figure 3. Our content rendered using the default Publish Template.

 

The good news is that it doesn’t have to be this way! Let’s now go ahead and click on Publish Settings in the Properties Panel to access all of our document publish options.

 

HTML5 Canvas Templates

The first thing to do if you want to create a template of your own is to export the default template in order to modify it to your liking. To do so, from the Advanced tab in Publish Settings, click the Export button and save the HTML file on your machine for editing. You will be prompted by Animate CC to give this file a name and location on your hard drive.

 

figure4

Figure 4. Exporting the Default Template file from the Advanced Publish Settings.

 

With the default template exported, you will now be able to open it up in Adobe Dreamweaver, Brackets, or any text editor of your choosing to customize the HTML, JavaScript, and CSS contained within. Perhaps you want to center your HTML5 Canvas content or add other elements like headers and descriptive text. This is all possible using Templates.

 

Editing the Template

Now that we have our Template file open within an editor, we can make whatever modifications we wish. In this example, I’ve styled the Body element to inherit the Stage background color as defined in our Animate project. I’ve also gone ahead and given some margin to the document, and have centered the Canvas element. That should make things a bit more balanced and lively!

 

figure5

Figure 5. Editing the Template HTML file in Brackets.

 

One thing to make note of before we move on, is the availability of special tokens with the HTML Template which ca be used when customizing. For instance, tokens such as $BG, $WT, and $HT can be used in conjunction with custom logic and elements to adjust for sizing and background colors within your Template.

Here is a short list detailing some of these tokens, and what they represent:

$CANVAS_ID                    The ID of the Canvas element within your HTML document.

$TITLE                                 The title of your project document.

$BG                                       The background color of the Stage defined within the FLA.

$WT                                       The width of the Stage defined within the FLA.

$HT                                       The height of the Stage defined within the FLA.

These tokens are available for use within any Template and will be replaced by their appropriate values upon publication. Other tokens exist as well, and can be explored within the exported HTML Template file.

 

Using Ad Network Code within a Template

In this example, we’ve created a very visual Template in order to more easily express what can be achieved through this mechanism. However, we can also include non-visual elements within a Template as often required by various ad distribution networks.

Here, for example, is a bit of HTML to include in the HEAD of your Template in order to conform to DoubleClick ad campaign requirements.

<meta name=”ad.size” content=”width=300,height=250″>

<script type=”text/javascript”>

var clickTag = “http://www.google.com”;

</script>

In the above code, we set the ad size though a META tag, and then expose a ClickTag variable for use within our Animate CC project. Within the actual Animate content, we can respond to user interaction by invoking the following:

window.open(window.clickTag);

This will allow the use of ClickTag events within out HTML5 Canvas project easily through the use of Animate CC Templates! The same sort of functionality can be enabled for a variety of ad distribution networks by creating a Template for each one.

 

Importing the Custom Template

When you are finished editing, save your HTML and return to Animate CC and the Advanced Publish Settings. Simply click the Import New… button and locate the edited HTML file to use it within your project. The selected template is now clearly indicated within the dialog.

 

figure6

Figure 6. Importing the custom Template file.

 

Now, whenever you test or publish your HTML5 Canvas document, it will employ your custom Template in place of the default. If at any time you wish to use the default Template again, simply click the Use Default button.

 

Publish Profiles

What if you have a number of Templates which you wish to switch between when publishing your content? It would be a pain to have to import Template files every time you need to switch. This is where Publish Profiles come into play.

To establish the Template just created as part of a Profile, you can click the gear icon and choose to Create profile.

 

figure7

Figure 7. Creating a custom Profile.

 

A small dialog will appear, allowing you to provide a name for this profile. In this manner, you can define any number of Profiles in your document and easily switch between them.

 

figure8

Figure 8. Naming the new Profile.

 

With a custom Profile defined in the project, you can now switch between that and the default with ease by simply choosing it by name from the dropdown. Note as well that these can be exported and imported to share between projects!

 

Employing Templates by Swapping Profiles

Templates can be automatically applied to your content prior to publication by assigning a specific Template to a Profile, and then switching to whichever Profile you want to use. This action will employ the specific Template applied within that Profile to the document being published.

For the last part of this article, I’ll go ahead and switch my Publish Profile to new newly created “Center Content + BGProfile by selecting it from the Profile dropdown in the Advanced tab of our Publish Settings dialog.

 

figure9

Figure 9. Switching Publish Profiles.

 

Clicking the OK button within our Publish Settings will apply the selected Profile and return us to the project document. Notice that the Properties Panel now reflects the selected Profile and no longer the default.

 

figure10

Figure 10. Selected Profile is indicated in the Properties Panel.

 

From here, we can once again test the project in the web browser by choosing Control > Test. The compiled HTML5 Canvas project will appear in a new browser window and the changes will become obvious with the entire background inheriting the Stage color chosen in Animate CC and the content itself perfectly centered – much nicer!

 

figure11

Figure 11. Published content using the custom Template and Profile

 

To return to the Default Profile or to manage and select other Publish Profiles, simply return to the Publish Settings dialog.

 

Jul 14, 2015/ActionScript, General, HTML5/

Converting your Flash Ads to HTML5 Canvas

The HTML5 Canvas document type and the associated design and performance capabilities in Flash Professional CC helps you create performance-optimized HTML5 creatives with ease. You can obviously create new ads targeting the HTML5 platform using Flash Professional CC, but you may also have have some existing Flash ads that you want to convert to HTML5 Canvas for targeting them for multiple platforms, especially mobile devices.  Here is how you do it:

  1. Convert your ActionScript document to HTML5 Canvas document using the document type converter.
  2. Replace the ActionScript code commented out as reference in the actions panel with their HTML5 Canvas equivalents. You can use the HTML5 Canvas code snippets panel (Window > Code Snippets) in Flash CC 2015 to get started.

Now, let’s see this in action.  We are going to convert a Flash ad to HTML5 Canvas.

Here is the ActionScript example:

Get Adobe Flash player





The converted HTML5 Canvas file should look like this:


Converting an ActionScript document and assets to HTML5 Canvas

  1. Download the BannerNewFeatures_AS3.zip file, extract the files, and open the BannerNewFeatures_AS3.fla file. You can preview the contents by opening BannerNewFeatures_AS3.swf.
  2. Click Commands > Convert to other document formats to convert the document to HTML5 Canvas document.
    Convert-menu-option
  3. In the Document Type Converter dialog box, select HTML5 Canvas and click Browse to select a location to save the converted FLA.
    Doctype-converter
  4. Click OK. The ad has now been converted in to HTML5 Canvas. Open the .html file in the output directory you specified in the previous step to check the converted output. You can see that all your art assets have been converted in to HTML5 Canvas. However, the ad runs in a continuous loop.  This change happened because we do not automatically convert the ActionScript code to the equivalent JavaScript code.

Note: Flash Professional does not auto-convert any ActionScript code to JavaScript code because there is no foolproof way to get it completely right. However, our HTML5 Canvas (CreateJS) JavaScript APIs mimic ActionScript code fairly closely. We also have some built-in Code Snippets in Flash CC to help you get started with some commonly used actions.

Converting ActionScript code to JavaScript in your HTML5 Canvas document

  1. Click Window > Actions to open the Actions panel. All your ActionScript code in FrameScript are displayed as commented out to help you convert them to HTML5 Canvas.

    ActionScript code commented out

    ActionScript code commented out

  2. In the Actions panel, click the ActionScript code that you want to replace and type in the JavaScript equivalent (if an equivalent code snippet is available in the the HTML5 Canvas section of the Code Snippets panel, you can just double-click on it) For example, the following image shows that the stop () ; function that is commented out in ActionScript has been replaced with its HTML5 equivalent, this.stop () ;
    Replace-code
  3. Press Shift+Alt+F12 to publish and check your output.
  4. To see how all the ActionScript code in the example document were converted in to HTML5 Canvas, download BannerNewFeatures_Canvas.zip and open the BannerNewFeatures_Canvas.fla file. To view the final output in HTML5, download Published-Banner-HTML5.zip. and open the BannerNewFeatures_Canvas.html file.

Codes for commonly used actions

The following are some of the commonly used ActionScript codes and their equivalent JavaScript codes:

  • Symbol Instances are referenced as this.instanceName instead of directly using the instanceName:
    ActionScript HTML5
    mySymbol.x = 100;
    mySymbol.visible=true;
    this.mySymbol.x = 100;
    this.mySymbol.visible=true;

     

  • Variable types and function return types should not be specified in JS:
    ActionScript HTML5
    var myVariable:String
    var myVariable;
    function onClick (event:MouseEvent) :void {
    //body
    
    }
    function onClick (event) {
    //body
    
    }

     

  • trace() is not supported and should be replaced by console.log() or alert():
    ActionScript HTML5
    trace(“Message to display”);
    console.log(“Message to display”);

     

  • Commonly used events in ActionScript and JavaScript:
    ActionScript HTML5
    MouseEvent.CLICK
    "click"
    MouseEvent.MOUSE_DOWN
    "mousedown"
    MouseEvent.MOUSE_UP
    "mouseup"
    MouseEvent.ENTER_FRAME
    "tick"
    MouseEvent.ADDED
    "added"

     

  • Commonly used timeline actions in ActionScript and JavaScript:
    ActionScript HTML5
    stop();
    this.stop();
    <InstanceName>.stop();
    this.<InstanceName>.stop();
    gotoAndStop(5);
    gotoAndStop("label");
    this.gotoAndStop(5);
    this.gotoAndStop("label");

    Refer the EaselJS documentation for more information about other events. Check out the mapping of ActionScript codes and their equivalent JavaScript codes for HTML5 Canvas platform for a comprehensive list of actions.

View and use JavaScript code snippets

  1. Click Window > Code Snippets.
    Code-Snippets-menu
  2. In the Code Snippets panel, expand HTML5 Canvas to see the HTML5 equivalents of your ActionScript codes under different categories.

    Code snippets panel

    Code snippets panel

Useful links

Sep 3, 2012/Animation, Flash Professional CS6, General, Toolkit for CreateJS/

Atari and Adobe Flash Professional

Important Note: Toolkit for CreateJS has now been replaced with HTML5.

It is highly unlikely that you are reading this blog post and have not played an Atari game ever before. For gamers, passionate or otherwise, casual or obsessive, skilled or talented, Atari games would have been one of the common starting points for developing gaming acumen. Do you know that Atari is taking its historic games to the mobile platform across multiple screens? Empowered by CreateJS libraries, Atari will deliver its games targeting the HTML5 platform to ensure compatibility across multiple mobile platforms and screens. For more information, watch this video.

The project involved creating multitudes of animated assets to create touch-friendly games with rich content. Yes, you guessed it right, Flash Professional CS6 along with the Toolkit for CreateJS extension and some custom JSFL was used to carry out this mammoth task of preparing assets. To know more about Toolkit for CreateJS, see this DevNet article. Also, visit gskinner.com to know more about Grant Skinner, creator of CreateJS and a prime contributor to the Atari HTML5 project.