Prototyping in Flash CS298-48 HCI Design Clinics April 26, 2010 - - PowerPoint PPT Presentation

▶

May 30, 2023 119 likes •235 views

Rachel Hollowgrass UX Architect rhollow@berkeley.edu Prototyping in Flash CS298-48 HCI Design Clinics April 26, 2010 User Experience Prototyping at Berkeley in Flash UX on campus UX positions are new on campus Working to recognize and

SLIDE 1

Prototyping in Flash

CS298-48 HCI Design Clinics

April 26, 2010

Rachel Hollowgrass UX Architect rhollow@berkeley.edu

SLIDE 2

Prototyping in Flash

User Experience at Berkeley

UX on campus UX positions are new on campus Working to recognize and improve UX on more projects Rachel 13 years at Apple 5 years as Flash developer Fence sitter: technical and functional

SLIDE 3

Prototyping in Flash

Why Use Flash?

Nice Vector format means no jaggies Frame-based animation Video content of many kinds Core Rich interaction beyond HTML 5 Virtually no cross-browser issues Compiled, not interpreted

SLIDE 4

Prototyping in Flash

Why Use Flash Professional?

Other Adobe tools: Vector format means no jaggies Frame-based animation Video content of many kinds Flash Professional and Flex: Rich interaction

SLIDE 5

Prototyping in Flash

Flash Filetypes

fla Flash Professional’s source format swf Compiled output from many Adobe tools including Catalyst, Flex and Flash Professional html, js and Flash plugin Required to run swf in a browser Programming language is called ActionScript

SLIDE 6

Prototyping in Flash

Overview of Software Objects

Objects Can model real-world or virtual items

Example: Person

Properties (“qualities”)

Name Age Mood

Methods (“capabilities)

Eat Sing

SLIDE 7

Prototyping in Flash

Objects: Classes and Instances

Class A pattern or concept Example: Homo Sapiens Instance An actual person Example: Barack Obama Instance creation Class constructor method or Flash stage item with instance name

SLIDE 8

Prototyping in Flash

ShowHide.as ⬅code file >> class ShowHide ⬅ class definition >> function ShowHide ⬅ constructor

Connections: fla-to-code

File organization

Containing folder > code ⬅folder for code >> ShowHide.as ⬅code file > showHide.fla ⬅source file

SLIDE 9

Prototyping in Flash

Connections: stage-to-instances

On the Flash Stage

An item on the Flash stage can only be addressed in ActioScript if it is given an instance name that is unique for that project.

SLIDE 10

Prototyping in Flash

The Portal Project

Student Portal New project on campus Now hiring student developers and designers http://campuslife.berkeley.edu/myberkeleyproject http://campuslife.berkeley.edu/myBerkeleyproject_jobs