Simple Video Banner

1. Follow these guidelines in order to install the Adform Creative Toolkit.

2. Create a Standard project.

Once all the necessary information has been entered (such as Default clickTAG, names, AS version, etc.), click the Create button.

3. An empty standard banner with the clickTAG button on top of the content has been created.

Creative Toolkit automatically implements clickable button with an instance name defaultClicktagBtn and ActionScript code:

this.defaultClicktagBtn.onRelease = function():Void {
getURL(_root.clickTAG, "_blank");
}

Now the banner contains correct clickTAG.

Implementing Video Player

1. In any project (except of VideoCube) proceed to Content  Assets.

2. The dialog Adform Assets is displayed.

3. Add the video assets:

  • Browse for a video file in your computer;
  • You can tick the „External URL“ check box and enter the path to your video file.

4. Once the required assets are selected, click the Save button. 

5. Now you need to create a Video Player – proceed to Content  Video.

6. The dialog Adform Video is displayed.

7. Add a new player and assign the required video by selecting a Video Source from the drop-down list.

8. In the Controls section select which buttons or a seek bar should be implemented in the banner.
Also you enable Click-Through option which allows users to be redirected to landing page on video player click:

Note: later you are able to edit visual look of the buttons.

9. Click on the Settings tab.

10. Set the player settings:

  • Auto play  - when a banner is loaded video starts to play automatically;
  • Sound on - video will play with the sound ON;
  • Streaming - tick this option if video file will be placed on Flash Media Server (FMS);
  • Loop video;
  • Enable events - activates event tracking in video banners. All the included buttons and the viewed video time will be tracked (see the image below). It is recommended to keep the Enable events check-box ticked all the time.

11. When everything is done, click the Save button.

12. The Adform Creative Toolkit automatically inserts a video container in the new layer Adform Video Player.

13. To proceed, go inside the video container. Here you have the Adform Video component with an instance name. 

14. Now it is possible to edit visual look of video controls, change dimensions of the video player, and etc.

15. If it is necessary to have more than one video player in the same banner, then proceed to Content → Video again.

16. Add a new player and select controls. Once you are done, click the Save button.

Note: the player settings (Auto Play, Sound on, Streaming, Loop video and Enable events) are the same for all video players.

17. New movieclip of the video player is created. It can be found in the Library. Drag it to the stage and place it in right spot.

18. It is also possible to create and assign other actions (please check section "Managing and assigning actions").

19. When the banner is finished it can be tested by clicking the Preview button; or a ZIP file can be created, by clicking the Export button, so that it can be uploaded to the Adform system.

20. More info about the video component can be found here.

Info: You can download an example by following this link

Creating a more complex Video Banner

Possible additional settings and options allow creating a more complex banner containing additional animation before or after the video.

Video with delay

If you want a video to play only after some time:

  • Insert Adform Video Player in the Layer going through the all timeline;
  • Give a name to the Video Container;

  • Make this container invisible in the first frame:
_root.AdformVideoPlayer._alpha = 0;
  • When you want the video to start playing (in specific frame or time) call the Adform Play Event and make the video visible:
import com.adform.events.AdformEventDispatcher;
import com.adform.events.AdformVideoEvent;

_root.AdformVideoPlayer._alpha = 100;
AdformEventDispatcher.dispatchAdformEvent({type:AdformVideoEvent.PLAY, targetsArr:["adformVideoPlayer7146"]});

As the example shows, when calling the PLAY event you enter the name of the video component (["adformVideoPlayer7146"]). This name can be found inside the video container when you select the Adform Video Component properties:

For more video events click here.

  • When video is completed make the video container invisible and display other details:
import com.adform.events.AdformEventDispatcher;
import com.adform.events.AdformVideoEvent;

//event listener
AdformEventDispatcher.addAdformEventListener(AdformVideoEvent.COMPLETE,eventHandler);
function eventHandler(eObj:Object):Void
{
     _root.AdformVideoPlayer._alpha = 0;
//other animation
}

You can preview the banner by clicking the Preview button. Click the Export button to export the banner.

The new dialogue opens asking to ensure that the banner complies with the IAB guidelines. If it does, you can either mark all check boxes or leave them unmarked and click the Continue exporting button. 

Adform Creative Toolkit generates a .ZIP file. Please note that you should not generate the .ZIP file manually. Send this file to traffic@adform.com and the Adform Traffic team will take care of this.

Note: Please keep in mind that it is suggested to have only 1 frame with all animation placed in movieclips instead of using many frames.

Video banners in devices which do not support Flash

Some devices as iPad or iPhone do not support a flash-based content. If a user visits a media site using such device, then, instead of the video banner (Flash content), an image or an empty space is shown. In order to avoid such situations Adform replaces images (or empty spaces) with HTML5 video banners. All you have to do is to send video files of the following types:


a. H.264+AAC+MP4 for IE9, iPhone 3.0+, iPad, Android 2.0+ ;
b. Theora+Vorbis+Ogg for Firefox 3.5, Chrome, Opera;
c. WebM for Firefox 4.0, Android 2.3+;

Rich Media video banners will work in the following way:

a. If it is possible to play a Flash video, the flash video will be played;
b. If it is not possible to play the flash video but it is possible to play a HTML5 video, the HTML5 video will be played (for expanding and tear back banners HTML5 video will be shown only in the expanded state, in the collapsed state a backup image will be shown);
c. In the worst case, a backup image will be shown.