MyWor(l)d
Web Site Documentation
Web Site Originally Designed and Built by:
Andy Quay and Arturo Sinclair
Digital Worlds Institute / University of Florida
102 FAA, Gainesville, Florida 32611-5800
info@digitalworlds.ufl.edu
www.digitalworlds.ufl.edu
Phone: 352-294-2020 Fax: 352-294-2030
MyWor(l)d Page 1 of 37 12/2/2011
Table of Contents
Example Web Pages ........................................................................................................... 3
Site Pages ............................................................................................................................ 4
Site Documents ................................................................................................................... 4
Technologies Utilized ......................................................................................................... 6
Web Server Setup ............................................................................................................... 6
CD-ROM or Hard Disk Setup............................................................................................. 7
Web Authoring Tools Used ................................................................................................ 7
Cookies ............................................................................................................................... 7
JavaScript ............................................................................................................................ 8
Saving Files with Foreign Language Characters ................................................................ 8
Music and Commercial Videos (youtube) .......................................................................... 9
Speak to Me ...................................................................................................................... 12
Maps.................................................................................................................................. 15
Fun Facts / Did You Know? ............................................................................................. 19
Specifying trusted files in Flash for the CDROM using the Settings Manager ................ 22
Supported HTML tags in Flash 8...................................................................................... 23
Supported Style Sheet Properties in Flash 8 ..................................................................... 27
Unicode in Macromedia Flash MX: Creating movies with multilanguage text by loading
external text or XML files................................................................................................. 28
DIY World Map Additional Information (“world.swf”) .................................................. 29
How to customize the Florida map (florida.swf) using the XML control file .................. 37
MyWor(l)d Page 2 of 37 12/2/2011
Example Web Pages
Speak to Me Where in the World?
Music Videos
MyWor(l)d Page 3 of 37 12/2/2011
Site Pages
Home Page (splash) (default.html)
Commercial Break (commercialbreak.html)
MusicVideos (musicvideos.html)
WhereInFlorida (whereinflorida.html)
WhereInTheWorld (whereintheworld.html)
SpeakToMe (speaktome.html)
Credits (credits.html)
Info (info.html)
Help (help.html)
Site Requirements (systemrequirements.html)
Javascipt Help (enable_javascript.html)
Site Documents
Commercial Break and Music Videos Pages (YouTube)
commercialbreak.html (commercial videos web page)
commercialvideos.xml (list of all commercial videos)
musicvideos.html (music videos web page)
musicvideos.xml (list of all music videos)
videos.css (CSS file defining text styles for Flash video interface)
youtube.fla (Flash authoring file)
youtube.swf (Flash video interface for web page)
/videos (.txt and .png files defining lyrics, words, and
bitmapped foreign words)
Info Page
info.html (info web page)
Credits Page
credits.html (credits web page)
Home Page (intro flash animation)
default.html (home web page with Flash animation)
languages_faces.swf (Flash animation on home web page)
languages_faces.fla (Flash authoring file)
Help Page
help.html (help web page)
enable_javascript.html (how to enable javascript web page)
System Requirements Page
systemrequirements.html (system requirements web page)
Fun Facts / Did You Know? (Factoids)
didyouknow.swf (Flash did you know interface for web page)
didyouknow.xml (list of all fun facts in subdirectory /didyouknow)
/didyouknow (.txt files for each did you know listed in ―didyouknow.xml‖)
factoids.css (CSS file defining text styles for factoids interface)
factoids.fla (Flash authoring file)
MyWor(l)d Page 4 of 37 12/2/2011
funfacts.swf (Flash fun facts interface for web page)
funfacts.xml (list of all fun facts in subdirectory /funfacts)
/funfacts (.txt files defining the text for each fun fact listed in ―funfacts.xml‖)
All Web Pages
myworld.css (CSS file defining text and layout styles for entire web site)
/images (.jpg & .gif & .png files used for entire web site but not Flash)
/Scripts (.js files for javascript function calls and
JavaScriptFlashGateway.swf for javascript to flash
scripting used between world map ‗world.swf‘ and
mapdatatextviewer.swf)
All Web Pages (Dreamweaver authoring only)
/Library (.lbi)
/Templates (.dwt)
Where in the World? & Where in Florida? Map Pages
whereinflorida.html (Where in Florida? web page)
whereintheworld.html (Where in the World? web page)
world.swf (Interactive world map Flash interface for web page)
data.xml (default data file for world.swf - should never be used)
/maps (.xml files defining world maps for all languages and
.jpg files for non-interactive maps)
mapdatatextviewer.css (CSS file defining text styles for map date text)
mapdatatextviewer.fla (Flash authoring file)
mapdatatextviewer.swf (Interactive text data Flash interface for web page)
maps/florida.swf (Interactive Flash Florida map)
/XML (.xml file defining Florida map look)
Speak to Me Page (Phrases)
speaktome.html (Speak to Me web page)
/phrases (.jpg – video thumbnails, .flv – Flash video files,
.png – bitmapped text translations for tricky font languages
Such as Chinese, Arabic, and Akan)
phrases.css (CSS file defining text styles for Flash phrases interface)
phrases.fla (Flash authoring file)
phrases.swf (Flash interface for web page)
phrases.xml (list of all phrases, text, translations, videos, etc)
MojaveExternalPlaySeekMute.swf (video player used by phrases.swf)
CD-ROM Folder
didyouknow.swf (Flash files for playback from local hard disk or CD-ROM)
funfacts.swf
mapdatatextviewer.swf
phrases.swf
youtube.swf
autorun.inf (auto-start file for CD-ROM version)
MyWor(l)d Page 5 of 37 12/2/2011
Technologies Utilized
The technologies utilized on this web site are XHTML 1.0 Transitional, Flash 8, and Javascript. All
technologies are client side to allow CD-ROM viewing on non-networked computers. Thus, the
web site should all work with any web server. The CD-ROM version will not be able to access
YouTube videos until the end-user sets Flash preferences to grant network access to flash files
on the CD-ROM drive. See the section CD-ROM or Hard Disk Setup.
Cascading Style Sheets (CSS) and HTML tables are used for laying out the text, flash widgets,
and graphics on the web pages.
Most of the web page elements which play video or display interactive graphics are Flash
widgets.
Web Server Setup
The web server must support these file types: .HTML, .XML, .TXT, .SWF, .FLV, .GIF, .JPG, and
.PNG. Otherwise, there are no server side technologies utilized for this web site.
About configuring a web server for Flash
When your files are accessed from a web server, the server must properly identify them as Flash
content to display them. If the MIME type is missing or not properly delivered by the server, the
browser can show error messages or a blank window with a puzzle piece icon.
If your server is not properly configured, you (or your server's administrator) must add the Flash
SWF file MIME types to the server's configuration files and associate the following MIME types
with the SWF file extensions:
MIME type application/x-shockwave-flash has the .swf file extension.
MIME type application/futuresplash has the .spl file extension.
If you are administering a server, consult your server software documentation for instructions on
adding or configuring MIME types. If you are not administering a server, contact your Internet
service provider, webmaster, or server administrator to add the MIME type information.
If your site is on a Macintosh server, you must also set the following parameters: Action: Binary;
Type: SWFL; and Creator: SWF2.
About configuring FLV files for hosting on a server
When you work with FLV files, you might have to configure your server to work with the FLV file
format. Multipurpose Internet Mail Extensions (MIME) is a standardized data specification that
lets you send non-ASCII files over Internet connections. Web browsers and e-mail clients are
configured to interpret numerous MIME types so that they can send and receive video, audio,
graphics, and formatted text. To load FLV files from a web server, you might need to register the
file extension and MIME type with your web server, so you should check your web server
documentation. The MIME type for FLV files is video/x-flv. The full information for the FLV file
type is as follows:
Mime Type: video/x-flv
File extension: .flv
Required parameters: none
Optional parameters: none
Encoding considerations: FLV files are binary files; some applications might require the
application/octet-stream subtype to be set.
MyWor(l)d Page 6 of 37 12/2/2011
Security issues: none
Published specification: www.macromedia.com/go/flashfileformat.
Microsoft changed the way streaming media is handled in Microsoft Internet Information Services
(IIS) 6.0 web server from earlier versions. Earlier versions of IIS do not require any modification to
stream Flash Video. In IIS 6.0, the default web server that comes with Windows 2003, the server
requires a MIME type to recognize that FLV files are streaming media.
When SWF files that stream external FLV files are placed on a Microsoft Windows 2003 server
and are viewed in a browser, the SWF file plays correctly, but the FLV video does not stream.
This issue affects all FLV files placed on Windows 2003 server, including files you make with
earlier versions of the Flash authoring tool, the Macromedia Flash Video Kit for Dreamweaver MX
2004. These files work correctly if you test them on other operating systems.
For information about configuring Microsoft Windows 2003 and Microsoft IIS Server 6.0 to stream
FLV video, see www.macromedia.com/go/tn_19439.
CD-ROM or Hard Disk Setup
To make a version of this web site playable from CD-ROM or hard disk, copy all of the files in the
―CDROM‖ directory to the root directory above.
To create an auto-play CD-ROM, copy the contents of the entire web site root directory (created
in the previous step) to root of the blank CD-ROM.
The files in the ―CDROM‖ directory contain local playback versions of the Flash files. Flash has
very strict security control requiring two version of each .swf - local and network.
Web Authoring Tools Used
Adobe Dreamweaver CS3 was used to assemble the web site. Any web site editor will work, but
some unique features of Dreamweaver were used to maintain site consistency and quick global
changes: templates and libraries. If Dreamweaver will never be used, then tags such as ―Akan
The current language is read from a cookie to highlight the selected language in the left
Languages column on the web page. This sets a id code for the menu list. For example:
document.write("")
JavaScript
Client side JavaScript is mostly used to read and write cookies, write and read the current
language (using cookies) for the Languages side menu, load Flash widgets onto the web page,
load dynamic parameters into Flash (i.e. current language), and serve as a communication pipe
from Flash mapdatatextviewer.swf to Flash word.swf.
Saving Files with Foreign Language Characters
Many foreign language characters will display correctly if the .txt and .xml files are saved as UTF-
8 instead of ANSI. Microsoft Notepad can save files as UTF-8. Once the files are UTF-8, other
word processors might be used to edit the text. We used Notepad and Dreamweaver. Some
foreign language characters will never display correctly or only on some end-user computers.
Watch out because some end-users will not have a UNICODE font installed such as Arial
Unicode MS. Best case is to store some of the foreign language text strings as image bitmaps
such as Akan, Arabic, and Chinese. Bitmapping the text is of course more work. Chinese
characters seem to work when a Unicode font is installed, but not everyone has a UNICODE font
on their system.
MyWor(l)d Page 8 of 37 12/2/2011
Music and Commercial Videos (youtube)
Click a video thumbnail to play a youtube video. The video thumbnails will scroll left and right if
there are more then five videos available. The English and Foreign words are displayed at the
bottom. Up/down text scrolling arrows appear when necessary. A network connection is required
to watch a youtube video. The youtube user who posted a video may delete the video at anytime.
The video content can be filtered by adding a ―language‖ parameter to the Flash embed
command on the web page. Otherwise, all videos for all languages are displayed. The youtube
video id codes and links to other relevant files are stored in either commercialvideos.xml or
musicvideos.xml. All of the video words or lyrics and any bitmapped text files are stored in
separate files in the /videos directory. There is also a file at root directory (―videos.css‖) which
defines the text formatting for all of the video text.
Currently:
youtube.swf
1. embed the Flash object within the website using and tags
2. load either commercialvideos.xml or musicvideos.xml by adding data_file=
commercialvideos.xml to the embed code
3. commercialvideos.xml and musicvideos.xml contain youtube id codes and url pointers to
text and bitmapped text files in the directory ―/videos‖
4. filter the phrases to one language by adding this to the flash embed code:
language=Greek
5. text styles (font, text size, color) are defined in ―videos.css‖
―youtube.fla‖ is the source Flash 8 file which is published to ―youtube.swf‖.
youtube Video Files
Every video and video thumbnail is actually played directly from the youtube.com website. It is
against youtube‘s legal statement to download any of the videos. To play a youtube video or
display a thumbnail image, the xml file contains a unique video id code which you can get from
any video on the youtube.com web site. The youtube.swf widget reads these codes from the xml
file and then uses the video ID to load the multimedia for display. The URL link to a youtube video
MyWor(l)d Page 9 of 37 12/2/2011
is: "http://www.youtube.com/v/" + my_videoID . The URL link to a youtube thumbnail is: "
http://img.youtube.com/vi/ " + my_ videoID +"/default.jpg" .
Text Files
The text containing the English and foreign text for each video is stored in an external .txt text file.
These files are referenced from the xml file which contains the youtube id code, video title, etc.
There are two sections to the text file. The English translation called ―translation‖ and the foreign
words called ―words‖. The file should have two tags: ―translation=‖ and ―&words=‖. The & sign is
required and do not use any other & signs in the text file (I think this is true). Any text in the file
after ―translation=‖ is the English text up to the ―&words=‖ tag. All text after ―&words=‖ is the
foreign text. Some foreign characters will not work on all end-user systems. Especially Akan,
Arabic, and Chinese. These difficult font translations will have to be saved as .png graphic files
with a transparent background (we made PNG files from PDF‘s loaded in Photoshop). When
using .png files, add blank lines after the tag to enable scrolling of the bitmapped text in
Flash. The number of blank lines is trial and error.
Example text file
translation=The video says this in English.
And then it says this.
&words=Τι έχεις;
Έλα πές μου, τι έχεις;
Example text file with foreign text as a graphic translation
translation=Keep it… We may win!
Oooh, we won.
&words=
… blank line ….
… blank line ….
… blank line ….
XML file (commercialvideos.xml and musicvideos.xml”)
Tags:
The video title
The unique youtube.com id code for this video
The location of the text file containing the
English and foreign language words
When the youtube widget is loaded onto a web page, the videos can be
filtered for one language only.
Example xml file
Akan
Angel Cream
6I4MF71e35M
videos/Akan_AngelCream_Commercial.txt
MyWor(l)d Page 10 of 37 12/2/2011
Style File (“videos.css”)
The videos style sheet file defines what text style and color is used when displaying text. The only
style definitions currently used are: .thumbnailtitle for the video thumbnail titles, .title for the video
title, .translation for the text in English, .words for the text in foreign language, and if needed.
Example style file:
p { fontFamily: verdana; fontSize: 11px;}
.translation { fontFamily: verdana; fontSize: 8px;}
.words { fontFamily: verdana;fontSize: 8px;color:#3c71bc;}
.title {fontFamily: verdana; fontSize: 12px; font-weight:bold; text-align:center; text-
decoration:underline;}
.thumbnailtitle { fontFamily: verdana; fontSize: 10px; text-align:center;}
Embedding the youtube Flash Widget on the Web Page
The youtube flash file can take several command line parameters to alter its behavior when it is
embedded onto a web page. The parameters are read when the widget is first loaded.
data_file= Location and name of video xml file commercialvideos.xml or
musicvideos.xml (default is ―musicvideos.xml‖)
language= Filter the display of videos to this language code (default is none)
Example command line parameters
youtube?data_file= musicvideos.xml&language=Greek
Example embed
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','
375','height','550','title','youtube','src', 'youtube'
,'quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Sho
ckwaveFlash','movie','youtube?data_file= commercialvideos.xml&language=Greek')); //end AC code
MyWor(l)d Page 11 of 37 12/2/2011
Speak to Me
There a two ways to pick a phrase to play, click a video thumbnail or choose a phrase from the
scrolling text list. The video thumbnails will scroll left and right if there are more then five phrases
available. The English phrase is displayed at the bottom along with the phonetic text version. The
foreign text is overlaid on the video.
The phrases content can be filtered by adding a ―language‖ parameter to the embed command on
the web page. Otherwise, all phrases are displayed. Most of the phrases and links to other files
are stored in phrases.xml. All of the videos, video thumbnails, and any bitmapped text are stored
in separate files.
Currently:
phrases.swf
6. embed the Flash object within the website using and tags
7. load ―phrases.xml‖ by adding data_file= phrases.xml to the embed code
8. ―phrases.xml‖ points to video and image files in the directory ―/phrases‖
9. filter the phrases to one language by adding this to the flash embed code:
language=Greek
10. text styles (font, text size, color) are defined in ―phrases.css‖
―phrases.fla‖ is the source Flash 8 file which is published to ―phrases.swf‖.
Phrases Video Files
Each phrase has a video file. Adobe Premiere and Adobe After Effects (with plug-in ZMatte) were
used to create the flash videos used in ―Speak to Me‖. The flash video settings were: Video FLV 8
Low Quality 150 kbps On2 VP6, 324x240, Audio MPEG Layer III (MP3) 32 kbps (mono).
Phrases Image Files
All of the videos have a .JPG thumbnail image. The image can probably be any size but
we used 120 x 81. If any foreign text characters does not display properly on all end-user
MyWor(l)d Page 12 of 37 12/2/2011
machines, you will have to bitmap the text into a .PNG file. The PNG file should have a
transparent background. We loaded PDF files from the foreign language experts into Photoshop,
cropped each phrase string, and exported as PNG.
Phrases XML file (“phrases.xml”)
Tags:
The phrase in English
The phrase in the foreign language. Not all foreign characters will work on all
end-user computers. If the text has to be a bitmap file, use a .png graphic file with a
transparent background. Also you must use the CDATA tag to embed HTML code in the
text to load images.
The phrase text phonetically.
The location and name of the .flv video for this phrase.
The location and name of the .jpg video thumbnail for this phrase.
A code for the language associated with this phrase. When the phrases
widget is loaded onto a web page, the phrases can be filtered for one language only.
Example xml file
Hungarian
Have a nice day.
phrases/hungarian_haveniceday.flv
phrases/hungarian_haveniceday.jpg
Minden jót.
Meen-Die yot!
Akan
Hi, how are you?
phrases/akan_hihowareyou.flv
phrases/akan_hihowareyou.jpg
]]>
wo ho ti sehn?
Phrases Style File (“phrases.css”)
The phrases style sheet file defines what text style and color is used when displaying text. The
only style definitions currently used are for .thumbnailtitle for the video thumbnail titles, .title for
the video title, .text for the phrase in English, .phonetic for the phonetic spelling, and .comment for
misc comments.
Example style file
.thumbnailtitle {fontFamily: verdana;fontSize: 11px;text-align:center;}
.title {fontFamily: verdana;fontSize: 16px;line-height:22px;font-weight:bold;text-
decoration:underline; text-align:center;color: #003399;}
MyWor(l)d Page 13 of 37 12/2/2011
/* nothing seems to work to center images in flash HTML text */
.text {fontFamily: verdana; fontSize: 18px;line-height:30px;text-
align:center;align:center;background-position: center;position: relative;color: #ffffff;}
.phonetic {fontFamily: verdana;fontSize: 12px;line-height:16px;text-
align:center;font-style: italic;align:center;}
.comment {fontFamily: verdana; fontSize: 10px; line-height:14px;text-
align:center;align:center;}
Embedding the Phrases Flash Widget on the Web Page
The phrases flash file can take several command line parameters to alter its behavior when it is
embedded onto a web page. The parameters are read when the widget is first loaded.
data_file= Location and name of phrases xml file (default is ―phrases.xml‖)
language= Filter the display of phrases to this language code (default is none)
Example command line parameters
phrases?data_file= phrases.xml&language=Greek
Example embed
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','
375','height','550','title','phrases','src','phrases','quality','high','pluginspage','http://www.adobe.com/shockwave/do
wnload/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','phrases?data_file=phrases.xml&language=
Greek')); //end AC code
MyWor(l)d Page 14 of 37 12/2/2011
Maps
world.swf
The world map uses a free Flash file ―world.swf‖ from http://www.backspace.com/mapapp. The
source code for ―world.swf‖ is not available. We have also enhanced the world map XML
specification for displaying additional text information when the xml file is loaded by
―mapdatatextviewer.swf‖. There currently is no interactive Florida state map but other maps are
available at http://www.backspace.com/mapapp.
Embedding the “world.swf” Widget on the Web Page
The ―world.swf‖ flash file can take several command line parameters to alter its behavior when it
is embedded onto a web page. The parameters are read when the widget is first loaded.
data_file = Location and name of factoids xml file (default is ―data.xml‖)
first_zoom = start map zoomed to this country id
If you don‘t specify a data file, ―world.swf‖will look for one named data.xml in the same directory
as the Web page calling the Flash file. You can specify additional data files by replacing
―world.swf‖ with:
world.swf?data_file=pathname/filename.xml
where ―pathname‖ is the relative address your Web page to the data file named ―filename.xml.‖
Note that‘s the path from the Web page embedding the Flash file, not the path relative to the
SWF file itself.
You can also set the first zoom in your HTML embed tags as follows:
world.swf?data_file=data.xml&first_zoom=US
Example embed
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','
375','height','350','title','World
Map','src','world','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Pro
d_Version=ShockwaveFlash', 'flashvars','lcId=0', 'movie', 'world?data_file=maps/GreekMap.xml'); //end AC code
MyWor(l)d Page 15 of 37 12/2/2011
XML Specifics
A complete description of the XML format is available at http://www.backspace.com/mapapp and
at the end of this document. But we have assigned some tags to have very specific functions for
this web site.
Countries (states) marked with tags have the following meaning;
0 = primary language
1 = regional language
2 = minority language
9 = European Union
100 = State county language (for any state maps)
The optional tag is used specifically to designate the number of people in a country or
state county that speak a language. The ―mapdatatextviewer.swf‖ widget displays hover text in ()
after the country or county name. The ―world.swf‖ widget displays hover text in a tooltip when the
mouse is moved over a country.
450 = number of speakers in that county or country
XML Enhancements
New tags have been added to the ―world.swf‖ XML specification. These tags are only
used by ―mapdatatextviewer.swf‖ and are completely ignored by ―world.swf‖. The ID code for
each tag below cannot be changed. But the data between the tags , , and
can contain any displayable text. Typically the tag id "Number Speakers Worldwide" is
only used for world maps and "Number Speakers Statewide" is for USA state maps.
36.6 million
42.7 million
0.65
Indo-European, Slavic
28,193
a comment displayed last
European Union
The European Union is a hack and enhancement to the world map XML file specification. If a
language is spoken in the EU, set the color of 9 to the same color as the primary,
regional or minority language color as appropriate. If that language does exist in the European
Union, then delete all 9 tags.
MyWor(l)d Page 16 of 37 12/2/2011
If a language is spoken in the EU, then add the code below to the XML file. The ―world.swf‖
widget will skip the id="EU" tag because there is no region in the map coded to id=‖EU‖. The
―mapdatatextviewer.swf‖ widget will use the id="EU" in its text display output.
European Union
1 /* data value should be 1, 2,or 3 */
Florida Map (or any state map)
Even though there is no interactive map for Florida, the ―mapdatatextviewer.swf‖ widget is still
used to display Florida statistics. The standard ―world.swf‖ XML file was used as a template but
all country id codes were replaced with Florida state county codes and names. The tag
should always be 100.
Example:
Alachua
100
1,659
mapdatatextviewer.swf
―mapdatatextviewer.swf‖ parses the xml file and displays text such as:
Mapdatatextviewer Style File (“mapdatatextviewer.css”)
The mapdatatextviewer style sheet file defines what text style and color is used when displaying
map statistics. The only style definitions currently used are ―p‖ for body text, ―a‖ for hyperlink tags,
and ―title‖ for the title of each section such as ―Language Family―.
Example style file
a { text-decoration: underline; }
p { fontFamily: verdana; fontSize: 11px; }
title { fontFamily: verdana; fontSize: 12px; font-weight:bold; }
Embedding the “Mapdatatextviewer.swf” Widget on the Web Page
MyWor(l)d Page 17 of 37 12/2/2011
The ―mapdatatextviewer.swf‖ flash file can take one command line parameters to alter its
behavior when it is embedded onto a web page. The parameters are read when the widget is first
loaded.
data_file = Location and name of factoids xml file (default is ―data.xml‖)
If you don‘t specify a data file, ―mapdatatextviewer.swf‖will look for one named data.xml in the
same directory as the Web page calling the Flash file. You can specify additional data files by
replacing ―mapdatatextviewer.swf‖ with:
mapdatatextviewer.swf?data_file=pathname/filename.xml
where ―pathname‖ is the relative address your Web page to the data file named ―filename.xml.‖
Note that‘s the path from the Web page embedding the Flash file, not the path relative to the
SWF file itself.
Example embed
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','
375','height','170','title','mapdatatextviewer','src','mapdatatextviewer','quality','high','pluginspage','http://www.ado
be.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','mapdatatextviewer?d
ata_file= maps/GreekMap.xml'); //end AC code
MyWor(l)d Page 18 of 37 12/2/2011
Fun Facts / Did You Know?
The Fun Facts (―funfacts.swf‖) and Did You Know (―didyouknow.swf‖) widgets display rotating
factoids about different languages. Each factoid is displayed for a certain amount of time before
automatically advancing to the next factoid. The factoids are displayed in random order. The
display time is a minimum of 10 seconds and a maximum of 60 seconds (the length of hold time
is calculated from the number of words in the text). The user can also change factoids by clicking
on the next or previous arrows. Clicking the center button toggles play and pause. Clicking the
next/previous arrows turns off a pause. Up and down text scroll arrow buttons automatically
appear when text can be scrolled up or down.
The factoid content can be filtered by adding a ―language‖ parameter to the embed command on
the web page. Otherwise, all (general) factoids not tagged to any language are displayed. The
text for the factoids is controlled by a combination of one xml file referencing many text files.
Currently:
funfacts.swf
11. embed the Flash object within the website using and tags
12. load ―funfacts.xml‖ by adding data_file=factoids.xml to the embed code
13. ―funfacts.xml‖ points to text files in the directory ―/funfacts‖
14. filter the factoids to one language by adding this to the flash embed code:
language=Greek
15. text styles (font, text size, color) are defined in ―factoids.css‖
didyouknow.swf
1. Same as funfacts.swf except load ―didyouknow.xml‖ inside the HTML embed tag
―funfacts.swf‖ and ―didyouknow.swf‖ are exactly the same flash widget except for screen size
(―funfacts.swf‖ is taller).
There are two files at the root directory level called ―didyouknow.xml‖ and ―funfacts.xml‖ which
define what text files are used and the language classification for each factoid .The directories
―funfacts‖ and ―didyouknow‖ contain all of the text files (and multimedia JPEG or GIF or flash files
.swf) for all factoids displayed on the web pages. There is also a file at root directory which
defines the text formatting for all of the factoids called ―factoids.css‖.
WARNING: you must use the optional command line parameters when embedding the factoid
flash widget on the web page. By using the command line parameters you can control what
factoids to display (Fun Facts or Did You Know?) and what language filter to apply. See the
―Embedding the Factoid Flash Widget on the Web Page‖ section.
―factoids.fla‖ is the source Flash 8 file which is published to ―funfacts.swf‖ and ―didyouknow.swf‖.
―funfacts.swf‖ and ―didyouknow.swf‖ are exactly the same except for the stage size setting when
published.
MyWor(l)d Page 19 of 37 12/2/2011
// Export multiple versions of ―factoids.fla‖ to a .swf file
// Stage size: 300x150 -> didyouknow.swf
// Stage size: 300x350 -> funfacts.swf
Factoid Text Files
Each factoid .txt file must start with ―text=‖ and must end with ―‖
Example factoid text file
File name: ―factoid1.txt‖
Contents: text=Noah‘s Ark landed on Mount Ararat (Agri Dagi) in Eastern Turkey. (En
ewsbuilder.net)
If some characters do not display correctly on the web page, try opening the .txt file using
Microsoft Notepad and save as the file as Encoding=UTF8.
You can also try entering special characters with the codes below which are not standard HTML
codes (http://allwebco-templates.com/support/S_hex.htm):
Use %25 to indicate a percent % sign, not %
Use %2B to indicate a plus + sign, not +
Use %B0 to indicate a plus degree sign, not °
Use %24 to indicate a plus $ sign, not $
Factoid Image Files
A factoid can also be an image file (JPEG or GIF) or a flash file (.swf). The file will be stretched to
fit within the factoid window on the web page. If the image is stretched, it will maintain its original
aspect ratio. This feature has not been tested much. Text cannot be mixed with images.
Factoid XML files (“didyouknow.xml” and “funfacts.xml”)
Tags:
A factoid defined with a .txt file containing html markup language
A factoid defined with one.JPG or .GIF or .SWF file
The location and name of the factoid data file. Note that if you use a relative
path, the relative path is from the web page embedding the Flash file, not the
path relative to the SWF file itself.
A unique id or code for this factoid which can be jumped to when the factoid
widget is loaded onto a web page
A code for the language associated with this factoid. When the factoid widget
is loaded onto a web page, the factoids can be filtered for one language only.
Do not define the language if this factoid should always be displayed no
matter what language filter is applied.
Example xml file:
factoids/GreekBasic2.txtGreekBasic3Greek
factoids/HungarianBasic3.txtHungarianBasic3Hun
garian
MyWor(l)d Page 20 of 37 12/2/2011
factoids/HungarianCurrent1.txtHungarianCurrent1
Hungarian
http://www.digitalworlds.ufl.edu/splash/DWISPLASH2006c.swfdw
factoids/26-pic1.jpg2
Factoids Style File (“factoids.css”)
The factoids style sheet file defines what text style and color is used when displaying textual
factoids. The only style definitions currently used are for paragraphs and anchors ()
hyperlink tags.
Example style file
p { fontFamily: verdana; fontSize: 12px; }
a { color: #003300; text-decoration:underline; }
Embedding the Factoid Flash Widget on the Web Page
The factoids defined in the xml files are displayed in random order. The factoid flash file can take
several command line parameters to alter its behavior when it is embedded onto a web page. The
parameters are read when the widget is first loaded.
data_file= Location and name of factoids xml file (default is ―didyouknow.xml‖)
language= Filter the display of factoids to this language code (default is none)
id= Start (jump to) the factoid with this id code (default is none)
Example command line parameters:
'factoids?data_file=factoids.xml&language=Greek&id=GreekBasic3
Example embed
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','
300','height','150','title','didyouknow','src','didyouknow','quality','high','pluginspage','http://www.adobe.com/shock
wave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','didyouknow?data_file=didyouknow.
xml&language=Spanish‘); //end AC code
MyWor(l)d Page 21 of 37 12/2/2011
Specifying trusted files in Flash for the CDROM using the
Settings Manager
If you are using the CD-ROM version of this web site, the Flash player will not be able to access
the YouTube music and commercial videos unless you have an Internet connection and you add
the CD-ROM file path to the Flash Security Settings.
You can specify what Flash content your computer may access by adding the location of the CD-
ROM content to the Global Security Settings panel in the Flash Player Settings Manager. After
you add a location on your computer to the Security panel, content in that location is trusted.
Flash Player won't ask you for permission again.
When you access the Commercial Break or Music Videos web page, an Adobe Flash Player
Security dialog box will appear. If you click Settings, the Settings Manager Global Security
Settings panel appears.
To specify that a local SWF file can communicate with the Internet and local file system: In the
Global Security Settings panel, click the locations pop-up menu and select Add Location. The
Add Location box opens.
Click the Browse For Folder button and add the directory of the CD-ROM such as "D:\"
When you add an entire directory, all the files and subdirectories in that directory are trusted.
Click Confirm. The location is added to the Security Settings panel.
After you add trusted locations, you must restart the local Flash content by either refreshing the
browser or restarting the web browser.
MyWor(l)d Page 22 of 37 12/2/2011
Supported HTML tags in Flash 8
This section lists the built-in HTML tags supported by Flash Player. You can also create new styles and tags using
CSS; see Formatting text with Cascading Style Sheets.
Anchor tag ()
The tag creates a hypertext link and supports the following attributes:
href Specifies the URL of the page to load in the browser. The URL can be either absolute or relative to
the location of the SWF file that is loading the page. An example of an absolute reference to a URL is
http://www.macromedia.com; an example of a relative reference is /index.html.
target Specifies the name of the target window where you load the page. Options include _self, _blank,
_parent and _top. The _self option specifies the current frame in the current window, _blank specifies a new
window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current
window.
For example, the following HTML code creates the link "Go home," which opens www.macromedia.com in a new
browser window:
urlText_txt.htmlText = "Go home";
You can use the special asfunction protocol to cause the link to execute an ActionScript function in a SWF file
instead of opening a URL. For more information on the asfunction protocol, see asfunction in Flash ActionScript
Language Reference.
You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets. See Styling built-in
HTML tags.
Bold tag ()
The tag renders text as bold, as shown in the following example:
text3_txt.htmlText = "He was ready to leave!";
A bold typeface must be available for the font used to display the text.
Break tag ()
The tag creates a line break in the text field. In the following example, the line breaks between sentences:
text1_txt.htmlText = "The boy put on his coat. His coat was red plaid.";
The closing tag is optional, but it is good practice to include it.
Font tag ()
The tag specifies a font or list of fonts to display the text.
The font tag supports the following attributes:
color Only hexadecimal color (#FFFFFF) values are supported. For example, the following HTML code
creates red text:
myText_txt.htmlText = "This is red text";
face Specifies the name of the font to use. As shown in the following example, you can specify a list of
comma-delimited font names, in which case Flash Player selects the first available font:
myText_txt.htmlText = "Displays as
either Times or Times New Roman...";
If the specified font is not installed on the user's computer system or isn't embedded in the SWF file, Flash
Player selects a substitute font.
MyWor(l)d Page 23 of 37 12/2/2011
For more information on embedding fonts in Flash applications, see TextField.embedFonts in Flash
ActionScript Language Reference and "Setting dynamic and input text options" in Using Flash.
size Specifies the size of the font, in pixels, as shown in the following example:
myText_txt.htmlText = "This is blue, 24-
point text";
You can also use relative point sizes instead of a pixel size, such as +2 or -4.
Image tag ()
The tag lets you embed external JPEG files, SWF files, and movie clips inside text fields and TextArea
component instances. Text automatically flows around images you embed in text fields or components. This tag is
supported only in dynamic and input text fields that are multiline and wrap their text.
To create a multiline text field with word wrapping, do one of the following:
In the Flash authoring environment, select a text field on the Stage and then, in the Property inspector,
select Multiline from the Text Type menu.
For a text field created at runtime with MovieClip.createTextField(), set the new text field instance's
TextField.multiline and TextField.wordWrap properties to true.
The tag has one required attribute, src, which specifies the path to a JPEG file, a SWF file, or the linkage
identifier of a movie clip symbol in the library. All other attributes are optional.
The tags supports the following attributes:
src Specifies the URL to a JPEG or SWF file, or the linkage identifier for a movie clip symbol in the
library. This attribute is required; all other attributes are optional. External files (JPEG and SWF files) do not
show until they have downloaded completely.
Note: Flash Player supports non-progressive JPEG files, but does not support progressive JPEG files.
id Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded
JPEG file, SWF file, or movie clip. This is useful if you want to control the embedded content with ActionScript.
width The width of the image, SWF file, or movie clip being inserted, in pixels.
height The height of the image, SWF file, or movie clip being inserted, in pixels.
align Specifies the horizontal alignment of the embedded image within the text field. Valid value are left
and right. The default value is left.
hspace Specifies the amount of horizontal space that surrounds the image where no text appears. The
default value is 8.
vspace Specifies the amount of vertical space that surrounds the image where no text appears. The
default value is 8.
For more information and examples of using the tag, see Embedding images, SWF files, and movie clips in
text fields.
Italic tag ()
The tag displays the tagged text in italics, as shown in the following code:
That is very interesting.
This code example would render as follows:
That is very interesting.
MyWor(l)d Page 24 of 37 12/2/2011
An italic typeface must be available for the font used.
List item tag ()
The tag places a bullet in front of the text that it encloses, as shown in the following code:
Grocery list:
Apples
Oranges
Lemons
This code example would render as follows:
Grocery list:
Apples
Oranges
Lemons
Note: Ordered and unordered lists ( and tags) are not recognized by Flash Player, so they do not modify
how your list is rendered. All list items use bullets.
Paragraph tag ()
The tag creates a new paragraph. It supports the following attributes:
align Specifies alignment of text within the paragraph; valid values are left, right, and center.
class Specifies a CSS style class defined by an TextField.StyleSheet object. (For more information, see
Using style classes.)
The following example uses the align attribute to align text on the right side of a text field.
myText_txt.htmlText = "This text is aligned on the right
side of the text field";
The following example uses the class attribute to assign a text style class to a tag:
var myStyleSheet = new TextField.StyleSheet();
myStyleSheet.setStyle("body", {color:'#99CCFF', fontSize:'18'});
this.createTextField("test", 10, 0, 0, 300, 100);
test.styleSheet = myStyleSheet;
test.htmlText = "This is some body-styled text..";
Span tag ()
The tag is available only for use with CSS text styles. (For more information, see Formatting text with
Cascading Style Sheets.) It supports the following attribute:
class Specifies a CSS style class defined by an TextField.StyleSheet object. For more information on
creating text style classes, see Using style classes.
Text format tag ()
The tag lets you use a subset of paragraph formatting properties of the TextFormat class within
HTML text fields, including line leading, indentation, margins, and tab stops. You can combine tags
with the built-in HTML tags.
MyWor(l)d Page 25 of 37 12/2/2011
The tag has the following attributes:
blockindent Specifies the block indentation in points; corresponds to TextFormat.blockIndent. (See
TextFormat.blockIndent in Flash ActionScript Language Reference.)
indent Specifies the indentation from the left margin to the first character in the paragraph; corresponds
to TextFormat.indent. (See TextFormat.indent in Flash ActionScript Language Reference.)
leading Specifies the amount of leading (vertical space) between lines; corresponds to
TextFormat.leading. (See TextFormat.leading in Flash ActionScript Language Reference.)
leftmargin Specifies the left margin of the paragraph, in points; corresponds to TextFormat.leftMargin.
(See TextFormat.leftMargin in Flash ActionScript Language Reference.)
rightmargin Specifies the right margin of the paragraph, in points; corresponds to
TextFormat.rightMargin. (See TextFormat.rightMargin in Flash ActionScript Language Reference.)
tabstops Specifies custom tab stops as an array of non-negative integers; corresponds to
TextFormat.tabStops. (See TextFormat.tabStops in Flash ActionScript Language Reference.)
The following code example uses the tabstops attribute of the tag to create a table of data with
boldfaced row headers:
Name Age Department
Tim 32 Finance
Edwin 46 Marketing
Underline tag ()
The tag underlines the tagged text, as shown in the following code:
This is underlined text.
This code would render as follows:
MyWor(l)d Page 26 of 37 12/2/2011
Supported Style Sheet Properties in Flash 8
Flash Player supports a subset of properties in the original CSS1 specification
(www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet
(CSS) properties and values, as well as their corresponding ActionScript property names. (Each
ActionScript property name is derived from the corresponding CSS property name; if the name
contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)
CSS ActionScript
Usage and supported values
property property
Only hexadecimal color values are supported. Named colors (such
color Color as blue) are not supported. Colors are written in the following format:
#FF0000.
display Display Supported values are inline, block, and none.
A comma-separated list of fonts to use, in descending order of
desirability. Any font family name can be used. If you specify a
generic font name, it is converted to an appropriate device font. The
font-family fontFamily
following font conversions are available: mono is converted to
_typewriter, sans-serif is converted to _sans, and serif is converted to
_serif.
Only the numeric part of the value is used. Units (px, pt) are not
font-size fontSize
parsed; pixels and points are equivalent.
font-style fontStyle Recognized values are normal and italic.
font-weight fontWeight Recognized values are normal and bold.
Recognized values are true and false. Kerning is supported for
embedded fonts only. Certain fonts, such as Courier New, do not
support kerning. The kerning property is only supported in SWF files
kerning Kerning
created in Windows, not in SWF files created on the Macintosh.
However, these SWF files can be played in non-Windows versions of
Flash Player and the kerning still applies.
The amount of space that is uniformly distributed between
characters. The value specifies the number of pixels that are added
letter-
letterSpacing to the advance after each character. A negative value condenses the
spacing
space between characters. Only the numeric part of the value is
used. Units (px, pt) are not parsed; pixels and points are equivalent.
Only the numeric part of the value is used. Units (px, pt) are not
margin-left marginLeft
parsed; pixels and points are equivalent.
margin- Only the numeric part of the value is used. Units (px, pt) are not
marginRight
right parsed; pixels and points are equivalent.
text-align textAlign Recognized values are left, center, right, and justify.
text-
textDecoration Recognized values are none and underline.
decoration
Only the numeric part of the value is used. Units (px, pt) are not
text-indent textIndent
parsed; pixels and points are equivalent.
You can use the StyleSheet class to perform low-level text rendering. However, in Flex, you
typically use the Label, Text, TextArea, and TextInput controls to process text.
MyWor(l)d Page 27 of 37 12/2/2011
Unicode in Macromedia Flash MX: Creating movies with
multilanguage text by loading external text or XML files
Creating movies with multilanguage text by loading external text or XML files.
You can create a movie containing multilanguage text by placing the text in an external text or
XML file and loading the file into the movie at runtime, using the load Variables action, the
getURL action, the LoadVars object, or the XML object. You should save the external file in UTF-
8, UTF-16BE, or UTF-16LE format, using an application that supports the format. If you are using
UTF-16BE or UTF-16LE format, the file must begin with a byte order mark (BOM) to identify the
encoding format to the Macromedia Flash Player 6. See About Unicode encoding formats
supported by the Macromedia Flash Player 6.Note: If the external file is an XML file, you cannot
use an XML encoding tag to change the encoding of the file. You should save the file in a
supported Unicode format. See About encoding in external XML files.To include multilinguage
text using an externally loaded file:
1 In the Macromedia Flash MX authoring tool, create a dynamic or input text field that will
display the text in the movie.
2 Assign a variable to the text field, for example, myTextField .
3 Create a text or XML file that defines the value for the text field variable.
4 Save the file in UTF-8, UTF-16BE, or UTF-16L format.
5 If you are using a UTF-16 format, make sure a byte order mark is included at the beginning
of the file to identify the encoding: For UTF-16BE, the first byte of the file should be OxFE, and
the second byte should be OxFF. For UTF-16LE, the first byte of the file should be OxFF, and
the second byte should be OxFE.
Note: Most text editors that can save files in UTF-16BE or LE automatically add the BOMs to the
files.
6 Use one of the following ActionScript procedures to reference the external file and load it
into the dynamic or input text field: Use the loadVariables action to load an external file. Use the
getURL action to load an external file from a specified URL. Use the LoadVars object (a
predefined client-server object) to load an external text file from a specified URL. Use the XML
object (a predefined client-server object) to load an external XML file from a specified URL. For
information on these procedures, see the respective entries in the online ActionScript Dictionary
(Help > ActionScript Dictionary) or in the Reference panel (Window > Reference).
MyWor(l)d Page 28 of 37 12/2/2011
DIY World Map Additional Information (“world.swf”)
Configuring the Data File
Global Configuration
default_color: This is the color of the states that do not have any data associated with them. In
this case, it will display them in a light gray:
bbbbbb
background_color: This is the color of the map background, the ocean and other bodies of
water. In this case, it will display a white background:
ffffff
To make the background transparent, use:
0
You also need to specify , and in the tag
add the attribute wmode=transparent
outline_color: This is the color of the borders between states and provinces. In this case, it will
display a dark gray:
666666
If you do not want to display the state borders at all, add 0
default_point: This sets the default attributes for all points on the map. Set the default color in
the field. In this case, it will display a bright red. The attribute sets the default size.
The attribute sets the default opacity. A of 10 will show a dot 10 pixel diameter
dot when zoomed out at 100%. loads a custom icon for the default point. All default_point
attributes are overridden attributes specified in a point_range or individual point configuration
block.
ffff00
20
70
lighthouse.swf
scale_points: This sets the size of the points when zooming into the overall map. If you leave
this out, the points will retain their size relative to the map, i.e. a small point when zoomed out will
appear to be a large point when you zoom in to the map. If you set the to 100, the point
will not change visible size when you zoom in to the map, i.e. a small point when zoomed out will
MyWor(l)d Page 29 of 37 12/2/2011
still appear small when you zoom in to the map. If you set the to 50, the point will change
size a little bit when you zoom in to the map, i.e. a small point when zoomed out will appear little
larger when you zoom in to the map, but will still shrink along the way. Try it out and find the
setting that works for you. can be any number between 25 and 100.
50
line_color: This sets the default color of lines on the map. In this case, it will display a bright
blue:
0000ff
arc_color works the same way.
hover: This is where we set the font size, text color, and background color of the text field that
displays the state name and hover data. A size of 14 will show text 14 pixels tall. If none of this
information specified, the default font is 11, with white text on black.
14
ffffff
990000
range: This determines the color of all states that have data within the range you set. Colors are
indicated using hex codes (without the #). You can use a single number of set a minimum and
maximum. The minimum and maximum numbers must be separated by a dash and two spaces.
The range below will color gray all states with of 0, and will color red all states with
between 1 and 10.
0
666666
1 - 10
ff0000
, , and all work the same
way to set the color of points, lines, and arcs respectively.
point_range can also take a , , and variables. Set the pathname of a JPEG
or SWF file in the to display a custom image or movieclip for points that match the data
range. This can also be overridden by setting a for an individual point (see below). If an
is set, any color set for data this range is ignored. In this case, points matching the data
range of 1 through 10 will display the forest_fire.swf movie clip. Points matching a data range of 0
will display a gray dot around 15 pixels in diameter.
0
cccccc
15
MyWor(l)d Page 30 of 37 12/2/2011
1 - 10
forest_fire.swf
Setting the in the data range will override the set in the default_point block.
zoom_out_button: One of my design goals was to let the cursor behavior guide the interface and
not clutter up the screen with buttons. Still a couple of people requested a zoom out button, so I
added the option. To display a text button use the following. The is what is displayed as
the text of the button. The determines the location of the button, and can be any one of
the following: NW, N, NE, E, SE, S, SW, or W. The button will display when you zoom in. You can
also set the font size, text color, and background color of the zoom out button as follows.
Zoom Out
SE
14
ffffff
990000
Note, independently of this option, you can use the right-click menu to zoom out.
zoom_mode: There currently are three zoom modes. The default mode, 'no zoom', and 'region'.
The default zoom mode zooms the map into states when those are clicked. To use this, leave out
the 'zoom_mode' block. When the zoom_mode is set to 'no zoom', the map will not zoom into
states or points when clicked, it simply gets the URL specified. A zoom_mode of 'region' zooms
the map in two stages: the first click zooms into a region, a second click zooms into a country.
See more on setting regions below.
no zoom
show_name: By default, the rollover will display the state 'name' followed by its 'hover.' To
display the region name use:
region
If you do not want to display any text at all use name
first_zoom: Sets the initial zoom when the map launches. It is equivalent to ―automatically‖
clicking a state or a region that you define.
TX
You can also set the first zoom in your HTML embed tags as follows:
world.swf?data_file=data.xml&first_zoom=AF
zoom_out_center: Use this to focus in on a particular region or state when the map when
zoomed out. This sets the center of your maximum zoom out region, and should be a latitude and
MyWor(l)d Page 31 of 37 12/2/2011
longitude in decimal degrees separated by a comma (with no spaces). If no zoom_out_center
value is set, the map automatically centers to fit the entire map in the frame when zoomed out.
40.745,-73.985
zoom_out_scale: Use this to limit the level of zoom when zoomed out. A zoom_out_scale of 100
fits the entire map within the frame when zoomed out. If no zoom_out_scale value is set, the map
automatically defaults to a zoom_out_scale of 100.
200
States
And now for our state data. A state configuration looks like this:
Belgium
2
Ratified June 06, 2002
http://www.belgium.be/
_blank
Each has an ID associated with it. Don‘t change these ID‘s — these are how the map
associates your data with the shapes in the file. I‘ve used the FIPS codes to name the country
shapes.
data: This is the number that is tested against the to determine what color to show. If
no is specified, the is used.
name: This is the state name displayed when the mouse is over the state shape.
hover: This is text displayed when your mouse is over a state. If no text is specified,
only the state name will display. You can enter multiple lines of text by including a linebreak in
your text, like so:
30% of roses are red.
75% of violets are blue.
Tabs are also displayed, so mind that indenting text inside the hover field.
url: If a is specified, clicking on the state will zoom into it and load a doc icon. Clicking on
this icon will load the external Web page you specify in the field. If no is specified,
clicking on the state will just zoom in to it.
You can issue a javascript command from the as follows:
javascript:document.alert('Bienvenidos!');
Note, the get url does not work locally, only on a Web server. Also, url‘s with question marks are
truncated when sent to the browser. To work around this, replace each question mark with %3F.
MyWor(l)d Page 32 of 37 12/2/2011
target: Target is not required, but is useful if you are loading the map into a page with frames. If
no is specified, the default target is _self. Specifying a of _blank will open that
external URL in a new window when the info icon is clicked.
Regions
Regions are groups of states, and are defined as follows:
South America
FG,FK,AR,BL,BR,CI,EC,CO,PA,PE,UY,GY,VE,NS
13.3,-85.1,-56.6,-29.9
The is what displays in the text field when the mouse rollover the region area.
defines which countries are part of the region.
When you click on a region it will center that region area. To customize the framing of this zoom
area, you can specify a , which is the latitude and longitude of the top-left and bottom-right
corners of the area. To help determine the coordinates of your frame, you can use:
States can exist in more than one region. If you click on a state in multiple regions, the map will
zoom to the lowest region in the configuration list.
To display the region name on rollover, use:
region
When zoom_mode is set to 'region' the map zooms in two stages: the first click zooms into a
region, a second click zooms into a country. Accordingly, when focused on a country, clicking
zooming out returns to the most recently clicked region. Zooming out again returns to the full
map.
region
Points
point: To plot a point on the map, use the state id ―point‖ and supply the latitude and longitude in
the field. There are many ways to configure a point. You can don‘t have to use them all, but
you do need a and .
New York City
40.745,-73.985
http://backspace.com/mapapp/
Get DIY Map
75
3
1
globe.jpg
_blank
MyWor(l)d Page 33 of 37 12/2/2011
name: This is the name displayed when the mouse is over the point.
loc: Points must have a specified. This should be a latitude and longitude in decimal
degrees separated by a comma (with no spaces). You can download this list (32 Kb) of major
cities around the world and their latitude and longitude, or see this massive dataset from world-
gazetteer.com
url: If a is specified, clicking on the point will load that Web page. If no is specified,
clicking on that point will just zoom in to it.
You can issue a javascript command from the as follows:
javascript:document.alert('Bienvenidos!');
Note, the get url does not work locally, only on a Web server. Also, url‘s with question marks are
truncated when sent to the browser. To work around this, replace each question mark with %3F.
hover: This is the text displayed when your mouse is over a point. If no text is specified,
only the state name will display. You can enter multiple lines of text by including a linebreak in
your text, as mentioned above.
opacity: This sets the opacity of the point, from 0 to 100. This is useful when points overlap. A
point with an of 100 is completely solid. A point with an of 0 is completely
transparent. If no opacity is set, the default opacity is 100.
size: In addition to the default point_size, you can change the size of individual points by
specifying a value for the . This number is roughly the number of pixels in the point
diameter. A of 5 will show a 5 pixel diameter dot when zoomed out at 100%.
data: This number is tested against the to determine what color or icon to use.
(See point_range above.) If no is specified, the default_point will be used.
src: Set the pathname of a JPEG or SWF file here to display a custom icon for this point.
Specifying a here overrides an image set in the point_range or default_point.
target: As mentioned above, target works like the HTML attribute for links. If no is
specified, the default target is _self. Specifying a of _blank will open that external URL in
a new window when you click on the point.
See also the default_point, scale_points, and point_range options under Global Configuration.
Lines
line: To plot a line on the map, use the state id ―line‖ and supply the latitude and longitude in the
and fields:
New York to London
40.744806,-73.985283
51.32,-0.5
1
start and stop: These are the origin and destination of the line in latitude and longitude
expressed in decimal degrees separated by a comma (with no spaces).
MyWor(l)d Page 34 of 37 12/2/2011
data: This number is tested against the to determine the color of the line. If no
is specified, the default will be used.
name: This is the point name displayed when the mouse is over the line. Lines are pretty thin,
but sometimes users to rollover them.
Arcs
arc: Plotting an arc is just like plotting a line. Use the state id ―arc‖ and supply the latitude and
longitude in the and fields:
New York to London
40.744806,-73.985283
51.32,-0.5
1
Customizing Icons
You can load an external JPG or SWF file to customize the state info icon or points. Custom point
icons can be set as a default for all points, associated with a particular data range, or set for an
individual point.
If a state has an external URL associated, it displays a basic info icon when clicked.
To change the default info icon, use the state_info_icon block:
information.swf
By default, the point icon is a little dot. To change the default point icon, add a src attribute in the
default_point block, point_range block, or in a block. You can change the size
of the icon in any of those blocks as well.
Set the to the pathname of a JPEG or SWF file for your custom icon. If using relative
URL‘s, use the pathname from the page embedding the SWF file, not the data file.
Unfortunately, Flash can not load GIF‘s or PNG‘s dynamically, but you can embed these into an
SWF. PNG‘s embedded into an SWF will also display their alpha channel nicely. My default info
icon is a PNG with a little transparent shadow. Note, bitmap images tend to show up a little
crunchy when scaled in Flash so avoid fine borders and detail.
Registering Your Custom Icons
By default, custom image icons are centered based on their height and width. There is no other
way to register a JPEG. Custom movieclip icons are centered based on their height and width
from top left point (0,0) on the Flash stage.
If set for a state info icon, the center of the icon will align with the center of the state shape that
was just clicked. If set for a data point, the custom icon center is aligned with the latitude and
longitude of that point.
In some cases, however, you may not wish to register your icon at its center.
MyWor(l)d Page 35 of 37 12/2/2011
Embedding the World Flash file in your Web page
Here‘s a standard way of embedding a Flash file in the HTML of your Web page:
Feel free to change the height and width parameters here. DIY Map will expand to fill the space
and zoom to fit the center.
If you don‘t specify a data file, it will look for one named data.xml in the same directory as the
Web page calling the Flash file.
You can specify additional data files by replacing ―world.swf‖ in the example above with:
world.swf?data_file=pathname/filename.xmlwhere ―pathname‖ is the relative address your Web
page to the data file named ―filename.xml.‖ Note that‘s the path from the Web page embedding
the Flash file, not the path relative to the SWF file itself.
You can also set the first zoom in your HTML embed tags as follows:
world.swf?data_file=data.xml&first_zoom=AF
MyWor(l)d Page 36 of 37 12/2/2011
How to customize the Florida map (florida.swf) using the XML
control file
We have made it easy for you to customize most aspects of the Flash map using just a
single XML control file. In each map, the control file contains the following parameters:
• state - this parameter identifies the state map
• background - this determines the color of the map's background
• textColor - this determines the color of the text displayed
• normal – this parameter defines the default color of the object (county)
backgrounds
• rollover - this parameter defines the default color of the object (county) when the
mouse rolls over it
• border – this parameter defines the color of the object borders
• rollover_sound – this parameter determines if the click sound should be played or
not (true or false)
• name – This is the name that shows up in the pop-up label.
• url – this parameter determines the link URL where the user is taken when they
click on that object.
NOTE: All colors are specified in 6 digit hexadecimal code. For a chart of hexadecimal
colors, visit this website: http://html-color-codes.com/ or search for "hexadecimal color
chart" on the Internet. Also, Macromedia and most graphics programs provide a "safe
web color" chart.
You can edit anything that falls between quotations. WE HIGHLY RECOMMEND,
creating a backup of the original XML file in case it gets destroyed or becomes nonfunctional
due to accidental errors.
A sampling of the XML file is as follows:
MyWor(l)d Page 37 of 37 12/2/2011