Flash & XML

1. Flash & XML (Review midterm) Flash & XML Presentations

2. Midterm • Contacts • bedtime song • All: • What are reasons to use xml and xsl to produce a web site? What are reasons NOT to use xml and xsl? • 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? • Give reasons pro and con for using graphical icons in interfaces. • bbc and purchase sites.

3. 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.

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

5. ActionScript function to be defined next. contactXML=new XML(); contactXML.onLoad=transXML; display1="loading data"; contactXML.load("contacts.xml"); Dynamic text field.

6. 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 = ""; lastChild is first child is mylist Another dynamic textfield

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

9. 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.

10. <?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 was Senegal's first appearance in a World Cup. This was a stunning upset for France. The team 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>

12. Similar start of ActionScript resultsXML=new XML(); resultsXML.onLoad=transXML; display1="getting data"; resultsXML.load("resultsnoref.xml");

13. 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.

14. 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"]; }

15. incremented for each picture 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; }

16. Flash: Moving photos http://newmedia.purchase.edu/~Jeanine/interfaces/xmlstuff.html choose 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

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

18. 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); } }

19. frame looping for (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");

20. 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.

21. Lab time • Presentations