California Career and Technical Education Standards

• IT.B.B1.6 Know the basic design elements necessary to produce effective print, video, audi...

California Academic Content Standards (Reinforced)

• ELA.9-10.R.CAGT.2.6 Demonstrate use of sophisticated learning tools by following technical direction...2

• Overview - Lecture

  Overview

  Teacher explains

  "Today, 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:"

  <?xml version="1.0" encoding="utf-8"?> <PLAYLIST> <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" /> <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/> <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" /> </PLAYLIST>

  But first, lets disscuss what XML really is...
• Lecture - Lecture

  Below are teacher lecture notes as well as a link to download the printable version of the notes for teacher and/or students...

  XML Lecture

  XML documents form a tree structure that starts at "the root" and branches to "the leaves".

  ---

  An Example XML Document

  XML documents use a self-describing and simple syntax:

  <?xml version="1.0" encoding="utf-8"?> <PLAYLIST>      <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" />      <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/>      <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" /> </PLAYLIST>

  The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (utf-8= UCS Transformation Format — 8-bit. UTF- 8 is most common on the web).

  The next line describes the root element of the document (like saying: "this document is a playlist"):

  <PLAYLIST>

  The next 3 lines show the child element of the root PLAYLIST element. The child element is SONG:

  <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" /> <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/> <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" />

  And finally the last line defines the end of the root element:

  </ PLAYLIST>

  You can assume, from this example, that the XML document contains 3 songs, their associated titles and the artist of each.

  Don't you agree that XML is pretty self-descriptive?

  ---

  XML Tags are Case Sensitive

  XML tags are case sensitive. The tag <Playlist> is different from the tag <PLAYLIST>.

  All this mean sis that the opening and closing tags must be written with the same case:

  1.       <PLAYLIST>This is incorrect</playlist> 2.      <Playlist>This is incorrect</playlist> 3.      <PLAYLIST>This is correct</PLAYLIST> When it comes to the issue of case sensitive, why do you think #1 and #2 (above) are incorrect? why do you think #3 (above) is correct?

  XML Attribute Values Must be Quoted

  XML elements can have attributes in name/value pairs .

  In XML, the attribute values must always be quoted.

  Study the two XML documents below. The first one is incorrect, the second is correct:

  <PLAYLIST> <SONG URL=audio/track1.mp3 TITLE=First Track ARTIST= John Doe /> <SONG URL=audio/track2.mp3 TITLE=Second Track ARTIST=Random Singer/> <SONG URL=audio/track3.mp3 TITLE=Third Track ARTIST=Super Generic Singer /> </PLAYLIST>

   

  <PLAYLIST> <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" /> <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/> <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" /> </PLAYLIST>

  The error in the first document is that the URL, TITLE AND ARTIST attributes in the song element are not quoted.

  ---

  What is an XML Element?

  An XML element is everything from (including) the element's start tag to (including) the element's end tag.

  An element can contain:

  • other elements
  • text
  • attributes
  • or a mix of all of the above...

  <PLAYLIST> <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" /> <SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/> <SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" /> </PLAYLIST>

  In the example above, <PLAYLIST> has element contents, because it contains another element … <SONG>

   <SONG> has 3 attributes…

  URL="audio/track1.mp3"

  TITLE="First Track"

  ARTIST="John Doe"

  ---

  XML Attributes Must be Quoted

  Attribute values must always be quoted. Either single or double quotes can be used. For a song, the song element can be written like this:

  <SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" />

  or like this:

  <SONG URL= ‘audio/track1.mp3’ TITLE=‘First Track’ ARTIST=‘John Doe’ />

  ---

  XML Elements vs. Attributes

  Take a look at these examples:

  <person sex="female">       <firstname>Anna</firstname>       <lastname>Smith</lastname> </person>

   

  <person>       <sex>female</sex>       <firstname>Anna</firstname>       <lastname>Smith</lastname> </person>

  In the first example sex is an attribute. In the last, sex is an element. Both examples provide the same information.

  There are no rules about when to use attributes or when to use elements.

  • Our_XML_Playlist.pdf [ Download ]
• Guided Practice - Guided Practice

  Guided Practice

  Below, displays the dialog that the teacher will use to teach the lesson...

  Back to Our Playlist…

  1.      Open your notepad document titled “playlist.xml”

  2.      type the code below

  3.      resave the document

  Once you do that we should have all our external assets ready.

  <?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>

  Now, lets prepare our FLA and create the graphical interface for our music player.

   

  Checking for Understanding

  Ask the class:

  "Looking at the XML code you just entered, who can tell me the name of one paramter?

  What are the names of the other parameters?"

  Possible answers: URL, TITLE, ARTIST

   

  "Okay, now who can identify and read to me one of the values?

  What is another value?"

  Possible answers: audio/track1.mp3, Party Rock Anthem, LMFAO, audio/track2.mp3, Bust a Move, Young MC, audio/track3.mp3, I Love College Dance REMIX Instrumental, Asher Roth

  Teacher explains...

  "So, we are going to make a Flash document that will take the values from each of our parameters that was listed in our XML document.

  The values of all these parameters will be retrieved in Flash using the .attribute property of a XML element.

  You might have noticed that we did not specify the number of songs in our playlist, this is because the ActionScript XML Class can detect the number of child nodes within an element, and that in our case is the number of <song /> elements within the <playlist> element, i.e. the number of songs in our playlist."

  Creating the FLA and Settings its Parameters

  Teacher Explains...

  "In our last lesson, we had prepared our external assets, for the rest of this lesson, we will prepare the FLA and will set up the graphical interface of the music player.

  The graphical interface will include the buttons needed to play the next song, the previous song, and the buttons for pausing and resuming playback. We will also have two fields that will display the title of the song and the name of the artist.

  The next three steps we will learn today are as follows:

  1. Creating the FLA and setting its parameters.
  2. Adding the playback control buttons.
  3. Adding the current song display text fields."

  Creating the FLA and Settings its Parameters

  Have students start off by creating a new FLA in ActionScript 3.0 format.

  Save the FLA document as "myFLA"

  Access the Properties Inspector and set its size to 240x100px. The background color and frame rate do not matter. Save this file in your project folder titled "myFLA"

  

  Students should have one layer on their main timeline right now

  But we need two layers for this project, so have the students create another layer

  Next, have them name the one at the bottom Graphical Interface and the second one Actions.

  Explain that the lower layer will have their buttons and display fields, while the upper layer will host the code of their player.

  

  Adding the Playback Control Buttons

  Teacher explains...

  "Our music player will have four buttons: Previous Song, Pause, Play, and Next Song. You can create the graphics for these buttons by yourself, but to make our lives easier for the sake of following the lesson lets simply use the ready-made buttons in the Common Libraries."

  Have students access these by going through Window>Common Libraries>Buttons.

  This should open up the Common Button Library panel.

  To find the ones used in this lesson, have students open the Classic Buttons folder and then open the Playback subfolder.

  From there have the students simply drag the gel Fast Forward, gel Pause, gel Rewind, and get Right buttons.

  But, make sure they are placed on the Graphical Interface layer of their timeline!!

  Have students align the buttons in the format shown below:

  

  Teacher Explains...

  "In order to be able to refer to and make use of these buttons easily using ActionScript we need to set up their instance names."

  Have students select the first button on the left (the Previous Button) and then access the Properties Inspector and set its Instance Name to prev_btn .

  

   

  Have the stuudents then select each of the buttons in turn and assign the instance names pause_btn , play_btn , and next_btn to them respectively.

  Adding the Current Song Display Fields

  Teacher explains...

  "Our music player will have two display fields showing the title and the name of the artist of the currently playing song. These two display fields will be two simple dynamic text fields."

  To add these text fields, have students simply grab the Text Tool, draw a single text field in the specified area, then access the Properties Inspector and change the text type to Dynamic Text .

  While they are at this window have them select the font, size, and color.

  Make sure students select one of the player built-in fonts to avoid the need to embed any characters. Suggest that for many flash applications, they would want to go with a  _sans font for easier readability.

  

  Teacher explains...

   

  In the future, when you build sound players, you cam select any font that you want in practice, but you will have to use the embed features to make sure that your characters will appear when you attempt to use this. You will have to embed these fonts because when others go to view your flash application from their computers, they most likely will not have these fonts. if This will also significantly increase the file size if you use complex fonts."

  Next, have students draw the second text field below the first one and then set its text type to Dynamic Text as well.

  When they are done they will have to also set the Instance Names for both of these text fields in order to be able to refer to them easily using ActionScript.

  Have students set the instance name of the upper text field to title_txt and the lower one to artist_txt .

  

  Teacher explains...

  "That should finalize all the graphical assets we need to run our music player. In the next lesson we will start coding it by loading and processing our XML file"