DiegoM's Forum Posts

    justifun

    Is it theoretically possible for a plug-in developer to write something that could convert motion data from a Json or xml sheet into the timeline format so that construct could play it back? Would it be hard for timeline to have a load Json function?

    I suppose it would be technically possible. I haven't tried this myself so I'm sure there are lots of caveats, but a plugin should be able to create a timeline programmatically at runtime, this is pretty much what the Tween Behavior does under the hood.

    But I suppose that you are thinking of importing data from other animations tools so C3 can just play it back. At the moment this would be very difficult because the feature is just not mature enough, so it just doesn't understand a lot of features present in other animation software.

    rodimus111

    Did you think about doing it with BEZIER CURVES?

    I realize that is a very popular request, so at some point I should be working on adding the functionality to use a bezier curve to edit the path an instance takes as it animates. I can't give any estimates as to when that work will start though, but it definitely is in the plans.

    Keyboard Shortcuts

    Recently a bunch of basic keyboard shortcuts where added to the Timeline Bar.

    S

    This is the same as the Set keyframes option that can be found in the layout context menu or the timeline bar context menu. It will set keyframes at the current position in the timeline, with values according to the current state of the instances in the layout. If there already are keyframes at the current time in the timeline, they will be updated.

    Delete

    Deletes the current selection, be it of keyframes or tracks.

    D

    Disable the current selection, be it of keyframes or tracks.

    Disabled keyframes are not are not taken into account when animating. Disabling a master keyframe will disable all corresponding property keyframes. Disabling a track will disable all of it's keyframes.

    E

    Enable the current selection, be it of keyframes or tracks.

    M

    Add missing property keyframes of all the selected master keyframes. The new property keyframes are given the current instance value. If a master keyframe is not missing any property keyframes, nothing will happen.

    M + Ctrl/Cmd

    Add the the missing property keyframes of all the selected master keyframes. The new property keyframes are given a value that fits into the timeline with out causing any changes.

    SPACE

    Preview the timeline

    LEFT ARROW + Ctrl/Cmd

    Move the current time marker to the next master keyframe

    RIGHT ARROW + Ctrl/Cmd

    Move the current time marker to the next master keyframe

    Delenne

    One more question: will users have access to properties of plugins? For example, will it be possible to control Spriter object parameters with the timeline? Or will it be limited to the standard Construct objects?

    In order to be able to animate C3's built-in plugin properties I had to do a little bit of work, because there was no way to update the values asides from event actions. The way it works is that each plugin needs to define which of it's properties are animatable and then implement the appropriate logic to react to changes at runtime. By default a plugin property is not animatable.

    All of that means that each plugin creator needs to update their plugin if they want to support animation of properties through a timeline.

    The details on how exactly to update a plugin will be released later, when the whole feature is more stable.

    So to answer the question, at the moment only the built in plugins support timelines. In the future it will be possible to modify existing plugins to do so aswell.

    Delenne

    Are nested timelines possible?

    At the moment this is not possible, I was thinking about it just yesterday though. But I don't think I will be able to start working on it any time soon.

    The animation interpolation control is quite rudimentary. Are you planning to add a graph editor of sorts?

    I am planning to add the option to create custom ease functions. These feature would come with a special editor to build your custom easing curve. You should then be able to assign that custom curve in the same way you assign the built in ones. Is that what you mean?

    Will bones/segmented characters be implemented? The competition allows for these, and it opens up many possibilities. Construct still relies on Spriter, which is less than ideal.

    At the moment there are no plans to support bone structures. That is a completely different feature which just happens to work very well with the concept of a timeline, so they are often assumed to go hand in hand.

    Will motion paths be integrated with the timeline?

    I Have thought about this too, but I am not too sure when I will be able to start work on this.

    Which parts of Construct's functionality can be keyframed/used in a timeline exactly? Everything, including event sheets and functions, and parameters for any object that is inserted in the layout? How far does the integration go?

    At the moment you can create keyframes for almost all properties that can belong to an instance. This includes the common properties, instance variables, behavior properties, effect parameters, and plugin properties.

    Some properties don't make sense to be interpolated, so those are not available. Ej. Sprite's Initial Frame can not be interpolated.

    There are some properties which are missing, because they are not part of Construct at all. For instance at the moment it is no possible to set the current frame of an animation from a timeline. That is a missing feature I would like to add.

    I have though about the possibility to interpolate Layout and Layer properties, Event Sheet global variables and the ability to trigger an event sheet action from a timeline, but those things are just in my TODO list. There is no estimated time of even when will I start with any of that.

    justifun

    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.

    I have found a couple of cases in which only a master keyframe (black dot) is created, with no related property keyframes (blue squares). This can be confusing, because the master keyframes by themselves don't have any information to do an animation.

    And i can't set keyframes at frame 0 for some reason.

    Every track in a timeline needs the first keyframe, you can't remove it, and you can't change it's time. The only way to change them is to update their values.

    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.

    I was wondering if the explanation was good, I guess it wasn't, I'll try again :P

    "Edit Mode" allows you to make changes to the instances in the Layout without loosing their original state before entering "Edit Mode".

    This way you can preview the animation and mess with positions, sizes and other properties while you are creating your keyframes for the animation, without worrying about loosing the initial state, which you might want to keep. Ej. You want all the instances in a specific place at the start of the layout, but you also want to move them around while you are creating the animation. "Edit Mode" solves this problem.

    When you are done, turning "Edit Mode" off will revert all the changes as far as the layout is concerned, so you can continue working with the rest of the features of Construct normally.

    The changes you made to the timeline you where working on will not be reverted though, all the keyframes remain there with their respective values.

    I hope that makes more sense.

    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.

    This is a fair point. Under the hood these two are very different features, so it was natural to separate them. This is why we need user feedback, to notice this kind of things. I'll remember this one. I don't think is a deal breaker though.

    IJCT

    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)

    This, along with other keyboard shortcuts will be outlined in the manual, when it is written. I think that once you know about it, it's pretty easy to use.

    also please add dark theme for the timeline.

    This should come in time, otherwise it looks pretty ugly in any theme other than the default one. While we don't have this the whole feature will remain behind the experimental flag.

    onion skinning its a needed feature for this.

    What exactly are you thinking about? I picture a few different things.

    1) A translucent preview of how an instance looks in each keyframe. So you can more or less tell how the animation will take place.

    2) Several translucent previews of how the instance looks as it is animated. Something like this maybe?

    I have the feeling you are thinking of the second option. While I think it would look nice, I don't think it is absolutely crucial to creating an animation. The scrubbing preview already serves the purpose of giving you a feel of how the animation is turning out.

    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.

    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.

    elliot Yes, the elastic function will go past the original positions.

    In Elastic will go below 0% for a little bit at the start

    Out Elastic will go over 100% for a little bit at the end

    In Out Elastic will go below 0% at the start and then over 100% at the end

    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!

    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.

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • It depends on what you are working on, if the project is small, a single event sheet will probably do it just fine.

    For medium to large size projects having multiple event sheets to separate unique tasks is likely the better approach. It makes it easier to find what you are looking for once the event count starts to rise.

  • You can post any feature suggestions in here https://construct3.ideas.aha.io/

  • We have one here at Scirra HQ! :)

    Unfortunately we can't get the bloody thing to work! :(

    Connecting it to a monitor doesn't seem to do anything... so because we have other things to do, it ended up in a cabinet collecting dust.

    But this thread has made me want to try and getting it working.