Lesson 7: Making Standards Compliant Web Adverts

Approx. 12-16 hrs.
The goals of this lesson:

This lesson introduces you to guidelines for web adverts and walks you through the production of a typical web advert. At the end of the lesson you should be confident enough to create your own web advert ready to be deployed to a server.

Web Adverts vs Traditional Print Adverts
Publishers / Ad Brokers get income from Web Adverts by selling space in layouts. It's like the traditional paper-based advertising model but the web/mobile publishing scenario offers publishers the ability to obtain far greater data on the advert "performance" thanks to increasingly sophisticated advert tracking software.

How does "ad-tracking" work?
Typically when a user clicks on an advert this event is recorded and the data is used to help determine the performance of the advert and to help determine costing for deploying it. This data also helps to determine user trends.

The system can also deploy advertising according to a strategy that targets specific audiences at specific times / dates. This strategy echoes that of traditional broadcast / TV advertising.

How does this "targetting" work?
Your browsing "habits" are recorded in your browser "cookies", and this info is passed to the ad server system; where you've browsed-to determines what sort of advert is served to you. You might have experienced an advert that "follows" you regardless of the site you're on. This phenomenon is due to "ad-retargetting" (link to definition).

Online advertising offers "agility" that paper-based advertising can't match. Print promotional material has relatively long lead times and is less tolerant of errors. If there's something wrong with a web advert it can be fixed and re-deployed relatively quickly. If there's something wrong with an advert in a mass-circulation printed product, fixing it can be costly in time and labour.

Flash is Dead! Long live Animate!

There is a global trend away from deploying content in the native .swf Flash format mostly due to Apple iOS not supporting playback of .swfs especially on smart phones.

It's beconing rarer to see the .swf format used for web adverts. It's reasonable to suggest Flash .swf is dead (although thanks to its enormous popularity in desktop gaming and eLearning products it'll likely never disappear).

This rarity doesn't mean that developers and designers are dropping the Flash application, far from it. The Flash Integrated Development Environment (IDE) has evolved into Adobe Animate where it remains the go-to tool for delivering sophisticated animation to a wide range of platforms.

To check if a web advert is in the .swf Flash format, simply right-click (Ctrl-Click mac) on one and if it is a .swf, you'll likely get a drop-down menu like this (see opposite) :

HTML5 Canvas | Javascript
The increasingly popular format to deploy adverts is the combination of HTML5 Canvas and Javascript. Thankfully Animate offers a mature and reliable environment to produce this format. In this lesson we explore both formats and their strengths/ weaknesses.

The Production Process for a typical Web Advert.
Here (briefly) are the steps you might go through to make a web advertisement:


For a more detailed description of the production process for a "Standard Campaign Workflow" check out this resource from the IAB

The Interactive Advertising Bureau has developed a set of standards that Fairfax Digital Media (the major advert server in Australia) uses as a basis to determine the file size, format and pixel dimensions for adverts on their servers. The Ad Package Guidelines are here (Sept. 2016).

Keeping the file sizes low is critical since the major factor influencing advertising costs is how much data is used by your advert. Big files = big dollars.

Industry Standards: Fairfax Digital Media
Fairfax Digital Media publishes a lot of websites and "web properties" that use web adverts to drive sales. They have quite specific guidelines that designers need to adhere to. In some cases if you don't adhere to themit can cost more and take longer to publish. Deadlines and money are the law in this case. If an advertiser wants their advert to go outside these guidelines then that's ok, but it's likely they'll need to re-negotiate new terms for deployment (usually meaning more cost).

Pre-Production / Planning / Storyboards
For any story and especially animation / broadcast, a vital tool in pre-production is the storyboard (link to definition).

They are rapidly produced sketches that illustrate how the story "unfolds". Each frame in a storyboard represents a "shot". In the context of a web advert, you might allocate a frame to a sequence delivering a catchphrase.

Here's a wide variety of storyboards that might help you to understand what they look like. Note: Not all of them include timing info. such as scene duration which is necessary for this lesson's assessment task.

Here's a WikiSpace that explains a storyboard's structure, purpose and nature.

Storyboard Templates
There's a lot of different storyboard templates available for free online. Not all of them are good however. For the assessment at the end of this lesson you need to storyboard your idea using this six-panel storyboard template (15KB .pdf).

Print a few out. If your sketching is a little "rusty" print a few more.

Learning Task: How to make a Web Advert (2-4 hrs)

In this task we'll make a standards-compliant web advert using Animate.

Watch the supporting videos available from our shared Google Drive folder on how to make a web advert using Animate.

  • webadvertas3.mp4 (240MB)
  • webadverthtml5.mp4 (185MB)

Standard Ad Unit: 300x250, 20 fps

Try to reproduce the "TasTAFE" advert as shown in the supporting videos.
Grab the two assets here (.zip Photoshop CC .psd, 280KB)

Submission Guide:
Test the advert to ensure it sends you to the desired URL then submit the following for feedback in a zipped folder via email.

  • .fla file
  • HTML and .js files


If you're confident you understand this task then you're ready to make your own advertisement for the assessment.

Chris Adams 2017



Assessment Task: Create a Web Advert (9 hrs)

To demonstrate your understanding of how to make a web advert using Flash, now's your chance to make your own web advert.

There are three parts to this assessment; a research document, the storyboard and the actual web advert :

1. Research the pros and cons of developing and publishing web adverts
In MS Word (or similar) and in your own words, (max. 300 words, one page A4) make an argument for and against advertising on the web / mobile device. Just use dot points to present your info. If you find an advert that supports your argument, screen grab it and include it in your research. Include any references (URLs) you used.

2. Storyboard your advert.

3. Make a web advert to sell a product, service, public announcement or event; or make one to promote your Cert3media blog.


Technical Specifications

  • The advert needs to comply with Fairfax Medium Rectangle specs. For the latest specs.
  • It needs to be maximum 15 secs duration and no loop.
  • It needs to send the user to a URL on a mouse click.
  • It needs to be silent.
  • Max. frame-rate of 20 fps.
  • It needs to be deployed in HTML5 Canvas and as a static image (jpg or gif animation).

Fairfax Digital recommends Standard Ad Medium Rectangle (aka "1:1 vertical portrait") 300x250 assets in total to stay under 150KB. Use this as a guide but don't worry if you exceed it a little.

Research existing web adverts. On our Google Drive shared folder are 80+ Adverts pulled from the Fairfax online space.

Watch these and pay attention to how animation, copywriting, pacing and composition has been used to make an advert compelling to click on.

Supporting video tutorials for this task are available on our shared Google Drive, specifically:

  • webadvertas3.mp4 (240MB)
  • webadverthtml5.mp4 (185MB)


Storyboard your advert. Indicate timing info. Use seconds or frames to indicate the length of each shot. Caption each scene with meaningful notes about angles, lighting, mood and animation method. Use a single panel per shot. If you need more than the six panels, extend it to another sheet. Use enough sheets to cover the scene.

Do a rough version to get a feel for the composition then later sketch neatly and caption legibly to get your final version. Put your name and course on it. Scan or take a photo of the final storyboard. You need to submit it for assessment along with your animation.

Use this 6-panel story board template.

Here's one filled-out for the example TasTAFE web advert as described in our video demonstration (45KB, .pdf)

Submission Guide | Deliverables

In a single zipped folder, submit the following using the Assignment Tool:

  • .fla file.
  • HTML5 and .js file.
  • artwork (.jpgs, .pngs etc)
  • The research document as a pdf.
  • The storyboard as a jpg.
  • Publish your storyboard to your blog with a description of its purpose accompanied by a still image from your advert.


Assessment Guidelines
You will be assessed against the following:

  • Adherence to the brief's specifications, completeness of task.
  • Adherence to design fundamentals; unity, flow, focus.
  • Clarity of message; minimal ambiguity.
  • Pacing/ timing; paced to allow the message to be read without stress.
  • Engagement; the "x" factor. Does the advert entice the user to click it ?
  • Function; does it take the user to your nominated URL ?
  • Completeness; are all deliverables submitted?


Need Help on this Task ?
Unsure of the expectations or instructions for this task? Jump into our 2D Digital Animation Forum and ask for help there.


Chris Adams 2017


Animated web adverts drive a lot of commerce on the web. This lesson gave you a chance to explore what's involved in producing a web advert in terms of technical skills and production standards.

This is the end of our 2D Animation Module. This introduction covers the basics and there's a lot more to Animate and animation than what has been covered. How much more? You could do a two year Diploma on just using Animate and then there's 2d animation for broadcast using traditional VFX tools such as After Effects.

If you need further training in 2D animation, enquire about our on-campus CertIV IDM & Diploma/ Adv. Diploma Courses.