anivendo Documentation

INSTALL

Windows

  • Please install anivendo as Administrator
    • right click on "anivendoWinstaller.exe"
    • and choose "Run as administrator"

SETTINGS

size preset

  • add, change and delete predefined Banner sizes
  • In first Input Field enter Banner Size: [width]x[height] (in Pixel values)
  • In second Input Field enter a short Description

[a href]

  • define Banner <a href>-wrap
  • Predefined is a Firefox-Workaround, witch will fix the issue, that Firefox shows [object Window] after clicking the Banner

Path to TweenMax

  • Paste link to TweenMax CDN or keep unchanged using DoubleClick CDN.
  • Please insert link to TweenMax Version >1.18
  • anivendo animates Banner with GreenSocks TweenMax
  • TweenMax is the fast, lightweight, and flexible core of GSAP (GreenSock Animation Platform), a JavaScript library for HTML5 animation.

Content Delivery Networks (CDN)

 

LEFT TOOLBAR

Banner Background Color

  •  set Banner Background Color via Color Picker
  •  or click Pipette Icon (will turn green) and then click a color in a Banner Image.
  •  click here to show Image Assets in Banner Overflow

IMAGE ASSETS

Create Banner & Import Image Assets

  • Design your Banner with Photoshop, Gimp, Fireworks etc...
  • Export Images to your Banner Project Directory on HardDisk.
  •  Import Images in anivendo using Import-Button in Left Toolbar
  • Images will be placed directly into the Banner. Multiple Selection in upload-Dialog is possible.
  • Each Image will create a Layer (in right Sidebar) named after the image.

Place Image Assets

  • to move an image, simply click on it or click on it's Layer.
  • move Images via
    • mouse Drag&Drop 
  • or...
    • arrow-Keys (moves image in 1px steps)
    • You can hold Shift & Arrow-Key to move Image in 10 Pixel Steps
  • or...
    •  input a Pixel Value
       
      click    to adjust Image to left:0px
  •  or...
    • move Mouse to x: or y: input Field, click and move mouse up or down to increase/decrease input Value

Move Image to Front or Back

  • to move an Image to Front or Back drag & drop it's LAYER with

Hide Image

  • to hide an image click Layer Icon 

Delete Image

  • to delete an Image click Layer Icon 

Scale Image

  •  Proportional Image Scaling can be done with width and height Input Fields (Pixel Values)
  • or move mouse on width Input Field, click, hold and move mouse up or down to increase/decrease Input Value.
  • click on      to reset input values.

LAYER

  • each image import will create a Layer (named after image Filename)
  • click on Layer activates it's element and shows Tween Values
  • You can select multiple Layer (Stagger & multiple Element Animation) by holding the shiftKey and click on Layer (turns green).
  •  Drag&Drop Layer up or down to set it's Image to Foreground / Background
  •  show/hide Image
  •  delete Image and It's Tweening
  •  click on this Icon to change the element order.
    • After click Icon will blink
    • Now click each Layer of the desired element order (You don't have to hold shiftKey)
    • when finished click Icon again.

TWEENING

tween2

Duration

  • TweenDuration (1 = 1 second | 0,5 = 500 ms) of selected Element
  • Hold ALT-Key and click on input Increase/Decrease Arrows to switch to 0,1 steps)

Delay +/-

  • starts Tween delayed with selected value
    (1 = 1 second | 0,5 = 500 ms)
    (-1 = minus 1 second | -0,5 = minus 500 ms)
tween3

Stagger

  • Create staggered Tweening on multiple elements
  • To select multiple elements hold SHIFT-Key and click on elements Layer
  • You can change the element order of multiple Element Selection later with      Icon (see Layer...)

StaggerDelay +/-

  • Delay between staggered Tweening
    (1 = 1 second | 0,5 = 500 ms)
    (-1 = minus 1 second | -0,5 = minus 500 ms)

Stagger will enable cycle Property to Tween (learn more...)

tween4

From

  • Element Tween will start from the specified Tween Values

To

  • Element will tween to the specified Tween Values

fromTo

  • Element Tweening will start from the specified Tween Values on the left and will animate to the specified Tween Values on the right
tween5

Loop

  • check this to add a Loop to selected Element Tween.

repeat

  • Number of Tween-Loops

delay

  • Delay bettween Loop-Repeat

Yoyo

  • Causes the tween to go back and forth, alternating backward and forward on each repeat.

  • Check this to create a New Timeline.
  • This will cause an infinite Loop (repeat: -1) of the Element during the whole Animation Progress!
tween6

alpha

  • Element opacity
  • 0      =   transparent
  • 0.5   =    50%
  • 1       = 100%

scale

  • 0      =      0%
  • 0.5   =    50%
  • 1       = 100%

 deletes value
 switch value between 0 and 1

 

x

  • Animation on x-Axis (Horizontal)
  • 100  = 100 Pixel to the right
  • -100 = 100 Pixel to the left

y

  • Animation on y-Axis (Vertical)
  • 100  = 100 Pixel to the bottom
  • -100 = 100 Pixel to the top

scaleX

  • Scale within x-axis
  • 0      =      0%
  • 0.5   =    50%
  • 1       = 100%

scaleY

  • Scale within y-axis
  • 0      =      0%
  • 0.5   =    50%
  • 1       = 100%

rotation

  • rotate selected element
  • in °degrees

ease

  • An "ease" alters the rate of change during a tween. This essentially gives the movement a different "feel". There are many to choose from and the best way to understand the various options is to experiment with them.

 cycle

  • The cycle Property is available to stagger Tween only!
  • To activate "Stagger" select multiple elements by holding SHIFT-Key and click on element Layer
  • Instead of defining a single value (like x:100), anivendo defines an Array of values to cycle through
  • Example:
    x: 100 with clicked cycle (turns green) animates the tween alternately through the selected elements x: 100, x: -100, x: 100, x:-100 ... depending on how much elements are selected.

SEE THE CYCLE PROPERTY IN ACTION:

tween7

Tween Instances

  • shows all Tween Instances of selected element
  • click on Instance to show/change it's tween Values and activate it's Scene.
tween1

Add Additional Tween Instance

  • to add a Tween Instance to an element that has already been animated, click "add new Tween"
  • anivendo adds a new Timeline Scene and a new Tween Instance.
  • set Tween values for new Instance.

Preview Tween

  • click on "preview" to see only the active Tween in action!

AUTOMATIC CALL TO ACTION ANIMATION

  • anivendo comes along with an automatic call-to-action Animation Feature
  • All you have to do is name your call-to-action img-Button "cta.jpg/gif or png"
  • Import it  
  • click on cta-Image or cta-Layer
  • Tween Windows will show
  • you can define the delay before call-to-action Animation will beginn,
  • the Animation Template
  • the amount of Time until call-to-action Button will Hide (keep unchanged to leave Button as is).

Integrate Cursor Animation

  • you might want to use a cursor on your call-to-action Animation.
  • anivendo will take care of it's Animation automatically...
  • ... simply name your cursor-Image "cursor.jpg/gif or png"

TIMELINE SCENES

  • As soon as you select an Element that has not been animated yet and set a Tween Value anivendo creates a Timeline Scene.
  • A Timeline Scene represents the Element Animation within the Timeline.
  • Click on a Timeline Scene to change it's Element-Tweening.

There a two types of Timeline Scenes

  • Tween within Main Timeline
  • Tween (Loop) in Extra Timeline

Change Postion

  • To change a Scene position within the Timeline:
  • simply move mouse over scene, cursor will change to "cross"
  • Drag&Drop Scene to the left or right

Icons used in Scenes

  •  FROM Tween
  •  TO Tween
  •  fromTo Tween
  •  Loop
  •  Yoyo

Delete Scene

  • to delete a Timeline Scene and it's Element Tween(s) click on 

BANNER EXPORT (Strg+E)

  • Check "Single File Solution" to export a single HTML-File (css, external js and images are Inline)
  • This is very useful for customer Presentation
  • Note: This option will increase File-Size!
  • It's not recommended to use this file in AdServer.

  • Offline Version means there are no external includes in HTML-Export-File.
  • AdServer js-Libraries will be created in Project Root-Directory.
  • And will be included locally in HTML-Export-File.
  • Offline Version is available only for anivendo predefined AdServer Environment.

  • check this to add a 1px solid border to your Banner
  • you can input a Hex Color Value (f.e. #ffffff = white)
  • or click on pipette (turns green) and choose color from Banner Image
  • defined color will be shown in color field behind pipette
  • In future Version there will be an opportunity to enter or choose px-width of border and type of border

  • in clickTag you can enter a Placeholder-URL which can be replaced in AdServer
  • or the Banner-Target-URL

CUSTOM ADSERVER ENVIRONMENT

 

  • I think there is no way to implement all necessary AdServer Environment, so I decided anivendo has to be able to allow users to create their own AdServer Environment!
  • click on       in Export-Dialog (Strg+E)
  • Custom AdServer Environment comes along with several Code-Highlight Themes:

To create a custom AdServer Environment

Enter a Titel in Name: input field

  • anivendo HTML-Header for Export-File
  • This Section is not editable and shown only for the big Picture

  • In Javascript Head Section you can enter a script include to your AdServer js-Library
  • For Example:
    <script src='https://s0.2mdn.net/ads/studio/Enabler.js'></script>
    to include Google DoubleClick enabler Library
  • Within <script>Tag you can place any required js-Function.

  • Place your css here. Please do not change or delete predefined styles.

  • Change the way <body> is included
  • For Example:
    <body onload="myFunction()">
  • change href atrribute
    The href attribute specifies the link's destination

  • anivendo Banner-HTML for Export-File
  • This Section is not editable and shown only for the big Picture

  • REQUIRED: Please specify <script src> to TweenMax Content Delivery Network
  • for Example:
  • Within <script>Tag you can place any js-Function.

Create Environment

  • After finishing all input click "create Environment"
  • The Dialog will be closed and your custom AdServer Ernvironment will be preselectet in Export-Dialog.

Change Custom AdServer Environment

  • to change a custom AdServer Environment simply select it
  • and make changes in Textarea Fields
  • when finished click "change Environment"

Download Custom AdServer Environment

  • you can share your custom AdServer Environment or transfer it.
  • click on    behind Name input Field
  • anivendo shows a Save Dialog and you can download the aev-File.

Imnport Custom AdServer Environment (Ctrl+I)

    • to import a custom AdServer Environment (aev-File) choose Project > import Environment

 

ANIMATION CODE EDITOR (Strg+Y)

  • anivendo comes along with a Animation Code Editor

  • This feature allows experienced GSAP User to make changes in TweenMax-Code.
  • Note: As soon as you change the code, anivendo disables all of it's Animation Features (Layer, Tween, Scenes)
  • To reset your code changes click "Reset Changes"