1 / 39

Programming Behavioral Experiments in Flash Intro to Web Programming, PhP, and Flash

Programming Behavioral Experiments in Flash Intro to Web Programming, PhP, and Flash. July 23 rd and 24 th , 2009– Jeff Galak (CMU). Agenda for the Week. Session 1: Thursday, July 23 rd (10-12pm) Session 2: Thursday, July 23 rd (2-4pm) Session 3: Friday, July 24 th (10-12pm)

vivians
Télécharger la présentation

Programming Behavioral Experiments in Flash Intro to Web Programming, PhP, and Flash

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming Behavioral Experiments in FlashIntro to Web Programming, PhP, and Flash July 23rd and 24th, 2009– Jeff Galak (CMU)

  2. Agenda for the Week • Session 1: Thursday, July 23rd (10-12pm) • Session 2: Thursday, July 23rd (2-4pm) • Session 3: Friday, July 24th (10-12pm) • Session 4: Friday, July 24th (2-4pm) Topics: • Intro to Web Programming, PhP, and Flash • Building Your First Flash Experiment • Advanced Topics if Flash(Sounds, Videos, and Real Time Ratings) Flash Workshop - Intro to Web Programming, PhP, and Flash

  3. Agenda for Today • Why Flash? • Software requirements. • How to run experiments and collect data. • Components of a Flash experiment. • A brief discussion on PhP. • Your first look at Flash Flash Workshop - Intro to Web Programming, PhP, and Flash

  4. Three Programming Options (maybe 4) Flash Workshop - Intro to Web Programming, PhP, and Flash

  5. Why is Flash best? • Almost entirely cut + paste • Web based • Ubiquitous “Flash Player” • Massive support infrastructure online • Tech-support = Google • For really tough problems: www.experts-exchange.com • I’m pre-writing 99% of all your future programs. Flash Workshop - Intro to Web Programming, PhP, and Flash

  6. What software will you need? • Flash…duh. • Anything after version 7 is fine. • CS4 is ideal (it’s the latest and what I use). • Text editing software for PhP • Notepad works just fine. • I use EditPad Pro because it makes life easier. • FTP Program • Use whatever your school IT dept recommends. • I use FileZilla because it works with almost every FTP standard (including SFTP/SSH) Flash Workshop - Intro to Web Programming, PhP, and Flash

  7. What you need to run a Flash Experiment • Access to a web server with: • PhP 4 or 5 support • Your school should have this • UCLA:?? • If you want to get fancy, you can store the data in a database (MySQL). • Ask me about this off-line Flash Workshop - Intro to Web Programming, PhP, and Flash

  8. The Flash Experiment Infrastructure Ss goes to website URL Calls Flash (SWF) File Flash Sends Data PhP Parser Converts Raw Data into CSV Flash Workshop - Intro to Web Programming, PhP, and Flash

  9. 6 Files For Every Program Don’t get scared…it’s not that complicated 1. Flash .fla file - This is the file you program in. 2. Flash .swf file - This is the file that you upload to the web server. - It is automatically created by Flash Flash Workshop - Intro to Web Programming, PhP, and Flash

  10. 6 Files For Every Program 3. Condition file: .txt - This is just a place holder file that helps with assigning conditions 4. PhP: .php execution file - This file acts like an .html file and runs your flash program (.swf). - It assigns conditions (more later) Flash Workshop - Intro to Web Programming, PhP, and Flash

  11. 6 Files For Every Program 5. PhP: .php debriefing file - This is where you include the debreifing for your experiments (it can be blank…but has to exist). 6. PhP: .php parser - This is a program I wrote that converts Flash data into a .csv data file - You never have to touch this file…just make sure it’s there. Flash Workshop - Intro to Web Programming, PhP, and Flash

  12. Setting up Your Program • Use a simple naming convention. • Here’s mine: • Pick a simple name (workshopfiles) • Use that to name the folder • Every file (except the parser) shares the same name • workshopfiles.fla • workshopfiles.swf • workshopfiles.txt • workshopfiles.php • workshopfilesdebrief.php Flash Workshop - Intro to Web Programming, PhP, and Flash

  13. Let’s Start with PhP • You do not need to know how to understand everything! • I have put comments throughout the entire file. • There are only a few lines of code that really matter. Flash Workshop - Intro to Web Programming, PhP, and Flash

  14. First a Note about Conditions • PhP and Flash don’t understand what a 2x2 is. • But they understand numbers. • So if you have, say, a: 2 (Name: Jeff, Not-Jeff) x 3 (Awesomeness: Low, Medium, High) you rewrite the conditions as: 1 = Jeff + Low 4 = Not-Jeff+ Low 2 = Jeff + Medium 5 = Not-Jeff + Medium 3 = Jeff + High 6 = Not-Jeff + High Flash Workshop - Intro to Web Programming, PhP, and Flash

  15. workshopfiles.php You only care about two lines: $experimentname = "workshopfiles"; - defines the name of the experiment $numofconditions = 6; - defines the number of conditions Ignore the rest Voilà! You learned php. Flash Workshop - Intro to Web Programming, PhP, and Flash

  16. First Look at Flash Flash Workshop - Intro to Web Programming, PhP, and Flash

  17. Timeline Layers Zoom Tools Stage Scenes Library Properties Flash Workshop - Intro to Web Programming, PhP, and Flash

  18. A Note on Layers Always have 4 layers (at least) in this order 1. Actionscript (keep ALL scripts in here) 2. Text (all text related stuff here) 3. Button (all interactive stuff here) 4. Outline (all background stuff here) Flash Workshop - Intro to Web Programming, PhP, and Flash

  19. How to Insert a Frame/Screen This is the most annoying part of flash: 1. Highlight entire column of frames BEFORE the place you want to insert a new one. • Do this by clicking on the top one, then holding down SHIFT and clicking on the bottom one. 2. Hit F5 to insert new frame to the right of the original frame Flash Workshop - Intro to Web Programming, PhP, and Flash

  20. How to Insert a Frame/Screen Cont… If you want to copy and paste an existing frame (you almost always do), again select the ENTIRE column of frames and right click on them…then select “Copy Frames” Flash Workshop - Intro to Web Programming, PhP, and Flash

  21. How to Insert a Frame/Screen Cont… Then again highlight the ENTIRE new column and right click on the new column and select “Paste Frames” Flash Workshop - Intro to Web Programming, PhP, and Flash

  22. A Note on Properties for Text Boxes Instance Name: This is what you name your object. You refer to this name when you want to do things like make it invisible. If selected puts a shadow box behind text. Great for “Input Text” Static Text: never changes Dynamic Text: can be modified via actionscript Input Text: used to get collect user responses (and can be modified via actionscript) If selected makes the text html formatted. VERY useful for manipulating font/style/color. Variable: is the name of a variable that is associated with the content of the text box. This is one of the easier ways to manipulate what is in the box via actionscript. Multiline vs. Single Line: Self explanatory Flash Workshop - Intro to Web Programming, PhP, and Flash

  23. Different Types of Inputs • 7/9 point single item scale • 7/9 point multi-item scale (on same page) • Slider scale • Choices • Text (short and long) • Sum to 100% • 7/9 point multi-item scale on different pages (randomizing order) Flash Workshop - Intro to Web Programming, PhP, and Flash

  24. How to Test Your Program • CTRL + ENTER: Run entire program • CTRL + ALT + ENTER: Run current scene • SHIFT + ENTER: Compile program • trace!! • Sends text to the “output” window • Only used for debugging • VERY useful Flash Workshop - Intro to Web Programming, PhP, and Flash

  25. Your Three Best Friends 1. Copy + Paste • Demo 2. Google • Aka. Flash Community 3. Experts-Exchange.com • Saved me many many times Flash Workshop - Intro to Web Programming, PhP, and Flash

  26. ActionScript Basics - Variables • Variables can be declared, but don’t have to be. Examples: var myVariable = 10; myArray = new Array(); • Avoid reserved names • If a variable “turns blue,” change it. • E.g. “new”, “array”, “data”, “time”, etc… Flash Workshop - Intro to Web Programming, PhP, and Flash

  27. ActionScript Basics – Variables Tricks • How to convert a number stored as a string to a number that you can work with: • Easy: multiply by 1 • If you have: myVariable = “1”; and you want to have a new variable which is equal to myVariable + 5 : newVariable = myVariable * 1 + 5; Flash Workshop - Intro to Web Programming, PhP, and Flash

  28. ActionScript Basics – Data Flow • Some data comes in from the initial php file (workshopfiles.php): • ip, condition, date_start, time_start • All data (including the initial data) must then be stored in a single variable in Flash (datastring) • This is done using the storedata fuction • This function ONLY works when the entire program is run (not just a single scene). Flash Workshop - Intro to Web Programming, PhP, and Flash

  29. ActionScript Basics – Storing Data • Data is stored using the function “storedata” • How to store the value in the variable “name”: • storedata(“name”, name) • Both can be “hard coded” or variables. • MAKE SURE THAT “COLUMN NAMES” ARE UNIQUE!! Name of column in data file Value to store Flash Workshop - Intro to Web Programming, PhP, and Flash

  30. ActionScript Basics – Conditionals if(person==“jeff”) {text = “The person is Jeff”;} else {text = “The person is not Jeff”;} Parentheses around the conditional Brackets around action 2 equal signs for checking “sameness” Does this if the conditional fails Flash Workshop - Intro to Web Programming, PhP, and Flash

  31. Three Ways To Get Pictures Into Your Program • “Hard Code” them • Drag an image file from a folder directly onto the stage. • Note that Flash adds it to the library. • File -> Import to Stage/Library • Use ActionScript • Leave photos in folder (not in flash program) • Advantage: Flexibility • Use ActionScript • Import photos into flash • Advantages: Pre-loaded + All One File Flash Workshop - Intro to Web Programming, PhP, and Flash

  32. Pictures and ActionScript (not imported…option 2) • Use the “empty movie clip” place holder • Name it something: “imageLoader1” • Save an image file in the same folder as the program • In ActionScript, use the following code: loadMovie(“img.jpg", "imageLoader1"); Name of image file. Can be variable or string. Name of place holder. Can be variable or string. Flash Workshop - Intro to Web Programming, PhP, and Flash

  33. Pictures and ActionScript (imported…option 3) • Import photo to library Flash Workshop - Intro to Web Programming, PhP, and Flash

  34. Pictures and ActionScript (imported…option 3) • From the library, change the image properties Flash Workshop - Intro to Web Programming, PhP, and Flash

  35. Pictures and ActionScript (imported…option 3) • Enable “Linkage” • Make sure thatboth the “Exportfor ActionScript”and “Export in Frame 1” boxesare checked • Give the imagea name (idendifier) Flash Workshop - Intro to Web Programming, PhP, and Flash

  36. Pictures and ActionScript (imported…option 3) • Use the following code (it seems like a lot, but it’s pretty straight forward): imagename = “C74.jpg”; import flash.display.BitmapData; var linkageId:String = imagename; var myBitmapData:BitmapData = BitmapData.loadBitmap(linkageId); var imageLoader1:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth()); imageLoader1.attachBitmap(myBitmapData, this.getNextHighestDepth()); imageLoader1._x = 100; imageLoader1._y = 200; The same name as you used in the “Identifier” box The x and y coordinates of the image. Using the TOP-LEFT corner as a reference. Flash Workshop - Intro to Web Programming, PhP, and Flash

  37. Pictures and ActionScript (imported…option 3) • Final notes: • Center the image on the screen, regardless of the image size: imageLoader1._x = (Stage.width-imageLoader1._width)/2; imageLoader1._y = (Stage.height-imageLoader1._height)/2; • Remove an image from the scene: • myBitmapData.dispose(); Flash Workshop - Intro to Web Programming, PhP, and Flash

  38. Reaction Times in Actionscript • gettimer() • Starttime = gettimer() • Put this somewhere in the main part of the frame • Endtime = gettimer() • Put this wherever you exit the frame (e.g. when a button is clicked) • storedate(“reactiontime”,endtime-starttime); • Put this just below the endtime=gettimer() line • Done! Flash Workshop - Intro to Web Programming, PhP, and Flash

  39. Homework 1. Install software 2. Try and upload the existing files to your webserver and see if everything works • Make sure to check permissions (CHMOD 755 (or 777) works well)…ask me for help 3. Take any simple questionnaire you have and try to turn it into a program (at least 2 conditions) • If you can’t get the web version to work just yet, try and get it to work locally (e.g. with CTRL+ENTER) • If you don’t have a questionnaire, I will give you one Flash Workshop - Intro to Web Programming, PhP, and Flash

More Related