Flash Movie Authoring Environment based on State Diagram

Flash Movie Authoring Environment based on State Diagram

ABSTRACT

A tool for authoring interactive Flash movies is presented.Characters that play in a movie are modeled as object definitions in terms of state-transition diagrams. Each state has a picture and activities. The picture represents appearance of the character in that state. The activities can be selected out of a set of performances such as relocation of the character and generation of other characters. A transition is conditioned in terms of events such as mouse click and collision with other characters. The graphical editor of state-transition diagrams built in this tool is so easy to manipulate that even children can compose interactive Flash animations including video games.

Keywords, Game authoring, Macromedia Flash movies,state diagrams.

1. INTRODUCTION

Many popular games and interactive movies posted on the web are written in Macromedia Flash[1].Macromedia Flash 8[2] is a genuine tool for authoring Flash movies. But authors are required to write programs in the ActionScript language in order to make movies interactive. Flash Maker[3] allows authors to be indifferent to ActionScript. We can compose a simple interactive movie as a sequence of predefined action patterns. It is a pity that the sequence chart gets excessively complicated when we want to author a more complex interactive movie such as video games.

Islay [4-6] is a tool for authoring interactive animations in terms of state-transition diagrams. It is puzzling but truethat Islay was the first software product, in the long history of computer science, that implements the traditional common sense among the computer scientists that an animation character is an automaton of which behavior is well described by a state-transition diagram. Its user-friendly

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page.To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

graphical editor allows users including children to describe the behavior of an animation character as an object definition. The use of classical state-transition diagrams differentiates Islay from other graphical programming languages like Squeak[7] and from other animation authoring environments like Viscuit[8].

In this paper, we develop a translator that converts the interactive animations composed by Islay into Flash movies.As a result, we obtain an authoring environment for Flash movies through the friendly user-interface that Islay provides.

2. MAPPING STATE-TRANSITION DIAGRAMS

TO FLASH MOVIE

Figure 1 is an example of character definition in Islay. An oval represents a state that has a picture and a few activities. The picture represents appearance of the character in that state. The activities can be selected out of a set of performances such as relocation of the character, generation of other characters and message passing to other character. An arrow represents a transition that is conditioned in terms of events such as mouse click and collision with other characters, and arrival of messages.

A typical structure of Flush movies is schematized in Fig.

2. A whole Flash movie is a sequence of frames. Each frame has a piece of movie that is composed of several smaller elements called MovieClips . It is possible to attach a relatively simple program written in ActionScript to a movie or a movie clip to implement an action such as a conditional jump to another frame. A movie with a few jumps but no loops may be called a “static” Flash movie in the sense that it is interactive but not very interactive.

A highly interactive or “dynamical” Flash movie such as video game takes a rather different structure. Basically it has only one frame as schematized in Fig. 3. Everything that takes place in the movie is controlled by a single program written in ActionScript that is attached to the single movie in the single frame. MovieClips that appear in the movie are generated as instances of object definitions called Symbols.

A state of a character in Islay is naturally mapped into a Symbol in Flash since each state has a picture and so does a Symbol. The states of a character shall be mapped into a group of Symbols. A single program written in ActionScript is attached to the single movie that controls everything in the movie. The program shall be constructed in the objectoriented fashion. Each character is mapped into a class of ActionScript and each state is mapped into amethodof the class. The activities of a state is written in the method. The current state is recorded as a private function pointer to a method.

Then state-transition diagrams can be mapped to the Flash movie in the following way: First the program generates an instance of each character class and initializes the function pointer to point to the method representing its initial state.The (initial) method generates a MovieClip as an instance of the Symbol definition corresponding to the initial state.Each method pointed to by the function pointer implements its activities such as relocation of the MovieClip or generating a new instance. Then the method checks if conditions for transitions such as mouse click or collision with other characters may have happened. On transition, the method removes the MovieClip, generates a new MovieClip corresponding to the new state, and rewrites the function pointer to the method corresponding to the new state. Repeating that process, the program naturally implements the movie described by the state-transition diagrams.

The program may become huge as the number of characters,their states and transitions increases because there is only one program that controls everything. But users have only to care about the original state transition diagrams since the program and symbol definitions are automatically generated from the state-transition diagrams.

3. EXAMPLE OF CONVERSION

Figure 1 is a screen shot of Islay editing the definition of an invader character that keeps moving in a direction until it explodes and disappears on collision with a bullet. Its internal representation in Islay is listed in Fig. 4.

A narration of Fig. 4 follows:s0means the initial state having the picture pic0and the activity of jumping to the initial position (0,0) . By default without any conditions,the next state after s0is s1. The state s1has the same picture pic0 and its activity is to relocate the character by the displacement of (10,0). The next state will be s2 if it bumps (collide with) something, or will remain as s1 otherwise. The sate s2 has a picture pic1(representing an explosion) and finishes its existence.

Figure 5 shows a part of the program written in ActionScript and attached to the movie. It is a class definition that takes care of the character named dgm0(the invader). First,

an instance of the character dgm0is generated by mkinst and the function pointer func1 is initialized to point to the initial state dgm0s0func. Then the method indicated by func1 is called with the true flag to perform the activities and is called again with the false flag to perform the transition. The return value of func1 is the function pointer that indicates the method representing the next state.

Figure 6 is the method that performs the activity and transition of s0. Called with true flag, it relocates itself to the position (0,0) . Called with false flag, it removes the MovieClip, generates another MovieClip corresponding to the state s0of character dgm0, and it returns the function

pointer indicating the next state.

Figure 7 is the method for s1. Called with true flag, it relocates itself by the displacement (10,0). Called with false flag, the method myHitTest checks if it collides with any other instances. If so, the MovieClip is removed, a new MovieClip is generated, and the function pointer is updated.

Otherwise, everything remains the same.

Figures 8 and 9 show screen shots of example Flash gamesconstructed though Islay. Each different character is described by a state-transition diagram. Once the instances are placed at their initial position in their initial states,every instance just follows the state-transition diagram to realize, as a whole, a dynamical game.

4. CONCLUSIONS

Making use of the graphical editor of state-transition diagrams built in Islay, we made up a user-friendly tool for authoring interactive Flash movies. The technical contribution is the design and implementation of the translator that converts state-transition diagrams into Flash movie.A social impact is that children are now invited to join the community of Flash game creators through the user-friendly interface of Islay.

5. ACKNOWLEDGMENT

This work was partially supported by the JSPS Grant-In-Aid no.18300027.

6. REFERENCES

[1] Flash Documentation,http://www.adobe.com/support/documentation/en/flash/

[2] Adobe Co., http://www.adobe.com/products/flash/
[3] Ifour Co., http://www.ifour.co.jp/flashmaker/
[4] T. Morioka, ”A tool for authoring interactive animation based on state transition diagram”, Master’s thesis,Graduate School of Science and Engineering, Ibaraki University, February 2002.

[5] S. Okamoto, T Hashimoto, M. Kamada, and T.Yonekura, ”Easy creation of network-based interactive animations using Islay”, Proc. IEEE Pacific Ri m Conf. Comm. Compu. Signal Process., 412-415 (August. 2005)

[6] Learning-i Ltd.,http://learning-i.co.jp/products/islay/index.html

[7] squeak.org: Squeak.,http://squeak.org/.

[8] NTT Communication Science Laboratories Co.,Viscuit.,http://www.viscuit.com/.