Create Interfaces

1
Create Interfaces

• XHTML, XML, Flash review, Flash and XML example
• Homework review Flash examples as needed.
  Research and answer question on XSLT.

2
XHTML

• proper HTML
• nesting of tags
• NOT ltigtltbgtbold, italic stuff lt/igt lt/bgt
• all system tags lower case
• NOT ltH1gt
• all attribute values quoted
• empty tags with closing
• ltimg src"bird.gif" /gt

3
Activity

• Go to my website and click on the W3C
• What does W3C stand for?
• and look over errors.
• Determine how to do this validation for other
  sites.

4
XML

• Structure set up by developer(s) to hold
  information.
• YOU decide what is element, parent/child
  relationships, attributes.
• Only requirement is proper nesting.

5
ltresultsgt ltmatch feature"no"gt
ltdategt04-Jun-2002 lt/dategt ltteam score"2"gtKorea
lt/teamgt ltteam score"0"gtPoland
lt/teamgt lt/matchgt ltmatch feature"yes"gt
ltdategt05-Jun-2002lt/dategt ltheadlinegtUSA
Winslt/headlinegt ltstorygtThe USA team upsets
Portugal in its first game in Round 1 of the
World Cup. The score was 3 to 2. Portugal was
considered a superior team. This means that the
USA will not finish last as it did in the
previous outing.lt/storygt ltteam score"3"gtUSA
lt/teamgt ltteam score"2"gtPortugal lt/teamgt
ltpicturegtsoccer2.jpglt/picturegt lt/matchgt
lt/resultsgt
6
XSLT

• Transforms XML to something else, such as HTML.
• Note will show examples, but not do much else
  with XSLT.

7
(No Transcript)
8
(No Transcript)
9
lt?xml version"1.0" encoding"UTF-8"
?gt ltxsltransform xmlnsxsl"http//www.w3.org/19
99/XSL/Transform" version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/results"gt
lthtmlgt ltheadgtlttitlegtResults of World Cup
lt/titlegt ltLINK REL"stylesheet" TYPE"text/css"
HREF"results.css"/gt lt/headgt ltbodygt
ltxslapply-templates select"/results/match"gt
ltxslsort select"_at_feature" order"descending"/gt
lt/xslapply-templatesgt lt/bodygt
lt/htmlgt lt/xsltemplategt
10
ltxsltemplate match"match_at_feature'yes'"gt
lth2gtltxslvalue-of select"headline"/gtltbr/gt lt/h2gt
lttablegt lttdgt ltxslvalue-of select"story"/gt
lt/tdgt lttdgtltimg src"picture" /gt lt/tdgt
lt/tablegt ltpgtScores follow....lt/pgt lt/xsltemplate
gt ltxsltemplate match"match"gt lth3gt
ltxslvalue-of select"team1"/gt versus
ltxslvalue-of select"team2"/gt lt/h3gt
ltpgtPlayed on ltxslvalue-of select"date"/gt lt/pgt
ltpgtResult ltxslvalue-of select"team1
"/gt ltxslvalue-of select"team1/_at_score "
/gt ltxsltextgt, lt/xsltextgt
ltxslvalue-of select"team2 "/gt
ltxslvalue-of select"team2/_at_score " /gt
lt/pgt lt/xsltemplategt lt/xsltransformgt
11
Flash ActionScript 3.0. review

• NOTE my examples were done with Adobe CS3.
• The authoring environment looks somewhat
  different
• New features
• ???

12
For review

• Open up source for partial rock-paper-scissors
• Note areas of screen
• Stage
• Properties panel
• Library
• Timeline (now on the bottom of screen)
• You are creating a file of type .fla

13
Code

• Code can be 'in' frame, using Actions panel
• OR
• Code can be in separate .as file. Code in a .as
  file defines a class for which there can be one
  or more programmer-defined objects.

14
Flash objects

• Many built-in objects
• MovieClip
• Sound
• Objects have properties (aka attributes aka
  variables) and methods
• Data and code
• Assuming target is a MovieClip instance,
  target.x refers to a property of
  ball target.gotoAndPlay(2) applies the
  gotoAndPlay method to this particular MovieClip
• Programmer can define objects by writing a class.
  
• The class defines the properties and the methods
• Class defined in a package

15
Class vs object

• Methods or variables can be for each object or
  just one for the whole class.
• Math.random is a class method for the built-in
  Math class.
• gotoAndPlay is a method applying for each movie
  clip object/instance.

16
Inheritance

• Classes can be subclasses of other classes and
  inherit definitions of properties and methods.
• Many built-in classes inherit properties of
  MovieClip.
• In my bouncing stuff example, the Ball, Rect, and
  Star inherit properties and methods of Stuff.

17
Modifiers

• Var statements and function statements can be
  preceded by modifiers indicated what code can
  access them.
• For example, the constructor method for Snapshot
  must be public. It will be invoked from the .fla
• public function Snapshot ( )void
• For example, the variables in Snapshot are
  internal since they are only accessed by code
  within the class.

18
Notes

• Programmer defined classes are implemented in the
  same way as the built-in classes.
• This is good news, but
• It does require attention to the naming and where
  the class files are stored.
• I will use terms properties, attributes,
  variables interchangeably also objects,
  instances, object instances.

19
One or more of these situations

• .fla file refers to one Document class. This is
  defined by .as file that is invoked when program
  is loaded.
• .fla file imports one or more packages,
  programmer created or built-in. Invokes methods
  to construct objects. Invokes class methods.
• .fla file has symbols in Library linked to
  classes.

20
Reminder/caution

• Objects created by coding must be added to what
  is termed the display list to be displayed!
• This is done by invoking addChild to something
  that already is being displayed.
• This can be tricky!

21
Examples

• Review in my examples
• jigsaw, bouncing things, shooter, set game
• Snapshot example
• Goal read in an XML file that will include the
  names for picture files along with titles and
  other information. Program will set up radio
  buttons to display selected pictures.
• Immediate goal read in and display a picture.

22
Examples

• Go to my ActionScript examples (new refers to
  ActionScript 3.0, not older) and try Loading
  examples.
• Homework read through examples and re-create and
  then make your own.
• When testing, do include error handling.

23
Outline of Snapshot.js

• package familyscenes
• import flash.display.
• import flash.net.URLRequest
• import flash.utils.Timer
• import flash.events.
• public class Snapshot extends MovieClip
• var statements
• public function Snapshot (picnameString,hookMo
  vieClip,fixedwint) void
• function imageloaded(eEvent)void
• // ends class definition
• // ends package

24
Notes

• Need import statements to refer to built-in Flash
  objects by short-hand.
• Don't always know what the package names are but
  GENERALLY easy to interpret error messages and
  look up in HELP.
• Don't know ahead of time what variables will be
  needed.
• Loading a file takes time. The file being loaded
  will signal an event. Use addEventListener to
  invoke the function (method) that finishes the
  job.

25
Notes, cont.

• Needed to send the .js code something to hook
  onto (my words) for the addChild.
• Decided to make all images the same size. Did
  this be specifying a width AND then using scaleX
  and scaleY to make the vertical dimension
  proportional.
• This is done automatically in HTML when setting
  either width or height attributes.

26

• public class Snapshot extends MovieClip
• internal var scenetimerTimer
• internal var ldrLoader
• internal var ldrcontentDisplayObject
• internal var fwint

27

• public function Snapshot(picnameString,hookMovie
  Clip,fixedwint)void
• var imageURLRequestURLRequest new
  URLRequest(picname)
• ldr new Loader()
• ldr.load(imageURLRequest)
• ldr.contentLoaderInfo.addEventListener
  (Event.COMPLETE,imageloaded)
• hook.addChild(this)
• fw fixedw

28

• function imageloaded(eEvent)void
• ldrcontent ldr.content
• this.addChild(ldrcontent)
• ldrcontent.width fw
• ldrcontent.scaleY ldrcontent.scaleX

29
Activity

• QUICKLY, draw or download jpg file to where you
  will save the .fla file
• Open up Flash. Create getsnapshot.fla
• Draw whatever you want on Stage. Include one
  movie clip symbol instance named hook. In
  Actions panel (for frame code)import
  familyscenes.
• var firstsceneSnapshot new
  Snapshot("?.jpg",hook,300)

File name of jpg file
30
Caution

• Will repeat code shown in previous slides, now
  squeezed into 2 slides.
• Think while are copying the code.

31

• package familyscenes
• import flash.display.
• import flash.net.URLRequest
• import flash.events.
• public class Snapshot extends MovieClip
• internal var ldrLoader
• internal var ldrcontentDisplayObject
• internal var fwint
• public function Snapshot(picnameString,hookMov
  ieClip,fixedwint)void
• var imageURLRequestURLRequest new
  URLRequest(picname)
• ldr new Loader() ldr.load(imageURLRequest)
  
• ldr.contentLoaderInfo.addEventListener(Event.COMP
  LETE,imageloaded)
• hook.addChild(this) fw fixedw

32
Snapshot.as, cont.

• internal function imageloaded(eEvent)void
• ldrcontent ldr.content
• this.addChild(ldrcontent)
• ldrcontent.width fw
• ldrcontent.scaleY ldrcontent.scaleX

33
Save Snapshot.as file

• Create a folder call it as3 (or whatever you
  want) at top of drive.
• In this folder, create a folder called
  familyscenes
• Within this folder, save your Snapshot.as file.
• In the .fla file, File/Publish Settings/ Flash
  Settings browse and select the as3 folder.

34
(No Transcript)
35
Reprise

• You have 3 files
• getsnapshot.fla
• Snapshot.as
• Whatever your jpg is
• File/Publish takes the .fla file and any .as
  files used and produces .html and .swf files
• Upload
• getsnapshot.html, getsnapshot.swf
• Whatever your jpg is

36
Next step

• Reading in XML
• Some similarity to reading in jpg file
• Extracting information from the XML to
• build Snapshot objects
• display titles
• Set up radio buttons

37
album1.xml
Totally my invention

• lt?xml version"1.0" encoding"utf-8"?gt
• ltalbumgt
• ltitemgt
• ltpicnamegtpicnic3.jpglt/picnamegt
• lttitlegtPicniclt/titlegt
• lt/itemgt
• ltitemgt
• ltpicnamegtthree.jpglt/picnamegt
• lttitlegtCelebrating thesis
  defenselt/titlegt
• lt/itemgt
• ltitemgt
• ltpicnamegtemcoreydog.jpglt/picnamegt
• lttitlegtEsther, Corey and the doglt/titlegt
• lt/itemgt
• lt/albumgt

38
ActionScript XML

• XML object that can be created from a String or
  from data in a URLLoader object.
• Load in the XML file and thenmyXML
  XML(myLoader2.data)
• Can refer to properties by name
• There also are methods for determining property
  names and attribute names.
• Can iterate over properties, in this case all (3)
  item elements.
• for each (var propXML in myXML.item)
• var firstsceneSnapshot new
  Snapshot(prop.picname,hook,fixedw)

39
Homework

• Posting possibilities
• Do research and make posting (and/or comment) if
  my XSLT decision was appropriate.
• Use Flash help to determine how to get at
  attributes
• Review Flash examples
• Read tutorials on my site.