Introduction to Timelines

The Timeline documentation is now in the official manual. Go there for the latest information - this is now out of date

Start with the Timeline Bar manual page to get started.

Introduction

Hello all, as you may have learned by now, Construct 3 now supports timeline animations. It took a while but we finally have something that can be shown, there is still a long way to go though. There will be the obvious bug fixing, but most importantly we are expecting your feature requests. It is a vast subject, and I would like to concentrate on what our users want.

Since this is a rather large and complex feature it is still locked behind the "Enable experimental features" flag that can be found in the Settings dialog. Expect to see it in that state for a while, until we can iron out the most obvious problems.

There is still no official manual entry, because we want to be sure it is in a more stable state before committing to write documentation that might change in the near future. So in the mean time, the following quick start guide will be all the documentation available, hopefully enough to get you started.

Quick Start Guide

Enabling the Timeline feature

Go into Menu -> Settings -> Advanced and toggle the "Enable experimental features" flag.

NOTE: Make sure your project is using the C3 Runtime, timelines won't work in the C2 Runtime.

Show the Timeline Bar

Go into Menu -> View -> Bars -> Timeline Bar

At this point you will be seeing the floating pane and if you haven't noticed there should be a new folder in the Project Bar called "Timelines". All the timelines in your project will be listed there.

At this point I recommend docking the Timeline Bar either in the bottom or the top, that way you will have the most amount of horizontal space, which I find works better for this control.

Adding a Timeline to the project

The empty Timeline Bar will have some short information on how to add a new Timeline to the project. Follow any of those methods and you should be able to complete this step.

Adding an instance to the Timeline

Once you have an empty Timeline, the Timeline Bar will again show some short information about how to add an instance to it. Any of the methods will require an existing instance in the active layout, so if there isn't any yet, go ahead and add one. A Sprite instance will do just fine.

Take note of some important parts

A) The pencil icon will allow you to switch into Editing Mode, which will make a few changes to the Layout and Properties Bar

B) This is the first Master Keyframe of the animation, not so useful, but I though I'd point it out.

C) The current time marker is the red line. This one is important, because it is the main method to choose where you want to add more keyframes. It also allows you to preview the animation while Editing Mode is turned on. More on that later.

D) The total time marker is the green line. This one indicates the total amount of time the timeline will take to complete. You can drag it to change it, just like the current time marker.

Also notice the red shade of the track that was added, this means that at the moment it isn't affecting any properties of the instance, we will get to that in the next step.

Adding keyframes

There are a few ways to add keyframes, but I will be going over what I think is the fastest one to get something going.

Click the Editing Mode button in the Timeline Bar, you will notice a few changes in the Layout and Properties Bar. First the overlay color of a selected instance will turn from the familiar blue shade, to a yellow shade. Secondly, all properties in an instance that can be animated with a timeline, will also change to the same shade of yellow in the Properties Bar.

Once Editing Mode is on, drag the current time marker (red line), to the position in the timeline where you want to add keyframes.

At this point if you drag the instance to a different place in the layout and then right-click on top of it to bring up the context menu and go Timeline -> Add keyframes, the keyframes to perform that position change will be added.

By now you will see your keyframes added in the Timelines Bar. You will see a new Master Keyframe with two Property Keyframes corresponding to the properties that changed, from the original position, in this case X and Y.

You can preview the animation by scrubbing the current time marker while pressing CTRL.

Event Sheet Integration

First make sure the Timeline Plugin has been added to your project.

After you do that, a bunch of Expressions, Actions and Conditions will become available to be used in an Event Sheet. One of which is the Play action, which you can use to play a Timeline.

That is of course, the most basic example. It's only purpose is to demonstrate the basic workflow. I will be following up this post with some more content.

Here is a little example I did while developing the feature. This is not super complex, but has a little bit more meat to it than the example of the Quick Start guide above.

https://www.dropbox.com/s/n3a1hlky38e0rxe/Timeline%20Example.c3p?dl=0

This example, asides from doing a little bit more in the way of adding keyframes and interpolating the value of different properties, it makes use of the different easing functions you can use in between Property keyframes.

Types of keyframes

The image above is from the example, you can check it out yourself later. There you can see the two different types of keyframes that timelines use. The Master Keyframes (black dots) and the Property Keyframes (blue squares)

Master Keyframes

These are shown only on the main track associated with an instance and they are more than anything a convenient way to make changes to all the corresponding Property keyframes. For instance, deleting, disabling, changing the time or the ease function of a Master keyframe will apply that change to all the corresponding Property keyframes. A Property keyframe corresponds to a Master keyframe when they have the same time, that is the only condition.

Property Keyframes

These are shown on every timeline track which is associated with a specific property of an instance. Unlike the Master keyframes, these have the values that are used by the timeline to change an instance as time goes by. If you end up wanting to fine-tune an animation, you will probably end up editing the value of a Property keyframe directly by means of the Properties Bar.

Both types of keyframes will show their properties in the Properties Bar when clicked on and have a variety of options when right clicked on, I'll leave that for later though.

Change the easing function in between keyframes

By default all keyframes are created and set to use a Linear ease, and while it works, we can do a little bit better than that.

You can change the ease function of a Property keyframe by either using the Properties Bar or by turning on the View that will show all the easing functions used in between all the keyframes. You can do that by bringing up the context menu anywhere in the Timeline Bar and going View -> Eases

Once the view is activated you will be able to see all the eases used in between the keyframes, at a glance. I wanted to highlight a section in the screen shot, because at the moment it is a problem that when there is not enough space in between keyframes, the name of the ease in use is not shown, and that can be a little bit confusing.

In this mode you can click in the line between any two keyframes to select a different easing function from a drop down.

That ended up being quite a long winded explanation, phew!

justifun

Awesome start, very excited for these features

Glad you are liking it :)

1) It would be awesome if while dragging the red time line you could see the animations move forwards/backwards as you scrub it, instead of having to hit play. (also being able to drag the red line while the cursor is in the frame number area above the tracks

You can do this, it is not immediately obvious how to do it though. First you need to have Editing Mode turned on and you also need to be pressing Ctrl while scrubbing. Dragging after clicking on the time ruler will be available on the next release.

2) an "auto key" button, that would set keyframes while enabled on any property that changed in the layout/property bar

While there is not a button in the Timeline Bar to do this, it can be done. Again you need to make sure that Editing Mode is turned on. Then move the red line to where you want the keyframes to be added, after that make changes to an instance either from the layout or from the properties bar, right click on the instances that you want to add keyframes to and in the context menu select Timeline -> Add keyframes. This will create keyframes for all the properties that have changed.

3) Right clicking a keyframe and choosing disable causes an "oops something went wrong" construct crash

Will look into this, it looks like an easy fix, but please file a bug report in our bug tracker.

Edit: Looked into it and it doesn't seem to be obvious what is going on, please file a bug report with reproduction steps.

4) Right clicking an ease curve in "eases view" causes an "oops something went wrong" construct crash

Will look into this too. Again, please file a bug report for this kind of issues.

Edit: Looked into it and it doesn't seem to be obvious what is going on, please file a bug report with reproduction steps.

5) it would be nice to be able to make duplicate tracks of the same object, but with different keyframes / offsets for the second instanced object

I have thought if this myself while I was working on the example animation I posted before. Some sort of system to copy and paste the entire content of a track would be very useful.

6) when you first turn on edit mode, the track still remains red and you can't right click to add keyframes unless you click somewhere off the red line (but once you've set one, right clicking on the red line works to add keyframes

Don't know what's going on in here, but it looks like an easy bug fix.

7) perhaps an "add keyframe" button on the upper UI of the timeline bar or the ability to hotkey that, less clicks overall

There are still no keyboard shortcuts because I wasn't sure which ones where going to be the really important ones. But by now it is pretty clear that if there has to be one short cut, it's one to create a keyframe :)

8) Changing the "total time" property for the timeline doesnt update the range of the timeline where you can set keys (it says at 24s no matter what for me.)

Not sure I understand this, for me it seems to be working fine by either changing the total time from the Properties Bar or by dragging the green line in the Timeline Bar. File a bug report for this one, and make sure to write down the reproduction steps.

9) highlighting a master key and pressing ctrl to multi select but needing to hold ctrl while dragging them is just different from how most other animation softwares do it. usually once they are selected you dont need to continue to hold ctrl

This will be fixed.

10) the right click "view" menu is a tad confusing, that if you want to get back to the normal view you have to unselect the current view. perhaps adding a "default" option in there might be less confusing.

Makes sense, will do something about this to make it more clear.

11) a little animated gif of the types of eases as you pick from the list would be nice

I don't think I will be doing this. it looks like there are a lot of eases to choose from, but they really aren't that many, you can memorize them very quickly and then the name is enough to know what they do.

Plus, at some point I need to add the option to make your own custom eases, so you will be able to see the curve while you are editing it.

12) Right click "help" takes you to a 404 page

Will remove the option until we have official documentation. This is the kind of thing that you can report in the bug tracker.

13) it would be awesome if the "properties" that could be adjusted on the timeline included bahavior actions etc. right now it seems like it can only animate a few basic parameters of the object.

This is already implemented, to a certain degree.

Properties that can be animated include, the common instance properties, instance variables, behavior properties, effect parameters and plugin properties. There are some properties that don't make sense in the context of a timeline animation, so those can not be animated. The dialog to add properties will only show properties which are already part of the instance though. So you need to add the things you want to animate before hand.

All the properties that can be animated should be highlighted in yellow in the Properties Bar, when Editing Mode is turned on.

Thanks for the feedback, it is very useful.

Editing Mode

In the first post I mentioned Editing Mode briefly as part of the basic workflow to create an animation. I will go over it again in a little bit more detail this time, because there are a few things about it that are not immediately obvious.

Just showing the old gif again in case somebody missed it. That is the button you press in order to turn Editing Mode on.

Features

Virtual Changes

When Editing Mode is turned on, changes that you make to instances are not real changes, by this I mean that they are changes that will not be exported to the runtime when you preview your project for instance. These virtual changes allow you to move your instances around and make different kinds of adjustments while your are building your animation, without worrying about the initial settings for a given instance getting lost.

Once you are done editing a timeline, toggle Editing Mode off, and all changes will be reverted back to the state they were before.

Scrubbing Preview

While in Editing Mode you can scrub the current time marker to preview the animation. To do this you will need to keep the Ctrl (Cmd in OSX) key down while scrubbing the current timer handle.

Adding Keyframes

The different options to add keyframes will only become available while in Editing Mode.

The Layout context menu option. This option will add keyframes to all the properties of the selected instances.

The Timeline Bar context menu option. This option will add keyframes to all selected tracks and their children. This option allows you to be more specific about the properties you wish to add keyframes for.

New keyframes are always added at the position of the current time marker.

Visibility Toggle

The checkbox will toggle the visibility of the associated instance, but this will only work in Editing Mode. When the mode is turned off the instance will revert to the visibility state it had before.

scrubbing preview should be a button on the interface, like "enable scrubbing preview" while dragging the timeline, its not obvious that we need to press CTRL (cmd)

also please add dark theme for the timeline.

onion skinning its a needed feature for this.

I get very confused what i'm doing with the whole edit mode on/off, remember / forget stuff.

My mind makes me think that any changes i make while edit mode is on, should be setting keyframes etc, but it only sometimes does? then i try and scrub my animation and it starts off at a different location to where I thought i set the keyframe? It feels very inconsistent. And i can't set keyframes at frame 0 for some reason.

Enabling "edit mode" makes me think i should be able to edit the objects, but according to your description, turning it off afterwards reverts any changes you did. I don't follow.

Also when you goto a keyframe that already exists, we are forced to use the "update keyframe" button instead of the "add keyframe" button, which its odd that its two different buttons, "set keyframe" on a keyframe that's already there should just update the keys.