TemplatesWidgetsBundles

Samples Notification  Remote Triggering  Scroll                                FeaturesHelp / DocumentationGet it here 

1. Assigning Options

Widget itself

 

2. Preset Animations

3. Remote Triggering

Summary

4. Timing

5. Customized Animation

Animated Object  allows you to animate almost any object. it provides you with different options on how the animation triggers and how to assign the animation to an object.

© Copyright 2015 - QooQee.com

Installing the widget

After you got the widget, to your account and click on the DOWNLOADS button to will receive a .zip file, unzip the file and Install the widget.

Widget options

Click on each section to see the details.

1. Assigning Options

There are three assigning Options.

1.a  Widget itself

The widget container can be used as an object. By choosing this option you can add a fill color and/or background color to widget and customize the animation.

  • This option is good for when you are trying to have multiple animated objects that are having the Customized Animation. If you use the Graphic Style in such a case you will have to assign one Graphic Style to each differently animated object but with the Widget Itself option you can simply duplicate the widget and change the customization.
  •  
  • This option is not good when you want to apply the animation to a text box. For that purpose, you can use the other two methods.

 

1.b  Objects with a certain Graphic Style

This method is the best way to apply the widget to any other object.  Take the following steps for this method:

  1. Set the "Apply to" option to Objects with certain Graphic Style
  2. Assign a Graphic Style to your Object. Click Here to see how.
  3. Enter the Style name (that is assigned to the object) inside the widget option panel.
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  You can assign this Graphic Style to all other objects as well, but note that it only transfers the animation that you have on this copy of the widget. To have a different type of animation on another object, do the same process with another copy of the widget.

1.b  Using tooltips to assign the animation

This is the fastest method to assign the animation to your object. In this method, you are not able to use the presets, neither the Customized Animation options, BUT you can create your own animation in a few seconds just by typing the movements you want:

Transition names  (can be combined) :

up

down

right

left

blur

shrink

scale

rotate

c.1.   up

when the animation starts, the object moves from top  to the bottom, where it is originally placed in the slide.

 

c.2.   down

when the animation starts, the object moves from bottom to the top, where it is originally placed in the slide.

c.3.   right

when the animation starts, the object moves from right to the left, where it is originally placed in the slide.

c.4.   left

when the animation starts, the object moves from left to the right, where it is originally placed in the slide.

 

c.5.   Blur

when the animation starts, the object transforms from fully blurred to its normal form.

c.6.   Shrink

when the animation starts, the object shrinks to its original size from a larger scale.

 

c.7.   Scale

when the animation starts, the object scales up to its original size from a smaller size.

 

c.8.   Rotate

when the animation starts, the object rotates, and gets back to its original form.

Steps to apply the transition names:

  1. Set the "Apply to" option to Using tooltips to assign animation
  2. Select your Object.
  3. Open the Hyperlinks panel from the top of the page.
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  Type the Transition name/s  that you want to apply to the object.

up, right, scale

In this example the object moves from top, right, and it scales down.

2. Preset animations

There are 74 preset, ready-to-use, animations that can be assigned to the object.

  • The preset animations work for the for the first two assigning methods (Graphic Style, Widget itself).
  • If you are not satisfied with any of the preset animations, you can fully customize your animation by checking the  Customized Animationsection.

3. Triggering

One of the distinguish features of the Animated object widget is that the triggering actions can be combined, and users are not limited to use only one action. If you choose to have the Customized Animation feature, or assigning through the tooltips, the Click and Hover will not be available, but for all the preset animations all the triggering options are available.

On Click

Click on the object

Entering the page from top

The animation happens only when you are scrolling back to the top and the object enters the page

On Hover

Hover on the object

Entering the page from bottom

The animation happens only when you are scrolling down to the bottom of the page and the object enters the page

All the triggering options are active

Hover, Click, Entering from top, Entering from bottom

Animation happens only once:

This option is only for when you choose to have the animation starts when the object enters the page from top or bottom. You can check the option "Animation happens only once" and the animation will not repeat when it enters from top or bottom of the page.

An interesting fact about the widget

When you select the options "Entering the page from top" and "Entering the page from bottom" you do not get to assign any offset number, however the widget is smart, and based on a few factors, it understands when is the best time to trigger the animation, so the end user sees the entire transition and will not miss any part of it.

 

Even if you resize the page, the widget does the math and gives new numbers to the offset so the animation always triggers at the best moment.

4. Remote Triggering

The Remote Triggering option allows you to have a separate object and use it as the trigger for the animation.

For example, if you have five animated objects and you want them to start at the same time when you click on an icon, you can give a Graphic Style to that button, and use it as the trigger for all those animated objects.

  1. Check the "REMOTE TRIGGERING" option to activate it.
  2. Create your trigger, which can be any page element, for example a state-button.
  3. Assign a Graphic Style to your trigger object. Click Here to see how.
  4. Enter the Style name (that is assigned to the trigger object) inside the widget option panel.
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  To use the same trigger for another copies of your Animated Object widget in the page, enter the same style name in the option panel of all those other copies of the Animated Object so they will all be triggered by clicking/hovering on the trigger object.
  11. Remember to check the Click or Hover option, or both, on the Triggering section. Note that if you check the Remote Triggering option, you will not be able to use the "Entering the page from top" and/or "Entering the page from bottom" triggers anymore, and they will be deactivated.

Sample 1:

 

Four animated objects with different delays and rotation values that all trigger by clicking on the "Click Me" Button.

Click Me

Sample 2:

 

Five objects that are animated by the Graphic Stylemethod. Each has a separate Graphic Style and for each one there is a copy of the Animated Object widget to control its animation. they all trigger by the Click Me butt.

Click Me

5. Timing

By using the timing options you can decide when object appears, the delay before the animation happens, and the amount of times the animation repeats (the repeat option is only for presets).

5.a  Duration

The number in this option defines how long the transition takes in seconds.

 

For example - If you set the Duration to 2 (which means 2 seconds), it takes 2 seconds from the object to move to its original state after the transition starts (after the delay).

5.b  Repeat

The number of time the animation plays, but this option is only available for presets not for the Advanced Animation section, so if you choose to have an advanced animation option turned on, you will not be able to use the repeat indicator.

5.c  Delay

The number of Delay defines the amount of time (in second) before the anion starts, after it is triggered.

 

For example - If you set the Delay to 2 (which means 2 seconds), and the triggers method is "On Click", then if you click on the object, the animation triggers, but it waits for 2 seconds before it starts.

6. Customized Animation

By checking the Customized Animation option, you will not be able to select the presets anymore, but you will have the advantage of customizing the animation exactly the way you desire.  The customized transition is not available for when the assigning method is set to use the tooltips  for triggering the animation.

 

6.a  Horizontal & Vertical  Movement

The value for this options define the placement of the object where it starts the transition.

The number you enter on these options will affect the position of the object by pixels.

 

For example - I If you type 200 for the Horizontal movement, the object starts the transition from 200 pixels from  right, in compare to  its original position. The original position is where you place the object in the slider, in the design view.

NOTE - You can use both negative and positive values for thee options. The negative value for the Horizontal movement moves the object to the left in compare to its original position, and negative values for the vertical movement moves the object to the bottom at the starting point, in compare to its original position.

 

For example - I If you type 200 for the Vertical movement option, the object starts the transition from 200 pixels on top of  its original position. The original position is where you place the object in the slider, in the design view.

6.b  Scale - Rotation - Blur

These options can be used and combined with the movement options for more customization.

 

  • Scale can be used to have the object resize on its starting point.
    • To have the object starts animating from a smaller size, use the number between 0- 1 for this value.
    •  
  • Rotation can be used to have the object starts from a certain amount of rotation in its starting point
    • For each multiply of 360 that you enter in this option, the object rotates once more. For example, if you enter 720 on this option, the objects fully rotates two times.
    •  
  • Blur can be used to have the object starts with a blur effect from its starting point.

6.c  Transform Origin

This option defines where on the object the transition will be anchored.