AE production simple common dynamic effect

When we interact with design, most of the time is based on the considerations of interface and functional logic, and the interaction effect is considered.

How do we make the interactive effect intuitive performance, in addition to using axure to make interactive dynamic effect, PS draw gif, code design dynamic effect,

There is also a very easy to use tool, that is Adobe's Ae,ae is a powerful late software, but also can be used to make a lot of

Intuitive and dynamic preview effect.

Common dynamic effects are: Zoom, gradient, transparency changes, rotation, sliding left and right, sliding out, jumping, color changes.

1. First after the installation of AE opened, the interface default center is a preview, the left is the material window, the bottom is the timeline and layer.

We can use the right button to import the material, or in AE directly with the above tools to draw to create the desired effect. Drag the footage to the layer, above the preview area

We can see the material we put in.

2. Because of the relatively simple effect, here I was directly in the AE to draw some simple graphics, put into the layer window, we first do a displacement effect, extrapolate

It will be soon.

Click on the triangle to expand the layer's various effects properties, open the transform, the right drag the red line above the Blue slider to adjust the time, starting from 0s so drag the pointer to 0s,

On the left, click on the icon of a similar alarm in front of the position to start recording the key frames.

Then drag the pointer to 01s and then adjust the coordinates after the position, I am here to do the y-axis changes, so just adjust the y axis coordinates of the value can be.

This takes place from 0 to 1s with the effect of moving along the y-coordinate position. In addition to displacement, scaling rotation these are the same reason.

3. Now let's try the cover of the production, we create a new project team, in the material area right click on the new synthesis, adjust the length of other defaults can be.

Use the rectangle above to draw two rectangles of size 560*210 (wide and high fit, not necessarily this), fill in a few different colors, and drag to the canvas

Outside alignment, the first effect is to move the top and bottom of the graph to the middle, so it is the change along the Y axis, using the position key frame to adjust, along the y/x axis

Coordinate parameters, here is the state of frame No. 0 (x:281,y:897.4)

Below look at the state of 0.05s, note that the x/y axis coordinate data changes, the Y axis of data into 649.4, so this is a y-axis of the key frame animation.

4. Use different effects to adjust the key frame, you can zoom rotation gradient and so on. Other material dragged into the layer is the default for all the time long

You can drag through the timeline to adjust the length of the footage to determine the time displayed. Click on the material after the mouse left and right will appear to drag the mouse pointer, then

You can drag to adjust, in the English input state, IO and [] These four keys can be quickly aligned to drag the pointer, cohesion of different materials.

6. By adjusting the key frames for different effects, and then expand all the key frames selected, press F9 to open the Curve editor to simulate the real state of motion.

Students interested in the motion curve can click here to see a great God's analysis of the motion curve.

7. The effect can be previewed after the good, no problem can be synthesized, composite accelerator x (SHIFT+COMMAND+M), WIN (ctrl+m)

Because we want to export a GIF, we render it as a sequence frame of the picture, and then we add PS to the Web format. The rendered parameter is set to

JPEG sequences or PNG sequences are available, so choose the JPEG format, given the size.

8. After the click Rendering, after the rendering of the picture with PS Open, check the image sequence, and then point file-Export-Save as the Web, format selected GIF.

Then do some other parameter adjustment, try to control the image quality and file size balance, a dynamic effect of the preview is done, basically cooked

If you do, you'll soon be able to fix some simple or medium-hard effects.

9. Because the dynamic effect involves physics, so we can observe some basic things of the motion characteristics, can be adjusted by the motion curve of the dynamic effect,

In the interactive design can play a number of icing on the cake, while the UI and interaction or product does not have to be very professional to create dynamic effect,

Learn some simple skills, in the work of a certain role is OK, after all, there are professional dynamic designers in it.

10. Finally put Zhang to do a 2-hour effect picture, the poor place also hope that the great God will not hesitate to enlighten.