Flash & XML

(Review midterm)Flash & XMLPresentations

Midterm

1. Contacts2. bedtime song3. All:

a) What are reasons to use xml and xsl to produce a web site? What are reasons NOT to use xml and xsl?

b) What are the factors making an HTML site an XHTML site. To put it another way, what do you have to check and, possibly, modify?

c) Give reasons pro and con for using graphical icons in interfaces.

4. bbc and purchase sites.

Flash & XML• Flash can open and 'use' an XML file on the server

– and create/modify and XML document and send it back to server.

• Action is asynchronous: does not happen instantly. Your code sets up the handler for when loading is done.

• There is a XML Document Object Model that defines the objects, properties and methods.

• Caution: test for tags by name. Extra tags (arising from white space) will be part of document.

• Caution: the content of a tag is its first child.

<?xml version="1.0" ?><mylist> <contact>

<name>Marty Lewinter</name> <email>mathman@purchase.edu</email> </contact> <contact>

<name>Peter Ohring</name> <email>peter.ohring@purchase.edu</email> </contact> <contact>

<name>Joe Skirvanek </name> <email>joes@purvid.purchase.edu </email> </contact> <contact>

<name>Joel Tenenbaum</name> <email>joel@zephyr.ns.purchase.edu</email> </contact></mylist>

ActionScript

contactXML=new XML();contactXML.onLoad=transXML;display1="loading data";contactXML.load("contacts.xml");

function to be defined next.

Dynamic text field.

function transXML() {if (this.loaded) {

display1 = "XML data is loaded."; } keyTag = new XML(); contactList = new Array(); keyTag=this.lastChild; contactList= keyTag.childNodes; contactdata = new Array(); display = "";

Another dynamic textfield

lastChild is first child is mylist

for (kid = 0; kid<=contactList.length; kid +=1) { contactdata = contactList[kid].childNodes; for (i=0; i<=contactdata.length; i++) { if (contactdata[i].nodeName=="name") {display = display + newline+ contactdata[i].firstchild.nodeValue; } if (contactdata[i].nodeName=="email") { display = display+newline + contactdata[i].firstchild.nodeValue; } } display = display + newline;

}}

the contents (text) of each node

2nd Example: soccer results

• Similar to first: reading in data from XML

• duplicateMovieClip to create places to loadMovie the jpg image files– create an empty movie clip symbol and one instance of

it off stage. It is named 'place'.• position duplicate movie clips on stage by setting

properties _x and _y of (duplicated) Movie clips.

<?xml version="1.0" encoding="UTF-8"?><results group="A"><match feature="no"> <date>07-Jun-2002 </date> <team score="3">Spain </team> <team score="1">Paraguay </team></match>…<match feature="yes"> <date>31-May-2002 </date><headline>France loses to Senegal </headline><story>The 1998 World Cup Champion France lost the opening game to Senegal. It wasSenegal's first appearance in a World Cup. This was a stunning upset for France. Theteam was playing without one of the stars, Zidane. </story> <team score="1">Senegal </team> <team score="0">France </team><picture>soccer1.jpg </picture></match>…</results>

Similar start of ActionScript

resultsXML=new XML();resultsXML.onLoad=transXML;display1="getting data";resultsXML.load("resultsnoref.xml");

Similar start of transXML()function transXML() {

if (this.loaded) { display1 = "XML data is loaded."; } keyTag = new XML(); matchList = new Array(); keyTag=this.lastChild; matchList= keyTag.childNodes; matchdata = new Array(); ccount = 0; nump = 0; display = ""; will be used for any

pictures.

for (m = 0; m<=matchList.length; m +=1) { if (matchList[m].nodeName=="match") {

ccount++; matchdata = matchList[m].childNodes; for (i=0; i<=matchdata.length; i++) {

if (matchdata[i].nodeName=="team") { display = display + newline+

matchdata[i].firstchild.nodeValue; display = display+":

"+matchdata[i].attributes["score"]; }

if (matchdata[i].nodeName=="picture") { nump++; newp = "place"+nump; duplicateMovieClip(place,newp,nump); setProperty(newp,_x,400); setProperty(newp,_y,10 + 200*(nump-1));loadMovie(matchdata[i].firstchild.nodeValue,newp); }

} display = display + newline; }

}display1="Number of matches: " + ccount;

}

incremented for each picture

Flash: Moving photoshttp://newmedia.purchase.edu/~Jeanine/interfaces/xmlstuff.htmlchoose xmlfamily.html

Building on previous examples:reads in name, picture file name, and speed

creates arrays, including arrays of movie instances holding pictures

Looping using frames, move instances by the corresponding speed

<?xml version="1.0" encoding="UTF-8"?><scenes><scene><name>Winter Piano Party: Esther and Aviva</name><picture>avivagrandma.jpg</picture><speed>6</speed></scene><scene><name>Uday with Amy and her sisters</name><picture>sisters.jpg</picture><speed>10</speed></scene> …</scenes>

for (i=0; i<=matchdata.length; i++) { if (matchdata[i].nodeName=="picture") {

nump++; newp = "place"+nump; duplicateMovieClip(place,newp,nump); setProperty(newp,_y,10+60*(nump)); setProperty(newp,_x,200*(nump-1));

loadMovie(matchdata[i].firstchild.nodeValue,newp); stuff.Push(_root[newp]); }

if (matchdata[i].nodeName=="speed") {speeds.Push(Number(matchdata[i].firstchild.nodeValue)); }

if (matchdata[i].nodeName=="name"){names.Push(matchdata[i].firstchild.nodeValue);} }

frame loopingfor (i=0; i<stuff.length; i++) {

stuff[i]._x = stuff[i]._x+speeds[i];if (stuff[i]._x>rightbound) {

speeds[i]=-speeds[i];}if (stuff[i]._x<leftbound) {

speeds[i]=-speeds[i]; }

}gotoAndPlay("loop");

Flash exercise

• Optional (if you know some Flash and want to use it for your projects)

• Get this example running. Improve graphics.• Use the on-line help to add the headline under any

photos.– create a set number of dynamic text fields and limit

pictures to that many.– re-position text fields near pictures.

Lab time

• Presentations