Disclaimer: This document is designed to give you a basic overview of animation in

Clickteam Fusion. For more detailed and comprehensive views of the software’s
mechanics, I recommend watching some tutorials on using it to make games (the
intended purpose of Fusion) to better familiarize yourself with the UI. If you need
examples, I have the files for nearly every animation I’ve made in fusion on the Internet
Archive here: ​https://archive.org/details/sweeneezysources​ I have added the file I’m
using here named “demo.mfa” for you to examine. Good files to look at include
duck.mfa (Duck of Muck), dawg.mfa (Copp Dawg) and whpresents1 (Weirdo House
Presents: Flowers for Franksylvania). Merry Xistmas, and I hope you find this document
useful.
● Make a new file, and right click and give it a Frame. A Frame is your shot for
animation.
● On the left is our file. If we click on the file we can modify the properties for the
whole application, changing it’s resolution and modifying how it runs, which we’ll
return to later for recording our animation.
● First add some GLOBAL EVENTS, which will be code that’s running on every
frame. Click edit, which opens the EVENT EDITOR.
● Basically this is coding with premade phases. Add a NEW CONDITION, click on
the KEYBOARD, and choose “Upon Pressing a Key”, then hit Escape. What this
is saying is in any frame, if we hit escape, whatever is in this row will happen.
Let’s go over to Storyboard Controls, which is for controlling the application as a
whole, and say “End Application”. I’ll also add Right Arrow and Left Arrow
conditions, for Next Frame and Previous Frame respectively. I have this setup on
every file so I can navigate between frames when running the application, since
we’re making pseudo-games and there’s no way to scrub through a timeline like
you would on a video or animation. That’s all I need in my Global Events, so we
can move onto our Frame.
● Here’s our empty frame. We can mess with it’s properties on the left. The SIZE is
for the amount of space we can scroll around in the frame, so if you wanted to
pan across something big you’d make this bigger, but usually it’ll just be the
same as your resolution. There’s some extra options in here, like transitions, but I
generally find that is best left to video editing later.
● OBJECTS
○ Let’s add some objects by RIGHT CLICKING in the Frame and hitting
Insert Object, or CTRL-J. For animation, there’s only a few you’ll be using.
Active objects are the most common, anything you want to move or play
animations will be an Active. Backdrops are static images, and Quick
Backdrops can be flat colors or tiled images. On the left are all the Objects
in our Frame. If you want to organize them, you can right click in the
Workspace Toolbar and hit New Folder, then drag objects in.

○ Make a ground texture with our Quick Backdrop. Grid snapping on, which
you can see and mess with at the top left. Click on the Quick Backdrop to
select it, then click again to bring up the handles to scale it. Stretch it out,
then go into the settings. Change the Fill to Motif, and hit Edit to open the
Image Editor.
■ The fusion Image Editor is crude but functional. Hit New to clear it,
then Fill and Draw something and hit OK. There’s our tiled ground.
Do the same thing with our Backdrop for the background.
■ Go into the Active Object and make a character. What a beauty.
Active Objects have animations, which we can edit at the bottom
here. This Stopped animation will play by default when he’s not
doing anything else, so I’ll just give him a simple breathing
animation. Add a frame with the Plus, and change him a bit.
■ Your Action Point tells each frame where to be placed relative to
the previous one. I’ll move it on my second frame, then use the
 Onion Skin slider to show where it aligns with the first. Generally it’s
best to have it either in the center or at their feet.
■ Set the speed of this animation in Direction Options. You could tell
it to repeat a certain number of times, or just to Loop infinitely. You
can change which frame it loops back to, but we don’t need to. Hit
Play to preview your animation.
■ To make a version of him facing to his left, right click and hit Create
Opposite Direction, then right click and say Flip Vertically.
■ Give him a walk by hitting Show All. These animations are triggered
automatically on certain events, so Walking will play when our
character is moving. Give him an animation and make sure to
double it over to the other side. Make sure it loops.
■ Give him a Talking animation by right clicking and hit New, then
make something simple and have it loop.
○ Now we’ll set up a movement for him to walk.

■ Go into Movement Properties and give it a new movement by

clicking the plus and minus. Hit new, and call it path. Set the type to
Path, then Edit it. Hit new line, and set it to where you want him to
go. You can set speed on the nodes, but it’s easier to do it in the
event editor.
■ Go into the Event Editor and make a new condition for when the
Timer is Equal to 1 second. Add an Action to the Character and do
Movement-Multiple Movements-Select Movement and pick our
path. Add another Action to set the speed to something like 6. Play
the frame to see that.
■ Make him say something at the end of his path. Add a condition for
our character when he reaches the end of his path with
Movement-Path Movement- End of it's Path. Add an action under
Audio and hit Play Sample. You can browse for a file here. Once
you’ve brought it in, select the sample. Add an action for the
Character to make him talk with Animation-Change-Animation
Sequence and pick Talking.
■ Make him stop talking once his line is over by adding a Time
Greater Than 7 Seconds so it waits until his path is over, and add
another condition for when A specific Sample Isn’t Playing, and pick
our sample.
■ Add another action under Timer to Fire Event After Given Delay,
and set it to 1 second. Name the event “end”. Add a new condition
 Timer-> On Event - “end”, and add a Storyboard action of Next
Frame.
○ Congratulations, you have made a simple shot. Almost everything can be
done with these conditions and actions of timers, events, paths and
samples. Here’s a few things to keep in mind on your toons.
■ Because this technique is kind of a hack, if you’re trying to do a lot
in one frame it may get unwieldy. I recommend keeping the actions
as short and simple as possible for each frame.

■ I’ve found that it’s easier to use Events over Timers for almost
everything because you can adjust elements timing individually
without having to adjust the timer values of every event after it. If
you download my file for Weirdo House you’ll see I’ve actually
created a crude timeline system, with 26 events with each event’s
timer tied to a variable in a single object, so you can edit the time
between the event being triggered and firing without having to edit
the event itself, only changing the variable. You are welcome to use
this code, just delete all my weirdo house assets from the frame
and keep the Clock object and you’re set.
■ In addition to the Action Point of your sprite, the Hot Spot is a
coordinate you can use to set an object's position to. In this frame,
I’ve set this character’s Hot Spot to one side, and made an Always
condition to set this Gun to the Hot Spot.
■ That Always condition is at the top and the conditions proceed
down for ease of use, but the event editor isn’t chronological.
They’re being compiled in this order, but that’s at a frame level.
These conditions can go off at any time no matter their place in the
editor, they could be completely scrambled and the frame would
run pretty much the same, they’re just firing these events when that
condition is met.
​ eing run in order, so
■ However, the events within a condition ​are b
you may have to fiddle with things there by going into the Event List
Editor and changing which order the events go off.
■ If you want a bigger scene and to move your camera around, make
an object and add an Always condition, under Storyboard - scrolling
- center window position relative to your object. As the object
moves, the camera will move with it.
■ In order to avoid Fusion’s crude image editor, you may opt to import
images drawn in something else. You may run into issues with
transparency because Fusion’s default alpha channel is pure black
unfortunately. To change the transparency color, Alt Right Click on
a color. This is on a per-frame basis, so for ease of use export your
sprites on a specific color that can be easily picked out in the
importing process.
● Turning your fusion files into a video is slightly roundabout. Essentially we’re
screen capturing our animation as it plays to edit it later. To cleanly upscale your
video, enable Maximized on boot-up, disable the heading and menu bar, enable
Resize display and Fit inside. Make sure your border is set to black. I use OBS,
you can record the whole screen or set it to record only your application. There
will usually be moments before everything is fully loaded, so you may have to
add either a buffer timer or frame and trim those out. From here, it’s off to the
races with editing, which is it’s own process.