Flash Interaction Techniques
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
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
The Tutorial - User Interface
3-stage buttons
Rollover graphics
Clickable graphics
Keyboard input
Manipulation of
interface elements
Cheesy design!
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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? It’s easy, efficient and common
to most OS platforms (MSWindows, MacOS,
Linux GUI shells, Android…)
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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();
}
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
What events can we handle?
Flash exposes a wide range of event handlers
to the scripting language
Some of the common events include:
onKeyDown, onKeyUp: keyboard
onPress, onRelease: button or movieclip click
onMouseDown, onMouseUp: general mouse click
onMouseMove: mouse movement
onRollOut, onRollOver: mouse-over (edges)
onDragOut, onDragOver: mouse drag
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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?
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
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?
High-level event handlers make
it less difficult than you might
expect
For example:
onEnterFrame event checks
myObj.getBytesTotal() againsthttp://www.kirupa.com/developer/mx2004/xml_flash_photo
myObj.getBytesLoaded() gallery.htm, by kirupa, 2nd September 2004
Originator: N.A.Shulver@staffs.ac.uk
Flash Interaction Techniques
Further Reading
Kirupa – Colouring Book
http://www.kirupa.com/developer/mx2004/coloringboo
k.htm
Kirupa – Dynamic Event Handlers
http://www.kirupa.com/developer/actionscript/tricks/dy
namicevent.htm
Kirupa – RPG Programming: Introduction
http://www.kirupa.com/developer/actionscript/rpgprogr
amming.htm
W3Schools – Flash Tutorials
http://www.w3schools.com/flash/default.asp
Originator: N.A.Shulver@staffs.ac.uk