Tags

Lesson Plan Industry Sector
Arts, Media & Entertainment

Lesson Plan Originally Created By: Courtney Curtis

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

Part of Unit: Animation Production

Lesson Plan Overview / Details

Part 2 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

California's 2008 CTE Standards

California Academic Content Standards (Reinforced)

Objectives and Goals

  • 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 use XML markup language and .mp3 files together with Adobe Flash to transfer information and communicate between files.

Activities in this Lesson

  • Overview Lecture

    Overview

    Explain to students that throughout the next few days, they will learn how to create an XML music player using AS3.

    Because our music player uses a markup language called XML, today, we will need to learn a little bit about XML.

    Teacher explains...

    "The songs to be played in our player will be specified in an external file so that the player loads each song as required. The songs in the player can be updated by simply updating the external playlist file so that you do not have to go back to the FLA each time to update your music player when you want to change your songs around."

    In this lesson, we will learn and make use of a few types of classes. .. the XML Class and the Sound Class .

    We will also learn more about  event handling, conditionals and functions.

    Vocabulary

    Teacher should hand out this vocabulary sheet which explains not only the key terms listed below, but also ones used in the prior lesson

    Lets first learn a few of these terms...

    Flash Movie

    An animation in the Flash format that uses the .SWF extension. This doesn't actually mean it plays a movie or movie files.

    Runtime

    When a program is running, or executing, it is said to be in runtime.

    XML

    Extensible Markup Language ( XML) is a set of rules for encoding document. XML was designed to transport and store data. Dont get it confused with HTML. HTML was designed to display data.

    Loader Class

    So again, the songs to be played in our player will be specified in an external file so that the player loads each song as required. We will use the Loader Class to do this...

    The Loader Class is an ActionScript class that lets us load external assets (such as images and Flash files) at run time onto a Flash movie. Using such technique makes our Flash song player more efficient as you load specific music files only when needed instead of embedding them regardless of whether the user ends up listening to them or not. Separating our final, embeddable movie into distinct sections loaded at run time makes the website easier to update as you can update the external assets without going back to the main FLA. So we will learn to use the Loader Class to load an external asset, which in our case is our XML file.

    Event Handling

    Event handling is the process by which any sort of interactivity is created in ActionScript 3.0. You could make your Flash movie jump to life, whether it was by reacting to a mouse click, a keyboard stroke, or any event happening in Flash using the Event Handling system of AS3.

    Conditionals

    Conditionals are special tools that add logic to an ActionScript program by taking an action only upon the satisfaction of a specified condition. Conditionals are easy to understand and are guaranteed to appear in any ActionScript project you work on. The most commonly used conditionals are the "if" conditional and the "else" and "else if" conditionals.

    Function

    Functions are a powerful feature in ActionScript that make it possible to reuse blocks of code throughout a flash movie in great flexibility. Using functions saves the programmer a massive amount of time, they can be used to centralize the code so that everything can be controlled, edited and updated from a single point and they also make the code much more easier to read by other people. There are two types of functions in ActionScript: built-in functions and custom functions.

    W3C

    The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. 

    Resources and Materials

    • Sound Player Vocabulary Sheet 1.pdf [ Download ]
  • Guided Practice Guided Practice

    Guided Practice

    Intro to XML Worksheet

    Prior to introducing the content below, download and extract these three worksheets:

    Introduction to XML_partners copy to read.pdf

    Introduction to XML_blank.pdf

    Introduction to XML_answers_teacher_version.pdf

    1. Gather students into pairs and explain that 2 worksheets will be handed out. One person in the pair will read the worksheet titled "Introduction to XML".
    2. Meanwhile the other person will listen to what their group member is saying and fill in the blanks of the 2ndworksheet
    3. Hand out both worksheets to each group. The worksheet titled "Introduction to XML" and the worksheet titled "Introduction to XML(fill in the blanks)"
    4. Give students ample time to completely fill in all the blanks of their team's worksheet.

     

    Explain that we will be making an XML Document today to store our playlist for our music player. Then during our next lesson, our XML playlist file will contain all necessary song details in it.

    Before Making Our XML Document, We Will Need to Set Up our Files

     

    Preparing External Assets

    These are the songs we use in this lesson download them here

    song info:

    track1    -   Tilte: "Party Rock Anthem"      Artist: LMFAO  
    track2    -   Title: "Bust a Move"       Artist: Young MC
    track3    -   Title: "I Love College Dance REMIX Instrumental"      Artist: Asher Roth

     

    The teacher explains...

    "Now, we will all need to have some .mp3 files at hand.

    For future reference, just know we can also use any .mp3 file we have on your machine, but make sure that it is in .mp3 format and no other as Flash can only play this format."

    1. Have each student download and extract these 3 .mp3 files.
    2. Once each student has their .mp3 files, have them start off by creating a folder for this project somewhere on their computer. Title this folder "sound_player"
    3. Inside this folder have them create a new folder to host their .mp3 files.
    4. Have students name this folder audio.

    AS3 Music Player - Audio Folder Created

    1. Inside the audio folder, have students place their three .mp3 files.
    2. To make this easier and to minimize the risk of typos, make sure all students rename their mp3 files to track1, track2, and track3.

    AS3 Music Player - Audio Files Inserted

    Their .mp3 files are now ready...

    Preparing the XML Playlist file

    Teacher explains...

    "We will create our XML file now. The XML file will play the role of a playlist as it will have the details of the tracks that we want to play. Again, an XML file is essentially a text file with user-defined structured coding. We may use any simple text editor to create our  XML file, but today, we will use notepad."

    1. Have students open the notepad program and save a blank file as playlist.xml in their project folder along with your audio folder.

    AS3 Music Player - XML File Created

    Teacher explains...

    "In the next lesson, we are going to edit our XML playlist file with the information that we need to run our player. Our XML file will have the details of our songs, specifically:

    • The URL of the song file.
    • The title of the song.
    • The name of the artist singing the song.

    These will translate into the XML code shown below:"

    Just show the students this code, do not have them type or add the code until the next lesson

    <?xml version="1.0" encoding="utf-8"?>
    <PLAYLIST>
    <SONG URL="audio/track1.mp3" TITLE="Party Rock Anthem" ARTIST="LMFAO" />
    <SONG URL="audio/track2.mp3" TITLE="Bust a Move" ARTIST="Young MC"/>
    <SONG URL="audio/track3.mp3" TITLE="I Love College Dance REMIX Instrumental" ARTIST="Asher Roth" />
    </PLAYLIST>

     

    Resources and Materials

    • songs.zip [ Download ]
    • Introduction to XML_partners copy to read.pdf [ Download ]
    • Introduction to XML_blank.pdf [ Download ]
    • Introduction to XML_answers_teacher_version.pdf [ Download ]

Assessment

Assessment Types:
Teacher-Made Test,

Assessment

Have students study the vocabulary sheet and give an oral assessment, making sure each student understands the genral idea of each term.