1. Interface & navigation (How to build a simple presentation interface) Flash ActionScript Introduction to Thomas Lövgren thomas.lovgren@humlab.umu.se

2. Flash Interface What kind of project?  Project planning (deadline/time, project-team, budget etc)  Purpose and goals of project  Specifications (sections, functions etc.)  Static or dynamic application (Database, XML, textfile etc.)  Design & layout concept  Usability and Accessibility (W3C Guidelines)  Navigation and Interaction with user  Text, sound, images and/or video

3. Build a simple Interface (1/6)  Example: How to build a simple traditional interface and a navigation structure for sections: Main, images, sound and video with Flash 8/CS3 1. Open a new Flash document 2. Set the dimensions of the movie to 800 x 600 and the framerate to 25 in the Document Properties panel 3. Save the document 4. Create a new MovieClip symbol, give it the name: interface_mc

4. Build a simple Interface (2/6) 5. Draw the interface in this clip, 780 x 540, Align:center 6. Drag the clip (interface_mc) from Library to Main Stage, Align:center

5. Build a simple Interface (3/6) 7. Create a new MovieClip symbol, give it the name: menu_mc 8. Drag 5 buttons from the Component Panel and place them on a row in the middle of menu_mc 9. In the Properties Panel: Give the buttons suitable instance names and label names 10. Save!

6. Build a simple Interface (4/6) 11. Name the label: buttons 12. Create a new label, give it the name: actions 13. Select the ’Action layer’ and open the Action Panel 14. Write the code for the navigation buttons: //for main button main_btn.onPress = function(){ _root.gotoAndStop("main"); //navigate to frame ”main” }

7. Build a simple Interface (5/6) 15. Go to Main Stage and insert 5 keyframes on the Timeline for Sections and for Actions 16. Write a stop(); action for each frame 17. Name the Action/navigations frames on timeline, in the Properties Panel The first: ”main”, second: ”images” etc. Tip: How is your navigation structure build?

8. Build a simple Interface (6/6) 18. Create separate movieClips for the sections: Main, Images, Sound, Video and Contact 19. Drag these movieClips from Library and place them in the right frame on main Stage 20. Export & test the navigation Now over to the Publishing part!

9. Publish Movie  The Publish Settings dialogue  Embed the movie (.swf) into a HTML file  Player Version  ActionScript Version  Audio Options  Publish on Web  Upload the movie (.swf file), HTML file (plus sound, images, video) on your server With a FTP client

10. Video interface for streaming (HUMlab)  Flash/ActionScript, Flash Media server, PHP, database

11. Virtual Museum Prototype (Västerbottens museum/HUMlab)  Flash/ActionScript, Maya (3D), XML

12. Mobile System (University)  Flash/ActionScript, Flash Lite, ASP.NET webservice, SQL server database

13. Desktopapplications (RIA)  Flash/ActionScript, AIR, Webservice, database

14. Presentation interface  Flash/ActionScript, Components, ASP, database

15. Mobile System (Bloggopera)  Flash/ActionScript, Socket server, PHP, database