Flash Interface from 2005

Flash interface built in ActionScript + PHP for senior class project.

Transcript

1. Flash Interface CS 491B Final Presentation Katherine Chuang May 31, 2005
2. The Project •  Purpose – Create a Flash website – Learn a new skill •  Goals – Separate content from design – Incorporate multimedia (text, graphics, audio, etc.)
3. Outline •  Go through each component – Demonstrate how it works – Explain how to create it – Challenges and quirks
4. 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
5. 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”
7. 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);
9. 3. External Text File •  Add Dynamic Text Area •  Give it a name, set variable •  ActionScript •  Create the textfile
11. Enter in Actionscript
12. External Text File &123txt=This is some sample content for the demonstration. You can use html formatting such as <b>bold</b>, <i>italic</i>, <u>underline</ u>. <br><br>You can also add paragraphs.
13. Valid HTML Tags Anchor <a> Bold <b> Italic <i> Underline <u> Line Break <br> Font <font> Image <img> List <li> Span <span> Paragraph <p> Text Format <textformat>
14. 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
15. Add labels, input fields, textarea, button
16. 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 (); } };
17. 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(); }
18. Debugging ActionScript •  Use trace(message); •  Shows message in output window •  Similar to Java’s System.out.println();
19. Flash Debugger
20. Flash Debugger
21. 5. asfunction •  Turns link into “button” myText.htmlText = “<a href= \"asfunction:showDesc,1">”;
23. 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.n; i++) { allclasses[i] = this["bio"+i]; classlinktext.htmlText += "<a href= \"asfunction:showDesc,"+i+"\">"+this["name"+i]+"</a><br>"; } } 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();
24. 6. Dynamic Slideshow •  Add movieclip object, text area, buttons •  Add ActionScript •  Set up PHP script and database
26. ActionScript
27. Database and PHP File
28. 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
29. Play Sound
30. Stop All Sounds stopAllSounds();
31. 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
32. Tools •  Flash MX 2004 •  Websites •  Books
33. 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