Apple - Final Cut Pro - Magnetic Timeline 2 (10.3)
“Final Cut Pro 10.3 debuts a powerful collection of new features for professional editors. A strikingly low-profile interface maximizes work space on any display. The new Magnetic Timeline 2 advances even further beyond traditional, track-based editing with automatic color coding and flexible layouts based on roles.” (credit: Apple)
Our Role
We were assigned as the design DRI (directly responsible individual), in charge of the design language transition of the timeline into the new look, as well as establishing the design system for the new organized timeline feature.
Background
In traditional track-based video editing applications, video editors could visually identify and orient themselves in their projects based on the visual layout of clips. For example, a cluster of audio clips towards the beginning could be that scene with “a lot of explosions.” As the projects progressed along, the objects within the timeline itself is used as an atlas to navigate a project that can be hours long.
Traditional track-based video editors have many fundamental flaws that were resolved with the Magnetic Timeline in Final Cut Pro X. The two biggest issues were: clip collisions and audio video synchronization.
With clip collision, because only one video/audio object can exist in a given track, other objects would be frequently overwritten. As a workaround, new tracks would have to be created in order to make room for new edits.
In the case of video audio synchronization, because video and audio would have to live in separate tracks, keeping video and audio that is supposed to stay in sync would often be kicked out of sync.
With Final Cut Pro X and the Magnetic Timeline, we addressed both issues by rethinking how the timeline works on a fundamental level. Rather than organizing clips by tracks, clips would be organized by a relational model–something we internally called the anchored timeline model. By “anchoring” a clip to another clip, the clips no longer had to rely on its position within specific tracks, allowing clip collisions to be a non-issue.
Only one track exists in the Magnetic Timeline, something we refer to as the primary storyline. Clips inside the primary storyline is the main structure in which all other clips will have to anchor itself. This is why the primary storyline is also referred to internally as the “spine.”
Further, the magnetic timeline brought about another innovation–the AV clip. An AV clip is an abstract container that houses video and audio that is supposed to stay in sync. Keeping these two pieces of content in a container prevents unintentional or accidental desynchronization.
What was lost in the transition from track-based timelines to the magnetic timeline was the visual orientation that was described in the beginning. Especially for professional-level video editors, visually orienting themselves to the timeline is tremendously important. With the dynamism of an anchored timeline model, that ability was inconsistent and unreliable.
As shown above, the anchored clips are designed to minimize the vertical space between itself and the clip within the primary storyline. As editors trim out the edges of clips, other clips move out of the way to make room. This is a great solution to the problem of clip collision but further prevents editors to visually orient themselves to their projects.
The primary goal of this project was to enhance visual organization within the Magnetic Timeline without losing any of the gained benefits gained from moving away from track-based timelines.
Outcome – Magnetic Timeline 2
Previous to 10.3, all video clips were tinted blue and all audio clips (regardless of role) were tinted green. So editors couldn’t differentiate between dialogue clips, music clips, sound effects, etc.
Roles
Another core tenet of the Magnetic Timeline was that every object imported into a Final Cut Pro X project was tagged with a metadata-type known as a Role. A title object would have a Title role, video would be tagged with a Video role, dialogue as Dialogue, music as Music, etc.
We leveraged this Role metadata as the foundational basis for creating organization within the Magnetic Timeline 2.
Clips colored by role
The first step to solving the problem of organization within the timeline was to allow Roles to be specified with certain colors. In this example, dialogue clips are blue, music clips are green, sound effects are turquoise and orange. This allows editors to more easily parse the timeline and see what the various types of clips are at a glance.
Timeline Organized into Audio Lanes per Role
The stack order of the roles (shown in the Role Index to the left of the Timeline) are always maintained. This prevents clips from being out of the current scrollview region and keeps the project tidy.
Another huge component of the Magnetic Timeline 2 was the ability to organize the timeline into rigid “zones” or audio lanes, that keep clips organized by it’s respective audio roles.
Timeline Organized by Audio Sub-Roles
Within parent roles (i.e. dialogue, music, effects), clips are organized by even more granular sub-roles. For example, within the Dialogue role, you could assign sub-roles of specific microphones (i.e. lav mic, boom mic, etc.).
To indicate the subrole division within the Timeline, the clips alternate between a brighter and darker tone, while still maintaining the same hue values. In the organized state, the subroles are further separated by the horizontal dashed lines.
Focus Mode
Because the new Audio Lanes take up more of the precious vertical space in the Timeline, we added a feature that allows users to “focus” on a specific role (i.e. working with music). Focusing on a specific role minimizes the appearance of all other audio roles, conserving vertical real estate.
Rearranging the Role Stack Order
The stack order of the roles in the Role Index can be rearranged, so that you can have specific clips in a certain role be in a different vertical position. For example, if an editor is working with music, and it happens to be far from the video clips, they can rearrange the stack order so that music clips appear right below the video objects.
Clip Edge Selection
Being a professional-level creative application, there were various edge-cases and considerations needed for the UI. One such example is how edge selection (selecting the in or out point in preparation for an edit) would work across components within an AV clip. In the example above, the three objects with the edges selected are part of the same parent AV container. To reduce noise, we show supplemental UI (volume adjustment and fade handles) on mouse cursor roll-over.
Range Selection
Another UI consideration was for range selection (which is purely time based and can span across multiple clips). When multiple components of a single AV clip can have vertical white space in between, the UI had to recognize that and convey the necessary information.
The objects within that range have a semi-opaque yellow tint fill (tested across all role colors) and opaque outline on the leading the trailing edges. The shape of the range selection is closed and completed by the union of all included objects within the range selection. The objects that are not included in the range selection appears on top (greater z-index) of the range selection UI.
Role Color UI Calculations
Rather than maintaining a database of static colors, I worked very closely with our engineering team to devise a way to calculate all the UI component colors based on the Role color. For each role color, there were more than 30 different UI components that needed to be tinted based on that color, everything from: waveforms, reference waveforms, header text, volume adjusters, keyframes, etc. This calculation system not only allowed us to quickly fine tune the colors, but it would be trivial to add additional colors for our users.
Role Color Palette Definition
For technical and usability reasons, the team decided to ship eighteen colors as the set presented to our users. This is a sampling of a color study to ensure that the hues picked were spaced out uniformly on the color spectrum. We also cross referenced the colors with Apple’s other creative application Logic Pro in order to normalize the color palette within the company’s product lines. The colors were then prototyped into a branch to ensure proper performance and legibility.
Design Specification
Over thirty different components needed to be tinted with a specific role color, and with over twenty-two different role colors, it would of meant keeping track of six-hundred and sixty different color values. Due to this sheer number of colors that were needed to be maintained for the “tinting” of specific components of timeline objects, a system was devised that calculated those colors needed.
The solution was to only keep track of base role colors, and per component, shift the hue, saturation, and/or brightness of the base color to calculate the various colors needed to tint while maintaining the design integrity. Ultimately, design was able to refined these color calculations and maintain the methods in the code base, bringing design closer to the development process.
This system allows design to only maintain the set of base colors, and additionally have the ability to add new colors without any additional work.