programming behavioral experiments in flash session 1 of 3 intro to web programming php and flash n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
April 8 th – Jeff Galak (CMU) PowerPoint Presentation
Download Presentation
April 8 th – Jeff Galak (CMU)

Loading in 2 Seconds...

play fullscreen
1 / 32

April 8 th – Jeff Galak (CMU) - PowerPoint PPT Presentation


  • 91 Views
  • Uploaded on

Programming Behavioral Experiments in Flash Session 1 of 3 Intro to Web Programming, PhP, and Flash. April 8 th – Jeff Galak (CMU). Agenda for the Week. Session 1: Thursday, April 8 th (10-12pm): Intro to Web Programming, PhP, and Flash Session 2: Thursday, April 8 th (2-4pm):

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'April 8 th – Jeff Galak (CMU)' - yelena


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
programming behavioral experiments in flash session 1 of 3 intro to web programming php and flash

Programming Behavioral Experiments in FlashSession 1 of 3Intro to Web Programming, PhP, and Flash

April 8th – Jeff Galak (CMU)

agenda for the week
Agenda for the Week
  • Session 1: Thursday, April 8th (10-12pm):

Intro to Web Programming, PhP, and Flash

  • Session 2: Thursday, April 8th (2-4pm):

Building Your First Flash Experiment

  • Session 3: Friday, April 9th (10-12pm):

Advanced Topics if Flash (Sounds, Videos, and Real Time Ratings)

Session 1 - 04/08/2010

agenda for today
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

Session 1 - 04/08/2010

why is flash best
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.

Session 1 - 04/08/2010

what software will you need
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)

Session 1 - 04/08/2010

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

Session 1 - 04/08/2010

the flash experiment infrastructure
The Flash Experiment Infrastructure

Ss goes to website

URL

Calls Flash

(SWF) File

Flash Sends

Data

PhP Parser

Converts Raw

Data into CSV

Session 1 - 04/08/2010

6 files for every program
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

Session 1 - 04/08/2010

6 files for every program1
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)

Session 1 - 04/08/2010

6 files for every program2
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.

Session 1 - 04/08/2010

setting up your program
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

Session 1 - 04/08/2010

let s start with php
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.

Session 1 - 04/08/2010

first a note about conditions
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

Session 1 - 04/08/2010

workshopfiles php
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.

Session 1 - 04/08/2010

first look at flash
First Look at Flash

Session 1 - 04/08/2010

slide17

Timeline

Zoom

Layers

Library

Tools

Stage

Parameters

Session 1 - 04/08/2010

a note on layers
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)

Session 1 - 04/08/2010

how to insert a frame screen
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

Session 1 - 04/08/2010

how to insert a frame screen cont
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”

Session 1 - 04/08/2010

how to insert a frame screen cont1
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”

Session 1 - 04/08/2010

a note on parameters for text boxes
A Note on Parameters for Text Boxes

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.

If selected puts a shadow box behind text. Great for “Input Text”

Instance Name: This is what you name your object. You refer to this name when you want to do things like make it invisible.

Multiline vs. Single Line: Self explanatory

Var: 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.

Session 1 - 04/08/2010

different types of inputs
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)

Session 1 - 04/08/2010

how to test your program
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

Session 1 - 04/08/2010

your three best friends
Your Three Best Friends

1. Copy + Paste

  • Demo

2. Google

  • Aka. Flash Community

3. Experts-Exchange.com

  • Saved me many many times

Session 1 - 04/08/2010

actionscript basics variables
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…

Session 1 - 04/08/2010

actionscript basics variables tricks
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;

Session 1 - 04/08/2010

actionscript basics data flow
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).

Session 1 - 04/08/2010

actionscript basics storing data
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

Session 1 - 04/08/2010

actionscript basics conditionals
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

Session 1 - 04/08/2010

homework
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

Session 1 - 04/08/2010

next session
Next Session

Thursday, April 8th (2-4pm):

Building Your First Flash Experiment

  • Create a complete experiment
    • Create php file
    • Create flash program
    • Test
    • Upload everything

Session 1 - 04/08/2010