The button starts and pauses a playback. You can hit the
space bar to toggle this from the keyboard.
You can also use the slider to go to any point in the playback.
The and buttons move the playback one step at a time for fine grained control of a playback.
You can use
left arrow and
right arrow keys to control this from the keyboard.
The moves the playback to the beginning and the buttons move the playback to the next comment (or the end if there are none).
You can use
shift + left arrow and
shift + right arrow keys to control this from the keyboard.
You can use
ctrl + shift + left arrow and
ctrl + shift + right arrow keys to move to the beginning and end of the playback. All comments will be skipped.
Current speed: 100 ms in between events
There is a user defined amount of time in between each coding event. You can adjust this amount of time by using this control.
You can hit
shift + up arrow to speed up and
shift + down arrow to slow down the playback from the keyboard.
When a comment is encountered the playback will be paused so the user can see it and the current state of the code. By default, the playback will pause for all comments.
You can hit
shift + p to toggle whether to pause for comments from the keyboard.
Cuts, pastes, and group tabbing affect many different code characters at once. These operations can be slow to watch. By default, entire groups of characters that were cut, pasted, or tabbed will be shown in a single step to improve watchability. If you'd like to animate each individual character, use this control.
You can hit
shift + b to toggle whether to show cuts/pastes in blocks from the keyboard.
To make it easier to see what changes have been made since the last pause point, new inserts and deletes are highlighted. The highlights are removed each time you resume a playback by hitting .
You can hit
shift + h to toggle whether to highlight new events from the keyboard.
To clear all recent changes without resuming the playback use this control. You can hit
shift + c to clear the changes from the keyboard.
Save the current playback to your file system in a file. This file can be uploaded in the future to replay the exact same playback.
Select a previously downloaded playback file to replay it. The current playback information will be lost.
Change the size of the text on the screen.
shift + alt + up arrow and
shift + alt + down arrow will change the size of the text.
shift o opens this options window.
esc closes it.
Saving the state of a playback will cause a zip file to be downloaded to your machine. You can unzip the file and then open the project inside of it with a Storyteller supported editor. This has the contents of the code where the playback was paused so that you can build from that point in the playback.
There are three options when saving the state of a playback:
With this type of save, all the code and comments up to the pause point are recorded but none after. In the download there will be no code or comments past the pause point in the playback.
This is the best option if you'd like to forget everything after the pause point.
With this type of save, only the code on the screen is added to the download. Any code that was added and then deleted will not be a part of the download's history.
This is the best option if you'd like to completely forget all the past history except for what is on the screen.
With this type of save, all of the history of the playback is recorded in the download, even after the point where the playback was paused. However, all events after the pause point are undone by adding the inverse of those events.
For example, if there is a create file followed by three inserts after the point in the playback where the user paused, then three deletes and a delete file will be added to the list of events to roll back the starting state of the new download to the pause point.
All comments and history are available to see in playbacks from that project but the starting point for future development is the pause point in the playback. This is the best option if you want a deep history of all the changes in your code.
This filter allows you to see coding activity during different periods of time. Below is a list of all time spans that, if code was written in that time frame, it will be animated. Any code written outside of these time spans will not be animated but it will still be shown among the rest of the code.
You can use the timestamp of the current event to make your filters. This is useful to skip unintersting parts of the development process.
By default, a time span with the entire history is provided. You can add multiple time spans and remove them as needed.
|Start Time||End Time|
This filter allows you to animate the code written by certain developer(s).
All selected developers' code will be animated. The code from developers who were not selected is still shown but it is not animated in the playback.
This is useful for focusing on the contribution of one or more developers.
This filter allows you to animate the code written in certain files.
Only the code in the selected files will be animated and displayed. The code in the other files will be shown but will not be animated. This is useful for focusing on one or more files.
Files and folders that were added and then deleted will be available for selection.
This filter allows you to select some code and have it be animated in a playback. Only the selected text on the screen will be played back.
It will show all the code that ever touched the selected code. This is useful for finding out the full history of a block of code (like a method).