Linear Animation

When selected, the Linear Animation will open the following window (new design starts in version 2.4 to fit old monitors and projects with resolution of 1024×768):

Screen Shot 2013-07-12 at 12.53.58 PM

You need to enter a Name for the animation (or accept Kwik’s suggestion). Kwik will cleanup your name if it contains spaces, strange characters, Lua reserved names, and/or if the length of the name is bigger than 15 characters.

Kwik automatically uses the selected Layer option (in this example, layer title). If you intention is to animate a group or the full page, select the appropriated radio button (and the group name).

Properties panel:

Information about the current layer content will appear in the top of the window (position and size). It is important to understand that animations will always use the current position of the layer, group or page as starting point.

Animations end position can be:

  • Fixed: in this case, use the sliders/buttons (+/-)/fields to enter the end X and Y positions, in pixels;
  • Random: in this case, select the checkboxes for X and Y positions you want to randomize. Use the two fields in the right of each axis to set the boundaries for the end position. For example, if you select 100 and 500 for the X axis, your animated object will end anywhere between horizontal position 100 to 300;

Important: DO NOT press ENTER after entering manually data into the Fixed X and Y fields. There is a bug in Photoshop that will crash the application if you do it;

Group animations control end position: When checked, do not add end positions to the animation, leaving the positioning control to a group animation where this linear animation is a member;

Duration: this is the total time, in seconds, from start to end positions of the animation;

Delay: wait time before the animation starts. if 0(zero), animations starts when the page loads;

Alpha: final transparency when animation ends;

Pause when completed: if checked, the animation pauses when it reaches its ending;

Easing: lists all available easing options (speed before/during/after) for the animation. Samples can be found clicking the info button to the right;

Loop: amount of times the animation will repeat;

Reverse at ending: if checked, animation plays backwards when it reaches its ending;

Rotate: angle number of rotation when animation ends;

Anchor point: lists all available anchor point options for the animation rotation. For example, a circle should rotate using its middle center point;

Preview: this button, when pressed, previews the rotation in the canvas;

Undo: this button, when pressed, undoes the previous rotation preview in the canvas;

Scale W and H: scales, in percentages, the object during the animation;

Starts: sets when the animation starts. Options are:

  • When page starts: in this case, the animation automatically starts with the page (respecting the Delay option above);
  • Wait request: in this case, the animation will only play if activated by a button or action;

Return to start pos. after play: returns the object to its original start position when the animation ends;

Breadcrumbs panel:

Enabling breadcrumbs allow the user to see dots (rectangular or circular) behind the animated object, while it is animating.

Enable: if checked, draws breadcrumbs behind the animated object;

From: sets the position from where the breadcrumbs will show up;

Shape: sets the breadcrumb as a rectangle or a circle;

Width/Radius: sets the width, in the case of a rectangular shape, or radius, in the case of a circular shape, of the breadcrumbs;

Height: sets the height, in the case of a rectangular shape, of the breadcrumbs;

Color: sets the color of the breadcrumbs (you can enter it manually or use the color picker button) – if you write “rand”, the breadcrumb color will be randomly picked;

Interval: sets the distance between breadcrumbs (this distance is defined accordingly the duration and distance from start to end point of your animation;

Dispose: when checked, disposes each breadcrumb after the time set in the seconds field;

Important: Animations with breadcrumbs will always appear on top of all other screen objects (independent of its original layer position)!

Optional Audio/Action panel:

Audio: plays an audio together the animation. For example, you may have a tweeting audio playing while a bird flies around the screen;

Action: triggers an action together the animation.


ABOUT GROUP ANIMATION: check this tutorial here for more info /tutorials/video-tutorial-animating-groups-beginner/