A Preview of Event-Driven A Preview of Event-Driven ProgrammingProgramming

CS225CS225Presented By:Presented By:

Brandon Gigot & Joe CohenBrandon Gigot & Joe Cohen

A Brief IntroductionA Brief Introduction

Joe and Brandon are both Computer Science Joe and Brandon are both Computer Science Majors at St. Norbert CollegeMajors at St. Norbert College

The Project was really chosen as a way to The Project was really chosen as a way to become familiar with Flash and the art that is become familiar with Flash and the art that is Event Programming! Prior to this project, neither Event Programming! Prior to this project, neither of us really had any experience in either field.of us really had any experience in either field.

Event Programming is a course offered here at St. Event Programming is a course offered here at St. Norbert College. You can find more information Norbert College. You can find more information online or from one of the Computer Science online or from one of the Computer Science Professors (Dr. McVey)Professors (Dr. McVey)

Presentation OutlinePresentation Outline

Event-Driven ProgrammingEvent-Driven Programming1.1. What is it?What is it?

2.2. How did it come about?How did it come about?

3.3. How does it work?How does it work? Macromedia Flash (Adobe)Macromedia Flash (Adobe)

1.1. What is it?What is it?

2.2. What is it used for today?What is it used for today?

3.3. What is ActionScript?What is ActionScript?

4.4. ActionScript and Event-ProgrammingActionScript and Event-Programming

Presentation Outline Presentation Outline ContinuedContinued

Sample CodeSample Code1.1. A general look at ActionScript inside FlashA general look at ActionScript inside Flash

2.2. Some of our codeSome of our code

3.3. What this means for the capabilities of Flash What this means for the capabilities of Flash

4.4. Code and Flash creations combined!Code and Flash creations combined!

Event-Driven ProgrammingEvent-Driven Programming

Event Programming is a computer programming method Event Programming is a computer programming method used to help the computer interact with the environment.used to help the computer interact with the environment.

Most programs are structured to only change data flow given Most programs are structured to only change data flow given certain branching points, but the flow of the event program certain branching points, but the flow of the event program depends upon actions going on in the outside world. depends upon actions going on in the outside world.

Everything from the click of your mouse, scrolling over an Everything from the click of your mouse, scrolling over an object with your mouse, entering data, and calling the time object with your mouse, entering data, and calling the time can be turned into an event.can be turned into an event.

Much of the graphical interface we see has been set up to Much of the graphical interface we see has been set up to respond to events.respond to events.

Each window you open has the minimize, restore, and close Each window you open has the minimize, restore, and close options in the top right corner. Your computer is constantly options in the top right corner. Your computer is constantly searching for a mouse click in one of those areas. Once one searching for a mouse click in one of those areas. Once one is received, the chosen result takes place!is received, the chosen result takes place!

HistoryHistory

During the 1970's, the typical computer system was a batch During the 1970's, the typical computer system was a batch processing system. Input data was typically a sequential file processing system. Input data was typically a sequential file on tape. on tape.

A program reads data from the input file, processed it, and A program reads data from the input file, processed it, and wrote the results out to another sequential file. That file, in wrote the results out to another sequential file. That file, in turn, was processed by another program and written out to turn, was processed by another program and written out to another file, which in turn was processed by another another file, which in turn was processed by another program, and so on.program, and so on.

The standard model of a computer system was an assembly The standard model of a computer system was an assembly line. Raw materials come in one door; they are processed, line. Raw materials come in one door; they are processed, processed, processed; and at the end of the processing, a processed, processed; and at the end of the processing, a finished product is pushed out another door. This mental finished product is pushed out another door. This mental model underlay the "structured" systems development model underlay the "structured" systems development methods.methods.

Today we can think of the processor as a spider web. Data Today we can think of the processor as a spider web. Data can be passed freely from location to location, shattering the can be passed freely from location to location, shattering the capabilities of old.capabilities of old.

History ContinuedHistory Continued

The top figureThe top figure represents the structured computer design represents the structured computer design of old. It was basically a singular data path that ran forward of old. It was basically a singular data path that ran forward like a giant pipeline. like a giant pipeline. The bottom figureThe bottom figure shows how the data shows how the data structure has changed into that of a transaction. A structure has changed into that of a transaction. A transaction occurs when any piece of data, signal, control, transaction occurs when any piece of data, signal, control, or event is sent to the transaction center to be processed.or event is sent to the transaction center to be processed.

So How Does It Work?So How Does It Work?

Event LoopsEvent Loops are used by the system to continuously look for are used by the system to continuously look for a certain action or information to be sent. Certain events a certain action or information to be sent. Certain events such as the time of day could also be used to set off an such as the time of day could also be used to set off an event. To program an event driven system one must rewrite event. To program an event driven system one must rewrite the default trigger functions of the system, to match the the default trigger functions of the system, to match the desired behavior. desired behavior.

The method by which information on events is acquired by The method by which information on events is acquired by the system doesn't matter. Inputs can be polled the system doesn't matter. Inputs can be polled (continuously checked) within the event loop, to determine if (continuously checked) within the event loop, to determine if part of the system is ready to send of receive data. Also, part of the system is ready to send of receive data. Also, interrupt handlers can be registered to react to hardware interrupt handlers can be registered to react to hardware events. Many systems will use a mixture of both techniques.events. Many systems will use a mixture of both techniques.

So How Does It Work? So How Does It Work? ContinuedContinued

Event-driven programs consist of a few parts:Event-driven programs consist of a few parts: DispatcherDispatcher – receives events and determines which handlers can – receives events and determines which handlers can

deal with deal with an event of that typean event of that type Loops so that it can continuously handle incoming eventsLoops so that it can continuously handle incoming events An event queue may be used to store events waiting to be dispatchedAn event queue may be used to store events waiting to be dispatched

Event HandlersEvent Handlers – called by the dispatcher, execute a portion of – called by the dispatcher, execute a portion of the program the program based on the event sent to itbased on the event sent to it

In some cases, event handlers may trigger other events In some cases, event handlers may trigger other events themselves leading to an themselves leading to an event cascadeevent cascade – a difficult problem to – a difficult problem to fixfix

Inner WorkingsInner Workings

The Dispatcher:The Dispatcher:1. Receives the data, event, etc.1. Receives the data, event, etc.2. Analyzes the transaction type2. Analyzes the transaction type3. Dispatches the type of transaction3. Dispatches the type of transaction4. Completes the transaction process 4. Completes the transaction process

Inner Working ContinuedInner Working Continued Applications can either treat event streams as infinite or finite.Applications can either treat event streams as infinite or finite.

A typical use for infinite event streams is in an application that controls A typical use for infinite event streams is in an application that controls hardware. The application searches for events concerning that hardware. The application searches for events concerning that hardware anytime the computer is running.hardware anytime the computer is running.

Most other event handling applications use a finite event stream. The Most other event handling applications use a finite event stream. The stream is opened when the application is launched and proceeds until stream is opened when the application is launched and proceeds until a special event occurs. Examples of such special events are:a special event occurs. Examples of such special events are:

Keyboard key pressed (ESC, Enter)Keyboard key pressed (ESC, Enter) A particular mouse click within the applicationA particular mouse click within the application Clicking a CLOSE button in GUI (think X in Windows)Clicking a CLOSE button in GUI (think X in Windows)

There are some events that a dispatcher may not have an assigned There are some events that a dispatcher may not have an assigned handler for. These situations can either be ignored, or an handler for. These situations can either be ignored, or an exception can be raised.exception can be raised. For example, GUI applications are concerned mostly with the clicking For example, GUI applications are concerned mostly with the clicking

of the mouse, but not with the pointer movement. Movement events of the mouse, but not with the pointer movement. Movement events are typically ignored in GUI applicationsare typically ignored in GUI applications

More Inner WorkingsMore Inner Workings

Event-driven programming aims to be as Event-driven programming aims to be as asynchronous as possible. That is, the program is asynchronous as possible. That is, the program is not dependant on the clock or particular time of day. not dependant on the clock or particular time of day.

Operating systems are a very common use of event-Operating systems are a very common use of event-driven programming. The graphical interface of most driven programming. The graphical interface of most operating systems responds to several types of operating systems responds to several types of events.events.

Mouse clicksMouse clicks Text EnteredText Entered Shortcut keys pressedShortcut keys pressed

Operating systems also typically act as dispatchers Operating systems also typically act as dispatchers for software processes, passing data and software for software processes, passing data and software interrupts to user processes that in many cases are interrupts to user processes that in many cases are programmed as event handlers themselves. programmed as event handlers themselves.

With All That In Mind….!With All That In Mind….!

We will now move into an environment that allows us to We will now move into an environment that allows us to use event programming through the use of graphical user use event programming through the use of graphical user interface.interface.

Various event-driven programming environments include:Various event-driven programming environments include:1.1. Flash (w/ ActionScript)Flash (w/ ActionScript)

2.2. MFCMFC

3.3. C++C++

4.4. Visual BasicVisual Basic

5.5. JavaJava

Macromedia (Adobe) FlashMacromedia (Adobe) Flash Macromedia Flash (which is now actually Adobe Flash and Macromedia Flash (which is now actually Adobe Flash and

long before that FutureSplash) is a multimedia authorizing long before that FutureSplash) is a multimedia authorizing program used to create web applications, games, and program used to create web applications, games, and movies. The Flash Player is available in most web browsers. movies. The Flash Player is available in most web browsers. It has high quality graphics and is backed by its own It has high quality graphics and is backed by its own programming language called ActionScript. ActionScript is programming language called ActionScript. ActionScript is what Flash makers use to make just about all of the what Flash makers use to make just about all of the interactive elements you see such as buttons, text entry interactive elements you see such as buttons, text entry fields, and pick lists. fields, and pick lists.

Flash itself is an integrated development environment or Flash itself is an integrated development environment or IDE whereas Flash Player is used to run the Flash files. IDE whereas Flash Player is used to run the Flash files. Since its development in 1996, Flash has become very Since its development in 1996, Flash has become very popular for adding animation and an interactive element to popular for adding animation and an interactive element to web pages, such as Homestarrunner.com. Most of the time web pages, such as Homestarrunner.com. Most of the time you will see Flash used on advertisements, and other things you will see Flash used on advertisements, and other things that use videos on web pages. The interactive element is that use videos on web pages. The interactive element is where we, the event programmers come into the picture! where we, the event programmers come into the picture!

Flash SiteFlash Site

Here we see pictures from HomeStarRunner.comHere we see pictures from HomeStarRunner.com Everything is made in Flash!Everything is made in Flash! Each side menu triggers an event by merely being scrolled Each side menu triggers an event by merely being scrolled

over.over. Scrolling over downloads made (Pan-Pan) the panda fall Scrolling over downloads made (Pan-Pan) the panda fall

where being over store triggers the blue hair on HomeStar!where being over store triggers the blue hair on HomeStar! Some events such as download trigger an uninterruptible Some events such as download trigger an uninterruptible

event such as the one on the far right with Stinkomanevent such as the one on the far right with Stinkoman

Flash (Good or Evil?)Flash (Good or Evil?) Today, just about all the hot sites on the internet use Flash. Just Today, just about all the hot sites on the internet use Flash. Just

take a look at YouTube! This internet giant grew to a billion take a look at YouTube! This internet giant grew to a billion dollar worth in a little over a year. Not only is Flash responsible dollar worth in a little over a year. Not only is Flash responsible for the easy play access to the some 100 million plus users, but for the easy play access to the some 100 million plus users, but it has revolutionized the entertainment industry as a whole. In it has revolutionized the entertainment industry as a whole. In reality, about 98% of the people using the internet in the US reality, about 98% of the people using the internet in the US have FlashPlayer installed.have FlashPlayer installed.

Compared to other net plug-ins such as Java, Acrobat Reader, Compared to other net plug-ins such as Java, Acrobat Reader, QuickTime, and Windows Media Player, Flash Player has a fast QuickTime, and Windows Media Player, Flash Player has a fast install and initialization time. Vector graphics along with install and initialization time. Vector graphics along with program code such as ActionScript allow Flash files to be very program code such as ActionScript allow Flash files to be very small bandwidth users as compared to bitmaps and other video small bandwidth users as compared to bitmaps and other video clips. The nice thing about Flash is its flexibility to allow many clips. The nice thing about Flash is its flexibility to allow many different kinds of video display. If you're going to be watching different kinds of video display. If you're going to be watching specifically video clips, other web players might be more specifically video clips, other web players might be more attractive, but they can't compare to the overall flexibility of attractive, but they can't compare to the overall flexibility of Flash. Flash.

The popularity of Flash also leads to problems. Many popup The popularity of Flash also leads to problems. Many popup sites and banner advisements utilize Flash to create eye sites and banner advisements utilize Flash to create eye catching graphics since most of the population will be able to catching graphics since most of the population will be able to view them.view them.

NOOOOOO!!!NOOOOOO!!!

ActionScriptActionScript ActionScript is an JavaScript-based programming language ActionScript is an JavaScript-based programming language

that is used for Flash movies and applications. While Java is that is used for Flash movies and applications. While Java is mostly used for browser windows, documents, and form mostly used for browser windows, documents, and form centric, ActionScript is movie centric, and that may include centric, ActionScript is movie centric, and that may include animations, audio, text, and event handling. animations, audio, text, and event handling.

In ActionScript 2.0 there can be classes, and also, a library In ActionScript 2.0 there can be classes, and also, a library item (a MovieClip) can be associated with a class. Classes are item (a MovieClip) can be associated with a class. Classes are always written in external text files, and these files must have always written in external text files, and these files must have the .as extension. Classes are extensions to the ActionScript the .as extension. Classes are extensions to the ActionScript language which the programmer can write him/herself, language which the programmer can write him/herself, though there are many built-in classes such as the MovieClip though there are many built-in classes such as the MovieClip class, which can be used to draw vectors onto the screen class, which can be used to draw vectors onto the screen dynamically. Class files can be used to make your dynamically. Class files can be used to make your programming easier, and the class files can be transferred programming easier, and the class files can be transferred between many projects if needed. between many projects if needed.

ActionScriptActionScript Flash and ActionScript allow you to assign code to specific Flash and ActionScript allow you to assign code to specific

objects such as graphics, buttons, movie clips, or an entire objects such as graphics, buttons, movie clips, or an entire frame. Flash checks all of the syntax on your code and also frame. Flash checks all of the syntax on your code and also contains a large library of functions you can call.contains a large library of functions you can call.

There are many ActionScript tutorials and resources on the There are many ActionScript tutorials and resources on the internet. If you are interested in event-programming using Flash, internet. If you are interested in event-programming using Flash, we suggest you look there. You can find basic tutorials in our we suggest you look there. You can find basic tutorials in our project website project website and links to external resources on the “and links to external resources on the “About UsAbout Us” ” page.page.

Making Event-Driven Flash Making Event-Driven Flash CreationsCreations

Programming in Flash is quite simple. Even a beginner can Programming in Flash is quite simple. Even a beginner can create something useful in a few seconds – all they need to create something useful in a few seconds – all they need to know is a few lines of code and how to access menus in Flash.know is a few lines of code and how to access menus in Flash.

Creating an object and converting it to a button takes only a Creating an object and converting it to a button takes only a matter of seconds.matter of seconds.

After a button is made, ActionScript can be added to it so that After a button is made, ActionScript can be added to it so that it takes action within the given flash application.it takes action within the given flash application.

What About Moving Things?What About Moving Things? Each object you make has the ability to move around in the Each object you make has the ability to move around in the

Flash environment given the correct ActionScript codingFlash environment given the correct ActionScript coding In the Ship Game we created, not only can you move the ship, In the Ship Game we created, not only can you move the ship,

but the image for the ship is rotated depending on which arrow but the image for the ship is rotated depending on which arrow direction you press.direction you press.

We also added two other objects that follow our ship around. By We also added two other objects that follow our ship around. By giving them ActionScript to follow the ship object, they will try giving them ActionScript to follow the ship object, they will try to move to the same location as the ship. ActionScript was to move to the same location as the ship. ActionScript was added so that if the ship touches one of these objects, the life added so that if the ship touches one of these objects, the life bar for the ship that drops. When the life bar reaches zero, the bar for the ship that drops. When the life bar reaches zero, the game is over and you are given the option to restart the game game is over and you are given the option to restart the game from frame 1.from frame 1.

What About Using The Time?What About Using The Time? As stated previously, the computer’s internal clock can be used As stated previously, the computer’s internal clock can be used

to trigger events. Using the time is one of the few synchronous to trigger events. Using the time is one of the few synchronous processes in event programming.processes in event programming.

In our example we simply made a text box that holds dynamic In our example we simply made a text box that holds dynamic text. From here we have it the instance name of disp so the text. From here we have it the instance name of disp so the Actionscript that got the time on the frame could link the two Actionscript that got the time on the frame could link the two together.together.

From there, we just built a little picture around the text, set it to From there, we just built a little picture around the text, set it to 00:00:00, and changed the text color to look like a real digital 00:00:00, and changed the text color to look like a real digital clock might. clock might.

Examples In ActionExamples In Action

For further elaboration on the topics we discussed here along For further elaboration on the topics we discussed here along with all our examples, test code, and even tutorials on how to with all our examples, test code, and even tutorials on how to make your own Flash applications, visit our make your own Flash applications, visit our project web pageproject web page..

In reality, these examples might look simple, but they are In reality, these examples might look simple, but they are very, very time consuming to construct.very, very time consuming to construct.

We have really only just touched on what Flash in capable of We have really only just touched on what Flash in capable of using ActionScript. In CSCI-350 (Event Programming) you will using ActionScript. In CSCI-350 (Event Programming) you will be able to get a better feel for how everything really works.be able to get a better feel for how everything really works.

Please feel free to email either of us if you have questions or Please feel free to email either of us if you have questions or comments. It would be more than appreciated.comments. It would be more than appreciated.

ThanksThanks

Sources UsedSources Used

http://en.wikipedia.org/wiki/Event-driven_programminghttp://en.wikipedia.org/wiki/Event-driven_programming http://en.wikipedia.org/wiki/Macromedia_Flashhttp://en.wikipedia.org/wiki/Macromedia_Flash http://en.wikipedia.org/wiki/Actionscripthttp://en.wikipedia.org/wiki/Actionscript http://cooltext.com/http://cooltext.com/ http://www.newgrounds.com/collection/flashtutorials.hthttp://www.newgrounds.com/collection/flashtutorials.ht

mlml http://http://eventdrivenpgmeventdrivenpgm..sourceforgesourceforge.net/.net/ Macromedia Flash MX 2004 BibleMacromedia Flash MX 2004 Bible by Robert Reinhardt by Robert Reinhardt

and Snow Dowdand Snow Dowd The Web Wizard's Guide to FlashThe Web Wizard's Guide to Flash by Michael R. Kay by Michael R. Kay ActionScript for Flash MX Pocket ReferenceActionScript for Flash MX Pocket Reference by Colin by Colin

Moock Moock