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
clickto adjust Image to left:0px
- input a Pixel Value
- 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

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)

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...)

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

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!

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:

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

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
- it is possible to create your own AdServer Environment in anivendo (see Custom AdServer Environment)
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"