Text and images

Words and pictures make an animation tell a story: a “POW!” on a punch, a name over a character, a hat or a sword drawn in another app. This page shows how to add text, style it and stick it to a figure, and how to bring in images.

Add text

1. In Animate, press T. Or click + (Add) at the top of the tool bar and choose Text…. The Create text window opens with a live preview on the right.
2. Type in Text. Press Enter for a new line.
3. Style it: Size · px, Line height, Bold, Italic, Alignment (for several lines), Fill and Opacity · %, Outline · px and Outline color. The preview updates as you go.
4. Click Create text. The text appears on the stage, selected, and Properties shows its Text section.
5. Drag the text to place it. Animate it like any figure: on a new key, move, turn or scale it.

Fonts and style

• Font starts on Noto Sans, which comes with StykAnimate in four styles (regular, bold, italic, bold italic). Open font… loads a .ttf or .otf file. Installed fonts… lists the fonts on your computer.
• Size · px is the letter size in scene pixels. Line height is the space between lines: 1.2 means 1.2 times the size.
• Fill and Outline color open the colour picker. An outline of 2–4 px makes text readable on any background.

Text is saved as outlines (the shapes of the letters), so your project looks the same on a computer without that font.

Example: for a comic “POW!”, use Bold, size 96, a yellow fill and a 4 px black outline. On the frame of the hit, scale it from 50% to 120% over two frames, then let it fade with Opacity.

Change text later

1. Select the text figure. In Properties → Text, click Edit text….
2. Change anything in the window, then click Apply changes. It is one step to undo. Cancel or Esc throws your changes away.

Edit text changes the text’s design: every copy and every frame gets the new words. To make the words change during the animation, use two text figures and show one after the other.

Stick text to a figure

Joining makes one figure follow a joint of another. A name tag follows a head, a speech bubble follows a mouth.

1. Select the text. Press J, or click Join… in Properties → Arrange. The stage header says Click the joint to join to.
2. Click the joint, for example Blue’s hand. Properties now shows Connection: Joined to Blue.
3. Pose Blue: the text moves and turns with that joint. Select the text and press J again (or click Unjoin) to free it.

More on joining is in Join figures.

Text from Pivot files

Text in a Pivot file can still be edited. Pivot did not save the font size, so its editor shows Scale · % instead of Size · px. Letters you keep look exactly as before. New letters need the original font: if a letter is missing, choose that font with Open font… or Installed fonts…. StykAnimate tells you instead of swapping in another font.

Add a picture

1. In Animate, click + in the tool bar and choose Image…, or use File → Import → Import sprite image…. You can also drop an image file on the stage.
2. Pick a PNG, GIF, BMP, JPEG or WebP file. It arrives as its own figure, selected.
3. Move, turn and scale it like any figure, and animate it with keys. Press J to join it to another figure.

See-through parts of a PNG stay see-through. An animated GIF comes in as one still picture.

Attach an image to a figure

A joined picture is still a separate figure. To make a picture a real part of a figure (a hat that belongs to the head, a sword drawn in another app as part of a hand), attach it in Build.

1. Open the figure in Build. With nothing selected, click Image in the figure’s quick actions (or right-click the figure and choose Attach image…), then pick the file.
2. In Sprite placement, drag the orange origin to the point the picture turns around, and the red end to where another part could attach. You can type exact X and Y, or select a handle and nudge it 1 pixel with the arrow keys.
3. Click Choose attachment. The stage header says Choose an attachment joint for the image.
4. Click the joint the picture should hang from. The picture is added as a part, with its origin on that joint, the right way up.
5. Use Test rig: turn the parent part and the picture turns with it.

Try itAttach an image

Untitled animationSaved

AnimateDrawBuild

SaveExportTest rigDone

DragMove jointRotate branch

Grid

HandlesHighlight

100%

0 of 5 done

1. Click Image in Properties.
2. Move the orange origin to the bottom of the hat.
3. Move the red end to its tip.
4. Choose attachment, then click Blue’s head joint.
5. Test rig: tilt the head.

Example: for a hat, put the origin at the middle of the brim and the end at the tip, then attach it to the top of the head. For a sword held in a hand, put the origin on the grip and the end on the blade’s tip, then attach it to the hand joint.

Background pictures

For a picture behind everything, use File → Import → Import background…. It belongs to the Scene, not to a layer. If the background has to move (parallax, a scrolling city), add it as an image figure on a back layer instead, so you can animate it.

Limits

• Images: up to 16 million pixels (for example 4096 × 4096) and 64 MB per file. Scaling a small picture up makes it blurry: start from a big enough one.
• Text: up to 16,384 characters per text figure, from the Basic Multilingual Plane (most letters and symbols, but not every emoji), with at most 255 different characters.
• A text window can load up to eight fonts, 32 MB per font file. If Installed fonts… is not available in your browser, use Open font….
• Pivot files keep text and images, but not StykAnimate effects. Save as .styk to keep everything editable.

Common questions

Related