Behavioral Research with Flash Workshop at UCLA– July 2009

(Updated 7/27/2009)

Welcome to the information page for the Programming Experiment in Flash Workshop. Here you will find all the required resources.

Workshop Schedule:

  • 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)
  • Location:

Required/Recommended Programs

  1. Adobe Flash CS4 – http://www.adobe.com/products/flash/
    • This is the primary program used to create experiments. You can download a free trial at the link above or you can see if your IT dept has a license for it.
    • Although version CS4 is not required, it is the one I will be using during the workshop. If you have an older version, you will be fine.
    • Although I am using CS4, all Actionscript is version 2.0 (not 3.0). If you don’t know what this means, don’t worry about it.
  2. EditPad Pro – http://www.editpadpro.com/
    • This is a very versatile and free text editing software we will use for editing PhP documents.
    • By no means is this particular program required, but I text editor slightly more advanced than Notepad will make your life easier.
  3. Filezilla (Client) – http://filezilla-project.org/
    • This is a free FTP program that we will use to upload all of our files to a web server.
    • Like EditPad Pro, you do not need this particular program, but it is quite good and the one I will use.

Introductory Resources

  1. Flash Introduction (University of Kansas ) – http://www.techdocs.ku.edu/docs/flash_mx2004_introduction.pdf
    • This is a very nice introduction to the basics of Flash done by the Academic Computing Services of the University of Kansas.
    • This document uses Flash MX 2004, but the basics are all the same as CS4.
    • Feel free to ignore everything related to animation (e.g. Tweening) as it is not relevant for this workshop.
  2. Total Training Videos – http://www.totaltraining.com/prod/adobe/flashpro8.asp
    • Total Training is a teaching product that has instructional videos for a lot of computer related products.
    • I don’t suggest that you go out and buy the Flash videos, but they do provide quite a few of the introductory ones for free. Just go to the above link and click on “Free Tutorials.”
    • Follow the instructions and you’ll be taken to the videos. I suggest going through as much as you can in the courses “Flash Professional 8″ and “Flash Professional 8 – Actionscript,” You can check out the Flash CS3 tutorials too, but I suspect they will be redundant.

Important Files

  1. Workshop Files 1- http://www.jeffgalak.com/flashworkshop/ucla/workshopfiles/workshopfiles.zip
    • The above is a zip file containing 9 files that you’ll need. They are:
      1. workshopfiles.fla: This is the file you open in Flash to edit. It is formatted to work ONLY with Flash CS3 (or newer) and is what I will be using.
      2. workshopfiles_FLASH8.fla: This is the same file as above but compatible with Flash 8 and newer. I’m guessing that many of you will use this version. It has the exact same structure and code, so don’t worry about the compatibility issues.
      3. workshopfiles.swf: This is the compiled version of the program that you would upload to your web server.
      4. workshopfiles.txt: This is a text file that you can ignore. It simply keeps track of the conditions (more on this in the workshop).
      5. workshopfiles.php: This is the php script that opens the program on the server and assigns conditions.
      6. parseflash.php: This is the code that handles all the data processing.
      7. workshopfilesdebrief.php: This is the file where you include your debriefing. Edit it with EditPad Pro.
      8. jeff.jpg: An image used in the program
      9. leff.jpg: Another image.
    • You can see what the final version looks like here: http://www.jeffgalak.com/flashworkshop/ucla/workshopfiles/workshopfiles.php
  2. Workshop Files 2 – http://www.jeffgalak.com/flashworkshop/ucla/workshopfiles2/workshopfiles2.zip
    • The above is a zip file containing 9 files that you’ll need. They are:
      1. workshopfiles2.fla: This is the file you open in Flash to edit. It is formatted to work ONLY with Flash CS3 (or newer) and is what I will be using.
      2. workshopfiles2_FLASH8.fla: This is the same file as above but compatible with Flash 8 and newer. I’m guessing that many of you will use this version. It has the exact same structure and code, so don’t worry about the compatibility issues.
      3. workshopfiles2.swf: This is the compiled version of the program that you would upload to your web server.
      4. workshopfiles2.txt: This is a text file that you can ignore. It simply keeps track of the conditions (more on this in the workshop).
      5. workshopfiles2.php: This is the php script that opens the program on the server and assigns conditions.
      6. parseflash.php: This is the code that handles all the data processing.
      7. workshopfiles2debrief.php: This is the file where you include your debriefing. Edit it with EditPad Pro.
      8. forthebirds.flv: Video file for the program.
      9. lifted.flv: Another video file for the program.
  3. Workshop Files 3 – http://www.jeffgalak.com/flashworkshop/ucla/workshopfiles3/workshopfiles3.zip
      • The above is a zip file containing 5 files that you’ll need. They are:
        1. workshopfiles3.fla: This is the file you open in Flash to edit. It is formatted to work ONLY with Flash CS3 (or newer) and is what I will be using.
        2. workshopfiles3.swf: This is the compiled version of the program that you would upload to your web server.
        3. workshopfiles3.php: This is the php script that opens the program on the server and assigns conditions.
        4. parseflash.php: This is the code that handles all the data processing.
        5. workshopfiles3debrief.php: This is the file where you include your debriefing. Edit it with EditPad Pro.
      • You can see what the final version looks like here: http://www.jeffgalak.com/flashworkshop/ucla/workshopfiles2/workshopfiles2.php
  4. Powerpoint for Session 1 -http://www.jeffgalak.com/flashworkshop/ucla/ppt/Flash Workshop – Session 1 v1.ppt
  5. Powerpoint for Session 2 -http://www.jeffgalak.com/flashworkshop/ucla/ppt/Flash Workshop – Session 2 v1.ppt
  6. Powerpoint for Session 3 -http://www.jeffgalak.com/flashworkshop/ucla/ppt/Flash Workshop – Session 3 v1.ppt
  7. Experiment Check List -http://www.jeffgalak.com/flashworkshop/ucla/Experiment Check List.doc

Post workshop updates:

1. MP3 Experiment Files: http://jeffgalak.com/flashworkshop/ucla/mp3/mp3.zip

  • The above zip file contains all the files we used/created during the second session of the workshop (MP3 Study). I have updated it to use the correct image files and cleaned up some of the layout. The files are:
    1. mp3.fla: This is the file you open in Flash to edit. It is formatted to work ONLY with Flash CS3 (or newer) and is what I will be using.
    2. mp3.swf: This is the compiled version of the program that you would upload to your web server.
    3. mp3.txt: This is a text file that you can ignore. It simply keeps track of the conditions (more on this in the workshop).
    4. mp3.php: This is the php script that opens the program on the server and assigns conditions.
    5. parseflash.php: This is the code that handles all the data processing.
    6. workshopfilesdebrief.php: This is the file where you include your debriefing. Edit it with EditPad Pro.
    7. leff.jpg: An image used in the program
    8. jeff.jpg: Another image.
    9. MP3 Study Template.doc: The template for the study.
  • You can test the program at: http://jeffgalak.com/flashworkshop/ucla/mp3/mp3.php

2. As promised, here are the most frequently used HTML tags to use when formatting text in a dynamic text box. Remember, you MUST a) check the “render as HTML” box for the dynamic text box and b) send the data via a variable (as opposed to via the ‘text’ property). So here’s an example of correct formatting: outputtext = “<b>This is a test</b>”;

  • Bold: <b></b> (use: <b>This is a test</b>   Results in: This is a test)
  • Underline: <u></u> (use: <u>This is a test</u>   Results in: This is a test)
  • Italics: <i></i> (use: <i>This is a test</i>   Results in: This is a test)
  • Colors: <font color=’#FF0000′></font> (use: <font color=’#FF0000′>This is a test</font>   Results in: This is a test)

3. The .fla for the updated version of flashworkshop2 that includes the discontinuous measure of enjoyment scale. http://jeffgalak.com/flashworkshop/ucla/workshopfiles2/workshopfiles2b.fla

4. I created a very simple roll over box that disappears when the mouse hovers over it and appears when the mouse leaves. It was a bit tricky to do this, so let me explain what I did.

  1. Created a text box that contains some information.
  2. Placed a box (that was converted into an object called “box”) in the layer above the text.
  3. Within the “box” object, I created two frames. The first contains a blue box and the second contains the same box but with the color Alpha set to zero (this can be set in the color selector). What this means is that the box in frame 2 exists, but it is transparent.
  4. I then added this code to the main actionscript (in the main timeline, not the one for the box):
    box.OnRollOver = function(){
    box.gotoAndStop(2);
    }
    box.onRollOut = function (){
    box.gotoAndStop(1);
    }
  5. What this does is say that when the mouse is over the box, go to frame 2 of the box timeline (which contains an invisible box). Then when the mouse leaves, it goes to frame 1 (which contains the blue box).
  6. You can download a copy of the working program here:
    http://jeffgalak.com/flashworkshop/ucla/workshopfiles3/workshopfiles4.fla

If you have any questions, please feel free to contact me at jgalak@cmu.edu