Typical Development Workflow

Storyboard offers a variety of ways for designers to get started developing their user interface application. The following section walks through a common approach that is used when the design content is already available.

Start a New Project: From Photoshop, Sketch, or Scratch

The first step is to create a Storyboard project within the Storyboard Designer desktop environment. When Photoshop or Sketch design content is available, it can be directly imported and forms the basis of a new Storyboard application. In this scenario, the initial width and height of the screens are set to be the design canvas size.

If Photoshop or Sketch content is not available for import to bootstrap an application, a Storyboard project can be started from scratch. A new project wizard walks through the process of setting up the initial project parameters such as the target screen size. This creates a blank project with a single screen and a single layer.

Regardless of the starting point, using Photoshop import, Sketch import, or starting with a blank application, a Storyboard project initially has a single model file named the same as the project and the file extension GDE. This GDE file contains the structure of the application, the event and action bindings, and the variable and animation definitions.

Create and Organize Screen Content

The application view within Designer shows an outline of the structure of your application. From this view you can add new screens, layers, and controls to your application and expand it to include the visual structure and organization appropriate for your product.

Storyboard uses industry standard formats for assets, such as images and fonts, as much as possible. When a project is created it is automatically populated with an images and fonts directory. To import new images or fonts to use in your project, you can simply copy files with supported formats (png, jpg, bmp, tga, ttf, otf) into these directories. The assets are available for use within your project to set as a property on a render extension or by dragging and dropping into a particular screen canvas directly.

Bind Events to Invoke Actions

As you introduce multiple screens into your application, you can switch between them using screen transition actions. There are a number of different screen transitions ranging from an immediate transition to elaborate animated screen transitions using 3D transforms to flip and shape the displays.

In addition to actions for screen transitions, there are actions for starting and controlling animations, adjusting the values of variables, sending events to other applications, and integrating with Lua to invoke scripted glue logic to further control the application. After the main structure of an application is created, you can add and customize actions to modify the user interface.

Simulate and Export Model for Engine

To enable immediate visual validation of the user interface, Storyboard Designer includes a built-in simulator. This simulator uses the same runtime engine that runs on your target but is configured to execute in the desktop environment. The simulator uses the same export process that you would use for an embedded environment but automatically incorporates a launch stage to make it fast to implement structure, bind actions, and check the behavior in a rapid development cycle.

Export to Android and iOS platforms using the an export wizard that creates a package that's ready to run on your mobile platforms. Exporting an application to a touch-enabled mobile device provides a simple, yet effective, method of experimenting with user groups on different design scenarios without having to deal with the instability (or incompleteness) of an early embedded target hardware configuration.

For deep embedded systems where a filesystem may not be available to host the assets from the application, the export process involves creating a C/C++ header file. This header file is included in your BSP or system image and compiled using the same toolchain you use to build all of the non-user interface elements of your product.

Was this article helpful?
1 out of 1 found this helpful