Enhanced timelines in application development environments

A computerized device can comprise a display adapter and a data processing hardware element, such as a processor. The data processing hardware element implements a timeline view module to provide output via the display adapter to display a timeline of an application under development. The timeline can comprise a plurality of tracks, including a track providing a temporal view of each of a plurality of media components of the application and a scripting track providing a temporal view of scripting components of the application. The scripting track can be rendered and populated by default by the timeline view module, and can be kept in view even when other tracks are scrolled out of view. The timeline view module can respond to input events directed to the scripting track to define scripting actions such as labels and actions used to control the application.

BACKGROUND

Software developers rely on application development environments (ADEs) to write code defining the visual appearance and behavior of an application under development. As an example, a developer of an application, such as an Adobe® Flash® or AIR® application, may use an ADE that allows the developer to place media components (e.g., images, movieclips, etc.) on a stage and define a desired visual arrangement of the components, along with changes in the composition and/or position of the components as the application executes.

The ADE can generate suitable code so that when the application is executed or interpreted, the media components are instantiated. Additional code can be defined by the developer (and/or can be automatically generated) to provide the desired changes in composition and position of the components. For example, a scripting language (such as ActionScript®) can be used to define code that causes the application to take an action, such as jumping to a visual arrangement labeled as a frame, in response to an event. The action may be associated with one of the media elements.

As a particular example, one or more media elements may define a button rendered in an initial view of the application. An action can be defined so that, when the button is pressed, the application jumps to a frame in which another media element, such as an image or video clip, is displayed.

The ADE may provide a timeline view showing the various media elements of the application over time. However, the application may be intended to execute non-linearly via the use of scripted actions, and the developer may encounter difficulty identifying and/or defining appropriate labels and scripting elements as the application grows more complex.

SUMMARY

A computerized device can comprise a display adapter and a data processing hardware element, such as a processor. The data processing hardware element implements a timeline view module to provide output via the display adapter to display a timeline of an application under development. The timeline can comprise a plurality of tracks, including a track providing a temporal view of each of a plurality of media components of the application and a scripting track providing a temporal view of scripting components of the application. The scripting track can be rendered and populated by default by the timeline view module and can be kept in view even when other tracks are scrolled out of view. The timeline view module can respond to input events directed to the scripting track to define scripting elements such as labels and actions used to control the application. By providing the scripting track(s) by default (i.e., without requiring the user to independently create a scripting track) and associating particular behaviors with the scripting track(s), the development process can be improved.

This illustrative embodiment is discussed not to limit the present subject matter, but to provide a brief introduction. Additional embodiments include computer-readable media embodying an application configured in accordance with aspects of the present subject matter to provide a timeline view including one or more scripting tracks, along with computer-implemented methods for providing timeline views with scripting tracks. These and other embodiments are described below in the Detailed Description. Objects and advantages of the present subject matter can be determined upon review of the specification and/or practice of an embodiment configured in accordance with one or more aspects taught herein.

DETAILED DESCRIPTION

Presently-disclosed embodiments include computing systems, methods, and computer-readable media embodying code to implement a timeline view module. For example, as shown inFIG. 1a computing device102can provide a timeline interface104depicting media components of an application under development. Timeline interface104includes one or more dedicated scripting tracks106that can be used to view scripting components of the application under development in a centralized location.

Reference will now be made in detail to various and alternative exemplary embodiments and to the accompanying drawings. Each example is provided by way of explanation, and not as a limitation. It will be apparent to those skilled in the art that modifications and variations can be made. For instance, features illustrated or described as part of one embodiment may be used on another embodiment to yield a still further embodiment.

FIG. 1is a diagram showing an example of a computing device102. Computing device102may alternately be referred to as a data processing system, computerized device, or simply a “computer.” Computing device102represents a desktop, laptop, tablet, or any other computing system, such as mobile devices (PDAs, smartphones, media players, gaming systems, etc.) or embedded systems (e.g., in vehicles, appliances, or other devices).

In the example shown inFIG. 1, computing device102features a data processing hardware element comprising one or more processors108and a computer-readable medium (memory110) interconnected via internal busses112, connections, and the like. Bus112also connects to I/O components114, such as universal serial bus (USB), VGA, HDMI, or other display adapter(s), serial connectors, and/or other I/O connections to other hardware of the computing system. The hardware also includes one or more displays116. It will be understood that computing device102could include other components, such as storage devices, communications devices (e.g., Ethernet, radio components), and other I/O components such as speakers, a microphone, or the like. Input device(s)118can comprise hardware used to provide input—examples include a keyboard, trackpad, mouse, touch-sensitive display, etc.

Computer-readable medium110may comprise RAM, ROM, or other memory and in this example embodies program logic for an application development environment (ADE)120and a timeline view module122. Timeline view module122can be integrated into ADE120or may be provided as a separate program component or process. In one implementation, timeline view module122is included in an ADE such as Adobe® Flash® Professional available from Adobe Systems Incorporated of San Jose, Calif., and can be used to develop Adobe® Flash® or AIR® applications and/or applications of another type. This example shows a locally-executing timeline view module and ADE, but either or both components could be hosted at a remote server and accessed by a client device, with the client using a client-side front end to provide a UI based on data received from the hosted service.

Generally speaking, timeline view module122causes computing device102to provide a timeline interface104including one or more dedicated scripting tracks106as noted herein. Timeline view module122can be implemented in software as shown in this example, or could be implemented using hardware accessible by or as part of the data processing element (e.g., as an application-specific integrated circuit, (ASIC) or programmable logic device (e.g., PLAs, FPGAs, etc.)).

In this example, timeline view module122causes computing device102to provide timeline interface104having four tracks—a scripting track106and media tracks124,126, and128. For example, each media track may correspond to a layer or other logical unit used in defining a desired appearance of an application under development over time. The timeline can provide a temporal view by representing time on one axis (e.g., the x-axis), with different tracks adjacent to one another on a different axis (e.g., the y-axis) so that a temporal relationship amongst elements in the timeline can be visualized.

In this example, scripting track106includes a label element130and an action element132. Label element130may identify a segment of the application and can be relied upon by other scripting components in order to shift the application to the corresponding segment (e.g., a frame) based on input events. For example, label element130may be associated with a first frame or series of frames during which media element134is presented. During a later frame or series of frames, a different media element136replaces media element134in the view provided by the application under development, with a label element used to return to the first frame or series of frame.

Action element132represents a portion of scripting code that causes the application under development to respond to one or more input events or conditions. For example, an action may be defined by a portion of code as a series of discrete operations to be performed at a particular time by the application under development. As an example, the operations may be causing the application under development to respond to an event by jumping from a later frame back to the frame labeled using label element130. For instance, the action may be associated with media element136so that a click on element136returns the application to the frame in which media element134is visible.

InFIG. 1, ADE120also provides a design view including stage138, which allows a user to arrange and preview the appearance of the application under development. In this example, a representation134A of media element134is visible. This would be the case, for example, if the frame(s) containing media element134were selected via the timeline (such as by moving a playhead, selecting a frame number, etc.). A representation136A of media element136is shown using dashed lines to indicate how, if the timeline were advanced to a later frame, media element136A would become visible in stage138.

FIGS. 2A-2Dshow an illustrative timeline interface104in closer detail. Timeline interface104includes a time index200indexing the timeline by frame number, though of course some other designation could be used. In these examples, scripting track106includes a first track202for specifying label elements and second track204for specifying action elements. A plurality of media element tracks206can be used for specifying media elements at various points in the application timeline.

As shown here, each track is rendered using a plurality of cells208, with the cells extending the width of the track. Cells that are adjacent to one another in the y-direction represent elements of the application that are associated with the same point in the timeline (e.g., associated with the same frame number).

Timeline interface104also includes interface elements to scroll through the plurality of media element tracks206, shown here as scrollbars210and214. In some implementations, scripting tracks106are “pinned” such that the scripting tracks remain in view while the other tracks are scrolled in and out of view. This may assist developers in making effective use of the scripting tracks as a centralized location for specifying/editing scripting elements even when a large number of tracks are being utilized.

FIG. 2Bpresents an example of an interface element in timeline interface104that can be triggered by selection of the scripting track or an element therein. In this example, selection of cell214has spawned an editing interface216configured as a pop-up window. Interface216can allow for display and/or editing of scripting components of the application. For example, if cell214featured a pre-existing scripting element, interface216could provide a textual view of the selected scripting element and allow for input editing the element. If cell214does not feature a scripting element, interface216may allow for input to define a new scripting element. In some implementations, as shown here, interface216includes an option to edit by inserting one or more code snippets—predetermined portions of code that can be customized for use by inserting appropriate object and label references.

FIG. 2Cpresents an example of another interface element in timeline interface104. In this example, selection of cell218in labels track202has spawned interface220which allows a user to define or edit a label to be associated with the selected frame. The label can then be used by other scripting elements (e.g., as a reference to shift a view of the application to that frame in response to an input event). In some implementations, as shown here, the label can be customized though the use of color selection palette222.

FIG. 2Dshows an example of timeline interface104as populated by a number of scripting and media elements; for purposes of clarity, not all elements are separately labeled. As shown at224,226, and230, several cells of label track202have been populated with elements corresponding to script labels. Actions track204is populated with a number of elements corresponding to actions, including elements232and234. Media tracks206are also populated—as shown at236and238, elements are included in various cells to indicate frame-by-frame animation, tweening, and other activity.

By way of example, element226may designate a key frame during which a frame-by-frame animation indicated at238begins. At the end of that animation, as indicated by the element in actions track204, a scripting element is used, for example to jump to another keyframe.

FIG. 3is a diagram showing an illustrative architecture300for an application development environment120that includes a timeline view module122. In this example, application development120includes a UI module302used to provide a graphical user interface and receive user input. For example, the interface can include a timeline view provided by module122along with other components such as a design stage and other interfaces (e.g., code view interface, etc.). Object model manager module304can access stored data representing a core object model and codebase306for the application under development. The object model/codebase can include data representing the various application components, including media elements, scripting components, and the like.

The application components can be indexed by frame or other identifiers used by object model manager304in tracking and updating the data defining the application under development. Timeline view module122can use a list of the application components to populate the various tracks of timeline interface104, such as by iterating through the frames of the application under development. For each frame, module122can render a corresponding element in each track which has a media element and/or a scripting element associated with the frame.

Timeline view module122can further pass data to object model manager304in response to input events, such as in response to input selecting a cell in a label or script track and associated with a particular frame. For example, when a new scripting action (or label) is defined, the frame and substantive data for the scripting action (or label) as received in the timeline interface can be passed to object model manager304for inclusion in the object model/codebase for the application under development. Additionally, input with respect to media tracks or elements therein can be used to update the object model/codebase in a conventional manner.

ADE120also includes compiler module308. Compiler module308can use the object model/codebase to produce executable or interpretable code of the application under development. Output code may, for example, comprise SWF files or AIR files for execution using Adobe® Flash® or AIR®, files for execution in another runtime environment, files for execution in an operating system, or other code such as HTML/CSS code. It will be understood that the present subject matter can be used regardless of the format or type of the application under development, and construction and use of appropriate compilers, linkers, and packaging components (e.g., for cross-platform compatibility) will be within the ability of one of skill in the art.

FIG. 4is a flowchart showing steps in an illustrative processing method400that may be carried out by a computing device102implementing a timeline view module122. Block402represents accessing code or another representation of an application stored in a memory, the code defining a plurality of media components of the application and at least one scripting action or label. For example, as noted above, an ADE may maintain a model of the application under development from a codebase and update that model in response to user input.

Block404represents generating a design view in a graphical user interface, the design view comprising a timeline view of activity that occurs over time during execution of the application. For example, the timeline view can comprise a plurality of cells and a plurality of tracks as illustrated and discussed withFIGS. 1-2above, with each track providing a temporal view of a respective media component. The timeline view can also include at least one additional track dedicated for scripting, with each scripting track including one or more cells representing scripting actions or labels associated with respective frames or other temporal units of the application.

Block406represents populating the tracks. For example, the tracks may be represented as a plurality of cells extending in a first direction in the timeline view, with the tracks adjacent in a second direction in the timeline view so that cells adjacent in the second direction correspond to activity that occurs at the same time, such as activity at the same frame. Visual elements such as icons, colors, and text can be used to identify the media components associated with respective cells. Similarly, the scripting tracks can be populated with respective icons or other indicators. The particular cells can be identified from the object model or other representation of the application, such as by iterating through the model by frame and including elements in the timeline corresponding to each application component at each respective frame.

Block408represents setting up event handlers of the ADE to provide responses to events designating or associated with the scripting tracks. For example, an event handler may configure the ADE to respond to selection of a cell in the scripting track by rendering an editing interface to define a new action or label or to allow editing of an existing action or label associated with the cell. As a particular example, a popup window such as shown inFIG. 2BorFIG. 2Ccan be presented to allow viewing and/or editing of an action, label, or other script element.

As another example, an event handler may respond to input identifying a cell in the scripting track but attempting to associate some other element other than a scripting action or label with the track. For example, an error handler may be used to present a warning or other feedback if a user attempts to drag a media element into the scripting track.

Method400is provided for purposes of illustration only. In practice, an ADE may carry out multiple concurrent processes. For example, the tracks can be updated periodically and/or in response to other input changing the composition of the application. For example, if a user defines an action or label via another interface component (e.g., a code view interface or an interface dedicated to specifying actions), the corresponding frame(s) in the scripting track can be updated.

General Considerations

Some portions of the detailed description were presented in terms of algorithms or symbolic representations of operations on data bits or binary digital signals stored within a computing system memory, such as a computer memory. These algorithmic descriptions or representations are examples of techniques used by those of ordinary skill in the data processing arts to convey the substance of their work to others skilled in the art. An algorithm is here and generally is considered to be a self-consistent sequence of operations or similar processing leading to a desired result. In this context, operations or processing involve physical manipulation of physical quantities.

Typically, although not necessarily, such quantities may take the form of electrical or magnetic signals capable of being stored, transferred, combined, compared or otherwise manipulated. It has proven convenient at times, principally for reasons of common usage, to refer to such signals as bits, data, values, elements, symbols, characters, terms, numbers, numerals or the like. It should be understood, however, that all of these and similar terms are to be associated with appropriate physical quantities and are merely convenient labels.

Unless specifically stated otherwise, as apparent from the foregoing discussion, it is appreciated that throughout this specification discussions utilizing terms such as “processing,” “computing,” “calculating,” “determining” or the like refer to actions or processes of a computing platform, such as one or more computers and/or a similar electronic computing device or devices, that manipulate or transform data represented as physical electronic or magnetic quantities within memories, registers, or other information storage devices, transmission devices, or display devices of the computing platform.

A computing device may access one or more non-transitory computer-readable media that excludes signals and embodies computer-readable instructions which, when executed by at least one computer, cause the at least one computer to implement one or more embodiments of the present subject matter. When software is utilized, the software may comprise one or more components, processes, and/or applications. Additionally or alternatively to software, the computing device(s) may comprise circuitry that renders the devices operative to implement one or more of the methods of the present subject matter.

Examples of computing devices include, but are not limited to, servers, personal computers, mobile devices (e.g., tablets, smartphones, personal digital assistants (PDAs), etc.) televisions, television set-top boxes, portable music players, and consumer electronic devices such as cameras, camcorders, and mobile devices. Computing devices may be integrated into other devices, e.g. “smart” appliances, automobiles, kiosks, and the like.

Any suitable non-transitory computer-readable medium or media may be used to implement or practice the presently-disclosed subject matter, including, but not limited to, diskettes, drives, magnetic-based storage media, optical storage media (e.g., CD-ROMS, DVD-ROMS, and variants thereof), flash, RAM, ROM, and other memory devices.