From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Components

 

Components are building blocks created for you in order to simplify the process of creating beautiful and functional ad's.

 

Components 

1) Components section in new builder

 

  • Image

    This component is the most basic and the most used when building any type of ad.

    Usually, one that is creating an ad already has a *.PSD file or image assets which will be used to create the actual banner. Having HTML5 as a technology and this studio's as a helper enables bringing images to life and making parts of an ad interactive, i.e. clickable and animated.

    To use image component, simply:

    1. Insert a new Image component;
    2. Upload an image from your local computer;
    3. Click the Save button.

    Image component automatically detects dimensions of the uploaded image. If image of a very large resolution is uploaded, it is possible to resize it using the Size & Position section.

       Image _comp

    1) An image component applied on Stage

     

    Image Component 

    1) Adding image component workflow

  • Shape

    Shape is a simple component. Mostly used when you need to apply a background for particular element of your ad or for the whole ad. You can easily change the color, opacity and size for shape. 

    Shape _comp

    1) Shape component with changed color

    Shape Component

    2) Adding a shape component workflow

  • Text

    Text component gives a possibility of making slogans and "call to action" messages without using images. 

    Text _comp

    1) Text component applied on Stage

     

    Text Component

    2) Adding a text component workflow

  • Container

    Container is dedicated for grouping other components and working with them as with one (grouped) element. It allows grouping of different components where afterwards you can move around your grouped components or apply animation to all of them at once. Nesting multiple containers allows having more animations applied to the same components.

    Use Components Tree (that is accessible from the left panel) to move components/layers into a container or you can apply more components inside of it by double clicking on the Container.

     

    Cont _comp

    1) Container component applied on Stage

     

    Container Component 

    2) Using Container component workflow

  • Buttons

    Button components in builder:

    a) Basic

    b) Close

    c) Navigation

     

    Button components

    1) Selecting button components workflow

    Basic

    With our simple button component you can easily create as much as you like call-to-action buttons. Component is easily editable. Change texts, fonts, font sizes, colors without any hassle. You can also change how the button should look like when the user hover's or click's on the button by simply switching between different states in our settings UI (visible in the screenshot).

    Basic _btn _comp

    1. Basic button component applied on Stage

     

    Basic button component

    2. Basic button component usage workflow

    Close

     Close button component is a simple manifestation of a basic button. With this you can simply add a close button functionality to any of the ad's you are building (mostly used within floating and expanding ad's). 

    Close _btn _comp

    1) Close button applied on Stage

     

     Close button component

    2) Using close button component workflow

     

     

    Navigation button component is a simple manifestation of a basic button. With this you can simply add a navigation button functionality to any of the ad's you are building. Mostly used together with Product DCO, Panel Slide, Cube or other similar components.

    Nav _btn _comp

    1) Navigation button applied on Stage

     

    Navigation button component

    2) Using navigation button component

  • Product DCO

     Product DCO component is a simple ability for you to create a DCO ad with Studio. This component is highly configurable via settings (visible on the left in the screenshot).

    Product _dco

     1) Product DCO component on top of Stage

     

    DCO component 

    2) Adding Product DCO component workflow

  • Video

    Please note that you can simply drag and drop your video on top of builder. It is the simpliest way of applying a video to your builder ad. You can select a video component from the components selection menu or simply upload it via settings user interface menu (visible in the screenshot on the left).

    This component is highly configurable. You can apply several videos, change video settings, apply posters or clicktags.

    Video _comp

    1) Video component applied on Stage

     

    Uploading Video

    2) Uploading video workflow

     

    Drag and drop video

    3) Drag and drop video workflow