---

Cinemagraphs capture and hold attention in ways that photos and videos can’t. This makes them a great new visual medium for advertisers. You can use them in emails as GIFs or incorporate them into  video ads to add an element of surprise, but what about using cinemagraphs for display advertising?

 

In this tutorial, we’ll cover how you can create your own lightweight banner ads using cinemagraphs.

We experimented with different tools including Google Web Designer and Bannersnack. Web designer is a great tool but it has a steep learning curve and creating complex banners with animations can be time consuming. Bannersnack also has its limitations in that you can’t upload any of your own videos and you are restricted to using Youtube video embeds.

Enter Flexitive.

Flexitive is an economical, easy to use cloud-based service that helps you quickly create responsive HTML5 banners. With Flexitive, you can easily export banner ads that are compatible with all major DSPs and ad servers.

Here’s how you can create a banner ad in Flexitive :

Step 1 : Sign in to the Flexitive’s interface

Go to Flexitive’s website to sign up for a trial. Once you get access and log in, you are presented with the home screen. Go to the top left corner and click on the ‘Creative Library’ option under the drop down.

Step 2: Create your own category

Click on the edit icon right next to ‘Creative Library’ and add your own category. We have created one called ‘Sample Banner Ad’. Click on the plus sign right next to your new category. Once you are done, click on the edit icon again to refresh the list. Now click on the new category under ‘Creative Library’ to start creating your own banners.

Step 3: Add a new banner

Click on the edit icon next to your category name, this brings up an option to name your ad. We are going to stick to one format to make things easier and choose a standard IAB 300×600 Halfpage format. Name your ad and hit the “Create” button next to it. This creates a new instance of the banner ad and shows you the different options available to you on the right hand side.

Step 4: Pick your banner size

Now maximize your window and you’ll see the different banner options available to you. You can pick from standard IAB sizes or choose from responsive designs in case you need your banner to resize based on the user’s device. Flexitive allows you to create one banner and let’s other banners inherit properties of the original, cutting down your time to create banner sizes of all dimensions. Now pick the 300×600 canvas under ‘Portraits’.

Step 5: Add assets to your canvas

Now click on the plus icon on the right and this brings up the “Assets” interface to add assets to your canvas. You can add text, shapes or embed Youtube videos here. If you have the necessary assets ready, upload those to Flexitive by clicking on the upload button. It is always better to compress your videos to .mp4 to optimize it for a mobile experience. The file size depends upon the cinemagraph loop but a majority of them should fall under the 150KB threshold. There are many good video converters out there. We use Cloud Convert all the time.

Once you upload your creatives, you can now drag and drop your cinemagraph on to the canvas. This brings up customization options on the left hand panel where in you get options to customize the playback of the video. The videos are automatically set to autoplay and autoloop, which is perfect for cinemagraph ads.

Step 6: Add overlays

Now drag and drop the other assets on to the canvas and adjust its positions. You also have the ability to add in links to each element on your canvas. I want to redirect all of them to Flixel.com. So click the link icon on the left hand panel, add the landing page URL and click “Done”. For better tracking use Google’s URL builder.

You also have the option to add complex animations by clicking on the animations icon on the right, but we are not going to cover it in this tutorial.

Step 7: Create other banners from the original

Flexitive lets other sizes inherit your original banner’s properties. You can do this by clicking on the ‘sizes’ option on the right. It will open the other banner sizes available to you. You can go to the top of a blank canvas and hit ‘Inherit from’ 300×600 to create the other banners quickly. You can now click on these new banners and adjust the positioning of different elements on the canvas if required.

Step 8: Preview your finished work

Select on the ‘Publish’ icon on the right and then click on “Preview in Visualizer” button to see your finished banner ad(s).

Step 9: Export your cinemagraph banner ad

The final step is to export your work. If you go back to the previous window under ‘Publish’, you’ll see the option to export right next to ‘Preview in visualizer’. Click on it and in the dropdown, choose the platform you would like to publish to. You have the option of exporting your cinemagraph as a .zip file or as a JavaScript tag. I’m going to pick DoubleClick for Publishers (DFP), which allows you to embed a JavaScript code, and click on the “Export tags” option.

 

(Supported ad platforms include: Addictive Mobility, AdGear, AdTech, Adwords, Appnexus, DCS, DCM/DFA, DFP, EyeReturn, MediaPlex, OAS, OpenX, Simply.fi, SiteScout, Sizmek/Mediamind, Smart Ad Server, The TradeDesk and Zedo.)

Step 10: Using your banner for a campaign

If you are exporting as a zip file, it is fairly straight forward as the zip file would be directly compatible with the platform you are using. If you clicked export tag, Flexitive gives you an Excel spreadsheet with your javascript embed codes. It looks similar to the one below.

<script src=”https://tj6w5.flx10.com/libs/launcher-0.1.0.js”></script><script type=”text/javascript”>function whenLoaded(e){“undefined”==typeof Flexitive?setTimeout(function(){whenLoaded(e)},100):e()}function initFlexitive(){(new Flexitive).initialize({creativeId:”8NAb509ghMl”,creativeHost:”tj6w5.flx10.com”,creativeProtocol:”https”,displayType:”in-page”,targetId:targetId,breakpoint:”300×600″,cacheBuster:”%%CACHEBUSTER%%”,clickTrackerUnEsc:”%%CLICK_URL_UNESC%%”,destUrlUnEsc:”%%DEST_URL_UNESC%%”})}var targetId=”flexitive_”+1e18*Math.random();document.write(‘<div id=”‘+targetId+'”style=”width:300px; height:600px”></div>’),whenLoaded(initFlexitive);</script>

Replace %%CLICK_URL_UNESC%% and %%DEST_URL_UNESC%% with your landing page’s URL and you are done. You can now feed this code snippet into your ad server or send them to your agencies.

Here is our finished cinemagraph banner:

(Note: Google Adwords still expects a flash based .SWF file and doesn’t support .mp4s. So you can’t run cinemagraphs as ads on Adwords just yet. A workaround would be to host your video on Youtube or Vimeo Pro and use that URL, but working with aspect ratios other than 16:9 will be a challenge.)

Let us know your thoughts in the comments section.

---