Adobe Animate Team Blog

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

Apr 6, 2016/Web Ads/

What Makes a Banner Ad Great? Plus, How to Create One

We have surely come a long way since the web saw its first banner ad ever…

In case you’re not familiar with that masterpiece, here it is:

first-banner

This small banner ad is what started the whole craze.

And to be perfectly honest with you, in my opinion, the design is quite timeless. I could easily see this still working today, if someone found a good use for it.

But I digress.

The topic of today is what makes a banner ad great, and more importantly, how to design a great banner ad.

Let’s take it from the top:

When a banner can be considered good?

There’s only one parameter that’s important when it comes to banners, or any other piece of marketing-bound design, for that matter.

And that is the click-through rate that the banner generates.

In other words, a banner ad doesn’t need to look good in order to be great, it just needs to perform.

Although this might sound a bit counter-intuitive at first, let’s break it down based on some real data.

The curse of banner blindness

I’m sure you’ve heard about that. Everyone who’s ever designed any banner knows about banner blindness.

In short, it’s when your creation remains virtually invisible to the viewer, purely because it looks like a banner.

Oh the irony … you’re designing something to be more visible than anything else on the page, yet the effect is completely opposite.

Anyways. The issue is actually quite serious. Banner blindness isn’t something that exists only in theory, or under some specific test conditions in a usability experiment.

No, it’s real.

In fact, 86 percent of consumers suffer from banner blindness, and it doesn’t look like the situation will improve anytime soon.

The internet users simply don’t like to look at anything – anything! – that appears even remotely like an ad.

And it’s not even that they “don’t like” looking at them. Another study indicates that what we’re talking about indeed is real blindness. The way that our brains fire up when a banner shows up on the screen literally causes us to not see that banner – it’s truly being weeded out by our subconsciousness.

Banner blindness solution?

The solution is actually quite obvious and simple at the same time:

Make your banner ad not look like any other banner ad.

In 2016, and going forward, we need to be either more subtle, or more outrageous. We’ll cover both paths here.

1st path to a great banner ad: Be outrageous

There’s a book by Bill Glazer titled “Outrageous Advertising That’s Outrageously Successful.” Here’s my copy that I got somewhere around the year 2012:

Yee-haw 100%

Yee-haw 100%

(Notice all the small bookmarks.)

That book was somewhat of a goldmine for me when it comes to educating myself on how to advertise things, and what makes an ad truly stick out. Glazer’s main message, summarized in one sentence, is this: if you want your ad to work, it needs to be outrageous.

You can understand “outrageous” however you wish. Outrageous presentation, outrageous offer, outrageous copy, etc. The idea is to make your banner ad so unpredictable and so unexpected that it can’t be ignored.

What does this mean to a designer? For once, go against the trends. When everybody uses a certain design style or method, use another one. And so on.

2nd path to a great banner ad: Be native

Native advertising is gaining a lot of popularity these days.

However, instead of being just a trend among marketers, it’s actually an approach that works and brings better results than other, more traditional forms of web ads.

It’s reported that 70 percent of consumers on the web prefer to learn about products through content rather than through traditional ads. They simply have no trust in ads. Moreover, according to Nielsen, banner ads are the least trusted form of advertising. They fall even behind traditional ads in newspapers or magazines.

That’s where native ads come into play.

In short, native ads are a form of advertising that’s embedded in the website’s content – it’s part of it – rather than being an unrelated element that’s trying to interrupt the viewer.

An eye-tracking experiment by Infolinks indicates that native ads are seen 47 percent quicker and by 450 percent more people than standard banner ads.

What does this mean to a designer? Instead of simply working on a banner, try building a more elaborate form of visual advertising. Like an infographic, for example. One of the effective strategies, used by brands these days, is to create infographics around some concept related to the brand’s product, and then present that product as part of the graphic. That way, the reader gets great content right there and then, and if they’re interested enough, they can click through to see the offer.

Native-Advertising-Product

(Example by Casey Collier, via Behance.)

Three(-ish) elements of a good banner ad

Like we covered at the beginning, a banner ad doesn’t need to look good in order to be great … but it still needs three crucial elements:

  • Value proposition. It is the message – what you have for the reader that they should be interested in.
  • Brand identity. Some elements that help the viewer recognize your brand.
  • Call to action. A quick message telling the viewer what you want them to do.

And last but not least, you can have just one message per banner.

A banner that attempts to achieve a number of different goals will achieve none.

Copy maketh banner

Good banners aren’t made with graphics. They’re made with copy.

Granted, a good graphic makes the message punch more, makes it more visible, adds to the emotion, to the experience. But to give the design elements a chance, you need copy first.

If you can get a copywriter’s help when working on the banner – please do so. It will make your work easier, and it will also improve the quality of the final result.

If not, consider these tips:

Use the curiosity gap to your advantage

The curiosity gap is a marketing concept that defines the space between what the viewer knows and what they want to know.

Copywriters explore this principle all the time by giving the reader something they can hang on, yet not telling the entire story.

Example:

What this man saw after picking up his son from school was amazing.

We know part of the story – a man picked up his soon from school, and something happened. But what?

You can use the same principle when writing a headline for your banner ad.

Be in tune with the medium (or not)

The banner ad that you’re working on will appear in a certain place on a certain website. It’s going to promote a certain offer, and it’s going to be targeted toward a certain audience.

All of those are variables you need to take into account when working on the banner.

  • What other elements are displayed near the space intended for your banner?
  • What’s the website about? Does it have a serious feel to it, or is it more fun?
  • What’s the offer? Why would anyone want it?
  • Who’s the audience? What sort of message is that group of people likely to respond to?

Once you have this, you can decide whether you’re going to blend in with your banner (native approach), or try to stand out like a pink cow (outrageous approach).

Be in tune with the landing page

The task of a banner ad doesn’t end on getting the click and redirecting the viewer to a landing page. The banner also needs to be in tune with that landing page.

Here’s what I mean. If the visitor feels tricked or confused about where they ended up after clicking the banner, they won’t take any action on that landing page. And no action after the click is basically the same as no click at all.

If possible, use the same graphics for the banner and the landing page. For example, if there’s a picture of a person on the landing page, try using it in the banner ad as well (if it makes sense).

banner-and-landing

(Example by Steve Haack, via Behance.)

Not to mention, the offer that you’re promoting through the banner needs to be the same offer that’s available on the landing page.

Use good typography

As you can probably predict, typography really makes a difference.

For instance, one interesting experiment by Errol Morris (for the New York Times) indicates that people trust Comic Sans much less than they trust fonts like Baskerville or Helvetica.

That experiment was quite clever, actually. Morris published a quiz titled “Are you a Pessimist or an Optimist.” After reading a short paragraph of text, the viewers were asked whether they agreed or disagreed with the text. That paragraph was showed in six different typefaces. Interestingly, depending on which typeface a given viewer saw, they were more or less likely to agree with the whole statement. Comic Sans came in last.

What this all means is that you need to select your typefaces carefully. And most importantly, “I like this one” – isn’t a good-enough reason to go with one typeface over the other.

Provide just enough information

A banner ad doesn’t give you an awful lot of real estate to work with, so it’s easy to overcrowd the thing with too much information, thus making it too confusing to ever work.

You need to be careful and provide just the minimum effective dose of information about the offer.

Don’t overwhelm the viewer. Give them just enough, create a curiosity gap, and get them to click.

Also, use whitespace generously to make the message more visible. Just because you have, say, 300×300 pixels to work with, it doesn’t mean that you have to use up all of them.

And last but not least, everything needs to be readable. So … contrast, contrast, contrast!

Contrast over style!

Cinfranco-Film-Festival

(Example by Co-Effect Creative, via Behance.)

Add some special effects

If there’s too much movement in your banner, it will quickly be subject to banner blindness. That’s just how our brains work. However, if the banner remains still for the most part, and then moves just slightly, everyone will notice.

Make the effects visible. Use them to regain the viewer’s attention once they’re on the page for a couple of seconds already, instead of trying to shout at them right when they’re loading the page. I advise this because there’s simply too much stuff going on during that initial loading phase on most web pages. It’s too easy for the viewer to overlook an animated banner then.

This makes it more effective to keep your banner stationary during that period, delaying the animation, so that it jumps at the viewer later on. This can be done through multiple vehicles, so to speak:

  • If you have people, animals, dynamic objects (like cars) in the banner then make them move in a natural manner.
  • For normally stationary objects, make them lean back and forth, in a “knock knock, look at me” kind of way.

For instance, take a look at this:

Terracom

(Example by Byron Jimenez, via Behance.)

The situation here is almost perfect to make that chicken walk. But not right away. If the image is still, and then starts animating once the page has fully loaded, it will be much more noticeable. All of that is quite simple to achieve through Animate CC.

Grab attention through good color use

Too much color can easily induce banner blindness. A multitude of “things shouting at the viewer” has been a common trait of banners for years now. In other words, designing a banner that grabs the viewer’s attention and isn’t subject to banner blindness as much requires the use of a narrower color scheme.

For example, when working with image-based banners, you only need a couple of distinct colors apart from the image itself. Those colors can be used for backgrounds and accents (principles similar to material design).

Cork-Airport-Skyscraper

(Example by Natacha Diaz, via Behance.)

Notice the two main colors: red(ish) and white + the animation of the plane.

Appeal to the general

So the final advice relates to a situation that’s very tough on anyone designing banners.

What if you have no clue regarding the website where the banner will eventually be displayed?

This happens a lot when working with various ad networks that source banners all across the web to sites of different sizes, audiences, and topics.

Certainly, this is not perfect, but you can still try making the most out of it.

In that case, making the banner ad look native goes out the window. What you’re left with is making it look outrageous (as mentioned earlier).

Some possibilities:

  1. Take a concept that’s ordinary, and make it unusual in your ad. Doesn’t even have to be related to the thing that’s being advertised. Just like the “walking chicken” example above.
  2. Tell a story through the banner. Don’t just say that there’s something being promoted and that’s that. Focus on why anyone would want to get it. Doing this with only words can be tough, but since you have images at your disposal, and even animation, it should be more attainable.
  3. Make it personal and about the viewer. Remember that there’s a real person on the other end. Why would they care? Why would your grandma care if she saw the ad?
  4. Use arrows … or arrows that move … or hand-drawn arrows that move.

HTC-Mobile

(Example by Claudia Ribeiro, via Behance.)

Pick your style

Putting it all together, there’s a handful of popular styles for banner ads to choose from. Here are six ideas to get you started (of course, you can freely combine them together or pick and choose just some individual traits and elements):

  • Traditional banners. Just an image, some copy, and a button with a call to action on it.
  • Ghost banners. Rocking some minimal design; mainly featuring just the headline and a call to action presented as a ghost button.
  • People banners. This type of banners is based on pictures of people, and particularly, faces looking either at the camera, or at the offer next to the picture. There are some good stats indicating that pictures of people get way more attention than anything else.

Digital-Design-Gia-Angeli-Campaign

(Example by Seth Geiss, via Behance.)

  • Doodle-like banners. For those, use hand-drawn arrows, even handwritten text. The goal is to make the banner look kind of unprofessional – like it hasn’t been designed by a marketing agency.

DoodlyDoo-Banner

(Example by Ujjwal Varma P, via Behance.)

  • Product banners. Show a picture of the product + its basic info (like the price, name). We can call this one “Amazon style” banner ad.
  • Problem banners. Present a problem that the viewer can identify with. Don’t present the solution. Curiosity gap.

Conclusion

At the end of the day, the banner game is about the performance, and not so much about the look.

Even the ugliest banner in the world can still be a great banner if two things happen: (a) people click on it, and then (b) they take advantage of the offer on the landing page.

But what do you think? What’s your approach when it comes to banners?

Mar 30, 2016/General/

Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles

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

 

HTML5 Canvas Output

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

 

figure1

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

 

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

 

figure2

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

 

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

 

figure3

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

 

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

 

HTML5 Canvas Templates

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

 

figure4

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

 

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

 

Editing the Template

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

 

figure5

Figure 5. Editing the Template HTML file in Brackets.

 

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

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

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

$TITLE                                 The title of your project document.

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

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

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

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

 

Using Ad Network Code within a Template

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

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

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

<script type=”text/javascript”>

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

</script>

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

window.open(window.clickTag);

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

 

Importing the Custom Template

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

 

figure6

Figure 6. Importing the custom Template file.

 

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

 

Publish Profiles

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

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

 

figure7

Figure 7. Creating a custom Profile.

 

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

 

figure8

Figure 8. Naming the new Profile.

 

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

 

Employing Templates by Swapping Profiles

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

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

 

figure9

Figure 9. Switching Publish Profiles.

 

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

 

figure10

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

 

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

 

figure11

Figure 11. Published content using the custom Template and Profile

 

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

 

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.

Mar 9, 2016/Custom Platform Support/

Working across Multiple Resolutions with Adobe Animate CC

Adobe Animate CC takes a fluid approach to resolution. This allows you to create content with the minimum of fuss and also ensures that your work outputs to any screen size without a loss of fidelity.

What you will learn…

  • How to scale your stage content to a size that is comfortable to work with
  • Rotate the stage to draw easily at particular angles
  • Export your work for multiple screen resolutions including 4K video

In this tutorial we’ll walk through the steps required to finish an animation and export it for high definition video. Along the way we’ll also explore some features of Animate CC that make life easier when drawing each frame of animation.

figure-1

Figure 1. Some animation frames from the complete project.

Figure 1 above shows some frames from the animation that we’ll be completing. Most of the hard work has already been done for you, allowing us to focus on only the features relevant to this tutorial.

Getting Started

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

A document file has been prepared for you to work from and can be downloaded from GitHub. You can find the document within the repository at: start/guardian.fla. A version of the document containing the finished animation that we’ll be working towards can be found within the repository’s final/ folder.

Note: There is some glitch in the github repository.  Please download the raw file from https://github.com/ccaleb/custom-resolutions-animate-cc-tutorial/blob/master/start/guardian.fla and  https://github.com/ccaleb/custom-resolutions-animate-cc-tutorial/blob/master/final/guardian.fla

You may encounter errors if it is downloaded from https://github.com/ccaleb/custom-resolutions-animate-cc-tutorial/tree/master/start and https://github.com/ccaleb/custom-resolutions-animate-cc-tutorial/tree/master/final

Exploring the Document File

Take a look at the guardian.fla file provided. On the stage is a depiction of an evil guardian clutching a flaming sword. You can see from the timeline panel that the guardian is constructed using a series of layers. Those layers span across 50 frames of the timeline producing an animation of the guardian lifting and swinging the sword forward as if to attack an opponent.

There are also a couple of guide layers. We’ll explore those layers soon enough but first familiarise yourself with the other layers. Take a look at the animation in its current form by scrubbing through the timeline. While the animation is almost complete you should notice that the flames around the sword have yet to be finished on frames 30, 31, and 32. Instead, a rough sketch exists in their place and can be seen in Figure 2 below.

figure-2

Figure 2. A rough sketch of the flames surrounding the sword on frame 30.

Before continuing, feel free to preview the animation. You can do this by clicking the timeline’s play button or by pressing Enter on your keyboard. This will play the animation once. You can force the animation to loop by first toggling the timeline’s loop button (Option-Shift-L | Ctrl-Shift-L).

figure-3

Figure 3. Looping the animation across the entire timeline.

After turning on the loop option you may also need to extend the timeline marker range to span across all 50 frames. You can do this by dragging the handles to the start and end of the timeline. This will ensure that looping takes place on the entire animation rather than a section of it. This is shown in Figure 3 above.

Additionally, it’s also possible to preview your work by selecting Control | Test Movie | In Animate (Cmd + Enter | Ctrl + End) from Animate CC’s dropdown menu.

Scaling the Stage and Your Artwork

The document currently has a stage size of 525 x 277 pixels. However, if we’re going to be adding a few frames of animation then it’s probably a good idea to work with a larger stage size that makes drawing more comfortable.

Animate CC allows you to easily resize the stage while also scaling up any artwork. There’s absolutely no need to recreate your artwork for different stage sizes as Animate CC will take care of that for you.

Let’s go ahead and double the size of the stage.

First, click on an empty area of the stage. The stage’s current width and height will be shown in the Properties panel. Now click on Advanced Settings (Figure 4) to open the Document Settings panel.

figure-4

Figure 4. The Properties panel.

From the Document Settings panel we can change the stage’s size and scale our existing artwork.

Do this by first clicking the aspect ratio lock to ensure that both the width and height will scale together.

Then click the Scale content checkbox to ensure that any artwork on the stage will scale with the stage.

Finally, edit the Stage size by setting the width to 1050 pixels and pressing Enter. The height will automatically update to 554 pixels.

figure-5

Figure 5. The Document Settings panel.

Your Documents Settings panel should look identical to that shown in Figure 5. If so, click OK and the changes will take place. Your stage and its content will now be twice their original size. All your artwork has seamlessly scaled-up to its new target resolution.

As you can appreciate, being able to scale content gives you the confidence to create artwork knowing you can easily resize the stage later. It also makes it extremely easy to repurpose any existing projects for a wide range of screen sizes.

Drawing your Line Art

We’re now in a position to start drawing our missing flame artwork.

Move to frame 30 of the timeline. There you will see the first of our incomplete animation frames. A rough outline of the sword’s flames has been drawn onto the layer named fire outline.

We’ll draw the final artwork for our flames onto the layer named fire, which can be found directly above the fire outline layer. Unlock the fire layer and click on frame 30 within it (Figure 6). You may also want to temporarily hide the sword layer to ensure you can see the outline artwork in its entirety.

figure-6

Figure 6. The unlocked fire layer selected on frame 30.

We’ll use the Paint Brush (L) tool to draw the final version of the line art. Select it, set the stroke colour to black (#000000) and set a thickness of 2.00.

As you can see from the rough outline that already exists, the fire surrounding the sword is made up of an inner and outer outline. Let’s start by doing the inner outline. Simply draw over the top of the original rough outline.

You may also wish to use the Zoom (Z) tool to help draw your detail more accurately.

Stage Rotation

Each of the flames moves away from the sword at different angles, which can make accurately following the outline tricky. Drawing this on paper probably wouldn’t be as much trouble as you could simply rotate the piece of paper as you went.

The good news is that Animate CC provides a new Rotation tool that allows you to temporarily rotate the stage as you work, helping you to draw easily at particular angles. The Rotation (Shift + H) tool can be found in the Tools panel and is grouped with the Hand tool (Figure 7).

figure-7

Figure 7. The Rotation tool.

Let’s go ahead and try this as we continue drawing our flame outline. You can quickly rotate the stage regardless of which tool you have selected by simply holding down the Shift and Space keys together, then dragging the mouse to rotate the view (Figure 8). Alternatively, if you’re working with a touch device such as the Wacom Cintiq then you can take advantage of multi-touch to rotate the stage instead.

Give it a go, rotating the stage to various angles as you draw the line art. You should find that achieving your end result is easier and that the final quality of your work has improved using this approach.

figure-8

Figure 8. Rotating the stage.

It’s also possible to change the Pivot point for rotation. The pivot point is depicted by a crosshair and can be seen in Figure 8 above. Simply click on a new position within the stage and it will become the new pivot point for stage rotation.

Stage rotation is temporary. It doesn’t affect the actual rotation of your completed work. You can return the stage to its original orientation at any point by clicking on the centre stage button (Figure 9).

figure-9

Figure 9. The centre stage button.

Go ahead and complete both the inner and outer line art for frame 30. Once you have finished, double-click both your inner and outer outlines and ensure that there are no gaps in the line art. If there are then use the Paint Brush (L) tool to plug the gaps. Alternatively you can use the Selection (V) or Subselection (A) tools to help join any broken line segments together.

Colouring your Artwork

With the line art on frame 30 complete, we can go ahead and add some colour. We’ll paint the inner part of the sword’s flame orange, while the outer flame will be coloured red.

Select the Paint Bucket (K) tool and set the fill colour to orange (#FF9A01). To save you entering a colour value, there’s a guide layer on the timeline named fire palette. It contains an orange and red square. Both represent the colours we’ll need for the swords flames. You can simply use the colour picker to obtain the correct colour value from each square.

Click in the centre of the flame line art to colour it orange (Figure 10). If it fails to fill with colour, or both the inner and outer sections get coloured, then it means that your line art has breaks in it. Join any breaks in your outline then repaint.

figure-10

Figure 10. Inner flame coloured orange.

Now set your fill colour to red (#FF0000) and colour the outer part of your flame artwork (Figure 11). Again, if the outer area fails to fill with colour then you likely have a break in your line art somewhere. Correct this then repaint.

figure-11

Figure 11. Outer flame coloured red.

The final step is to remove the line art that you have just drawn. We only actually need the filled colour. To do this, double-click on each line and press the Delete key to remove it.

Finally, temporarily hide the fire outline layer and check that you are happy with your work.

Completing the Other Two Frames

With frame 30 complete we can go ahead and do the same for frames 31 and 32. Simply move to each frame, draw over the rough outlines, then apply the correct colour fills. Remember to take advantage of the new stage rotation feature as you draw your line art. You’ll find drawing much more comfortable when using it.

Also, don’t forget to remove the line art after you’ve coloured each frame.

Previewing Your Work

Once complete, look over each frame and make sure you’re happy with the end result. Also, make the sword layer visible again.

It’s a good idea to check how your three frames look within the context of the whole animation by using the timeline’s play button or by pressing Enter on your keyboard. Alternatively, you can test your movie by selecting Control | Test Movie | In Animate (Cmd + Enter | Ctrl + End) from the dropdown menu.

If you’re happy with your work then go ahead and remove the fire outline layer from the timeline as it’s no longer required. Feel free to also remove the fire palette layer too.

Export as 4K and Ultra HD Video

With our animation complete we can go ahead and export it as a video.

Adobe Animate CC introduces the ability to export your content to custom resolutions, allowing you to target any screen, including the latest ultra high definition displays. While we changed the physical stage size earlier, that’s not necessary in order to export video at different resolutions. We can simply specify a target resolution as part of the video export process. Let’s go ahead and export our content for full 4K.

From the Animate CC dropdown menu select File | Export | Export Video. The Export Video panel will appear.

Within the panel, set the target width to 4096. The height will automatically update to ensure that the video’s aspect ratio is maintained (Figure 12).

figure-12

Figure 12. Exporting for 4K video.

Click the Browse button and select a destination for the video.

Finally, click Export to generate the video.

Find your saved video file and play it back. You’ll see your animation playing in glorious high definition. All your original vector artwork has been perfectly scaled to this new resolution as part of the video export process.

Summary

We’ve worked our way through the process of creating an animation and exporting it as video. Along the way we’ve taken advantage of some of Adobe Animate CC’s exciting new features including stage resizing and rotation, content scaling, and video export to custom resolutions. While Animate CC offers many more new features, even this small subset can significantly improve your workflow and help you produce content that is optimised for any resolution including Hi-DPI, Retina, and Ultra HD 4K displays.


Artwork by: Alex Fleisig

afleisig

Alex Fleisig is a professional animator and game designer. He has worked for some of the largest CGI film production companies in the industry including Pixar and DreamWorks. His character animation portfolio stretches across an impressive number of movies including How to Train Your Dragon, Megamind, Madagascar, Shrek, and Finding Nemo. Recently, Alex set up his own indie game label where he released platform action game, Corgi Warlock, on Steam.

Alex’s blog can be found at www.alexfleisig.com and he tweets as @alexfleisig.