ActionScript 3 Using Sound Related Classes by Martin Stanhope The University of Bolton.

Slides:



Advertisements
Similar presentations
Chapter 18 Building the user interface. This chapter discusses n Javas graphical user interface. n Swing: an enhancement of a library called the Abstract.
Advertisements

Introduction to Macromedia Director 8.5 – Lingo
Thomas Lövgren, Flash developer
The Web Warrior Guide to Web Design Technologies
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.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
Computer Science 103 Chapter 4 Advanced JavaScript.
JavaScript, Third Edition
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
CST JavaScript Validating Form Data with JavaScript.
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
INTERNET APPLICATION DEVELOPMENT For More visit:
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
Online Shopping JavaScript project for CS 175 JavaScript for Web Development, Spring 2009 By Sita Akella.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
© 2000 – All Rights Reserved - Page 1 Introduction to JavaScript Programming Part Two.
Chapter 3 Introducing Visual Basic.NET. 3.1 Visual Basic.NET Windows Programming -Used to create Windows, Web, and Console applications -Uses predefined.
Enhancing JavaScript Using Application Programming Interfaces (APIs)
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Introduction to Arrays. definitions and things to consider… This presentation is designed to give a simple demonstration of array and object visualizations.
Tutorial 111 The Visual Studio.NET Environment The major differences between Visual Basic 6.0 and Visual Basic.NET are the latter’s support for true object-oriented.
Developing the Game User Interface (UI) Lesson 5.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
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.
1 Forms and Form elements CSD 340 McCoey. 2 Form Object Properties action Usually a call to a server elements encoding method post or get target Methods.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
Programming games Reflection Bouncing things, Memory Server-side: Survey. ActionScript 2 examples. Homework: Finish Video or Audio. Post proposal for your.
Lab 6: event & input intro User Interface Lab: GUI Lab Oct. 2 nd, 2013.
Working with the VB IDE. Running a Program u Clicking the”start” tool begins the program u The “break” tool pauses a program in mid-execution u The “end”
USING XML AS A DATA SOURCE. Data binding is a process by which information in a data source is stored as an object in computer memory. In this presentation,
HTML FORMS GET/POST METHODS. HTML FORMS HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes,
Chapter Two Creating a First Project in Visual Basic.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
PHP Form Introduction Getting User Information Text Input.
Creating Databases applications for the Web Basic HTML review, forms Preview: Server side vs client side Flash HW: Review HTML forms and FLASH examples.
1 Lesson: Applets with User Input and Output with GUI ICS4M.
ActionScript 3 Extensible Markup Language (XML) by Martin Stanhope The University of Bolton.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
Topics Introduction Scene Graphs
JavaScript, Fourth Edition
Programming games Problems. Schedule Various examples. Homework: rps, bo (don't go back to do this), cannonball, Video or Audio should be complete. Now.
Object-Oriented Programming (Java), Unit 28 Kirk Scott 1.
Select (drop-down list) Inputs. Insert/Form/List Menu.
© 2011 Delmar, Cengage Learning Chapter 10 Using ActionScript to Enhance User Experience.
Programming games Cannonball due. Drawing & printing example. Acquiring video or sound Homework: Catch up: complete projects (rps, Bo, cb). Start video.
ASP.NET User Controls. User Controls In addition to using Web server controls in your ASP.NET Web pages, you can create your own custom, reusable controls.
CIS Intro to JAVA Lecture Notes Set July-05 GUI Programming –TextField Action Listeners, JEditorPane action listeners, HTML in a JEditorPane,
Flash: ActionScript review & Controlling Sound Presentation by Mindy McAdams Edited for JOMC 187, UNC-Chapel Hill by Laura Ruel.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
Project Two Adding Scrolling Messages! Page 2.4 to 2.18 Today’s Agenda Look at scrolling message coding. Create a web page with a text box. Create a web.
Understanding JavaScript and Coding Essentials Lesson 8.
Debugging tools in Flash CIS 126. Debugging Flash provides several tools for testing ActionScript in your SWF files. –The Debugger, lets you find errors.
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
XP Tutorial 8 Adding Interactivity with ActionScript.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
 Movieclip symbols are reusable pieces of flash animation  consisting usually of one or more graphic/button symbols  thus they are flash movies within.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
Flash Session 4: Importing Assets
Chapter 5 Validating Form Data with JavaScript
var variableName:datatype;
Functions, Regular expressions and Events
CHAPTER FOUR VARIABLES AND CONSTANTS
Presentation transcript:

ActionScript 3 Using Sound Related Classes by Martin Stanhope The University of Bolton

Sound related AS3 classes ‘Rich content’ web-applications frequently use sound to enhance the user experience. Flash CS3 ActionScript3 offers the web developer a collection of classes that are used to handle external sound files. Sound() SoundChannel() SoundEvent() SoundLoaderContext() SoundMixer() SoundTransform()

Details of the Sound class from the help pages

SoundApp1a.as - Playing an mp3 music file – Technique 1 package { import flash.display.Sprite; import flash.media.Sound;// The Sound class import flash.net.URLRequest; // A class for accessing external files public class SoundApp1a extends Sprite { public function SoundApp1a() { var mp3File:String = “mytrack.mp3”; var request:URLRequest =new URLRequest(mp3File); mySound = new Sound(); mySound.load(request); mySound.play(); } // End of constructor } // End of class } // End of package specification

SoundApp1b.as - Playing an mp3 music file – Technique 2 package { import flash.display.Sprite; import flash.media.Sound; import flash.net.URLRequest; public class SoundApp1b extends Sprite { public function SoundApp1b() { var mp3File:String = “mytrack.mp3”; mySound = new Sound(); mySound.load( new URLRequest(mp3File) ); mySound.play(); } // End of constructor } // End of class } // End of package specification

SoundApp1c.as - Playing an mp3 music file – Technique 3 package { import flash.display.Sprite; import flash.media.Sound; import flash.net.URLRequest; public class SoundApp1c extends Sprite { public function SoundApp1c() { var mp3File:String = “mytrack.mp3”; var request:URLRequest = new URLRequest(mp3File); mySound = new Sound(request); //Pass request to constructor mySound.play(); // No call to load() when using this technique } // End of constructor } // End of class } // End of package specification

SoundApp1d.as - Playing an mp3 music file – Technique 4 package { import flash.display.Sprite; import flash.media.Sound; import flash.net.URLRequest; public class SoundApp1d extends Sprite { public function SoundApp1d() { var mp3File:String = “mytrack.mp3”; mySound = new Sound( new URLRequest( mp3File ) ); mySound.play(); } // End of constructor } // End of class } // End of package specification

SoundApp1e.as - Applying a play offset in milliseconds package { import flash.display.Sprite; import flash.media.Sound; import flash.net.URLRequest; public class SoundApp1e extends Sprite { public function SoundApp1e() { var mp3File:String = “myTrack.mp3"; var request:URLRequest = new URLRequest(mp3File); mySound = new Sound(); mySound.load(request); mySound.play(5000);// start play 5 seconds into track } // End of constructor } // End of class } // End of package specification

Creating a user selectable play button This demonstration program allows the user to pick a button to play a test sound track. At the heart of this program is an event handler which is executed automatically when the mouse is clicked over the play button. The handler simply plays the sound track. MP3 Sound File Tester Application by Joe Bloggs – April 2008 Play Test Track Close the application to stop the track playing

Program structure – example 1 // The application class // Private properties (data variables) // The names of private properties are often prefixed with an underscore // The public constructor has same name as the class // All the coding for the application goes here but it will be // difficult to follow as it is not written in a modular fashion. // The package statement // Import statements to bring the required Flash library classes

Program structure – example 2 // The application class // Import statements to bring the required Flash library classes // Private properties (data variables) // The names of private properties are often prefixed with an underscore // The public constructor has same name as the class // Contains calls to the private helper functions. This makes it more modular and easier to understand. // A private helper function // The package statement

SoundApp2.as – Details of the application class coding public class SoundApp2 extends Sprite { //Private variables go here private var _mySound:Sound; // A private variable to hold a sound object public function SoundApp2() // The constructor { displayTitle(); displayPlayButton(); displayInstructions(); } // Private helper functions go here under the constructor // The mouse click event handler function will go under here }

Coding of the helper function: displayTitle() private function displayTitle():void { var titleTxt:TextField = new TextField(); addChild(titleTxt); titleTxt.x = 50; titleTxt.y = 20; titleTxt.width = 100; titleTxt.height = 20; titleTxt.border = true; // You may prefer false titleTxt.text = “MP3 Sound File Tester"; }

Coding of the helper function: displayPlayButton() private function displayPlayButton():void { var playBtn:Sprite = new Sprite(); // Sprite container for graphic playBtn.x = 80; playBtn.y = 200; playBtn.graphics.lineStyle(1); playBtn.graphics.beginFill(0xBBBBBB); // A shade of gray playBtn.graphics.drawRoundRect(0, 0, 50, 20, 5, 5); playBtn.addEventListener( MouseEvent.CLICK, onMouseClick ); addChild(playBtn); // Create the label to sit on the button var playLbl:TextField = new TextField(); playLbl.text = "Play"; playLbl.selectable = false;//Text not selectable playLbl.width = 50; playLbl.height = 20; playBtn.addChild(playLbl); //Put text inside button container }

Coding the the helper function: displayInstructions() private function displayInstructions():void { var instructionsTxt:TextField = new TextField(); addChild(instructionsTxt); instructionsTxt.x = 50; instructionsTxt.y = 20; instructionsTxt.width = 100; instructionsTxt.height = 20; instructionsTxt.border = true; instructionsTxt.text = “Close app to stop sound”; }

Coding of the mouse click event handler private function onMouseClick( event:MouseEvent ):void { var mp3File:String = “mytrack.mp3”; var request:URLRequest = new URLRequest(mp3File); _mySound = new Sound(); _mySound.load(request); _mySound.play(); }

Creating a stop button The Sound class contains a method named close() that can be used to fully stop the sound track. Note that the method is not named stop(). When close() is used the track cannot be restarted from the point it was stopped at. We will later see how a track can be paused and restarted from the pause point. This technique will use a class named SoundChannel which contains a method named stop().

Things to do to add a stop button In the application constructor SoundApp2, add a call to a private helper function named: displayStopButton(); Under the SoundApp2 constructor, write the code of the displayStopButton() method, it will be similar to displayPlayButton() and will include a statement to register a mouse click event handler associated with the stop button. Write the event handler, which simply calls the method to stop the sound object from playing… _mySound.close();

Creating a play list An array can be used to hold a list of mp3 file names. A dynamic text field can be used to display a list of the track names. An input text field can be used to allow the user to enter the number of the required track. The play button event handler can be written to read the number entered into the input text field by the user and to use it as the array index number to find the filename of the required track.

Suggested private variables private var mySound:Sound; private var track:Array = [“tracknameA.mp3", “tracknameB.mp3", “tracknameC.mp3” ]; private var userInputTxt:TextField;

The array of track file names // An array named track is defined by… private var track:Array = [“tracknameA.mp3", “tracknameB.mp3", “tracknameC.mp3” ]; track[0] tracknameA.mp3 tracknameB.mp3 tracknameC.mp3 track[1] track[2] Array named track Array index numbers, notice how the index number of the first element is 0 not 1.

Selecting a track private function onMouseClick( event:MouseEvent ):void { // Get the track number character entered by the user in the user input text field and convert to a number so it can be used as the array index var trackNumber:uint = parseInt(userInputTxt.text); // Access the array to get the required mp3 file name var soundFileName:String = track[trackNumber]; // Access the external sound file in the usual way var request:URLRequest = new URLRequest(soundFileName); _mySound = new Sound(); _mySound.load(request); _mySound.play(); }