Tags

Lesson Plan Industry Sector
Arts, Media & Entertainment

Lesson Plan Originally Created By: Courtney Curtis

Flash Apps: Building an Embeddable Sound Player Part 1 of 5

Part of Unit: Animation Production

Lesson Plan Overview / Details

Part 1 of 5: Students learn to create a sound player using Flash and Actionscript 3.0 for use on a website.

Lesson Time

minutes
45 Minutes

Standards

Objectives and Goals

  • Students will be able to use Flash to create two different electronic documents that each play an audio file.
  • Students will be able to demonstrate the use of Adobe Flash to play a sound file by following technical directions.
  • Students will be able to analyze the role and function of music in Internet websites as means for advertising.

Activities in this Lesson

  • Activity #1 Hooks / Set

    The "Hook"

    The embedable sound player

    (download and extract the mock website files and show the students the "index.html" file)

    Students will begin by observing a mock website which includes an embedable sound player on its home page.

    The teacher will explain:

    "Throughout these next few days, you will learn how to create an embedable sound player for use in your website, and along the way, we'll learn more about Actionscript 3.0 and how AS3 handles sound"

    Why would one want to enclude a sound player on their website?

    Analyzing the role and function of music in advertising.

    Have students come up with a few reasons why one would want to include a sound player on his/her website. Ask them to think of a type of website, such as a Band's or Artist's website, children-centered website or historical website.

    Students might come up with answers such as...

    " Band's or Atrist's website, highlighting their music "

    " Children-centered website that allows kids to play music "

    " Historical website with sound files of famous speeches "

    Have Students read the article, " Should Sound be Used on a Website?" (if this link no longer works, then click here for the printable version of the article)

    Lead students to understanding that there is a the role and function of music in advertising.

    Ask the students if they had a website portfolio, highlighting their artwork, how sound would be good for their site.

     

     

     

     

    Resources and Materials

    • ExampleSite.zip [ Download ]
    • Should Sound be Used on a Website.pdf [ Download ]
  • Overview Lecture

     

     

    Overview

    Students should have a basic understanding of objects and classes in Actionscript 3.0. The information below is a review of Object Oriented Programming. Before moving any further, students should have a review.  Also, see: " Animating Objects Programmatically-Animating an Analog Clock face: Part1-Part3" which is a great unit to teach prior to this one, as it builds background knowledge needed for this lesson.

     

    Object Oriented Programming Review

    (download the OOP video here)

    What Are Classes Again?

    1. Before playing the OOP video, let the students know that they should focus on the way the video explains what Classes are in Actionscript 3.0.
    2. Play of the OOP video (even if they have already watched it in the previous lesson)
    3. After the video is finished, ask the students for their definition of a class, or ask them when they think of a class in actionscript, what comes to mind.
    4. As a class, summarize the information from the video regarding classes
    5. Ask the following questions that go beyond recall:

    “Okay, so I have a car. My car was manufactured from a blueprint. This blueprint could be considered. A what?”

    (answer: a class)

    “Sue has a car just like mine; but my car is unique. It’s not the same color as Sue’s car. My car is red and Sue’s is blue. My car comes from the car class.”

    "My unique car can now be used in a script, where the script itself alters some aspect of my car, because I have instantiated my car by giving it a specific name of 'myCar' ”

    Introduction to sound-related classes

    Teacher explains the following to the students...

    "Playing sounds using ActionScript 3.0 is not as one might think, as it requires using more than one class to perform even the simplest of tasks relating to sound such as pausing or changing the sound volume. Through these next few days, we will explore all the basics you'll need to know in order to start playing local and external sounds in Flash."

    These next few days will be divided into the following sections:

    Day 1: Intro to playing sounds

    1. Introduction to Sound Related Classes.
    2. Playing an Internal Sound.
    3. Playing an External Sound.

    Day 2: Preparing and Processing the XML

    1. Preparing External Assets (XML file and .mp3 files).
    2. Preparing the FLA and the Graphical Interface of the Player.
    3. Loading and Processing the XML file.

    Day 3: Adding Functionality to Our Buttons

    1. Creating the playSong() function.
    2. Programming the Buttons.
    3. Finalizing the player and Fixing Bugs.

    Introduction to Sound Related Classes

    Download 2 worksheets:

    "Actionscript 3.0 Sound Classes Worksheet" for students

    "Actionscript 3.0 Sound Classes Notes" for teacher

    1. Hand out the "Actionscript 3.0 Sound Classes Worksheet"
    2. Explain that as you discuss the four relevant classes related to sounds, students will need to match the class to its definition.
    3. Teacher explains the following to the students...

    "Sounds in ActionScript 3.0 are manipulated through the collaborative work of several classes together. These classes were made and are built right into our Flash program for us to use.

    Here are the relevant classes related to sounds:

    • Sound Class - This is the main class in which a sound will actually reside. This class is the starting point of any sound related program and is used to start playing a sound.
    • SoundChannel Class - A sound can be played through a sound channel which provides additional controls over a sound object, the most basic of these additional controls is the ability to stop the playback of a sound.
    • SoundTransform Class - This class is responsible for altering sound volume and sound panning (manipulating the balance between the left and right speakers).
    • SoundMixer Class - This class has global control over all sounds played in the Flash player. It's most basic function is to stop all playing sounds regardless of source."

     

     

     

     

    Resources and Materials

  • Check Understanding Check Understanding

     

     

    Check Understanding

    Once students have completed their worksheets, matching the sound classes to their definitions, ask students to call out the correct sound class as you read defitintions from one of the four sound classes.

  • Guided Practice Guided Practice

     

     

    Playing an Internal Sound File

    1. To follow along, have students download this .mp3 file to their computers.

    Explain to students the following...

    "Flash is capable of only playing .mp3 files and no other sound format.

    Playing an .mp3 file is an easy task that can be performed using the Sound Class. The Sound Class can play internal sounds (mp3 files imported into an FLA file) or external sounds (mp3 files loaded by the SWF at run time). We are going to start by playing an internal .mp3 file imported into the Flash movie."

    2.   Once students have their mp3 file downloaded to their computers, have them open up Flash and create a new FLA in AS3 Format,

    3.   Then have students go through File>Import>Import to Library, browse for their .mp3 file and then click on Open.

    AS3 Sound Class

     

    4.   Once students have their .mp3 imported, have them open their library (Ctrl+L) to find their sound file in there.

    5.   Explain that they are going to make this file available for ActionScript by editing its Linkage properties

    Have students...

    6.   right-click the sound file, select Linkage to open up the linkage window.

    7.   Check the box for Export for ActionScript and change the Class name to MyFavSong.

    8.   Press OK,

    They should get the same warning message they get for creating any Class with external definition file. Simply press OK to continue. That should export their sound file as an ActionScript Class called MyFavSong.

    Linkage Window - AS3 Sound

    Explain that they now have their .mp3 file readily available for ActionScript. It is time to start coding the ActionScript.

    9.   Right-click the only frame they have on the timeline and select Actions to open up the Actions panel.

    Teacher explains...

    Explain that to play their sound they need to create a new instance of their sound class and then use the Sound Class method .play() to play it. The code below is pretty self explanatory:

    var mySound:Sound = new MyFavSong();
    mySound.play();
     
    10.   Have students type the above code into theor actionscript panel.
     
    Teacher explains...
     
    Explain to the class that the Sound Class .play() method is used to play a sound. By default it plays the sound from its beginning, however they may start it from any other point by specifying the starting to position in milliseconds (Example: mySound.play(150)).

    11.   Have students test their movie now ( Ctrl+Enter) to hear their sound file playing! (they love this by the way)

    Playing an External Sound File

    Explain to students...

    "Playing an external sound file is easier than playing an internal sound file because you are not required to import your file or create a class out of it.

    You can create a new FLA for this version, save your FLA somewhere on your desktop, then put your .mp3 file in the same folder, and rename it to myFavSong.mp3."

    Sound and FLA Same Directory

    1. Have students try this by making a new folder on their desktop, an name it "my song".
    2. Next, have them make a flash document.
    3. Have them title their document "myFLA" and save it to their new folder.
    4. Next, students need to rename their .mp3 file to " myFavSong.mp3" and place the newly-renamed .mp3 file into their "my song" folder

    Now back to the FLA, have students open up the Actions panel to start coding.

    Teacher explains...

    Explain they are simply going to create a new generic instance of the Sound Class, and then will use the .load() method to load the external file. Finally they will use the .play() method to play the sound.

    5.   Have the students open their actions panel and type the following code:

    var mySound:Sound = new Sound();
    mySound.load(new URLRequest("myFavSong.mp3"));
    mySound.play();
     
    As they type the code, explain that the Sound Class .load() method is used to load an external .mp3 file. The URL must be specified as an instance of the URLRequest Class.

    6.   They can test their movie (ctrl + enter) now to hear their sound playing!

     

     

     

    Resources and Materials

    • Panic_ At The Disco_ The Ballad Of Mona Lisa.mp3 [ Download ]

Assessment

Students will:

  • Complete worksheet on Sound Classes
  • Use Flash to create two different electronic documents that each play an audio file
  • Demonstrate the use of Adobe Flash to play a sound file by following technical directions