Interface & navigation Interface & navigation (How to build a simple presentation (How to build a simple presentation

interface)interface)

Flash ActionScriptFlash ActionScriptIntroduction toIntroduction to

Thomas Lövgrenthomas.lovgren@humlab.umu

.se

Flash InterfaceFlash Interface

What kind of project?What kind of project? Project planning (deadline/time, project-team, Project planning (deadline/time, project-team,

budget etc)budget etc) Purpose and goals of projectPurpose and goals of project Specifications (sections, functions etc.)Specifications (sections, functions etc.) Static or dynamic application (Database, XML, textfile Static or dynamic application (Database, XML, textfile

etc.)etc.) Design & layout conceptDesign & layout concept Usability and Accessibility (W3C Guidelines)Usability and Accessibility (W3C Guidelines) Navigation and Interaction with userNavigation and Interaction with user Text, sound, images and/or videoText, sound, images and/or video

Build a simple Interface Build a simple Interface (1/6)(1/6)

ExampleExample: How to build a simple : How to build a simple traditionaltraditional interface and a navigation structure for sections: interface and a navigation structure for sections: Main, images, sound and video with Flash 8/CS3Main, images, sound and video with Flash 8/CS3

1. Open a new Flash document1. Open a new Flash document

2. Set the dimensions of the movie to 800 x 600 2. Set the dimensions of the movie to 800 x 600 and the framerate to 25 in the and the framerate to 25 in the Document Document PropertiesProperties panel panel

3. Save the document3. Save the document

4. Create a new MovieClip symbol, give it the 4. Create a new MovieClip symbol, give it the name:name:

interface_mcinterface_mc

Build a simple Interface Build a simple Interface (2/6)(2/6)

5. Draw the interface in this clip, 780 x 540, 5. Draw the interface in this clip, 780 x 540, Align:centerAlign:center

6. Drag the clip (interface_mc) from 6. Drag the clip (interface_mc) from LibraryLibrary to to Main Stage, Main Stage, Align:centerAlign:center

Build a simple Interface Build a simple Interface (3/6)(3/6)

7. Create a new MovieClip symbol, give it the 7. Create a new MovieClip symbol, give it the name:name:

menu_mcmenu_mc

8. Drag 5 buttons from the 8. Drag 5 buttons from the Component PanelComponent Panel and and place them on a row in the middle of menu_mcplace them on a row in the middle of menu_mc

9. In the 9. In the Properties PanelProperties Panel: Give the buttons : Give the buttons suitable suitable instance namesinstance names and and label nameslabel names

10. Save!10. Save!

Build a simple Interface Build a simple Interface (4/6)(4/6)

11. Name the 11. Name the labellabel: buttons: buttons

12. Create a new label, give it the name: actions12. Create a new label, give it the name: actions

13. Select the ’Action layer’ and open the 13. Select the ’Action layer’ and open the Action Action PanelPanel

14.14. Write the code for the navigation buttons:Write the code for the navigation buttons:

//for main button//for main button

main_btn.onPress = function(){main_btn.onPress = function(){

_root.gotoAndStop("main"); //navigate to frame ”main”_root.gotoAndStop("main"); //navigate to frame ”main”

}}

Build a simple Interface Build a simple Interface (5/6)(5/6)

15. Go to Main Stage and insert 5 keyframes on the 15. Go to Main Stage and insert 5 keyframes on the TimelineTimeline for Sections and for Actions for Sections and for Actions

16. Write a stop(); action for each 16. Write a stop(); action for each

frameframe

17. Name the Action/navigations 17. Name the Action/navigations

frames on timeline, in the Properties frames on timeline, in the Properties

Panel The first: ”main”, second: ”images” etc.Panel The first: ”main”, second: ”images” etc.

Tip: Tip: How is your navigation structure How is your navigation structure build?build?

Build a simple Interface Build a simple Interface (6/6)(6/6)

18. Create separate movieClips for the sections: 18. Create separate movieClips for the sections: Main, Images, Sound, Video and ContactMain, Images, Sound, Video and Contact

19. Drag these movieClips from Library and place 19. Drag these movieClips from Library and place them in the right frame on main Stagethem in the right frame on main Stage

20. Export & test the navigation20. Export & test the navigation

Now over to the Publishing part!Now over to the Publishing part!

Publish MoviePublish Movie The Publish Settings dialogueThe Publish Settings dialogue

Embed the movie (.swf) into a HTML fileEmbed the movie (.swf) into a HTML file Player VersionPlayer Version ActionScript VersionActionScript Version Audio OptionsAudio Options

Publish on WebPublish on Web Upload the movie (.swf file), HTML file Upload the movie (.swf file), HTML file

(plus sound, images, video) on your server(plus sound, images, video) on your server

With a FTP clientWith a FTP client

Video interface for Video interface for streamingstreaming(HUMlab)(HUMlab)

Flash/ActionScript, Flash Media server, PHP, Flash/ActionScript, Flash Media server, PHP, databasedatabase

Virtual Museum Virtual Museum Prototype Prototype

(Västerbottens (Västerbottens museum/HUMlab)museum/HUMlab) Flash/ActionScript, Maya (3D), XMLFlash/ActionScript, Maya (3D), XML

Mobile SystemMobile System(University)(University)

Flash/ActionScript, Flash Lite, ASP.NET Flash/ActionScript, Flash Lite, ASP.NET webservice, SQL server databasewebservice, SQL server database

Desktopapplications Desktopapplications (RIA)(RIA)

Flash/ActionScript, AIR, Webservice, databaseFlash/ActionScript, AIR, Webservice, database

Presentation interfacePresentation interface

Flash/ActionScript, Components, ASP, databaseFlash/ActionScript, Components, ASP, database

Mobile SystemMobile System(Bloggopera)(Bloggopera)

Flash/ActionScript, Socket server, PHP, databaseFlash/ActionScript, Socket server, PHP, database