CHAPTER 6 CONCLUSION AND FUTURE WORK
A.2 Scenes creation and actor layout
At first, launch VRAS tool and opening a new project and the choosing a background screen. Please see Figure 61. The buttons from left to right at the bottom of the screen are:
z Save: for saving screen information to a file.
z Interaction: for setting interaction attributes for scenes and actors.
z Path: for setting moving paths for actors.
z Button, text, video and image: for instantiating a new actors in the corresponding types
z Preview: for previewing activity scenarios for the target application software.
z Back: for returning to the previous scene.
z Add: for adding a new screen.
z Next: for entering the function binding mode.
Figure 61 Main UI of VRAS tool
Click “image” button to open “Import Picture” dialog. Add the beforehand image actors into the gallery as shown in Figure 62.
Figure 62 Import Picture dialog
Table 3 lists the image that should be added into gallery for construction video player UI application.
Table 3 Image and its function
Image Function Image Function
Scene 1 background Video border
Video Player icon Play video
Help button Snapshot image
Scene 2 background Save image
Back icon
Image large size
Turn up volume
Image medium size)
Turn down volume
Image small size
Through VRAS tool, add two scenes and add theirs text actors and button actors. The result (scene 1 and scene 2) shows in the Figure 63.
Figure 63 Scene 1 and Scene 2 for video player UI application A.3 Interaction editing
After finish layout for the scene 1 and scene 2, a click on the “interaction” button activates the interaction-setting mode for determining the actor’s dynamic behavior. Figure 64 illustrates the operation: clicking in scene 1 establishes a link to the scene 2. After using the mouse to focus on the actor, drag the scene 2 screen to the container on the left hand side in the screen. Now, the scene branch from scene 1 to scene 2 through actor is established. In the same method, we can establish branch from scene 2 to scene 1. After finish the interaction editing, the branch among scenes are shown in the Figure 65.
Figure 64 Edit scene 1 and scene 2 relationships for video player UI application
Figure 65 Scene 1 and Scene 2 interaction relationships A.4 Function binding
Click the Next and Binding buttons to enter the function binding system, select VeoPlayer.dll file to binding function into the prelude scenario of scene 2. Other functions binding operation are same above operation. Table 4 lists all of the actors and their binding DLL files used in the video player UI application.
Table 4 Actors and its binding DLL file list
Actors DLL file Functions
VideoDll.dll Prelude of scene 2 VideoDll_Play.dll Video Play
VideoDll_Shot.dll Snapshot VideoDll_Save.dll Save image
VideoDll_Mid.dll Image size (Medium)
VideoDll_Small.dll Image size (Small)
VideoDll_SndPlus.dll Turn up volume
VideoDll_SndMinus.dll Turn down volume
Now, clicking on the video player button of scene 1 to branch to scene 2, and clicking on play button brings up the image shown in Figure 66. The buttons , and are used to adjust image size. The button is used to snapshoot a still image. The button is used to save still image. The image buttons and are used to turn down/turn up volume.
Click button will go back to scene 1. The button is used to link to a web page.
Figure 66 Video player UI application
Appendix B
VRAS scripts for video player UI application system
EBP (eBook Project file):
UI-1:
[SCENEINFO]
Title = "VidepPlayerSim"
BackgroundImage = "@Sc000.jpg"
BackgroundMusic = ""
PreludeEffect = 0 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 0 MouseDownIdxEnd = 0 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 0 MouseOverIdxEnd = 0 Underline StrikeOut color(R, G, B)
LineCount = 1
FontName = "Arial"
FontSize = 12
FontStyle = 1 0 0 0 0 28 189 // Bold Italic Underline StrikeOut color(R, G, B) LineCount = 1 PicFile = "@Help.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 Underline StrikeOut color(R, G, B) LineCount = 1
EBook.GotoScene( "@Sc759" );
}
[END_INTERACTIVE]
UI-2:
[SCENEINFO]
Title = "VidepPlayerSim"
BackgroundImage = "@Sc759.jpg"
BackgroundMusic = ""
PreludeEffect = 0
PicFile = "@Back.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 SegmentCount = 1
PicFile = "@Large.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1
[CAST] MCBtn
PicFile = "@Small.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 PicFile = "@Shot.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 PicFile = "@Play.GIF"
FrameCount = 1 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 0 MouseDownIdxEnd = 0 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 0 MouseOverIdxEnd = 0 Underline StrikeOut color(R, G, B) LineCount = 1
Lines =
SegmentCount = 1 Underline StrikeOut color(R, G, B) LineCount = 1 Underline StrikeOut color(R, G, B)
LineCount = 1
PicFile = "@Border.jpg"
FrameCount = 1
PicFile = "@SndMinus.gif"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1
End
PicFile = "@SndPlus.gif"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 Underline StrikeOut color(R, G, B) LineCount = 1 PicFile = "@Save.GIF"
FrameCount = 2 MouseInitIdxBegin = 0 MouseInitIdxEnd = 0 MouseDownIdxBegin = 1 MouseDownIdxEnd = 1 MouseOutIdxBegin = 0 MouseOutIdxEnd = 0 MouseOverIdxBegin = 1 MouseOverIdxEnd = 1 Underline StrikeOut color(R, G, B) LineCount = 1
[END_CASTDEFINE]
[PRELUDE]
{
AppLink.LoadDll( "VideoDll.dll", "287",
"160" );
EBook.GotoScene( "@Sc000" );
}
AppLink.LoadDll( "VideoDll_Large.dll", "-800", "-800" );
AppLink.LoadDll( "VideoDll_Mid.dll", "-800",
"-800" );
AppLink.LoadDll( "VideoDll_Small.dll", "-800", "-800" );
AppLink.LoadDll( "VideoDll_Shot.dll", "-800",
"-800" );
AppLink.LoadDll( "VideoDll_Play.dll", "-800",
"-800" );
ANCHOR Actor010 : {
LMOUSECLICK:
{
AppLink.LoadDll( "VideoDll_SndMinus.dll", "-800", "-800" );
AppLink.LoadDll( "VideoDll_SndPlus.dll", "-800", "-800" );
AppLink.LoadDll( "VideoDll_Save.dll", "-800",
"-800" );
Appendix C
UML Diagram Representation for Video player UI application system
Figure 67 Class diagram for story scenes hierarchy Figure 68 State diagram story scenes branch
Figure 69 Class diagram for actors hierarchy within scene 1
Figure 70 Sequence diagram for “video play”
scenario in the scene 1
Figure 71 Sequence diagram for “help” scenario in the scene 1
Figure 72 Class diagram for actors hierarchy within scene 2
Figure 73 Sequence diagram for “prelude” scenario Figure 74 Sequence diagram for “back” scenario in
Figure 75 Sequence diagram for “play video”
scenario in the scene 2
Figure 76 Sequence diagram for “image zoom in”
scenario in the scene 2
Figure 77 Sequence diagram for “image normal size” scenario in the scene 2
Figure 78 Sequence diagram for “image zoom out”
scenario in the scene 2
Figure 79 Sequence diagram for “sound plus”
scenario in the scene 2
Figure 80 Sequence diagram for “sound minus”
scenario in the scene 2