Introduction to
Flash ActionScript
Interface & navigation
(How to build a simple presentation interface)
Thomas Lövgren
thomas.lovgren@humlab.umu.se
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
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
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
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!
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”
}
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?
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!
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
Video interface for streaming
(HUMlab)

Flash/ActionScript, Flash Media server, PHP, database
Virtual Museum Prototype
(Västerbottens museum/HUMlab)

Flash/ActionScript, Maya (3D), XML
Mobile System
(University)

Flash/ActionScript, Flash Lite, ASP.NET webservice, SQL
server database
Desktopapplications (RIA)

Flash/ActionScript, AIR, Webservice, database
Presentation interface

Flash/ActionScript, Components, ASP, database
Mobile System
(Bloggopera)

Flash/ActionScript, Socket server, PHP, database