2010-01-05 cct260h - christopher evan jones 1 cct260h flash-integration and xml

2010-01-05 CCT260H - Christopher Evan Jones

1

CCT260HCCT260H

Flash-Integration Flash-Integration

and XMLand XML

2010-01-052010-01-05 CCT260H - Christopher Evan JoneCCT260H - Christopher Evan Joness

22

FlashFlash

Flash is a “movie” that contains pictures, Flash is a “movie” that contains pictures,

video and soundvideo and sound

Flash is also the primary drive of most Flash is also the primary drive of most

video-based websitevideo-based website

A language is built-in allowing developers A language is built-in allowing developers

to program intelligence into the movie – to program intelligence into the movie –

creating interaction with the usercreating interaction with the user


33

Flash IntegrationFlash Integration

Flash Integration is easy!Flash Integration is easy!<object<object type="application/x-shockwave-flash" data="space.swf" width="550" height="300"type="application/x-shockwave-flash" data="space.swf" width="550" height="300">>

<param<param name="movie" value="space.swf"name="movie" value="space.swf" />/>

</object></object>

Place Place <object><object> in your body in your body

Set the size using height and Set the size using height and

widthwidth

Remember there are twoRemember there are two

places to set the flash fileplaces to set the flash file

Width & Height of the Movie


44

Linking to Flash Linking to Flash

Link videos from YouTube!Link videos from YouTube!

<object<object type="application/x-shockwave-flash" type="application/x-shockwave-flash"

data="http://www.youtube.com/v/ljbI-363A2Q" data="http://www.youtube.com/v/ljbI-363A2Q"

width="400" width="400" height="300"height="300">>

<param<param name="movie" name="movie"

value="http://www.youtube.com/v/ljbI-363A2Q"value="http://www.youtube.com/v/ljbI-363A2Q" />/>

</object></object>

http://http://www.youtube.com/watch?vwww.youtube.com/watch?v=ljbI-363A2Q=ljbI-363A2Q

Copy the name

Set a proper aspect ratio


55

Interactive Flash ChartsInteractive Flash Charts

amChart is a quick and amChart is a quick and

easy way of adding flashy easy way of adding flashy

charts to your websitecharts to your website

http://www.amcharts.com/http://www.amcharts.com/

All you need is three files:All you need is three files:• The Flash movieThe Flash movie• An XML settings fileAn XML settings file• An XML data fileAn XML data file


66

amChartsamCharts

<object<object type="application/x-shockwave-flash" type="application/x-shockwave-flash"

data="ampie.swf" width="600" height="400"data="ampie.swf" width="600" height="400">>

<param<param name="movie" value="ampie.swf"name="movie" value="ampie.swf" />/>

<param<param name="flashvars" name="flashvars"

value="path=&settings_file=ampie_settings.xml&datavalue="path=&settings_file=ampie_settings.xml&data

_file=ampie_data.xml"_file=ampie_data.xml"/>/>

</object></object>

<param> elements contain parameters that are passed to the flash movie

In this case, it is the location of the XML data and settings file


77

XMLXML

Extensible Mark-up LanguageExtensible Mark-up Language

Much like HTML(XHTML), XML is used to Much like HTML(XHTML), XML is used to

provide context to data or textprovide context to data or text

Works on the same concept of elements, Works on the same concept of elements,

tags and attributestags and attributes


88

XML breakdownXML breakdown

<?xml<?xml version="1.0" encoding="UTF-8"version="1.0" encoding="UTF-8"?>?>

<pie><pie>

<slice <slice title="Twice a day"title="Twice a day" pull_out="true"pull_out="true">>358358</slice></slice>

<slice <slice title="Once a day"title="Once a day">>258258</slice></slice>

<slice <slice title="Once a week"title="Once a week">>154154</slice></slice>

<slice <slice title="Never" alpha="50"title="Never" alpha="50">>114114</slice></slice>

</pie></pie>

States that it is XML data

The XML defines a pie chart

It contains 4 slices of pie (or 4 data items)

This is a single pie item with a name and valueThis is extra information to tell Flash how to format the pie slice


99

For This LabFor This Lab

Find some data related to your subjectFind some data related to your subject

Create a chart to depict this data (see Create a chart to depict this data (see

wiki for files)wiki for files)

Use one of your old labs!Use one of your old labs!

Add a YouTube video!Add a YouTube video!


1010

NotesNotes

RENAME YOUR FILES beforehand:RENAME YOUR FILES beforehand:• <Name>-data.xml<Name>-data.xml e.g. ChrisJones-e.g. ChrisJones-

data.xmldata.xml• <Name>-settings.xml<Name>-settings.xml

Hand in your .html file and both .xml Hand in your .html file and both .xml

settingssettings• You do not have to upload the .swf fileYou do not have to upload the .swf file

2010-01-05 cct260h - christopher evan jones 1 cct260h flash-integration and xml

Documents