How to make a flash banner clickable

Index:
(1) What is a Flash banner?
(2) How do I make my Flash banner into a button?
(2.1) How-To Clickable with ActionScript3.0
(3) How do I tell if my banner is clickable?
(4) Flash Banners in Ad Butler
(5) Additional Reading


NOTE: All example file paths and URLs are for demonstration purposes and I don't recommend you stick them into address bars expecting something to happen. smile.gif


(1) What is a Flash banner?

Flash banners are different than ordinary .gif, .jpeg, or .png banners. Flash is a programming language, and every flash banner is a small application that is run by a flash-plugin installed in your browser. Typically a Flash banner is an entirely "clickable" area, that when clicked on will redirect the user viewing the banner to the advertisers desired destination.


(2) How do I make my Flash banner into a button?

One way of doing this is to create an invisible button over top of your entire Flash animation.

I will start this example from scratch.
(example done using Adobe Flash CS3 Pro, using Actionscript 1.0/2.0)

a) open up your flash file
b) add a new layer to the file, "on top" of the other layer(s)
c) select the Rectangle Tool from the vertical toolbar on the left side of your window
d) in the properties of the tool, change the stroke and fill alpha to 0%
e) draw the invisible rectangle over your entire scene
f) right click inside the rectangle and select the option "Convert to Symbol..."
g) select the "Button" option and name the button "clickTAG"
h) right click inside the rectangle (now a button), select "Actions"
i) make sure that your current selection is the button clickTAG, then copy-paste the following script:

on(release) {
if (clickTAG.substr(0,5) == 'http:') {
getURL(clickTAG, "_blank");
}
}



j) close the action box, and export the animation as a movie by going... File > Export > Export Movie...

So you want to find out if what you just did worked? See the section (3) below.

(2.1) How-To Clickable with ActionScript3.0

The steps for creating the banner itself are fairly similar to section (2).

Once you have created a button, add the following script to the actions for that button:

import flash.display.LoaderInfo;

this.addEventListener(MouseEvent.CLICK, callLink);

function callLink(event:MouseEvent) {
var url:String = stage.loaderInfo.parameters['clickTAG'];
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
} catch (e:Error) {
trace("Error occurred!");
}
}



To test this, see section (3) below.


(3) How do I tell if my banner is clickable?

The easiest and most effective way of testing your Flash banner in a stand-alone fashion is to manually pass it a URL and see if it redirects correctly when clicked upon.

There are two ways of doing this. You can either access the banner directly from your computer using a local directory path, or put the banner on a website.

A local path test might look like:
C:\testdirectory\test.swf?clickTAG=http://www.google.com

A website url would look like this:
http://www.mydomain.com/banner/test.swf?clickTAG=http://www.google.com

For the rest of this example I will use the test website.


To test this, stick the following URL into your browser address bar and hit enter:

http://www.mydomain.com/banner/test.swf?clickTAG=http://www.google.com

Now, if you click on the resulting Flash animation which is displayed in your browser, you will be redirected to Google. If you are NOT redirected, something is wrong with your banner button or your clickTAG script. Take careful note of the result of clicking on your banner.

-No redirect at all usually means the button has no clickTAG script at all.
-Different website than http://www.google.com usually means the banner is redirecting statically and NOT using the clickTAG parameter.
-A HTTP error, usually 404, usually means that the clickTAG script is incorrect and it is probably trying to redirect to a relative link.
For example, a relative link error in this case might look like: http://www.mydomain.com/banner/http://www.google.com -- which is clearly an invalid URL.


(4) Flash Banners in Ad Butler

The following are the general steps to adding a flash banner to a set or campaign in Ad Butler. I will use the example location from above.

Begin by navigating to the set or campaign you want to add a flash banner to.

1) click on "Add New..."
2) specify a name for the banner, "my flash banner test"
3) select "Flash (.swf)" from the Banner Type list
4) specify a destination (Destination URL): http://www.google.com
5) specify the flash location (Flash URL): http://www.mydomain.com/banner/test.swf (or if you are using the Media Library, choose from there)
6) click on Generate Script

This will create the flash object code necessary to create your flash banner on a website with the correct dimensions and clickTAG.

<object width="728" height="90" id="movie">
<param name="movie" value="http://www.mydomain.com/banner/test.swf?clickTAG=<*tracking_link*>">
<embed src="http://www.mydomain.com/banner/test.swf?clickTAG=<*tracking_link*>" quality="high" width="728" height="90" type="application/x-shockwave-flash">
</object>

You may note the "<*tracking_link*>" that shows up twice in the generated Raw HTML/Script box. This is used by Ad Butler when serving your ads, and is replaced by the specified destination URL.
If you want clicks to be tracked, it is important that you do not change the Raw HTML/Script unless you know what you are doing.

7) save the banner

Note: If your banner passed the tests in section (3), you should be done and the banner ready to rotate and track clicks.


(5) Additional Reading

Adobe's Official Resource for flash ads:
http://www.adobe.com/resources/richmedia/tracking/designers_guide/

Best practices for flash advertising:
1) http://www.adobe.com/devnet/flash/articles/flash8_bestpractices_10.html
2) http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7b25.html





 

How to specify two (or more) click locations on an AdButler Ad

Tracking URL Outline

The following is a brief description of what tracking URLs are and how they work:

Every banner has it's own unique tracking URL, roughly as follows:
http://servedbyadbutler.com/redirect.spark?banID=XXXXX;CID=YYYYY;setID=ZZZZZ
To track clicks on banners, you'll need to enter the banner ID (banID), the campaign ID (CID), and the set ID (setID).

Each Flash and Raw HTML/Script banner has a bit of text and a link [click here] beneath the content of the ad that looks like the following:
"NOTE: For information and help tracking click-thrus, click here."

Clicking on that link will take you to a guide, pre-loaded with the appropriate tracking URL.
ex. Going to a banner in a campaign gives the following:
http://servedbyadbutler.com/redirect.spark?banID=519143350;CID=49714;setID=ZZZZZ

Note: At this time, a setID is required to properly track the clicks and where they came from. 

Banner Setup

  1. Navigate to the advertiser whose banner you will be creating.

    Note: If no such advertiser exists, create them with -- remember that the email and password don't need to be exact, and can be changed later.
  2. Create a campaign for the multi-clickable banner and the dummy banners, then navigate into the campaign.
  3. Create the actual banner you intend to serve normally.
  4. Create as many additional dummy banners as you require (for each link in addition to the main tracking link).
  5. Navigate to each dummy banner you have created, copy the banner # of each one, and keep track of them. (make sure to mark which is which)

    While doing so, copy the campaign # from one of them, and also keep track of it.
  6. Now navigate back to the actual banner to serve again, and modify it as follows:
    • For each tracking link needed, put <*tracking_link*>;banID=AAA;CID=BBB in, where AAA is the appropriate banner # from the previous step, and BBB is the campaign #.
  7. Now you can assign the banner to as many sets as required.

Live Example

I like using colors in examples, as they're easy to distinguish so I'll do so here as well.

In this example, I have created 3 dummy banners and the actual banner I want to serve in a campaign. I then assigned them to two separate sets.

Below is the test HTML I used. Note the banID and CID fields of each tracking link correspond to the appropriate dummy banner.

<a href="<*tracking_link*>"> main </a>
<hr>
<a href="<*tracking_link*>;banID=519157250;CID=53123"> blue </a>
<hr>
<a href="<*tracking_link*>;banID=519157249;CID=53123"> red </a>
<hr>
<a href="<*tracking_link*>;banID=519157248;CID=53123"> green </a>
<hr>

To test them out, I clicked on a bunch of the links in each set from a test website which served only those two ads. As expected, all of the clicks and views were tracked properly for the campaign!

Additionally the statistics for the test sets I created were also recorded properly.


The advertiser's campaign statistics




The set specific statistics


Themes, Templates & More

The much anticipated forum theme & template system for ActiveBoard has arrived!

On March 8th, we will be migrating all ActiveBoards to use the theme system. This will not affect your general forum usage, and may be enabled at any time at your own discretion prior to the migration.

themesystem01.png

themesystem02.png

The theme system will provide you with an improvements to the way you change the style on your forum through an on-the-fly visual style editor, individual page template editing, and theme management for keep old styles, for example, a seasonal Christmas style.

If you have any questions, or run into any problems along the way, please submit a support request or email our general[at]sparklit.com inbox and let us know! We'll have it fixed as quickly as possible.

ActiveBoard Themes & Templates

Up and coming in the wide world of ActiveBoard are some significant changes to the way that themes work, and the addition of both an on-the-fly style editing system, and a template editing back-end for the power user. Clients will be able to completely customize the way their forum looks and feels.

An overview of the new features includes:

  • Updated Administration Panel Sections
  • New Themes & Theme Selection
  • Easier-to-use Style Editor & Preview System
  • Theme Template Editor
  • Theme Backup and Storage Manager

Administration Panel

We took a good look at the options available in the Administration Panel with regard to the style of your ActiveBoard, and the options which govern how much of what displays, and the custom HTML options. The end result was a split from "Style & Appearance" into two new sections, "Theme & Style", and "Display".

The Theme & Style section encompases the browsing and selection of themes, style editing and previewing, header text and logo, forum icons, template editing and lastly theme management.

The Display section consists of the options which handle how many topics and comments per page show up, their default order, the SEO and meta configuration, and both your inline and custom HTML fields.

forum-theme-template-01.png

Themes & Selection

We've been aware that our theme selection has been a little dated for some time now, and wanted to do something about it. My colleague Willem was set to the task of devising a quick and snazzy way of selecting themes for your ActiveBoard, and he's come up with a slick system to accomplish the task.

forum-theme-template-02.png

Style Editing

Modifying the style of your forum has been a thorn in everyone's sides for a long time -- how to accomplish this in an usable way which is completely dynamic. A problem? I think not!

The new ActiveBoard style editor allows you to change the look and feel of your board on the fly, without leaving the page. You can view the forum, and navigate around with your changes visible even before you actually apply them to make sure they're just the way you want them.

forum-theme-template-03.png

Template Editor

For a long time, we've wanted to offer additional customizations to ActiveBoard on a per-client basis, but technically speaking this is difficult when you're using an internal framework and only the content is dynamically created by the clients and the members of their boards.

As a result, we've come up with a template parsing system which will allow you to modify the layout and display of the majority of your ActiveBoard.

This is actually related to my post from a little while ago, Templates & Layout Customization, which outlined template parsing in BlogBaker. The template parser in ActiveBoard has been expanded, so technically speaking it is more powerful than the options available in BlogBaker. We'll be bringing BlogBaker up to speed in this regard soon!

forum-theme-template-04.png

Theme Manager

If you can create, modify, and save themes... you had best be able to manage them too! We're not letting anyone down in this regard, and will be providing a theme management system to keep track of your saved themes. You will be able to activate any theme from the manager, edit them, delete, and also preview the theme on your forum as if you had activated it. In other words, your users will never be impacted while you test!

forum-theme-template-05.png

Magic & Beyond

Well, unfortunately it isn't magic! Sparklit is keen to provide all of our clients with high quality, ingeniously designed software which both the geeky power user, and the happy-go-lucky casual user can use easily and painlessly!

I'll also include a little hint of two things to come:

Search Upgrades

We'll be adding an upgraded search system which will support some fancy additional options: such as + to indicate the word must exist, - to indicate the word must not exist, and " to indicate a string of text which must exist in a search. This new search application will be based off of an implementation of Sphinx Search.

Permalinks

For the SEO-interested folks out there, and anyone who would like to see some pretty URLs... they're on the way! Imagine your forums having their own pretty names... an example from our example ActiveBoard might look like: http://example.activeboard.com/forum/suggestions-and-feedback

Keep your eyes out for these upgrades and more! Also, we're always open to feature suggestions and are also often able to do custom programming jobs for our clients as per their needs. SO! Don't hesitate to submit a feature request via email (general@sparklit.com), support request, or through the "Make a Suggestion" link in the tabs at the top on your Administration Panel.

(o``)--o

Forum Language Translations

While ActiveBoard's default text is in English, it also offers a multitude of translated versions of the language which our clients may use, and even contribute to. In addition to English, the languages supported include: Spanish, Portuguese, Dutch, French, German, Italian, Norwegian, Finnish, Danish, Swedish, Hungarian, Polish, Turkish, Russian, Japanese, Chinese, Croatian and Greek.

For each supported language, we keep track of a version of the text in that language. Users are encouraged to submit their own translations to individual pieces of the language, or vote existing translations up or down according to their accuracy.

Over time, the translations become more and more complete, and require less attention.

To enable a language on your ActiveBoard, navigate to your Administration Panel and scroll to the bottom. There you will find an option called "Language Set" and a drop-down box consisting of all supported languages.

forum-language-01.png

Select your desired language to view the specific translation details of that language, and then change the "Use Translation" drop-down box to "Yes". Presto, your forum will now be displayed with the selected language. Easy as pie!

forum-language-02.png

Additionally, we give you a little visual cue for what's left to be translated for clarity!~

In this example, 27 pieces of text from the Russian translation still need translating! This is likely due to the addition of new phrases or words to the overall list of translations.

To help contribute to the translations of your language, click on the link below the translation information: "Quickly help everyone by improving the Russian translation." This will take you a page which gives you a random selection of 10 untranslated pieces of text, with the option of translating additional pieces as desired!

forum-language-04.png

Simply click on the Translate button (in Russian, "переведите"), and enter your translation into the text field that appears. Submit your translation (or translations, if you added several), and by the next day they will be active and show up on your forum!

Theme: Fresh Print by BlogBaker. Powered by BlogBaker.