Adobe Animate Team Blog

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

Jul 27, 2016/Adobe Stock/

Night and Day: Easily Create a Landscape Alteration in Animate CC

Ever since Flash Professional became Animate CC back in February of this year, we’ve had access to the CC Libraries panel. Included within this panel is a direct connection to search against the library of assets included in Adobe Stock. Why would anyone want to search for Stock assets within Animate? For one thing, it’s a great way to throw some ideas together without a lot of commitment. You can use an unlicensed, watermarked version of the assets within your project as a proof-on-concept or to simply try out some new ideas. Later on, when decisions have been made, you can license the asset to use the full-resolution, un-watermarked version in your project, or even replace the unlicensed version with a final asset created by you or your team.

Figure_01

Figure 1: The completed animation

We are going to demonstrate how to go about using Adobe Stock within Animate CC – and build out the animation seen above with those assets.

Project File Downloads

You are encouraged to explore Adobe Stock on your own and find some assets which appeal to your own sense of creativity. However, if you want to use the same exact Adobe Stock assets used below within your own projects, they can be found at the following locations:

“hill at sunset” by Dmitriy Sladkov

https://stock.adobe.com/search?k=84819895

“full moon night” by magann

https://stock.adobe.com/search?k=61979038

…and here is the completed FLA from Joseph.

Access Adobe Stock Assets

When working in an Animate project, it’s easy to search for and add assets from Adobe Stock. We do so through the CC Libraries panel. If you do not see the CC Libraries panel open within your Animate project, you can reveal it through the Window > CC Libraries command in the application menu.

Figure_02

Figure 2: The CC Libraries panel within Animate

Once open, you will see all of your personal and shared libraries, as well as the assets within the selected library. Any Adobe Stock assets you may have previously added to a library will become immediately available when that library is selected from the dropdown.

Figure_03

Figure 3: Searching Adobe Stock

If you would like to search for a new asset from Adobe Stock, we can do so by using the Search Adobe Stock input directly below the library dropdown. Once search terms have been entered, the results of that search will appear directly below in a visual grid.

Figure_04

Figure 4: Stock asset options

To add an asset from the search results to the currently chosen library, we have two options. Both options are accessed by hovering the cursor over any of the individual assets. The choices are as follows:

License and Save to… This option will license the asset and save the high resolution version to the selected CC Library.

Save Preview to… This option will download a low resolution preview of the asset and save this preview version to the selected CC Library. If you decide to purchase the asset, you can do so from within the CC Libraries panel and receive the full resolution version.

In the next section, we will have a detailed look at building an animated project using assets from Adobe Stock.

Using Adobe Stock Assets

As seen above, we’ll be building a short piece of animated content using assets from Adobe Stock.

Project Setup

I’ve created a new ActionScript 3.0 document at 747 x 420. The FPS is the default 24 – though any of this can vary depending upon your own project. Why ActionScript 3.0? We’re producing a raw video and an animated gif image from this project, so the chosen document type doesn’t matter all that much since there is no interactivity. However, when working within an ActionScript 3.0 document, when you test your movie, Animate is able to do using the built-in Flash Player, keeping the entire experience of designing your content within one focused application. Additionally, you have access to tools like 3D Rotation and Transform – and the widest variety of filters and blend modes –  always a fun option to have!

Timeline Setup

Find the two assets you’d like to use from Adobe Stock (as detailed above) and bring the preview versions of those assets down into your CC Library. They’ll now be available for use within your project.

I’ve gathered a detailed landscape photo and have placed this on the very bottom layer. I have also found a nice nighttime sky with a great moon to use as a blending layer. The sky photo has been placed in a layer directly above the previous.

Figure_05

Figure 5: The Adobe Stock assets are assembled in the Timeline

Blending MovieClip

I want to use a blend mode upon the sky photo to create an ethereal effect upon the landscape. To do so, I must first create a MovieClip symbol around that photo – as MovieClip symbol instances can accept blend modes and photographic bitmap images cannot.

To create a MovieClip symbol, we select the shy photo and choose Modify > Convert to Symbol from the application menu. A small dialog will appear allowing us to name the symbol (I named mine “NightSky”) and choose a symbol type. Choose MovieClip!

Once the symbol is created, an instance of that MovieClip symbol will exist upon the stage where the photo one was. Select this instance and have a look at the Properties panel. We can see that the selected object is a MovieClip instance of “NightSky”. Perfect. All that needs to be done now is the selection of a blend mode.

Under the Display section of the Properties panel for your MovieClip symbol instance, you’ll find a Blending dropdown. Go ahead and play around until you find one with the desired effect expressed upon the stage. I chose Overlay.

Figure_06

Figure 6: MovieClip instance properties – Blending choice

Animated Masking

What we want to do now is create a mask layer and a shape within that layer that is animated across the stage – performing a dynamic transition between the two photographic images. The first thing we do is create a new layer above the previous two, right-click and choose Mask from the contextual menu. This will transform the top layer into a special mask layer, and will automatically nest the layer below it within the mask as indicated by the visual indentation of the layer and the change in layer icon.

Now to create the animated content. You can use any sort of shape or motion you like – I created a large rectangular shape to cover the stage and then employed the Free Transform tool to skew the shape a bit, creating a neat angle.  At this point, it’s just a matter of creating an additional further along the timeline, shifting the content of the previous keyframe so that it begins off-stage, and then applying a Shape Tween to the content. To apply a shape tween between two keyframes, select any of the frames within that span, right-click, and choose Shape Tween for the menu. If all is well the mask will now be animated.

Figure_07

Figure 7: The project with masking applied

For more detail on how to use Shape Tweens in Animate CC, have a look at the following resource:
https://helpx.adobe.com/animate/using/shape-tweening.html

And if you need more information on how masking works… here you go:
https://helpx.adobe.com/animate/using/using-mask-layers.html

Reverse Duplication

Not only do we want the mask to animate across the stage in one direction – we also want to have it leave the stage as well – creating a seamless looping animation. Animate CC makes this task very simple. All we need to do is select the entire tween with the cursor, including the keyframes on each end. With all of these frames selected, right-click and choose Copy Frames. Now, move about 10 frames past the final keyframe (frame 60 in the demo) and select the frame. Right-click again and this time choose Paste Frames. The entire tween will be pasted across the timeline.

At this point, the second tween is just a repetition of the previous one. To reverse the tween, select all frames once again (in the second tween this time) including both keyframes. Now right-click to summon the contextual menu once again and this time choose Reverse Frames. Pesto! We hardly had to lift a finger and now the animation is reversed, completing our loop.

Video Export

There are a couple of options to exporting the content we have created. You can, of course, choose to simply publish for Flash Player – but we want to export as a video and animated GIF. Let’s look at how to export a video file first.

This is actually super-simple. Just choose File > Export > Export Video from the application menu. An Export Video dialog will appear, allowing you to save off your completed animation as raw video data. This exported file can then be taken into Adobe Media Encoder and be transcoded to any number of video file formats.

Figure_08

Figure 8: Exporting the animation as a video file

Animated GIF Export

An often-overlooked feature of Animate is the ability to produce animated GIF files. To export the animation as an animated GIF, we’ll need to use the Publish Settings dialog. Publish Settings can be accessed through the Properties panel with the document itself selected (no objects on the stage or pasteboard selected) or directly from the application menu using File > Publish Settings.

As you can see in the figure below, we have numerous file publish option through use of this dialog. One of these options – the one we are immediately interested in – is GIF Image. If we select this option, we’ll see all of the properties we can tweak when exporting a GIF. The important one here is that we want to choose Animated from the Playback dropdown, and then select Loop continuously.

Once we hit the Publish button, an animated GIF will be generated alongside our FLA, assuming we haven’t specified an alternative file location.

Figure_09

Figure 9: Animated GIF Export

Conclusion

The use of Adobe Stock assets within Animate CC is a great way to try out a wide array of easily approachable stock assets. From this point, you can build out your content around the asset previews, and when you feel confident enough that the asset will work… go ahead and license it from directly within Animate itself.

Jul 20, 2016/Sprite Sheets/

Create A CSS Sprite Sheet In Adobe Animate CC

Image_01

CSS Sprite Sheets have been around for over 40 years when they first made an appearance in video games. The idea, which still holds today, was it was much more efficient to show a piece of a larger image than constantly having to load a new image. It is understandable, therefore, why CSS Sprites are so popular when it comes to web animation … especially in the mobile space.

When Flash disappeared on mobile devices a rather interesting thing happened. While mobile was all the rage as the “shiny new thing,” Adobe quietly added the ability to create CSS Sprite Sheets into Flash CS6. This meant animators or motion graphics designers could still take advantage of the power of Animate CC to create motion graphics but, instead of publishing a SWF that could be embedded into a web page, they could simply output the animation as a sprite sheet and left the heavy lifting to HTML5 and CSS3 rather than the Flash Player.

For those of you wondering, a sprite sheet is a bitmap image file that contains several graphics in a tiled grid arrangement. By placing all of the graphics into a single jpg or .png file, the device only needs to load one file rather than a few dozen separate image files.

In Adobe Animate CC, you can create this file from any combination of movie clips, button symbols, graphic symbols or bitmaps on the timeline. They can be created either from the main timeline on the stage or from items found in the Animate CC Library but not from both sources. As well any transforms such as scaling, skewing and so on applied to the object  on the Animate CC timeline will be preserved in the Sprite Sheet.

In this exercise we are going to create a CSS Sprite Sheet using an animation from that “Animator Extraordinaire”, Chris Georgenes. What we are going to do is to convert a bird in flight to a CSS Sprite Sheet.

The Animate CC CSS Sprite Sheet Rules

To get started open the Starling_animation.fla file found in the download. When it opens you will see a bird against a blue sky. If you test the file by pressing Command-Return (Mac) or Ctrl-Enter (PC) you will see Chris’ bird flapping its wings.

If you take a look at the Library you will discover there are quite a few bits and pieces that comprise this animation including a couple of movieclips. To see how the bird was constructed, double-click the starling_flight movieclip in the Library. If you scrub the timeline you will see the bird flapping it wings.

Which brings us to the rules:

  1. Sprite sheets can only be created from timeline animations. This is understandable because each frame on the timeline will be converted to a sprite. The timeline can be either the main timeline or that found in a movieclip.
  2. Nested movieclips – a movieclip on another movieclip’s timeline – can’t be used. Again this makes sense because nested movieclips only show the first frame of that movieclip on the timeline.
  3. Actionscipt used to pull assets into the movie, add interactivity or to control the timeline will be ignored.

Bottom line? Sprite Sheets are created from straight heads-up timeline animations found on the stage or in a a Button or movieclip symbol.

Image_02

Figure 2: CSS Sprite Sheets are created from timeline animations.

How To Create A CSS Sprite Sheet In Adobe Animate CC

Creating the sprite sheet is a rather uncomplicated process. All you need to do is to Right Click on the starling_flight movieclip and, when the Context Menu opens, select Generate Sprite Sheet. This will open the Generate Sprite Sheet dialog box.

On the left side of the dialog box you are being told the starling_fight movieclip has been selected. On the right side of the dialog box, moving from the top to the bottom, you are given a number of options. They are:

  • Sprite Sheet Tab: This is where you determine the properties of the Sprite Sheet.
  • Preview Tab: Select this and you will see a preview of the animation to be converted.
  • 100%: This “scrubby number” lets you change the view of the sheet to be created. As shown in Figure 3, I reduced the view to 24% in order to see the placement of all of the sprites.
  • Image Dimensions: This pop down lets you set the final size of the output. Be aware that choosing a size does not mean the sprites will be scaled to fit the chosen dimensions. Any sprites outside of that size will not be included in the output. You will know you have a problem because there will be a yellow caution icon beside the dimensions. If you are unsure of which size to choose select Auto Size which happens to be the default.
  • Width and height: These scrubby numbers allow you to trim the the wasted space from the final output.
  • Image Format: Your choices here are PNG 8, PNG 24, PNG 32 and jpeg. If you need transparency PNG 32 is the way to go.
  • Algorithm and Data Format: These two choices are driven by the various gaming engines. If this project is destined for simple web playback, you can ignore them. The default Data Format is Starling.
  • Rotate: Select this if the Game Engine requires it. Otherwise, leave it unchecked.
  • Trim: Select this and any unused pixels in the image will be removed from between the images.
  • Stack Frames: Select this and any duplicate frames will be ignored. For example, let’s assume you have decided to add five static frames with no tweens, to the end of the timeline. This option sees each of the frames is the same as the last frame in the timeline and simply ignores them preventing duplication in the output.
  • Border Padding: Adds padding to the borders of the sheet. This is especially useful if you think the images are too close to the edges.
  • Shape Padding: By changing this value you add space between the sprites in the Sprite Sheet.
  • Browse: Click this button and you can determine where to save the file on your computer.

When finished, click Export and the CSS Sprite Sheet will be saved to the location set.

Image_03

Figure 3: There is a lot of control handed to you by the Generate Sprite Sheet dialog box.

Conclusion

As you have seen, creating a CSS Sprite Sheet in Adobe Animate CC is what I refer to as being “dead simple”. As long as there is a timeline involved, no Actionscipt and no nested symbols, the process of creating the Sprite sheet is reduced to a couple of mouse clicks.  Best of all you are handed the power of Animate CC to create animations ranging from the simple to the complex and use them in situations where you are precluded from using a SWF file.

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.

Keep reading:

Part 1, Part 2Part 3Part 4, Part 5, Part 6


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 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.

Keep reading:

Part 1, Part 2Part 3Part 4, Part 5, Part 6

 


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