Tiling and ア ニ メ ー シ ョ ン animations with file objects

4,863

けも

けも

CLIP animation (.clip) files can be read as file objects as they are

File objects can be tiled

By combining this, you can create a tile that animates

 

The CLIP file that read the file object

And read it as a file object

Create more complex animation tilings

 

If you make it complicated, there will be no time to render

Since the explanation here will also be difficult

Making it easy to do

 

On the way, there is also "Bug 👻" and its "Avoidance" (ver.1.9.7)

Rotate cherry blossoms

Create a "new illustration"

File name "sakura400" Unit "px" Width "400" Height "400" Resolution "1200" Basic expression color "Color"

Select "Grid" from the View menu

Select "Grid Ruler Settings" from the View menu

Set "Grid Ruler Origin" to "Center"

With the ellipse sub tool of the shape tool

Snap to the grid and draw a (200x200px) "circle" in the center of the canvas

Draw cherry blossoms so as not to protrude from this circle

Because drawing is troublesome, I'll use the tone net

(1200dpi)

 

Select "Tone" from "New Layer" in the layer menu

Set the tone number to “5”, density “34”, type “Sakura (medium)”, angle “0” (this is the result of trial)

Set the sub tool to "Layer Move"

Set the movement target to "tone" in the tool property palette

Drag the sakura tone to the center of the circle on the canvas

Before you forget, move the target of "Move layer" back to "Layer"

Select "Rasterize" from the layer menu

The tone layer has been converted to a raster layer

 

I do not need a layer mask so I will throw it away

Creates a selection and deletes all but the central "cherry blossom"

Also hide the "circle"

 

"Cherry blossoms" look off center,

You can confirm that it is the center by displaying "circle"

If you confirm, you can discard the "circle"

Make "image material layer" to rotate "cherry blossom" in the center

Choose "Select All" from the selection menu

 

Choose "Convert Layer" from the Layer menu

Name it "sakura" and type "image material layer" and click "OK"

 

"Deselect" in the selection menu

Select "Timeline" from the window menu

Click the "New Timeline" icon on the timeline

 

Set the frame rate to "24" and the playback time to "12 + 0" (second + frame)

Make the sub tool an "object tool"

Keyframe operations use many object tools

 

Click the "Enable layer keyframes" icon on the timeline

Press the "Keyframe interpolation" icon on the timeline and select "Keyframe to create: Constant velocity"

Make sure the first frame is selected and click on the "Add keyframe" icon

A keyframe is added to the first frame of the timeline

Click the "last" icon next to the two play buttons on the timeline

The last frame of the timeline is selected

Set “Rotation Angle” in the Tool Property Palette to “720”

(This is the "cherry blossom" turns right twice in 12 seconds)

 

Select the last keyframe on the timeline

Move a keyframe one frame to the right outside the timeline display

(This operation cannot be undone except undo)

Save "sakura400"

"Sakura blossom" rotates slowly when playing the animation

It's not really interesting because it's not handwritten

Move cherry blossoms

Create a new "New Illustration"

File name "sakura1600" Unit "px" Width "400" Height "400" Resolution "72" Basic expression color "Color"

 

Select "Grid" from the View menu

Select "Grid Ruler Settings" from the View menu

Set "Grid Ruler Origin" to "Center"

Select "Create file object" from "Import" in the file menu.

Load the previously saved (sakura400.clip)

 

Select "Object tool" of sub tool

Check the tool property palette

Uncheck "Draw Paper" in "Render Settings"

Check "Tiling"

Show timeline

Click "New Timeline" in the timeline

"OK" with the frame rate "24" and the playback time "12 + 0" (second + frame) as set earlier

 

Copy "sakura400" in the layer palette

Name each layer "sakura400A" "sakura400B"

Move "sakura400A" to the upper left Move "sakura400B" to the lower right

Hide "sakura400B" in the layer palette

You can leave it displayed, but it may get in the way

Select "sakura400A"

 

Click `` Enable keyframes for layer '' in the timeline

Select "Keyframe to create: Smooth" for "Keyframe interpolation" on the timeline.

Make sure the first frame is selected and click "Add keyframe"

Select the frame one second later (25th frame) and click "Add key frame"

Keyframes are added to each frame of the timeline

Select (13 frames per second) in the timeline

Move "sakura400A" layer down (300px)

 

(2 seconds 13 frames) and select "Add key frame"

 

(3 seconds 01 frames)

Move "sakura400A" layer down (300px)

(4 seconds 01 frames) and select "Add key frame"

 

(4 seconds, 13 frames)

Move "sakura400A" layer to the right (300px)

 

(5 seconds 13 frames) and select "Add key frame"

 

(6 seconds 01 frames)

Move "sakura400A" layer to the right (300px)

 

There is no illustration

(7 seconds 01 frames) and "Add key frame"

Select (7 seconds 13 frames) and move the layer down (300px)

(8 seconds 13 frames) and select "Add key frame"

Select (9 seconds 01 frame) and move the layer down (300px)

(10 seconds 01 frames) and "Add key frame"

(10 seconds, 13 frames) and move the layer to the right (300px)

(11 seconds 13 frames) and select "Add key frame"

 

Finally

(11 seconds 24 frames) and move the layer to the right → (300px)

Select the key frame (11 seconds 24 frames) and move it to the right outside the display

Display "sakura400B" while displaying "sakura400A" and select

Select the first frame

Enable layer keyframes

 

"Add a key frame" at (0 second 01 frame) and (1 second 01 frame)

 

There is no illustration

(13 frames per second) and move the layer up (300px)

(2 seconds 13 frames) and select "Add key frame"

Select (3 seconds 01 frame) and move the layer up (300px)

(4 seconds 01 frames) and select "Add key frame"

Select (4 seconds 13 frames) and move the layer ← left (300px)

(5 seconds 13 frames) and select "Add key frame"

Select (6 seconds 01 frame) and move the layer ← left (300px)

(7 seconds 01 frames) and "Add key frame"

Select (7 seconds 13 frames) and move the layer up (300px)

(8 seconds 13 frames) and select "Add key frame"

Select (9 seconds 01 frame) and move the layer up (300px)

(10 seconds 01 frames) and "Add key frame"

Select (10 seconds 13 frames) and move the layer to the left (300px)

(11 seconds 13 frames) and select "Add key frame"

 

Finally

(11 seconds 24 frames) and move the layer ← left (300px)

Select the key frame (11 seconds 24 frames) and move it to the right outside the display

This concludes the work on keyframing

Next, change the canvas size to (1600 x 1600px)

There is a "defect"

 

Try the bug first

 

Select "Change Canvas Size" from the Edit menu

"OK" the reference point at "center (■)" width "1600" height "1600"

 

There is no problem if you keep 400px

The reason we increased it to 1600px

This is because it becomes easier to handle when you load it as a tiling, deform it and spread it

Write this out as an animation (including bugs)

Some animations are not exported correctly

 

to correct

"Cancel (ctrl + z) (command + z)" of the edit menu returns to the canvas size before change

 

Again, select "Change Canvas Size" from the Edit menu

Change the reference point to "upper left (■)"

OK with width "1600" and height "1600"

Save "sakura1600"

Export animation

The animation tiling material is ready

 

If you delete "sakura400"

Be careful not to delete "sakura1600" because it will not be played

Use as tiling material

I will create a new illustration again

File name "sakura" Unit "px" Width "1600" Height "900" Resolution "72" Basic expression color "Color"

When creating animation, let's set "resolution" to (72) as much as possible

Select "Create file object" from "Import" in the file menu

Load the saved (sakura1600.clip)

 

Check the tool property palette

Click "Render Settings" and uncheck "Draw Paper"

Set "Transformation method" to "Free transformation" (others are also acceptable)

Check "Tiling"

Drag the control points at the four corners of the loaded "sakura1600" and transform them freely

Infinite tiling is completed

(There is no problem even if you use other deformation methods!)

 

Because it is a precious cherry, I made the cherry-colored "solid paint layer" clip

Show timeline

Create a "new timeline"

"OK" with the frame rate "24" and the playback time "12 + 0"

 

Animate with "Play" as it is

"Cherry blossom march"

The animation pattern is ready

 

You can play by placing the character and changing the color of the flower

Because the capacity of animated GIFs would be enormous, it could not be made into a complicated picture

The rendering time is just too scary

The "interpolation method" of file object deformation was set to "high accuracy (average of color)".

And back to "soft contours (bilinear method)"

It was also surprising that the writing stopped

Reduce export size, decrease frame rate,

I wrote many times in tests

Adjusting the rendering may have been more difficult than expected

 

At first I applied gradation to the cherry blossoms and placed 3D under the cherry blossoms,

All rejected due to excessive GIF capacity

in conclusion

Sometimes doing complex things with object files

Playback may be messed up or export may not work

I wanted a little more professional software

I love CLIP!

Comment

New

New Official Articles