MadButterfly

MadButterfly introduce Scribboo, which is a state-of-the-art development environment for GUI design. Scribboo includes not only the runtime environment, but also an designer-friendly authoring tool. The authoring tool is designed for GUI designers who does not know how to write a computer program. This tool allows designers to compose the GUI by defining a set of pictures of screen (key frame), and connect pictures with animation clips without writing any program. They can also define behavior of components by giving animation clips to components. For example, we can define behavior of a button by making animation clips that are responsible for changing the look of the button. By defining states and making animation clips, designers can design, and control, the look and behavior of the GUI of an application without the help from programmers.

Support Working Flow

The authoring tool is designed for supporting a working flow for designing GUI of applications. Traditionally, the project manager collects requirements from users, define spec, and discuss the spec with users. User interface is always the area that everybody can have their opinion, it is most hard part to get consensus. If we can provide a prototype (model), show it to user, and user can play it, it is more easy to collect requirements and define spec.

There are four roles in a typical UI design team.

• Users,
• UI designers,
• Art designers,
• Programmers.

The authoring tool help people to define prototype of user interface fast. Project manager collects requirements from users. He ask UI designers to draw a draft of UI with authoring tool, and to define flow of UI with authoring tool. Sometimes, project manager and UI designer are the same people. They are responsible for to define content and flow of UI and to make sure correctness of content and flow of UI, but they are not responsible for the look and feel. In another word, they are responsible for making prototype correctly according requirements from users. Then, project manager can show it to users. Users can confirm the correctness of the prototype (for UI flow), and re-correct things going wrong. At some phase of development, the prototype can be delivered to art designers to refine it. Art designers refine the prototype to make it more beautiful and usable. The project manager can confirm the correctness of prototype with users in the whole development cycle.

At the same time, programmers can work on logic of the application. Once art designers finish their work, or reach some kind of quality-level, the GUI prototype can be delivered to programmers. With state machines and animation clips made by art designers, UI designers, and project manager, programmers can integrate their code with GUI fast. Since state machines are confirmed by the users with playing prototype. Programmers can care only about state machines of GUI, by monitoring and changing state machines, it is more simple than traditional integration way.

In traditional way, the behavior of GUI is defined by project manager, visual part of the behavior is implemented by art designers, and controlling and state part of the behavior is implemented by programmers. It is a long procedure involving many roles, and prunes to error with a lot of communication. With the help of the authoring tool, behavior of GUI can be defined by project manager/or UI designers totally. Art designers are responsible for making beauty merely. And, programmers only monitor state machines defined by project manager/or UI designers, and change the state to notify the finish of internal works.

With the help of the authoring tool, user's needs are totally addressed in the prototype. We don't need to do paper prototype any more, so that the misunderstanding can be reduced. Requests can be delivered to appropriate people in the original form without the distortion because of inappropriate intermediate media, such as paper prototype and written or oral statements. It makes sure the correctness of the UI design at first instant, and keep it consistent in the working flow.

What is Provided by the Authoring Tool

The authoring tool is designed to help the process of GUI design and integration of program code. It help people to fast prototyping, deliver information described by the prototype directly, and use refined prototype in the final product with decoupled program code. The actual functions that is implemented by authoring tool are list following:

• export to various formats and runtimes,
• animation editing,
• component defining & management, and
• FSM editor

The authoring tool exports art-work of users to various formats and runtimes. User can use the authoring tool in their projects for various platform, for example; a HTML5/CSS3 based project, an Android project, or a MadButterfly project. Animation editing fucntions is actually functions help people to create animation frames. The purpose of making animation is to change the look of GUI components. The authoring tool provide animation editing functions, but it's major purpose is to help the development of GUI projects. Widget/component concept is very important in GUI project, it means reusing a design. You can make components with the authoring tool, and reuse components in any screen picture. For example, you can create a button component. The component is not only about look but also about behavior. A GUI component would change its look for events. The authoring tool provides FSM (finite state machine) editor that users can model the behavior of a component, to react for events, by defining a state machine.

Integrate Program Code

The authoring tool can generate various format for linking with program code. GUI design and program code are linked together by calling animation clips, changing state of components and scenes, and delivering user events. When user click a button, it triggers a state transition defined by art designer. The state transition play an animation clip to change look of the screen or components, or/and trigger program code to handle the transition and events. For example, the user presses on a button, it make the state of the button transiting from up-state to down-state. The art designer can assign an animation clip for the transition to change the look, and ask program code to handle it.

The program code can also change state of GUI to trigger a state transition, thus the animation clip, assigned by the art designer for the transition, would be played. The program code can also call an animation clip, defined by art designers, directly. With state transitions and animation clips, art designers and programmers have a well defined interface to help the collaboration among them.

The authoring tool can export to HTML5/CSS3, MadButterfly runtime, and other formats. With the authoring tool, you can create not only GUI for MadButterfly runtime but also for WEB applications.

Extend Inkscape

The authoring tool is an extension of Inkscape, a famous open source vector graphic editor. It provides high-quality graphic editing functions, but lacks capabilities for animation, component management, and GUI design supporting. We extend Inkscape to full the gap. Inkscape was coded in C language, and it is complicated. To easy our life, we embed Python script engine into Inkscape that we can extend Inkscape in Python. You should not confused it with the extension API provided by Inkscape it-self. The extension API of Inkscape is inefficient. We embed Python script engine in the same process that Python code access internal data of Inkscape directly.

Major Improvement

The major improvements for Inkscape are supporting timeline, component, and state machine concepts. A timeline is a consequence frames to form an animation clip. Art designers can change the look of graphic elements frame-by-frame to define an animation clip, likes what make cartoon films. The authoring tool provides some functions to improve the performance of making animation clips.

The authoring tool can manage, and define, components. A component is a group of graphic elements working together to present an object. For example, a button is a component includes a text label, an icon and a decoration rectangle. Not only the look, a component also has behavior. The behavior of a component is defined by finite state machines. The art designer can design, and assign, finite state machines for components, and assign animation clips for state transitions.

(left-to-right, top-to-down)

The authoring tool also help art designer to define state machines for components. A state machine is comprised by states and transitions. A state machine transites from one state to another. If the state of a component changed, it also change itself look. The authoring tool allow you to assign an animation clip for a state transition to change the look of the component.

(An action is an animation clip)