Download Intro to Web Programming, PhP, and Flash

Programming Behavioral Experiments in Flash
Intro to Web Programming, PhP, and Flash
July 23rd and 24th, 2009– Jeff Galak (CMU)
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
2
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
3
Three Programming Options (maybe 4)
Flash Workshop - Intro to Web Programming, PhP, and Flash
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
13
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
2 = Jeff + Medium
3 = Jeff + High
4 = Not-Jeff+ Low
5 = Not-Jeff + Medium
6 = Not-Jeff + High
Flash Workshop - Intro to Web Programming, PhP, and Flash
14
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
15
First Look at Flash
Flash Workshop - Intro to Web Programming, PhP, and Flash
16
Timeline
Layers
Zoom
Tools
Stage
Scenes
Library
Properties
Flash Workshop - Intro to Web Programming, PhP, and Flash
17
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
18
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
19
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
20
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
21
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.
Multiline vs.
Single Line: Self
explanatory
Flash Workshop - Intro to Web Programming, PhP, and Flash
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.
22
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
23
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
24
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
25
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
26
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
27
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
28
ActionScript Basics – Storing Data
• Data is stored using the function
“storedata”
– How to store the value in the variable “name”:
– storedata(“name”, name)
Name of column
in data file
Value to store
– Both can be “hard coded” or variables.
– MAKE SURE THAT “COLUMN NAMES” ARE
UNIQUE!!
Flash Workshop - Intro to Web Programming, PhP, and Flash
29
ActionScript Basics – Conditionals
2 equal signs for
checking “sameness”
Parentheses around
the conditional
Brackets around
action
if(person==“jeff”) {text = “The person is Jeff”;}
else {text = “The person is not Jeff”;}
Does this if the
conditional fails
Flash Workshop - Intro to Web Programming, PhP, and Flash
30
Three Ways To Get Pictures Into Your
Program
1. “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
2. Use ActionScript
–
–
Leave photos in folder (not in flash program)
Advantage: Flexibility
3. Use ActionScript
–
–
Import photos into flash
Advantages: Pre-loaded + All One File
Flash Workshop - Intro to Web Programming, PhP, and Flash
31
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.
Flash Workshop - Intro to Web Programming, PhP, and Flash
Name of place holder.
Can be variable or string.
32
Pictures and ActionScript
(imported…option 3)
• Import photo to library
Flash Workshop - Intro to Web Programming, PhP, and Flash
33
Pictures and ActionScript
(imported…option 3)
• From the library, change the image
properties
Flash Workshop - Intro to Web Programming, PhP, and Flash
34
Pictures and ActionScript
(imported…option 3)
• Enable “Linkage”
• Make sure that
both the “Export
for ActionScript”
and “Export in
Frame 1” boxes
are checked
• Give the image
a name (idendifier)
Flash Workshop - Intro to Web Programming, PhP, and Flash
35
Pictures and ActionScript
(imported…option 3)
• Use the following code (it seems like a lot, but it’s pretty
The same name as you used
straight forward):
in the “Identifier” box
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;
The x and y coordinates of
imageLoader1._y = 200;
the image. Using the TOPLEFT corner as a reference.
Flash Workshop - Intro to Web Programming, PhP, and Flash
36
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
37
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
38
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
39