Slide 1
Slide 1 text
Flash Interface
CS 491B
Final Presentation
Katherine Chuang
May 31, 2005
Slide 2
Slide 2 text
The Project
• Purpose
– Create a Flash website
– Learn a new skill
• Goals
– Separate content from design
– Incorporate multimedia
(text, graphics, audio, etc.)
Slide 3
Slide 3 text
Outline
• Go through each component
– Demonstrate how it works
– Explain how to create it
– Challenges and quirks
Slide 4
Slide 4 text
The Components
1. Open link in new window (Schedule)
2. Photo Slideshow (Photos Section)
3. External Text (About Us Section)
4. Email Form (Contact Us Section)
5. asfunction (Classes Section)
6. Dynamic slideshow (Teachers
Section)
7. Start/Stop Sound
Slide 5
Slide 5 text
1. Open Link in New Window
• Add a button to the stage
• Add actions for the button
on(release){
//Goto Webpage Behavior
getURL("schedule.html","_blank");
//End Behavior
}
– getURL is a predefined method in actionscript
– Opens webpage in “_blank”, “_self”, “_parent”
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
2. Slideshow (internal images)
• Create keyframes, one for each
image
• Add next and previous buttons
• Add ActionScript to the buttons
– Next
on(release){ nextFrame(); }
– Previous
on(release){ prevFrame(); }
//loop around
gotoAndStop(5);
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
3. External Text File
• Add Dynamic Text Area
• Give it a name, set variable
• ActionScript
• Create the textfile
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Enter in Actionscript
Slide 12
Slide 12 text
External Text File
&123txt=This is some sample
content for the demonstration.
You can use html formatting
such as bold,
italic, underline.
You can also add paragraphs.
You can also add paragraphs.
Slide 13
Slide 13 text
Valid HTML Tags
Anchor
Bold
Italic
Underline
Line Break
Font Image![]()
List
Span
Paragraph
Font Image
Text Format
Slide 14
Slide 14 text
4. Email Form
• Add Labels, Input Fields,
Textarea + Scrollbar, Send
Button
• Name the Input Fields, Textarea
& Button
• ActionScript:
send_btn.onRelease = function () {
sendForm ();
}; //similar to javascript:
onClick=“func();”
• Create PHP file
Slide 15
Slide 15 text
Add labels,
input fields,
textarea, button
Slide 16
Slide 16 text
Email Form Code Continued….
send_btn.onRelease = function () {
if (first_name_txt.text == "" ||
emailtxt == "" || msgtxt.text ==
"") {
status_txt.text = "Please
complete the entire form ...";
}else {
status_txt = "";
sendForm ();
}
};
Slide 17
Slide 17 text
Email Form Code Continued….
function sendForm() {
var my_lv = new LoadVars();
my_lv.fName = first_name_txt.text;
my_lv.email = emailtxt.text;
my_lv.the_message = msgtxt.text;
my_lv.send ( "files/
emailform.php", "POST" );
nextFrame();
}
Slide 18
Slide 18 text
Debugging ActionScript
• Use trace(message);
• Shows message in output
window
• Similar to Java’s
System.out.println();
Slide 19
Slide 19 text
Flash Debugger
Slide 20
Slide 20 text
Flash Debugger
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
The Code
var i = 0;
var allclasses:Array = new Array();
function showLinks() {
classlinktext.htmlText = "";
numi.text = i;
nm = this.n;
for (i=0; i"+this["name"+i]+"
"; } } function showDesc(dc){classdesctext.htmlText = allclasses[dc];} // Create new load vars object c for data transfer var c = new LoadVars(); c.onLoad = showLinks; c.sendAndLoad("files/cdb_classes.php", c, "POST"); stop();
"; } } function showDesc(dc){classdesctext.htmlText = allclasses[dc];} // Create new load vars object c for data transfer var c = new LoadVars(); c.onLoad = showLinks; c.sendAndLoad("files/cdb_classes.php", c, "POST"); stop();
Slide 24
Slide 24 text
6. Dynamic Slideshow
• Add movieclip object, text area,
buttons
• Add ActionScript
• Set up PHP script and database
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
ActionScript
Slide 27
Slide 27 text
Database and PHP File
Slide 28
Slide 28 text
7. Start/Stop Sound with
Buttons
• Import sound file to library
• Add start and stop buttons
• Add action to buttons
• Note: You can also add sounds
to frames
Slide 29
Slide 29 text
Play Sound
Slide 30
Slide 30 text
Stop All Sounds
stopAllSounds();
Slide 31
Slide 31 text
Recap
1. Open link in new window (Schedule)
2. Photo Slideshow (Photos Section)
3. External Text (About Us Section)
4. Email Form (Contact Us Section)
5. asfunction (Classes Section)
6. Dynamic slideshow (Teachers
Section)
7. Start/Stop Sound
Slide 32
Slide 32 text
Tools
• Flash MX 2004
• Websites
• Books
Slide 33
Slide 33 text
Project Details
• Schedule
– http://acm.calstatela.edu/~kchuang/
• Stuff to finish
– Add play button to every section
– Finish Project Report
– Turn in all project and presentation
files