Adobe Animate Team Blog

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

Category

HTML5

Jul 13, 2016/Gaming, HTML5/

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

Welcome to part two of this HTML5 Flappy Bird tutorial series. Today we’ll create the remaining artwork for our game and finish up by using Animate CC’s stage to lay out the game world. This will position us perfectly for part three where we’ll start writing JavaScript to add interactivity to the objects within the game world.

What you will learn…

  • How to create artwork suitable for export to HTML5
  • We’ll explore Animate CC’s vector brush tool
  • How to use the stage to visually lay out your game world
  • How to publish and test your HTML5 content within a browser

What you will need…

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

By the end of part two you’ll be one step closer to your very own HTML5 Flappy Bird clone. If you need a reminder as to what you’re working towards then feel free to spend some time playing the finished version below. Careful though! It’s extremely addictive.

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

Our Flappy Bird HTML5 clone.

Getting Started

You’ll need Adobe Animate CC – download a trial version.

We’ll continue to use the flappy.fla file that you worked from in part one. If you haven’t already worked your way through part one then please do so before continuing.

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

Creating the Bird

In part one we created the artwork for the ground layer, the game’s pipes, and the screen flash that occurs when the player collides with an object. Also, to keep things simple, various user interface elements were provided for you.

Now all that’s left for you to create is our little flappy friend himself. He’s probably the most complex of all the game objects but don’t worry we’ve got another rough sketch that we can draw over the top of.

Take a look in the library’s Bird folder. Find the movie-clip with the same name and double-click on it. You’ll see that the Bird movie-clip already has two layers: one named Reference and another named Wing, which is currently hidden from view. As usual, feel free to increase the magnification to fit the content comfortably on the stage.

If you take a look at the sketch you’ll see that the bird can be broken down into a few constituent parts: its feet, tail, crest, body, eye, and wing. We’ll tackle things in that order.


The Bird’s Feet

Create a new layer on the timeline named Feet and place it directly above the Reference layer.

We’ll take advantage of Adobe Animate CC’s new vector art brushes feature. This will allow us to draw both feet using only two lines! Let’s start by drawing the right-most foot, which sits under the other foot.

fb2figure-1

Figure 1. Drawing a line to represent the bird’s right-most foot.

Select the Line (N) tool. From the Properties Inspector, set a yellow stroke colour (#E5C222) and initially set the stroke thickness to 1. Now draw a line from the centre of the foot’s base and extend it just inside the bird’s body (Figure 1).

fb2figure-2

Figure 2. Opening the Brush Library panel.

Now click on the Selection (V) tool and select the line you just drew. Within the Properties Inspector, set the stroke width to 10 then click on the Brush Library icon next to the Style option (Figure 2). You’ll be presented with the Brush Library panel where you can select a vector art brush. Find the Line Art | Basic | Flame Left brush and double-click on it. The brush will be applied to your line, which will now accurately depict the shape of the bird’s foot. Close the Brush Library panel.

fb2figure-3

Figure 3. The finished feet.

We can do the exact same for the other foot. Make sure you use a slightly lighter yellow (#FFE054) this time. The vector brush will already be applied to the Line (N) tool by default, so just go ahead and draw from the centre of the left-most foot’s base towards (and slightly inside) the bird’s body.

If everything’s gone according to plan you’ll see two yellow cones that represent the bird’s feet (Figure 3).


The Bird’s Tail

We can use the same trick for the bird’s tail too. We’ll begin by drawing the top tail feather.

Create a layer named Tail and place it directly above the Feet layer. Ensure all layers are locked except this one.

Select the Line (N) tool again and set the stroke colour to red (#FF0000). The Flame Left brush should already be set as the default stroke style. You should find that the previous stroke thickness of 10 is also set.

fb2figure-4

Figure 4. Using the Flame Left brush to draw a single tail feather.

Using the rough sketch as a guide, draw a line through the middle of the tail feather, starting from the outside of the tail and ending just inside the bird’s body. The brush style will be applied to your line, which should give you a fairly accurate depiction of the feather (Figure 4).

Now move onto the bottom tail feather. Once again draw a line starting from the outside of the feather and ending just inside the bird’s body.

Finally, lock your Tail layer.


The Bird’s Crest

For the bird’s crest and beak we’ll revert back to the line tool’s solid stroke style, and simply draw over the rough outline that has been provided. Let’s start with the crest.

Create a new layer named Crest and place it directly above the Tail layer.

fb2figure-5

Figure 5. Selecting the solid stroke style.

Select the Line (N) tool. From the Properties Inspector, select the solid stroke style from the Stroke style dropdown box (Figure 5). Ensure the stroke thickness is set to 1 and also set the stroke colour to black (#000000).

fb2figure-6

Figure 6. Outline of the bird’s crest.

Following the rough sketch, draw a series of lines around the two feathers that make up the bird’s crest. Reshape your lines to create curves that more accurately follow the feathers. Also, make sure the lines all join together to create an enclosed shape around each feather (Figure 6).

Now we’ll colour both feathers. Select the Paint Bucket (K) tool and set the fill colour to red (#FF0000). Fill the inside of both feathers.

Now that we’ve coloured the feathers we don’t need the outline around them any more. Using the Selection (V) tool, select the outlines and delete them.

Lock the Crest layer.


The Bird’s Beak

It’s the exact same deal for the bird’s beak. Create a new layer above the Crest layer and name it Beak. Using the same tools as before, draw around the bird’s beak. Colour the beak yellow (#FFE054) then delete the outline. Lock the layer once you’re done.


The Bird’s Body

We’re making real progress. Let’s start to flesh out the body. We won’t worry about the bird’s eye at the moment – let’s just concentrate on the body shape and the detail surrounding the eye. You may want to hide the Beak, Crest, Tail, and Feet layers while you do this.

Create a new layer and name it Body. Drag it directly above the Beak layer.

fb2figure-7

Figure 7. A very loose oval around the bird’s body.

We’ll start by using the Oval (O) tool to create the bird’s general body shape. Ensure the stroke thickness is set to 1, the stroke colour to black (#000000) and that there’s no fill colour being used. Now draw an oval that very loosely follows the bird’s body shape (Figure 7), then use the Selection (V) tool to bend and shape the oval to create a better fit (Figure 8).

fb2figure-8

Figure 8. The oval re-shaped to fit the bird’s body.

Now use the Line (N) tool to trace over the details within the body. As you draw each line, reshape it to follow any curves. Also, make sure your lines are connected. Figure 9 shows you how your finished outline should look.

fb2figure-9

Figure 9. The finished outline for the bird’s body.

Now using the paint bucket tool, colour the bird’s breast white (#FFFFFF). Fill the area around the eye socket, dark red (#C90102). Finally, make the rest of the body bright red (#FF0000). Figure 10 shows you how the painted body should look.

fb2figure-10

Figure 10. The bird’s body after it has been painted.

As was the case with the other parts of the bird, we don’t need our black outline. Remove it then lock the layer.


The Bird’s Eye

Now we can draw the eye.

Create a new layer named Eye and place it directly above the Body layer. While you’re at it, hide the Body layer so that we can see the rough sketch sitting on the Reference layer below. We’ll continue to use it as a guide as we draw the eye.

Use the Oval (O) tool to draw the outer circle that makes up the eye. When drawing the oval, ensure that it uses a black stroke and has no colour fill.

fb2figure-11

Figure 11. The curved outline stretching across the top of the eye.

Next, draw a curved line that crosses horizontally across the top region of the eye (Figure 11). Again, use the rough sketch as a guide.

Now draw an inner oval to represent the eye’s pupil and finish up by drawing a smaller circle near the eye’s top-left.

Okay. Let’s use the Paint Bucket (K) tool to add some colour. We’ll start by colouring the pupil. Paint the lower half of the pupil a dark brown (#410000) and the upper half a slightly lighter shade (#6D0000). Move onto the outer circle. The upper half should be filled with a pale blue (#D4EBFF) and the other half should be coloured a slightly darker blue (#AECCE7). Finish up by painting the small circle on the top-left white (#FFFFFF).

fb2figure-12

Figure 12. The finished eye and body.

Now that the colour has been applied, remove the outlines. Lock the layer and also make the Body layer visible again so we can see both the bird’s body and eye together. While you’re at it, reveal the Beak, Crest, Tail, and Feet layers again. Figure 12 shows you how your artwork should now look.


The Bird’s Wing

Our little bird’s wing should flap up and down to give the impression he’s flying during play. Timeline animation however is outside the scope of this tutorial. Therefore we won’t spend time covering the steps required to create the wing and its animation. Instead you’ll find that it has already been provided for you. Simply make the Wing layer visible and take a look.

The animation spans across 14 frames. Take a look by scrubbing through the frames or preview the animation by clicking the timeline’s play button (Enter). You can also force the animation preview to loop by first toggling the timeline’s loop button (Options-Shift-L | Ctrl-Shift-L).

Each of the wing’s feathers are actually drawn using the same vector art brush trick we utilized earlier to create the bird’s feet and tail. Essentially, each feather is a line with the Flame Left brush applied.

To see the wing animation in context, hide the Reference layer and make sure all the other layers are visible.

Finally, convert the Reference layer to a guide layer since it’s no longer required.

Hopefully you’re happy with the end result. Doesn’t Mr Flappy look great!

 

Adding Collision Points

We haven’t quite finished with our Bird movie-clip. In order for accurate collision detection to take place during game play we’ll need to create a number of ‘collision’ or ‘hit points’ around the bird.

Create a new layer named Collision Points and drag it above all the others. Now draw a blue circle that’s 4×4 pixels in size and position it near the top of the bird’s crest. Incidentally, the color of the circle isn’t important, just so long as you can easily see it against the edge of the bird. Also, there’s no need for a stroke color.

Select your circle and convert it to a movie-clop by selecting Modify | Convert to Symbol (F8) from Animate CC’s drop down menu. When prompted, name your symbol Collision Point and set its type to Movie Clip. Also ensure it’s Registration point is set to the center.

fb2figure-13

Figure 13. The nine hit points surrounding the bird.

For house keeping purposes, place your newly created symbol within the library’s Bird folder. Now drag and drop 8 more instances of your Collision Point symbol from the library onto the stage. Using Figure 13 as a guide, position them around the bird. Finally, use the Properties Inspector to provide a unique Instance Name for each of the hit points, starting with hit0 and ending with hit8.

Don’t worry too much about these collision points. Typically collision detection is done by checking if the centre point of a movie-clip intersects the bounding box of another. In other words, if the center point of our bird falls within the bounding box of a pipe. While this is adequate for some games it’s not enough for a game such as Flappy Bird where the player’s character is an irregular shape requiring very precise collision detection around its edges. Therefore, to increase the accuracy of our collision detection we’ll check to see if any of our collision points fall within a pipe’s bounding box rather than checking only the bird’s center point.

Oh, and it’s probably worth pointing out that we’ll eventually write some JavaScript to hide the collision points from view during play.

That’s us finished with our flappy bird. Lock the Collision Points layer and save your work.

Laying Out Content on the Stage

We’ve got a library full of content but our document’s main stage is currently empty. Let’s go ahead and drag our movie-clips onto the stage to create our game world. In part three of this series we’ll start writing JavaScript to add interaction to this content. Let’s begin with the game’s background image.


Adding the Background

There should be a single layer on your timeline named Layer 1. Rename it to Background and drag your Background movie-clip from the library onto the stage. Using the Properties Inspector, position your movie-clip at (0,0).

Within the Properties Inspector’s Display section, set the Render field to Cache as Bitmap. This setting will give a performance boost during gameplay. It will convert our vector background 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 orientation frequently. We’ll use the Cache as Bitmap setting on a few more of our game objects shortly.


Adding the Pipes

Lock the Background layer and create a new layer named Pipes that sits directly above it. From the library, drag three instances of the Pipe movie-clip onto the stage. Position the first pipe just outside the stage’s left-hand side at (-57,100). From the Properties Inspector panel, give the pipe an instance name of pipe0. Position the second pipe in the middle of the stage at (123,200) and give it an instance name of pipe1. The third pipe should be positioned outside the stage’s right-hand side at (303,250) and be assigned an instance name of pipe2.

The instance names will provide a mechanism for us to reference and use these movie-clips within our game’s JavaScript code.

You may have noticed that the far-left and far-right pipes have different vertical positions from the centre pipe. These represent the highest and lowest positions that a pipe can appear on screen. We’ll write some JavaScript at a later date to pick-up these values and use them internally within the game.

It’s also worth noting that there’s no need to set Cache as Bitmap for any of the pipe instances. You may find this odd, but if you think back to the first tutorial you may remember that we applied Cache as Bitmap to the child instances within each pipe. Therefore there’s no need to do the same to the parent clips.

You may also be wondering why we only have three pipes when our Flappy Bird clone clearly has more than that during play. Well three is enough to give the illusion that there are more pipes. During gameplay, we’ll scroll each of the pipes towards the left-hand side of the screen. Once a pipe has moved off the screen we can reposition it just outside of the stage’s right-hand side. If we keep this up, it will give the illusion of an endless number of pipes scrolling from right to left.


Adding the Ground

With the pipes added, let’s now focus on the ground. Lock the Pipes layer and add a new layer directly above it named Ground. Drag three instances of the Ground Slice movie-clip from the library onto the stage. Position the first at (0,351), the second at (187,351), and the third at (374,351). Give the first movie-clip an instance name of ground0, the second a name of ground1, and the third ground2. Finally, select all three movie-clips and set their Render field to Cache as Bitmap.

We’ll eventually write some JavaScript that will scroll all three ground slices from right to left. When a ground slice moves out of view we’ll reposition it directly after the right-most slice. As with the pipes, this will give the illusion of the ground scrolling endlessly.


Adding the Flappy Bird

Now it’s time to add our game’s hero. Lock the Ground layer and create another layer named Bird. Drag the layer directly above the Ground layer. Find the Bird movie-clip within the Library panel and drag it onto the stage.

Using the Properties Inspector panel, assign an instance name of bird to it and set its position to (94,175). We’ll also need to resize the bird. Staying within the Properties Inspector, lock the width and height values together and then set the bird’s width to 33 pixels.

Finally, lock the Bird layer.


Adding the User Interface Elements

We’re almost done. Just the various user interface elements to go.

Create a Layer Folder on your timeline and name it UI. Position the layer folder above all your other layers. Create four new layers within the layer folder named: Screen Flash, Game Over, Get Ready, and Start Instructions. Make sure the Screen Flash layer is sitting above the other layers.

Drag the Start Instructions movie-clip from the library’s UI folder onto its designated layer. Using the Properties Inspector, set its instance name to startInstructions and position it at (151,243). Also set its Render field to Cache as Bitmap.

Now, with the Get Ready layer selected, find the Get Ready movie-clip within the library and drag it onto the stage. Give it an instance name of getReadyPrompt and position it at (151,86). This movie-clip should also have the Cache as Bitmap setting applied to it.

Select the Game Over layer. Now find the Game Over movie-clip with the library and drag it onto the stage. Set its instance name to gameOverPrompt and give it a position of (151,86). Once again, set the Render field to Cache as Bitmap.

Let’s add the Screen Flash movie-clip that you created in part one. Find it within the library and drag it onto the stage’s Screen Flash layer. Give it an instance name of screenFlash, set its position to (150,200) and ensure that Cache as Bitmap is selected. Since this movie-clip covers the whole screen, hide its layer from view so we can see everything else within our scene.

Lock all your layers.

fb2figure-14

Figure 14. The game objects added to the stage.

If everything has gone according to plan your stage and timeline should look similar to that shown in Figure 14 above.


Adding the Score Text Field

There’s one user interface element that’s missing: a text field that shows the user’s current score.

Let’s finish up by creating it. Create a new layer named Score and place it within your UI Folder Layer. Position the new layer directly below the Screen Flash layer.

Select the Text (T) tool. From the Properties Inspector panel select Dynamic Text from the Text type dropdown field. Set the font Family to Arial Black and set its size to 24 pt. Also set the Color field to white (#FFFFFF).

fb2figure-15

Figure 15. The score text field and its properties.

Now draw a text field onto the stage and type a 0 into the field as its default text value. Using the Properties Inspector panel, set the text field’s size to 125×38 and position to (87.5, 7). Finally, assign it an instance name of score (Figure 15).

Lock your layer.

 

Publishing to the Browser

Congratulations! That’s everything in place and doesn’t it look great! We’re now in a position to write the game logic in JavaScript, which we’ll start in part three.

To finish up with, let’s actually take a look at your finished artwork within the browser. You’ll need to temporarily guide out your Screen Flash layer first. Once you’ve done that simply select Control | Test Movie | In Browser (Cmd-Enter | Ctrl-Enter) from Adobe Animate CC’s dropdown menu.

Your default browser will launch and display your game’s content (Figure 16). You should see your little hero happily flapping his wings along with the other game objects.

fb2figure-16

Figure 16. Your HTML5 content running in a browser.

If you take a look at your browser’s address bar you should notice that your content is running in a local web server, which is required to run your HTML5 content. Adobe Animate CC has a built-in web server that is run whenever you publish your content.

Once you’re done, close the browser and move back to Animate CC. Unguide your Screen Flash layer and save your work.

 

Summary

We’ve finished building the artwork for our Flappy Bird clone. Along the way we explored Animate CC’s new vector brush tool to easily draw complex shapes. We also saw how the stage can be utilised to visually lay out our game’s content in preparation for adding interactivity. Finally, we learned how to quickly publish and preview our content within a browser.

Next time we’ll start coding the game logic for our Flappy Bird clone using the JavaScript programming language. See you soon.


Artwork by: Steve Koren

skoren

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

Jun 15, 2016/HTML5/

Using HTML5 Canvas In Animate CC: JavaScript Basics

For nearly 20 years, the programming language used within Animate (Flash Professional) projects has been ActionScript. So why the current shift to JavaScript? Well, it isn’t exactly as simple as that. For one thing, Animate is not a JavaScript only application. You use JavaScript in projects which require it, such as HTML5 Canvas and WebGL… but you can still use ActionScript on projects which are to be published for Flash Player or AIR, including AIR for Android and iOS – and Adobe continues to update these runtimes. It’s important to note that Animate is not a JavaScript and web-centric application – but is rather a platform and language agnostic application for working across a variety of platforms.



In this article, we’ll examine an animated, interactive project which covers many of the basics when dealing with JavaScript in Animate projects – including interactivity, playhead control, dynamic instantiation of symbol instances, and more!

Writing JavaScript… in “Flash”?

With Animate CC (formerly Flash Professional) having the history that it does… a history made up largely of Flash and ActionScript… it may be surprising to some that not only can you write JavaScript within an Animate project – but that you’ve been able to do so for quite a number of years. Let’s have a look at the various attempts at generating JavaScript and HTML from Flash Professional previous to the tight integration we have today.

Adobe Wallaby (2011-2012)

In 2011, Adobe released a beta utility application built with AIR for Desktop which converted .fla files to HTML. You would author your project using a normal ActionScript-based document type. When ready, fire up the “Wallaby” utility and convert it to HTML and JavaScript.

figure1

Figure 1: The Adobe Wallaby application.

It wasn’t very pretty… and the effort wasn’t long-lived either. What this demonstrated though, is that users wanted more from the Flash Professional application than just Flash-based content and paved the way for the more successful efforts to come.

Toolkit for CreateJS Extension (2011-2013)

With the introduction of the CreateJS set of libraries from Grant Skinner and company, users familiar with ActionScript APIs and the traditional Flash display list had something that felt very familiar. Eventually, CreateJS output was enabled in Flash Professional CS6 through a panel that allowed users to export a project to HTML5 Canvas using the CreateJS libraries.

figure2

Figure 2: The Toolkit for CreateJS panel within Flash Professional CS6.

While this was a workable solution – it remained an external extension with no true native integration… and writing the actual JavaScript within the application was a bit of a hack, as JavaScript wasn’t at all supported. Rather, you’d write any JavaScript within special comments within your ActionScript which would be interpreted through the Toolkit upon publish. Flash Professional users wanted more. We would have to wait until Creative Cloud became a reality to finally have true JavaScript integration within Flash Professional.

Complete CreateJS Integration (2013-Present)

With the release of Adobe Creative Cloud and Flash Professional CC, the application was completely rewritten to modernize the codebase and make the program more powerful than ever. This not only paved the way for users to integrate their own custom platforms through extensions, but also was the beginning of true HTML5 and JavaScript integration within Flash Professional itself.

figure3

Figure 3: The integrated HTML5 Canvas Publish Settings.

Not only do we now have CreateJS completely integrated within Animate… we also have the ability to write JavaScript natively within the application tied to frames – just like ActionScript.

Sample Project Overview

Let’s go ahead and have a look at the sample FLA document, which you can download and modify as you wish. This HTML5 Canvas document includes a good deal of JavaScript in order to perform timeline control, interaction, dynamic text assignment, and generative animation based upon MovieClip symbol instances dynamically created from the project Library. It’s a great example of some of the things you can do with CreateJS and Animate!

figure4

Figure 4: The “Bring the Rain!” project in Animate CC.

Have a look at the project and note that we have an Actions layer to hold any of our JavaScript code and a Labels layer which holds a number of labels given to specific frames. These two layers do not contain any visual content. Next, we have a Nav layer containing a number of interactive button instances. Note that each of these instances has a unique instance name provided, allowing us to wire in interactivity later on.

figure5

Figure 5: The layers within our root Timeline.

Below that, a Darken layer which contains an MovieClip symbol instance with its own internal animation. This instance will be used to switch the rain on and off. There is a Scenic layer below that, containing a Graphic symbol instance with some basic animation of hills and a cloud as well. Lastly, a Sunrise layer which is actually the only thing that is animated directly on the root Timeline.

Timeline Manipulation

To control the playback of both the root Timeline, and the internal Timelines of the different MovieClip symbol instances we are using, we will need to write some JavaScript in the Actions panel. Note that there is no need to control the playback of any Graphic symbol instance Timeline – as the Timeline of a Graphic symbol is bound frame-to-frame to that of the main Timeline.

figure6

Figure 6: The Actions layer within out Project.

With frame 1 of the Actions layer selected, open the Actions panel from the application menu by choosing Window > Actions. Notice the very first thing we do is stop the main Timeline by stating:

this.stop();

 

When you see the keyword this, it will refer to the current scope. In the case of the main Timeline, this represents the main scope of the project. If we include the following piece of code in frame 1:

console.log(this);

 

and then run our project in a browser with the console exposed, we will see exactly what this represents:

figure7

Figure 7: The Google Chrome Console.

We can perform this debug function upon any object within out Animate project to help troubleshoot a problem or investigate the make-up of our objects.

Now, select the final frame of animation – frame 75. You will see the following line of code:

this.gotoAndPlay("LoopPoint");

 

Instead of a simple stop() action, we are telling the playhead to move to the frame which has a label of “LoopPoint” within out Labels layer and then begin playing from that frame. This creates an effective bit of looping within the main Timeline. We can also pass a specific frame number into our gotoAndPlay() command, such as:

this.gotoAndPlay(60);

 

…which would do the exact same thing.

figure8

Figure 8: Frame Labels within the Timeline.

Using frame labels is much more flexible, however, as it allows you to shift the frames around without having to update the specific frame number in your code. You can also use commands such as gotoAndStop() and play() to effectively control the playhead.

Properties and State

Before moving on, we also set a number of state variables on frame 1. These can be seen in the following lines of code:

this.darkening.visible = false;

var isPlaying = false;

var stageHeight = stage.canvas.height;

var stageWidth = stage.canvas.width;

 

The first line sets the visible property of the MovieClip instance with the instance name of darkening to false. This effectively will hide the entire instance from view until we set it to true later on. The second line sets a new variable called isPlaying to the value of false. This is a boolean variable (having a state of either true or false) we will use to keep track of the current state of our interactive across the entire codebase.

We also determine the width and height of the Stage, and preserve these values within variables to access across our interactive later on. The stage.canvas object can be used to access both width and height when writing JavaScript. This is especially useful if we were to adjust the size of our Stage dynamically based upon the parent webpage or some other factor.

Dynamic Text Assignment

There is block of code in frame 1 which modifies the text values of our button labels and makes the additional modification of setting the mouseEnabled property of each internal text field to false. We want this to be set to false so that the text will not obscure action interaction between the mouse cursor and the underlying skin elements.

We can see 2 lines for the “play” button:

this.playBtn.btnLabel.text = "Play";

this.playBtn.btnLabel.mouseEnabled = false;

 

Two for the pause button:

this.pauseBtn.btnLabel.text = "Pause";

this.pauseBtn.btnLabel.mouseEnabled = false;

 

And two for the “stop” button:

this.stopBtn.btnLabel.text = "Stop";

this.stopBtn.btnLabel.mouseEnabled = false;

 

Each of these symbol instances is based off of the ProtoBtn MovieClip symbol in our project Library. It is actually a composite of multiple symbol and object types. As mentioned, ProtoBtn itself is a MovieClip symbol whose first layer is a dynamic text field with the instance name of btnLabel.  This allows us to use the instance name of the button on the Stage, and the instance name of the text field, to dynamically assign a new text value as seen in the snippets above.

figure9

Figure 9: The ProtoBtn symbol Timeline.

To provide the expected button states of up, hover, and down, we have a second layer present which includes an instance of the RealBtn Button symbol – which includes these states by default. In this manner, you can nest multiple symbol and object types together, creating complex interactive elements.

Note that we could just as easily simply use a true Button symbol with its own instance name and containing a text field in place of the RealBtn MovieClip symbol – but have chosen to create a more complicated interactive symbol in order to show how to disable certain elements from interaction with JavaScript.

Interactive Playback Controls

Here is where we wire up our interactive elements, binding specific event listeners to each symbol instance on the Timeline. We do this by using the instance names provided to each of the buttons earlier and using addEventListener to listen for a “click” event on that instance. When this event is detected, we then invoke a certain function which performs any number of tasks within our interactive.

For instance, here is the code which both adds the event listener to our playBtn instance, and invokes playClicked function which is written directly below it. Note that we also bind the current scope (as this) to the function call so that we can write code within the function body which aligns to that same scope.

Within the playClicked function, we tell the main Timeline to begin playing from the current playhead position, set the sun instance and darkening instance to play as well, and set the isPlaying boolean variable to true. We initially declared isPlaying at the top of our code stack, as it is important to keep track of the current state of the interactive across different functions.

this.playBtn.addEventListener("click", playClicked.bind(this));

function playClicked() {

this.play();

this.sun.play();

this.darkening.play();

isPlaying = true;

}

 

For the pauseClicked function, we basically do the exact opposite! Telling the main Timeline to stop at the current playhead position, set the sun instance and darkening instance to stop playing, and setting the isPlaying boolean variable to false.

this.pauseBtn.addEventListener("click", pauseClicked.bind(this));

function pauseClicked() {

this.stop();

this.sun.stop();

this.darkening.stop();

isPlaying = false;

}

 

The stopClicked function is a bit different as it serves to re-initialize and “rewind” the interactive to the beginning. Initially telling the main Timeline to move the playhead to the frame which has a label of “BeginPoint” within our Labels layer and to then stop the playhead entirely. We then invoke a function killTheRain(), which we we see in a bit… I bet you can probably guess what that function does!

We then set the visible property of our darkening instance to false and reset the rainBtn (we’ll address this instance in the next session) text to their default values just like at the beginning of our code stack. Lastly, setting the isPlaying boolean variable back to false as well.

this.stopBtn.addEventListener("click", stopClicked.bind(this));

function stopClicked() {

this.gotoAndStop("BeginPoint");

killTheRain();

this.darkening.visible = false;

this.rainBtn.btnLabel.text = "Bring the Rain!";

isPlaying = false;

}

 

These three functions together compose the interactive timeline control mechanisms within this interactive.

How to… Bring the RAIN!

In the last section, we saw a few references to items like the rainBtn instance and a function called killTheRain(), neither of which have yet been addressed in this article – so let’s do that. If you’ve run the interactive at all, you’ll note that we can toggle the weather from a sunny day, to a rainy day, and back again.

figure10

Figure 10: Changing the weather is easy with Animate and JavaScript.

Before writing the functions which produce (and revoke) a rainstorm, notice that we have a fourth button in our project with the instance name of rainBtn. Along with the label text value assignment for our Timeline control buttons, we will provide a label for this button as well.

this.rainBtn.btnLabel.text = "Bring the Rain!";

this.rainBtn.btnLabel.mouseEnabled = false;

 

Just as we did with the Timeline control instances, we add an event listener and accompanying function to our rainBtn instance. Within the rainClicked() function itself, we first use a simple if/else statement to check whether the darkening instance is visible or not. This lets us toggle between the two weather states in our interactive.

Depending upon the current visible property value for the darkening instance, we will reverse that property, set the rainBtn label to an appropriate value for the user, and either invoke the function to create rain via bringTheRain() or to clear rain using killTheRain(). Note that the bringTheRain() function requires a number to be passed in as an argument. As we shall see, this lets us control the intensity of the rain as it determines the number of raindrops on screen.

this.rainBtn.addEventListener("click", rainClicked.bind(this));

function rainClicked() {

if(this.darkening.visible){

killTheRain();

this.darkening.visible = false;

this.rainBtn.btnLabel.text = "Bring the Rain!";

}else{

bringTheRain(300);

this.darkening.visible = true;

this.rainBtn.btnLabel.text = "Kill the Rain";

}

}

 

This effectively acts as a toggle, reversing the current state of the weather and managing the button label text value for our rainBtn instance.

Rainstorm Preparation

Before setting up either the bringTheRain() or killTheRain() functions, we need to create an additional variable at the top of the code. This object will act as a container for all of the raindrops we create.

var rainField = new createjs.Container();

rainField.regX = stageWidth/2;

this.darkening.addChild(rainField);

 

The rainField is a type of object called a Container in CreateJS. Note that we instantiate a new Container by stating createjs.Container() directly. A Container is useful for grouping a number of additional visual objects within it. We manually set the registration point of this object based upon the width of our Stage, and finally add the rainField object to the darkening instance so that its children will be visible within out project. Using the Container, we can treat all the child objects as a group, and even wipe them all out with a single command. It’s good to be organized!

Rain Generation and Evaporation

For the bringTheRain() function itself, note that the number value being passed in as an argument is exposed through this function with the identifier of raindrops, since it signifies the amount of raindrops for the function to produce. Based upon this number, we use a for loop to basically count down from that number until we hit 0. The loop then no longer runs.

Within the loop itself, we create a temporary variable (renewed with each iteration of the loop) named rainDrop. This is set to a new instance of the RainDrop MovieClip symbol from our project Library by invoking lib.RainDrop(). Note that you must set a Linkage ID within the Library panel for this to work!

figure11

Figure 11: RainDrop MovieClip symbol with Linkage ID of “RainDrop”.

Following instantiation, we set the x and y properties of our rainDrop to a random number with a min/max range. We will have a look at the random() function after going over the remainder of this loop code. After this is all set up, we just need to add the rainDrop to the rainField Container, as it isn’t yet bound to any visible Stage. We accomplish this with the addChild() method.

function bringTheRain(raindrops) {

for(var i=raindrops-1; i>=0; i--) {

var rainDrop = new lib.RainDrop();

rainDrop.x = random(0, stageWidth);

rainDrop.y = random(-1000, stageHeight);

rainField.addChild(rainDrop);

}

}

 

As mentioned previously, the CreateJS Container object type is very useful for managing child objects within it. Within the killTheRain() function, we only need to invoke the removeAllChildren() command to completely empty our rainField Container.

function killTheRain() {

rainField.removeAllChildren();

}

 

At the very bottom of our code is the randomization function we used within bringTheRain() to randomize x and y raindrop positions as they are instantiated from the project Library. This is a standard utility function you can use in all sorts of projects to get a random value between a chosen set of numbers.

function random(min, max) {

return Math.floor(Math.random()*(max-min+1)+min);

};

 

The only thing left unexplained is the movement of our raindrops!

Rain Movement

We want our raindrops to fall in a regular cycle, and to do this we’ll take advantage of the CreateJS Ticker. To use the Ticker, we set it to fire on “tick”, which is actually the frames-per-second (FPS) of our Animate project. Since our project is set to 10FPS – the Ticker will “tick” 10 times every second. When a “tick” fires, we want the function named animLoop to run.

createjs.Ticker.on("tick", animLoop);

 

Within the animLoop() function, we first check to see whether the interactive is paused or playing through the isPlaying boolean variable. If this returns a value of true, we then run through a for loop and move each individual raindrop per loop iteration.

What makes this really simple to perform is our use of the rainField Container object. There is a numChildren property inherent to this object type that will report the exact number of child objects within the Container. Using the value of this property, we know exactly how many raindrops we have to move – and how many times to iterate our loop.

Within the loop itself, we create a temporary variable named rainDrop for each specific raindrop and increase its position along the y axis by 100 pixels. Seeing as how this function runs 10 times per second… the rain appears to fall very quickly!

The final thing we do is check the position of each raindrop against the height of the Stage, adding a 50 pixel buffer to be sure the raindrop is no longer visible. Once a raindrop moves past this point, we reset its position, creating a never-ending rainstorm.

function animLoop(e) {

if(isPlaying) {

for (var i=rainField.numChildren-1; i>=0; i--) {

var rainDrop = rainField.getChildAt(i);

rainDrop.y += 100;

if (rainDrop.y > stageHeight+50) {

rainDrop.y = random(-1000, stageHeight);

}

}

}

}

 

We are moving each rainDrop along the y axis by exactly 100 pixels upon each tick – but we could also use our random() function to add some variance to the storm.

Conclusion

Yes, Animate CC is a completely platform agnostic creative application… using JavaScript alongside HTML5 Canvas remains a popular and compelling platform choice for interactive media. The native support for JavaScript within Animate is there now – robust and ready – and a joy to use!

Mar 21, 2016/HTML5/

Need HTML5 Ads? Adobe Animate CC to the Rescue!

In this comprehensive whitepaper, I will walk you through the some of the most relevant and important Adobe Animate features that HTML5 ad creators will need to harness in order to take full advantage of it’s capabilities. I’ll also sprinkle in some random tips, tricks and techniques that will help facilitate an efficient workflow as well as achieve professional quality results that comply with emerging IAB specs and standards.

Now the key to unlocking all of the powerful ad creation capabilities of Adobe Animate mainly lies in understanding how to properly configure and utilize the Publish Settings. Knowing how to best use these settings will allow you to truly get the most out of what Adobe Animate has to offer ad creators. The Publish Settings dialog box for HTML5 Canvas has been revamped in the latest Adobe Animate release and I can tell you that there are a ton of useful goodies packed inside.

Download the whitepaper to get started!

Download/Try or Learn More about Animate CC here.

Nov 30, 2015/ActionScript, Animation, Creative Tools, Custom Platform Support, Custom Platform Support, Extensions, General, HTML5, Toolkit for CreateJS, Video/

Welcome Adobe Animate CC, a new era for Flash Professional

Adobe Animate CC
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. [Update 2/8: Animate CC is now here!]

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
    • [Update 2/8: We’ve also added Typekit integration!]
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Note: This release is listed as “Adobe Animate CC” in the Creative Cloud desktop application. When you install or update Animate CC, it will be found on your computer as Adobe Animate CC 2015, not Adobe Flash CC 2015.

Previous versions of Flash Professional prior to the 2016 release will continue to be available.

Throughout the week, we will be giving a sneak peek of Adobe Animate on our Adobe live stream channel on Twitch, showing it both for animation and building games.

The entire team is thrilled about our upcoming release, and more importantly, beginning a new era with Animate CC. As we approach the 20th anniversary of Flash Professional, we invite animators and interactive designers around the world to join us for decades to come.

[Update 2/8: Animate CC is available now!]