1. B.Sc. Multimedia ComputingMultimedia Authoring Flash Event Model and the Display List Hierarchy

2. Agenda Event-driven programs Flash Event Model The Display List Creating User Interfaces B.Sc. Multimedia ComputingMultimedia Authoring

3. Event -driven programs Programs respond to ‘events’ Waiting for internal events Could be waiting for external user input Windows uses an ‘event model’ or ‘event loop’ Authoring environments like Flash use a similar event-driven model and provide event handlers for frame, mouse, and interface components Event handlers control interactivity in your Flash application B.Sc. Multimedia ComputingMultimedia Authoring

4. Flash Event Model Interface components ‘listen’ for events -and then programmed to ‘handle’ the event Steps required add an interface component attach an event listener to the component write a function to handle the event B.Sc. Multimedia ComputingMultimedia Authoring

5. Example: Mouse Event Add a button from the library with an instance name of startButton Attach an event listener to the button to listen for a mouse click startButton.addEventListener(MouseEvent.CLICK, startButtonClicked); Declare a function to handle the event function startButtonClicked(event:MouseEvent){ trace("You clicked the Start Button!") } B.Sc. Multimedia ComputingMultimedia Authoring

6. Mouse Events MOUSE_DOWN MOUSE_MOVE MOUSE_UP MOUSE_OVER MOUSE_OUT MOUSE_WHEEL CLICK DOUBLE_CLICK B.Sc. Multimedia ComputingMultimedia Authoring

7. Frame Events Use an ENTER_FRAME event to continuously listen for events within the Flash application - place the event on frame one of the timeline. stage.addEventListener(Event.ENTER_FRAME, jackpotEvent); Then declare a function to handle the event function jackpotEvent(event:Event){ if (wins > 10){ jackpot = true } B.Sc. Multimedia ComputingMultimedia Authoring

8. User Interfaces Types of Interfaces: Command -Driven (Unix / System Console) Need to know the commands to use - not user friendly! Experts only! Menu-Driven - (Early MSDOS) finite set of commands available - usually displayed as menu items grouped in hierarchies - e.g ATMs ( cash machines) Graphical User Interface (GUI) ‘WIMP’ Environment: Window, Icons, Menus, Pointer B.Sc. Multimedia ComputingMultimedia Authoring

9. Command Driven An MSDOS Command Prompt

10. Creating a User Interface in Flash Flash has the usually interface components available: Button List Box Combo Box Radio Button Check Box Labels Textfields (input and output) Text Area B.Sc. Multimedia ComputingMultimedia Authoring

11. The Flash Display List B.Sc. Multimedia ComputingMultimedia Authoring Top level - contains everything in the application At least on timeline required e.g. an image e.g. a Sprite e.g. a movieClip

12. Creating TextFields for Outputting Data import flash.text.TextField; import flash.text.TextFormat; //create a new textfield object for dice one and //two and throw var diceOneTextField:TextField = new TextField(); var diceTwoTextField:TextField = new TextField(); var throwTextField:TextField = new TextField(); B.Sc. Multimedia ComputingMultimedia Authoring

13. Creating TextFields for Outputting Data // create a textfield format object to control text // properties var outPutTextFieldFormat:TextFormat = new TextFormat(); // set the font to Arial and the font size to 50 outPutTextFieldFormat.font = "Arial"; outPutTextFieldFormat.size = 50; // set this as the default format for the textfields diceOneTextField.defaultTextFormat = outPutTextFieldFormat; diceTwoTextField.defaultTextFormat = outPutTextFieldFormat; throwTextField.defaultTextFormat = outPutTextFieldFormat; B.Sc. Multimedia ComputingMultimedia Authoring

14. Add and Position Textfield Components // add the textfields to the interface addChild(diceOneTextField); addChild(diceTwoTextField); addChild(throwTextField); // position the textfields on the interface diceOneTextField.x = 200; diceTwoTextField.x = 550; throwTextField.x = 370; throwTextField.y = 300; B.Sc. Multimedia ComputingMultimedia Authoring

15. Display Values in the Components // set the textfields to the value of the roll diceOneTextField.text = numberOne.toString(); diceTwoTextField.text = numberTwo.toString(); // add the dice rolls diceThrow = numberOne + numberTwo; // display the dice throw throwTextField.text = diceThrow.toString(); B.Sc. Multimedia ComputingMultimedia Authoring

16. Input Textfields // create a new TextField of type input var numberInput:TextField = new TextField(); numberInput.type = TextFieldType.INPUT; // get the focus for this component stage.focus = numberInput; // add the component to the interface addChild(numberInput); // add an event listener numberInput.addEventListener(KeyboardEvent.KEY_UP, checkForReturn); B.Sc. Multimedia ComputingMultimedia Authoring

17. Detecting Entering Values // function to check when the return key is released // and call a function to convert the input function checkForReturn(event:KeyboardEvent) { if (event.charCode == 32) { convertInput(); } B.Sc. Multimedia Computing Multimedia Authoring

18. Converting the String to an Integer // convert the text input to an integer add 1 and // display result in the interface function convertInput() { var inputText:String = numberInput.text; var score:int = 0; score = parseInt(inputText); score = score + 1; numberOutputText.text = score.toString(); } B.Sc. Multimedia Computing Multimedia Authoring

19. String to Number Functions String to Integer parseInt(aString:String) String to Number (real) parseFloat(aString:String) B.Sc. Multimedia Computing Multimedia Authoring

20. Testing the Flash Application The some key presses e.g Enter can cause some Unexpected results if tested inside the Flash development environment. Adobe recommends testing the Flash Application (.swf) using the Flash Player only B.Sc. Multimedia Computing Multimedia Authoring

21. Creating GUI Components Create an instance of a component based on an existing class Set the component’s properties as required Add the component to the display list e.g addChild(componentName) Reference the component via appropriate ActionScript commands B.Sc. Multimedia ComputingMultimedia Authoring