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.