1 Flash Actionscript Event Handling. 2 Event Handling Right now we know all about variables lets go back to our text input/output example: Suppose we.

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

1What is the Stage. 2How do you open a panel in Flash
© 2010 Delmar, Cengage Learning Chapter 9: Using ActionScript.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 18 – Macromedia Flash MX 2004: Building an Interactive Game Outline 18.1 Introduction 18.2 Object-Oriented.
Adding Interactivity to Flash Movies Using Buttons and ActionScript SPACE Lab
1 Flash Actionscript Adding Interactive Actions Variables.
Introduction to Macromedia Flash 8
1 Flash Actionscript Actionscript and Objects. 2 Actionscript and Objects ActionScript is what's known as an object-oriented programming language. Object-oriented.
1 Flash Actionscript Adding Interactive Actions. 2 ActionScript 3.0 ActionScript is the language you use to add interactivity to Flash applications, whether.
1 Flash Programming Introduction Script Assist. 2 Course Description This course concentrates on the teaching of Actionscript, the programming language.
Events (Listeners/Handlers: Mouse, keyboard, timer) Flash ActionScript 3.0 Introduction to Thomas Lövgren, Flash developer
Find your video on youtube e.g. Place the work ‘kick’ in the url.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 17 Putting It All Together. Viewing the Preloader To view the preloader, 1.CTRL-Enter to test the movie. 2.View > Simulate Download.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Frame Part of timeline panel You can remove normal frames from a certain layer by (MRC + Remove Frames). You can remove normal frames from a certain layer.
Chapter 3 Working with Symbols and Interactivity.
Flash Michelle Johnston, Firebird Services Ltd. What Is Flash? Flash is a multimedia program created specially for use on the Web You can create animations/movies.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
Introduction to Flash FYS100 Creative Discovery in Digital Art Forms Spring 2007 Burg.
1 Flash Basics by Dr SC Li. 2 File Types  In general, Flash 5.0 generates 3 types of files:  ???.fla  Flash ’ s working file  ???.swf  Flash movie.
Lehigh University Introduction to Flash MX Sharmeen Mecklai.
Chapter 11 Adding Sound and Video. Chapter 11 Lessons 1.Work with sound 2.Specify synchronization options 3.Modify sounds 4.Use ActionScript with sound.
© 2011 Delmar, Cengage Learning Chapter 9 Introduction to ActionScript 3.0.
Chapter 2 Adding Animation to a Presentation. Applying Animation Animation is a great way to add life to InDesign documents by making objects: – move.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
Tutorial 8 Programming with ActionScript 3.0. XP Objectives Review the basics of ActionScript programming Compare ActionScript 2.0 and ActionScript 3.0.
Getting a handle on ActionScript A basic primer for non-programmers.
Lab 6: event & input intro User Interface Lab: GUI Lab Oct. 2 nd, 2013.
Tutorial 7 Planning and Creating a Flash Web Site.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
CSC 361/661 Digital Media Spring 2010 Professor Burg.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
Motion Tweening – Lesson 81 Motion Tweening Lesson 8.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
Distributed Multimedia Programming Week – 4A Buttons Movie Clips.
XP Tutorial 8 Adding Interactivity with ActionScript.
Building the Events Components– Lesson 111 Building the Events Components Lesson 11.
1 Flash Basics Exercise Guide Making Animated Text  1.1 Open Flash 5.0 working environment frame 1  1.2 Highlight frame 1 of the first layer Insert.
© 2011 Delmar, Cengage Learning Chapter 10 Using ActionScript to Enhance User Experience.
1 Actionscript for Flash by Dr SC Li. 2 Understanding more about instances Symbolsgraphics buttons Movie clips Instances (without names) No interaction.
XP Tutorial 7 Creating a Flash Web Site. XP New Perspectives on Macromedia Flash 82 Objectives Plan and create a Flash Web site Create a Flash template.
SCRIPT PROGRAMMING WITH FLASH Introductory Level 1.
Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12.
FLASH!!!!!!!!!!!!!!!!!!!!!!!!! A TUTORIAL BY BRITTANY HESS AND MARGARET DENTON.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Open a new Flash File Action Script 2.0. Create a button like you did last lesson and name it Click to Play.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Sound and Video.
CISC 110 Day 6 Introduction to Events. Outline Event-Driven Programming Event Classes Hierarchy –Event Class –Mouse Events –Keyboard Events Registering.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Copyright © 2003 Pearson Education, Inc. Chapter 4 – Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
Flash 1. Document Properties Set frame rate and dimensions of project Set frame rate and dimensions of project (default width=550 and height=400)
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
Macromedia Flash MX Design Professional And Interactivity WORKING WITH SYMBOLS.
 Movieclip symbols are reusable pieces of flash animation  consisting usually of one or more graphic/button symbols  thus they are flash movies within.
 Motion Tween allow us to move a shape on the stage from one place to another.  In order to use motion tween, the shape to be moved must be converted.
Creating a Flash Web Site
ActionScript Basics 2016 (2.0 – 3.0)
Macromedia Flash Tutorial
CT1514 Flash-2.
INTRODUCTION TO ADOBE FLASH CS4
INTRODUCTION TO FLASH ANIMATION
Working with Symbols and Interactivity
Flash Demonstration – Unit 5 – ActionScript 3.0
Presentation transcript:

1 Flash Actionscript Event Handling

2 Event Handling Right now we know all about variables lets go back to our text input/output example: Suppose we want to create an Enter button e.g. user types stuff into the input field, when finished clicks Enter, and then the text is displayed in the output field??? What we need is some way to detect that the user has clicked on the button and some way of knowing what to do when this happens…

3 ActionScript and Events ActionScript code is executed when an event occurs: E.g., when a movie clip is loaded, when a keyframe on the timeline is entered, or when the user clicks a button. Events can be triggered either by the user or by the system. Users click mouse buttons and press keys; the system triggers events when specific conditions are met or processes completed (the SWF file loads, the timeline reaches a certain frame, a graphic finishes downloading…).

4 ActionScript and Events When an event occurs, you write an event handler to respond to the event with an action. When you are writing ActionScript code to perform event handling, there are three important elements you'll want to identify: 1. The event source 2. The event 3. The response

5 ActionScript and Events The event source: Which object is the one the event is going to happen to? E.g., which button will be clicked, or which Loader object is loading the image? The event source is also known as the event target, because it's the object where the event is targeted by Flash Player (where the event actually happens).

6 ActionScript and Events The event: What is the thing that is going to happen, the thing that you want to respond to? This is important to identify, because many objects trigger several events. The response: What step(s) do you want performed when the event happens?

7 ActionScript and Events Any time you write ActionScript code to handle events, it will include these three elements, and the code will follow this basic structure elements in bold are placeholders you'd fill in for your specific case. eventSource.addEventListener(EventType.EVENT_NAME, eventResponse); function eventResponse(eventObject:EventType):void { // Actions performed in response to the event go here. }

8 ActionScript and Events First, we define a function, which is the way to specify the actions you want performed in response to the event. Next, we call the addEventListener() method of the source object, in essence "subscribing" the function to the specified event so that when the event happens, the function's actions are carried out.

9 ActionScript and Events A function provides a way for you to group actions together, with a single name that is like a shortcut name to carry out the actions. When you're creating a function for event handling, you must choose the name for the function (named eventResponse in this case), and you must also specify one parameter ( eventObject ). Specifying a function parameter is like declaring a variable, so you also have to indicate the data type of the parameter.

10 ActionScript and Events There is an ActionScript class defined for each event, and the data type you specify for the function parameter is always the class associated with the particular event you want to respond to. Finally, between the opening and closing curly brackets ({... }), you write the instructions you want the computer to carry out when the event happens.

11 ActionScript and Events Once you've written the event-handling function, you need to tell the event source object (the object that the event happens to--for example, the button) that you want your function to be called when the event happens. You do this by calling the addEventListener() method of that object (all objects that have events also have an addEventListener() method).

12 ActionScript and Events The addEventListener() method takes two parameters: First, the name of the specific event you want to respond to. Second, the name of your event response function.

13 Examining the Event-handling Process What happens when you create an event listener? Let’s look at creating a listener function that is called when an object named myButton is clicked. Here is how this code would actually work when it's running in Flash Player: function eventResponse(event:MouseEvent):void { //Actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse);

14 Examining the Event-handling Process 1. When the SWF file loads, Flash Player makes note of the fact that there's a function named eventResponse(). Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse);

15 Examining the Event-handling Process 2. Flash Player then runs the code (specifically, the lines of code that aren't in a function). In this case that's only one line of code: calling the addEventListener() method of the event source object (named myButton ) and passing the eventResponse function as a parameter. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2()

16 Examining the Event-handling Process a. Internally, myButton has a list of functions that are listening to each of its events, so when its addEventListener() method is called, myButton stores the eventResponse() function in its list of event listeners. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2() eventResponse()

17 Examining the Event-handling Process 3. At some point, the user clicks the myButton object, triggering its click event (identified as MouseEvent.CLICK in the code). At that point, the following occurs…

18 Examining the Event-handling Process a. Flash Player creates an object, an instance of the class associated with the event in question ( MouseEvent in this example). For many events this will be an instance of the Event class; for mouse events it will be a MouseEvent instance; and for other events it will be an instance of the class that's associated with that event. This object that's created is known as the event object, and it contains specific information about the event that happened: what type of event it is, where it happened, and other event-specific information if applicable.

19 Examining the Event-handling Process Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2() eventResponse() eventObject target:myButton type:mouseEvent.CLICK …

20 Examining the Event-handling Process b. Flash Player then looks at the list of event listeners stored by myButton. It goes through these functions one by one, calling each function and passing the event object to the function as a parameter. Since the eventResponse() function is one of myButton 's listeners, as part of this process Flash Player calls the eventResponse() function.

21 Examining the Event-handling Process Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2() eventResponse() eventObject target:myButton type:mouseEvent.CLICK …

22 Examining the Event-handling Process c. When the eventResponse() function is called, the code in that function runs, so your specified actions are carried out. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2() eventResponse() eventObject target:myButton type:mouseEvent.CLICK …

23 Event-Handling Examples Clicking a button to start the current movie clip playing: 1. Draw a circle on the stage, convert it to a graphic symbol and give it the name ball. 2. Create a simple animation with motion tweening using ball. 3. Create a new button symbol for your ‘play’ button. Call it myButton.

24 Event-Handling Examples 4. On your main timeline create a new layer called ‘button’ and with that layer selected drag myButton onto the stage. 5. With your button still selected go to the properties panel and Give this instance of myButton the instance name playbutton. 6. Create another new layer and call it ‘actions’. 7. Put the following code into frame 1 of your actions layer.

25 Event-Handling Examples Remember playButton is the instance name of the button, and this is a special name meaning "the current object": this.stop(); function playMovie(event:MouseEvent):void { this.play(); } playButton.addEventListener(MouseEvent.CLICK, playMovie);

26 Event-Handling Examples Clicking a button to navigate to a URL Create a new button symbol and call it myButton. Place the button on the main timeline and give it the instance name linkButton. Create a new layer called ‘actions’ and put the following code into frame 1…

27 Event-Handling Examples Remember In this case, linkButton is the instance name of the button: function gotoFacebook(event:MouseEvent):void { var facebookURL:URLRequest = new URLRequest(" navigateToURL(facebookURL); } linkButton.addEventListener(MouseEvent.CLICK, gotoFacebook);

28 Text Input Example… 1. Open a new movie and select the Text Option. Select Input Text from the drop-down menu in the properties panel and click once on the stage to insert a textfield. 2. Give your textfield the instance name entryText. 3. With the Text Option still selected insert another textfield, select Dynamic Text from the drop-down menu and give it the instance name outputText.

29 Text Input Example… 4. Create a button symbol for your ‘enter’ button. Call it myButton. 5. Drag myButton onto the main timeline and give it the instance name entryButton. 6. Create a new layer called ‘actions’ and place the following code into frame 1…

30 Text Input Example… Remember entryText is an input text field, and outputText is a dynamic text field. entrybutton is the instance name of your enter button. function updateOutput(event:MouseEvent):void { var pressedKey:String = entryText.text; outputText.text = "You typed: " + pressedKey; } entryButton.addEventListener(MouseEvent.CLICK,updateOutput);