Path Animation

When selected, the Path Animation will open the following window:

Screen Shot 2013-09-04 at 9.27.27 AM

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 audrey). 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 path animations will always use the first point of the path as initial position NOT the original layer, group or page X,Y coordinates.

Path: lists all available paths created in Photoshop for the selection.Important:the animation will follow the direction of the path. For example, if you draw your path from right to left, this is the direction the object will follow;

Closed: when checked, “closes” a path, even if it was not originally closed;

Auto turn: when checked, automatically rotates the object to simulate a “bank on turn” effect;

Rotation angle: sets the angle of rotation for the Auto turn feature;

Adjustment angle: used mostly when objects coming from right to left are behaving strangely than expected;

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;

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;

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.