Interaction Introduction

1
Interaction Introduction

• Example user interface, from the tutorial sheet
• About events how and why
• Introduction to event handlers
• Where to put your handler code
• Types of event Flash can generate
• Why so many types of event?
• Event-capable objects in Flash
• Further reading

2
The Tutorial - User Interface

• 3-stage buttons
• Rollover graphics
• Clickable graphics
• Keyboard input
• Manipulation of interface elements
• Cheesy design!

3
Events how and why

• How can an application detect user input?
• It could spend a lot of time checking every
  possible input
• Or it could just handle event messages sent by
  the operating system
• Events are generated by all sorts of things key
  presses, timer ticks, clicks, mouse movements
• Why events? Its easy, efficient and common to
  most OS platforms (Win95/98/2000/XP, MacOS, Linux
  GUI shells, )

4
Event handlers

• Flash can receive events through Event Handlers
• There are different styles of handler, they all
  work
• Newer style is better
• // handler for clicking the top button (up_btn)
• up_btn.onRelease function()
• up()

5
Code Placement

• Where does the code live?
• The handler for an object cannot appear before
  the object appears
• If objects are created in frame 1, code can go in
  frame 1
• But on different layers of course!
• Always have (at least) one layer called scripts
  or code or myActionscripts c

6
What events can we handle?

• Flash exposes a wide range of event handlers to
  the scripting language
• The events we can handle include
• onKeyDown, onKeyUp keyboard
• onPress, onRelease button or movieclip click
• onMouseDown, onMouseUp mouse click
• onMouseMove mouse movement
• onRollOut, onRollOver mouse-over
• onDragOut, onDragOver mouse drag

7
Why so many event types?

• Different event types correspond to different
  types of interaction
• This makes Flash very flexible
• You could use the onMouseMove event handler to
  control sounds
• For example, use the system _xmouse property to
  pan from side to side
• And the _ymouse property to control volume

8
What can generate events?

• Most of the things you will need to manipulate or
  monitor for events are movieclips
• Buttons also generate events
• Simple graphics are less useful they are for
  look-and-feel, not interactivity
• In the tutorial, some elements seem to appear
  twice in the Library
• The raw data (e.g. jpeg image) has a movieclip
  version, too why is this a good idea?

9
Advanced Events - example

• Advanced use of Flash involves dynamically
  loading data over networks
• If you want to put up a progress bar, how easy is
  it?
• Event handlers make it less difficult than you
  might expect
• For exampleonEnterFrame event checks
  myObj.getBytesTotal() against myObj.getBytesLoaded
  ()

http//www.kirupa.com/developer/mx2004/xml_flash_p
hotogallery.htm, by kirupa, 2nd September 2004
10
Further Reading

• Kirupa Colouring Bookhttp//www.kirupa.com/deve
  loper/mx2004/coloringbook.htm
• Kirupa Dynamic Event Handlers
  http//www.kirupa.com/developer/actionscript/tric
  ks/dynamicevent.htm
• Kirupa RPG Programming Introduction
  http//www.kirupa.com/developer/actionscript/rpgp
  rogramming.htm
• W3Schools Flash Tutorialshttp//www.w3schools.c
  om/flash/default.asp