Adobe Animate Team Blog

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

Apr 27, 2016/Typekit/

Leverage Typekit Web and Desktop Fonts within Animate CC

Adobe Animate CC allows the use of Typekit fonts in an assortment of project types; animations, rich ads, mobile apps, web interactives, and more. Typekit is flexible, in that certain fonts are useable only on the web as live web fonts – while other fonts can be used both on the web and as installed desktop fonts. If you have a standard Creative Cloud subscription, this includes access to the Typekit service. For more info about Typekit fonts and usage please refer to the article, Web font hosting with Typekit: Plan for pageviews.

Animate and Typekit

There are two different workflows for integrating Typekit fonts within a project, depending upon what sort of publish target you are working with and how you intend to use the font. For example, if targeting HTML5 Canvas, you can use live web fonts from Typekit within Dynamic text fields or as Static text using synced desktop fonts. If targeting an ActionScript based publish target, you will not be able to use live web fonts but you are able to embed Typekit desktop font outlines for use in Dynamic text fields or use the same fonts as Static text.

figure_01

For many projects, regardless of publish target, use of Static text and installed desktop fonts is all that you will ever need. However, there are many scenarios – especially with interactive project types – which require the use of Dynamic text in order to change the text value through code, based upon some sort of user interaction.

This article with examine workflows supporting both scenarios.

Scenario #1: Using Typekit Web Fonts in HTML5 Canvas

Typekit web fonts must be applied to a Dynamic text element within an HTML5 Canvas project. They cannot currently be used on any other project type – so be sure the document you are working on targets HTML5 Canvas to use Typekit web fonts in this way!

You’ll need to select the Text tool and from the Text type dropdown in the properties panel, choose Dynamic.

figure_02

Once Dynamic text has been chosen, we are able to click upon the small icon to the right of the font family selection dropdown. It appears as a small globe, indicating web font selection from Typekit.

Choosing a Web Font from Typekit

Selecting this icon will summon the Add Web Fonts dialog. From here, you can select one or more fonts by clicking on them and making a small checkmark appear. Once we hit OK, the selected Typekit web font references will be included in our HTML5 Canvas project.

figure_03

This all occurs within Animate CC itself – no need to even exit the program when selecting fonts in this way!

Applying chosen Typekit fonts to Text

Now that we have chosen one or more Typekit web fonts to use in Animate CC, we are able to use the font family selector to choose the web font for our Dynamic text element.

figure_04

Note that all Typekit web fonts will be listed at the very top of our font family selection dropdown. If you don’t see it initially – scroll up. You can also select Typekit web fonts from the menu by choosing Text > Font and it will be included at the top of that menu list as well.

figure_05

Typekit Web Font Permissions when Publishing

The Typekit service needs to know which URLs the content will be hosted at in order to know it has permissions to serve the web fonts to that URL. This works just like it does when creating a kit from the Typekit website. You can get more information around this feature from this Typekit Help article on Domains. <https://helpx.adobe.com/typekit/using/domains.html>

figure_06

Within the Publish Settings dialog, we will need to click the Web fonts tab and enter the URL with which the published content will be hosted. Note that when testing locally, all of the Typekit web fonts will render just fine – you only need to do this when preparing to publish your content on a live web server.

figure_07

Scenario #2: Using Typekit Desktop Fonts in HTML5 Canvas and ActionScript Documents

It is also possible to use a good number of the Typekit fonts in your HTML5 Canvas static text or even in ActionScript projects targeting Flash Player and Adobe AIR! This is possible by using the Sync feature from the Typekit website, allowing the use of certain fonts as desktop fonts.

It is important to note that not all Typekit fonts can be used in this way, as many are only for web use.

Choosing a Desktop Font from Typekit

If you log into the Typekit website with your Adobe ID and Creative Cloud subscription, you will be able to locate fonts which can be synced to your Windows or OS X computer by selecting the Sync toggle in the right-hand menu. This selection will ensure that only desktop enabled fonts will appear as part of any filtering you might perform to locate the fonts to use in a project.

figure_08

Once a font is located, simply hover over the font preview and choose + Use fonts in order to sync the selected fonts to your desktop using the Creative Cloud desktop app. The fonts will be downloaded and installed for use as if they were standard fonts to use in any application – including Animate CC.

Applying a Desktop Font to Text

As soon as the selected fonts are synced to your computer, you will be able to select them for use from the Properties panel within Animate CC. These desktop fonts from Typekit can be used as Static text within an HTML5 Canvas or ActionScript based document – or even embedded as a custom font for Dynamic text use within any ActionScript document, including those which target Flash Player, Adobe AIR for Desktop, Apple iOS, or Google Android.

figure_09

Using Dynamic Text in ActionScript Documents

If you choose to use a Typekit font as Dynamic text within an ActionScript document, you’ll likely want to embed the font to ensure your text appears exactly as you intend within the project. If you do not embed the font, and the user does not have that precise font installed on whichever device they are using to view your content or app… they’ll see any Dynamic text displayed with a fallback font.

To accomplish this, simply click the Embed… button when a Dynamic text object is selected, or when you are using the Text tool as Dynamic text. This will open a dialog from within which you can select which specific character sets to use in your embedded font.

figure_10

Once created, your custom embedded font can be selected by the name you provided upon its creation. Now, you can be confident that the chosen Typescript desktop font will look great within your project!

figure_11

Wrapping Up

No matter how you choose to use them, Typekit web and desktop fonts can bring additional levels of expressive creativity to any Animate CC project which includes some textual element. The great thing about having these options is that that you can use web fonts in certain projects which are connected to the web… and still have the freedom to use other fonts just as you would any normal desktop font in your non-HTML5 projects.

Apr 13, 2016/Animate CC Interface/

Create A Mobile Animation Prototype with Adobe Animate CC

Figure_01

Figure 1: The completed timeline.

It is quite understandable that a lot of the attention being paid to Animate CC involves animation, interactivity and the ability to to have your projects appear on practically anything with a screen. What hasn’t gotten a lot of attention is the fact that Animate CC is also a pretty nifty mobile prototyping tool.

This is especially true when it comes to developing projects that will appear on mobile devices and tablets. In the above example, for instance, when the Floating Action Button is tapped those three icons move on to the screen while the + sign rotates. It is almost impossible to explain, verbally or in writing, that they move in a slight arc over the space of roughly one second and that they slow down before they stop. Thus a prototype demonstrates intention. You can show everyone involved interactions, motion and duration and make any necessary changes based on feedback.

These prototypes are also finding their way into the UX process. It is a lot more efficient and cost effective to find issues using a prototype than to find and fix them in the middle of final production.

Finally, one great feature of prototypes is they are disposable. If something isn’t quite right – it takes too long for those icons to move to their final position – you can shorten that time with a couple of mouse clicks. If the button is in the wrong place, it can be moved. If during User Testing it is discovered the testers don’t understand the purpose of the plus sign, change it. This is a process that continues right up the last minute before the developers take over to wire up the final project. In fact, it even accelerates the development process if the developer has been involved right from the start.

With the rise of mobile there has also been a corresponding rise to prominence of prototyping tools such as the recently-released Public Preview Adobe Experience Design CC. Though there are a number of reasons behind this new class of software, for me, at least, it is here due to the communication issue I pointed out earlier. It is no longer sufficient to verbally describe interaction and motion based on a static design prepared in Photoshop or Illustrator. Everyone will form a different mental image of what is being described and the odds are pretty good the final result won’t correspond to those differing images.  By showing the interactivity and motion everyone is on the same page.

Another aspect of prototyping is to get your ideas into motion sooner, rather than later. This way you get your ideas in front of the stakeholders early in the process where they can be rapidly changed and the financial implications are low to non-existent.

In this exercise we are going to prototype a simple interaction on a mobile screen: When a Floating Action Button is tapped, three icons move onto the interface. Let’s get started:

Open the Prototype_Exercise.fla file found in your download. When it opens you will notice the interface elements on the Timeline are locked. This is because they are static and as stuff gets moved around on the canvas, I don’t want the interface elements to move or be accidentally selected. If you open the Library panel, you will also see the content used in this Exercise has been placed in folders. The reason for this to keep the Library neat and tidy.

“Wiring Up” A Floating Action Button

With the “housekeeping out of the way, let’s get started building the prototype. The key to this process is one I teach my students: Build a bit. Test it. In this instance we’ll start with the Floating Action Button (FAB) which, when tapped, expands in size. Here’s how:

  1. Select the Interface folder on the timeline and click the New layer icon. When the new layer appears above the folder, double-click the name and rename the layer to FAB.
  2. With the new layer selected, open the MovieClips folder in the Library and drag the FAB movieclip to the canvas.
  3. Once it is moved into place, drag the playhead to Frame 25 and add a keyframe. This is where the FAB will start to grow.
  4. Right click on the FAB time some where beyond the new keyframe and select Create Motion Tween.
  5. Pull the playhead to frame 40 of the FAB timeline, right click on the frame and select Insert Keyframe>Scale. Select the Free Transform tool and, with the Shift key held down, drag out the right bottom corner of the FAB until it hangs off the bottom corner of the stage.
Figure_02

Figure 2: The symbol is scaled between frames 25 and 40.

  1. Add a new layer and rename it Plus. Move the playhead to frame 25 and add a keyframe. Move the playhead to frame 40 and add another keyframe.
  2. Right click between the two keyframes and select Create Motion Tween. This indicates the motion will occur between the two keyframes. The intentionion is to have this movieclip spin while the FAB is increasing in size. By having a short duration the symbol will remain in place and not move for the balance of the movie.
  3. Move the playhead to end of the animation around Frame 39, select the symbol and, In the Properties panel change the Rotation value to 1 times.
  4. Create a new Folder on the timeline , rename it FAB and move the FAB and Plus layers into the folder.
Figure_03

Figure 3: The rotation of the Plus symbol is set in the properties panel.

If you scrub the playhead across the timeline you will see the motion. To see the motion play at the current frame rate, press the Return/Enter key. This where the “Do a bit. Test it” maxim comes into play. If the animation is too fast, too slow or you want to change something else, now is the time. There is nothing else on the timeline to distract you which means you can concentrate on getting it right.

Adding The Motion To The Icons

Next are the icons that spring out of the FAB. Let’s get them in place.

  1. Add three new layers named Alarm, Camera and Chat to the timeline.
  2. Select the Alarm layer and open the MovieClips folder in the Library. Dag the Alarm movie clip to stage and place it over the Plus movieclip.
  3. In the Alarm layer add a keyframe at Frame 40 and create a Motion Tween. Move the playhead to Frame 55 and add a Position keyframe (Add Keyframe>Position)
  4. Move the playhead to Frame 55, select the Alarm on the stage and move it above the big FAB circle.

At this point you could sit back and think the motion is great. It moves from “here” to “there”. No quite. One major principle of motion is that objects move in an arc. Another major principle is nothing moves at a constant rate of speed. Let’s deal with them:

  1. That straight line you see between the “Here” and “There” locations for the Alarm is a motion path. Move your cursor to the middle of that path and you will notice your cursor is sporting a curve. Click and drag the path and it will now change from a straight line to an arc.
Figure_04

Figure 4: Drag out a point on the Motion Path to give the motion an arc.

Next up, let’s deal with the speed issue. Acceleration and deceleration are managed by a technique called “easing”. When an object is accelerating you would use an “Ease In” and ,when it is decelerating and coming to res,t you would use an “Ease Out”. Eases are built into Animate CC’s Motion Editor. Here’s how to open the Motion Editor and apply easing to the Alarm symbol:

  1. Double click between the two keyframes in the Alarm Layer. That graph that opens under the Layer is the Motion Editor. We want to apply an ease to the motion of the Alarm. Select Location in the Motion Editor.
  2. At the bottom of the Motion Editor you will see Add Ease. Click it to open the Easing panel. Though there are a lot of interesting easing effects let’s keep is simple for this exercise. Twirl down Simple and select Slow. Double click the Alarm timeline to close the Motion Editor.
Figure_05

Figure 5: Adding an ease to the motion is found in the Motion Editor.

  1. Repeat steps 2 – 7 for the Camera and Chat symbols. To stagger the animations I added a keyframe to their layers about 5 frames after their first keyframe.
  2. Add a Folder named Icons to the timeline and move the Alarm, Camera and Chat icons into the folder.
  3. Move the Icons folder under the FAB folder on the timeline and press the Return/Enter key. The three icons move into position after the Plus symbol finishes its rotation.

Add a Code Snippet

Figure_06

Figure 6: Adding a code snippet to the movie.

If you were to test the movie in a browser by pressing Command- Return (Mac) or Ctrl- Enter (PC) you will see the animation play but it loops back to the start at the end of the timeline. If this is not what you want, the loop can be addressed with a Code Snippet. Here’s how:

  1. Right-click on the last frame of the actions layer and select Actions. This will open the Actions panel.
  2. Click the Snippet button – it is the <> button in the top right- to open the Snippets.
  3. Twirl down HTML5 Canvas > Timeline Navigation and double-click “Stop at this frame”. The code in the snippet is added to the Code panel.
  4. Close the Actions panel to return to the main timeline and test the movie in a browser by pressing Command- Return (Mac) or Ctrl- Enter (PC). At this point you can select File>Save As.

Keep in mind any code added to the timeline needs to be tested in the browser. Simply pressing the Return/Enter key does nothing more than start the playhead moving across the timeline.

Publishing And Sharing Your Prototype

Figure_07

Figure 7: The Publish Settings will produce the files need for web viewing.

At this stage you are satisfied with the motion and the time has arrived arrived to share the file with your stakeholders for review and revision. You have a couple of choices open to you. The first is to output the Animate CC project as a video or to output the necessary HTML and JavsScript and then upload the resulting files to a server.

Follow these steps to create the browser version of the project:

  1. Select File> Publish Settings to open the Publish Settings dialog box. The settings you see apply to the HTML5 Canvas file type chosen for this exercise.
  2. In the Publish area you have two choices. The default is JavaScript/HTML for obvious reasons. If this file is to be placed in a page created by Dreamweaver CC (2015) or Adobe Muse CC (2015) feel free to deselect this option and choose, instead, OAM Package. The OAM package puts all of the files created into a single file which can then be directly placed into the files created by those two applications.
  3. Feel free to deselect Export Sound assets for the simple reason there are no audio files associated with this project. As well, you can deselect Loop Timeline because the code snippet stops the playhead on the last frame.
  4. Click the Publish button and all of the necessary HTML and JS files and an image folder will be created in the folder where you saved the Animate CC file. (I have included these files in the Complete>HTML folder).
  5. Click the OK button, to close the Publish Settings dialog box.

You can also output this prototype as an .mp4  or QuickTime video that can be shared with the stakeholders. This is a common format for projects containing motion and no interactivity and is quite easy to accomplish in Animate CC. Here’s how:

  1. Select File>Export>Export Video to open the Export Video dialog box.
Figure_08

Figure 8: Animate CC motion prototypes can also be exported as videos.

  1. At this point you need to make a decision. If you want to create an .mp4 video, select Convert video in Adobe Media Encoder. When you click Export, this will open the Media Encoder and this application will be used to create the .mp4 file. If you deselect the Media Encoder option, Animate CC will create a Quicktime .mov file.
  2. Click the Browse button to choose the folder where you want the video to be placed and click Export.

Conclusion

Though Animate CC has traditionally been viewed as an animation or motion design tool, the rise of mobile and the inclusion of motion, actually leverages Animate CC’s strengths:

  • As a designer you can control how objects move, for how long and what triggers the motion. In fact you might even want to work out your ideas using simple boxes and circles before adding the final bits and pieces such as icons , text and images.
  • The .fla file, can be treated as a living document where changes identified during User Testing or through team and client feedback can be rapidly accommodated and subjected to further testing.
  • The ability to output an Animate CC prototype to web and video formats means projects, concepts and ideas can be easily shared with all of the stakeholders at any stage of the process.

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.