Simple Video Banner

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

2. Create Standard project:

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

3. Empty standard banner with clickTAG button on top of the content has been created:

Creative Toolkit automatically implemented clickable button with 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 VideoCube) follow to Content -->Assets.

2. The dialog Adform Assets is displayed:

3. Add 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 – follow 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 what buttons or seek bar should be implemented in the banner.

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

9. Select the Settings tab:

10. Set player settings:

  • Auto play  - when banner is loaded video starts to play automatically;
  • Sound on– video will play with 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 included buttons and viewed video time will be tracked (see 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 video container in the new layer Adform Video Player:

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

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

15. If it‘s needed to have more than one video player in the same banner then again follow to Content -->Video.

16. Add new player and select controls. Once done, click Save button.

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

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

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

19. When banner is finished it can be tested (clicking button “Preview) or ZIP file created to upload to Adform system (clicking button “Export”).

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

Info: You can download the example by following this link. 

Creating 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 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 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 video container when you select 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 Preview button. Click 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 Continue exporting. 

Adform Creative Toolkit generates .ZIP file. Please note that you should not generate the .ZIP file manually. Send this file to traffic@adform.com and 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 flash-based content. If a user visits a media site using such a 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 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 following way:

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