October 24, 2007

Continuous Integration with Flex, FlexUnit, and Ant

I've posted a version of my slides (0.5MB PDF) that were used for my Flashforward talk and MAX talk under the titles "Automation of Flex Building and Unit Testing" and "Continuous Integration with Flex, FlexUnit, and Ant" respectively.

The demonstration files used in the talk are mostly equivalent to the tutorial and template directories that are included in Antennae.

The resources mentioned in the talk are listed below:

Tags: ant flashforward2007boston flex flexunit max2007chicago

September 26, 2007

Flashfoward Boston: Designers vs. Developers: How To Avoid Fights on the Playground

Rough Draft Notes

Marc Leuchner, Almighty
Matt Wright, ROKKAN

Everyone is working together to make projects happen. Most common sense but people aren't really calling it out.

Industry overview: Best area related to Internet. Unique people, extremely creative, lots of technologies continually expanding. FWA tracking latest and greatest. newstoday.com, Communication Arts Magazine.

Subcultures: code fiends, design junkies, framework freaks, application addicts, game gurus, usability nuts.

In larger companies: role strictly defined, objective, performance, but hard to communicate. While in a small company: roles loosely defined, absorb responsibilities, easier communication.

Can people work together? Yes if we talk and compromise.

Look at current workflow. If it is working, maybe you don't need to change anything. Some areas could be improved, need to really pinpoint weaknesses and admit your faults. Focus on opportunities to collaborate.

Education is key to working together. Need to educate each other about what you do and why it matters.

Some people don't want to change (don't force it), start with something fun. You will probably fail a few times but learn from your mistakes.

Designers: should ask for help with programming tasks to get into it more.
Developers need help with: UI design, typography, color theory, photoshop.

Brainstorming: invite everyone, technology can drive ideas, PM as moderators, open mind (no egos).

Creative Development: narrow ideas, define technologies. Need to be as clear as possible and justify. Talk about why a technology is good/bad, don't throw around buzzwords, stay open minded. Last time to argue.

Information Architecture: Don't work in a vacuum, avoid nonobjective views, run ideas by developers, keep yourself in check.

Art Direction & Design: Need prototypes, solicit developer feedback, might need to sell your idea, may require longer design.

Production and Development: After hand-off check in frequently, nit-picking is okay, way to get back to idea since translation to code may have lost something. Pixel perfect isn't always possible. Motion comps are helpful and remember that some compromise maybe needed.

Testing & QA: Not just for developers, learning experience, help prevent future issues

Project Review: discuss positives and what went wrong.

Workflow: Layer comps, motion samples, functional specs, Flex skins, separate style information, consistent folder structure.

Ted Patrick has some good articles on skinning Flex components.

Breaking communication barrier: active early communication helps build trust, respect and learn about everyone's role, don't be afraid to ask questions. Keep an open mind. Don't build barriers creates clicks and makes it hard to cross the bridge.

Middle Man: Hard to find but good for bridging the gap.

Deadlines = stress = fights. It is unavoidable but strive to work together.

nobien.net

Tags: flash flashforward2007boston flex

September 26, 2007

Flashforward Boston: Imagination and Technology

Rough Draft Notes

Craig Swann, CRASH!MEDIA
Chief imagination officer

interactive toy maker

not about flash or flex or as3
want to talk about ideas
R&R=R&D blurring line of work and play
happiness is fuel of creativity
work less play more
creative cross-pollination
all about changing the way you look at things, makes the things you look at change

everything is an API, HAPI, hates the word user

listen, watch, touch, sense
ambient awareness, listen 360 degrees (built-in microphone)

visualization of microphone input, how it plays into environment design. Line in audio and.
kaleidescope video example, stop video example triggered on sound

speech recognition

watch (like a computer with a set of eyes)
motion threshold (detecting presence)

more about the idea dn how to interact with the computer.
userface (computer vision)

video difference visualization to show motion

motion mapping example, going beyond simple interactivity.

gesture based interface.

color tracking.

how to simulate mutli-touch
multi color tracking color mixing interface

time delay video across a grid
line based video delay

how to control time through the interface
video displacement of time, linear record and playback versus real-time

physical realm
IPAC (USB)
wind chimes are constantly touching tie to sound samples, virtual wind chimes
lock that can be wired up (physical control)
rings on fingers connected to wires, contact with thumb, 8 connection gives a scale
conductive paint and pencil to create interface

painting with light: litegraf
ipac on painters palette plugged into computer

many forms of control, make controller, arduino
light sensor and cover it, phidgetRFID
radio control car controller to remotely control flash

SMS sudden motion sensors
using accelerometers for physical version of breakout

monome
OSC (way to get data into flash)

midi controller

wii interface to flash and ability to play with it

try something different today

Tags: flash flashforward2007boston video

September 26, 2007

Flashforward Boston: Sound Visualization Using Flash

Rough Draft Notes

Jared Ficklin, frog design

Want to flatten learning curve, inspire with examples, remove barriers to entry, expose enabling technologies.

Sounds visualization: it is fun, enhance experience, increase usability

What is sound visualization. Standard visualization partial effects, are cool but you can do so much more. vectors and drawing, time line, interaction, sound engine, cell animation, rich media.

Sound is vibration. Author of flame sound visualization (Ruben Tube). Net result is what we consider digital music.

Sound terminology: wave length, period, amplitude, pitch, tone.

To visual: need sound and data. Sounds is easy, data has been hard. imported data: picture of the future. Marmalade FlashAmp.

frogDB WMP sound visual

native data: microphone object, SoundChannel.leftPeak & SoundChannel.rightPeak, SoundMixer.computerSpectrum(). In client and can be called dynamically.

active_mic.activityLevel (version 6 and above) between 1- 100.
SoundChannel: version 9, value between 0-1. current amplitude.
SoundMixer: version 9. 512 value byte array. waveform or FFT frequency and sampling rate. -1 to 1 waveform or 0 to 2 for frequency. 256 left next 256 right.

Be concerned about security. Security.allowDomain("*");

With the frequency output, there will be holes. bass 50-80Hz. vocals 200Hz-1000Khz. Snare. 10000 KHz to 30000KHz.

Need to think about frequency to make good sound visualization.
Multipliers, segmenting, and averaging to make the data useful.
50Hz per array value

Data stacked to the low end since that is what we hear most. Need to average samples on the high end and stretch out the lower end data to see real data.

Tactics:
direct interpolation: manipulate property, frame manipulation,
threshold spawning: values measured against a threshold
algorithmic spawning: funnest one: values processed and measured against rules
interaction: have user setup basis for visualization

self assembling music video

Tags: flash flashforward2007boston sound

September 26, 2007

Flashforward Boston Talk Time Change: Automation of Flex Building and Unit Testing

Due to a scheduling conflict the time of my talk has been moved up a slot. The new details: Grand Ballroom, Salon E: Friday, September 21, 2007 1:30 PM-2:45 PM.

Tags: ant antennae flashforward2007boston flex flexunit

September 26, 2007

Flashforward Boston: The Aesthetics of Computation

Rough Draft Notes

John Maeda

MIT Media Lab
Did a lot of old school work on a Mac

Focus on local goods. Focus on local crafts. How to marry creative folks with business outlets.

Wasn't allowed to do art. Paul Rand. ABC, Limited, Next, logos.

Media Lab. Technology lab with good branding. Muriel Cooper. Pioneer of digital graphical design space. Art director of MIT press for 30 years. Lead visual language workshop.

If you just make stuff good things will happen. Phantom relax with physical material.

Classics are waiting. Do something young. Computer is a different kind of system, it doesn't get tired.

Gone from visual range but still there on the computer. Go into infinity.

Do these things, what is it for?

program inks of page but leave it open for interaction

Inverse paint. Fixed brush, program moves.
Radial paint.
Time paint. Draw in time. Sculptural view

Reactive tools. All available on the web. Color type writer.

Tap Type Write

2001 Media Lab didn't want to run media library. Retired in 2002.

4 grad students

openstudio.media.mit.edu
interactive art studio, networked world, and how to be profitable. Creativity, collaboration, and commercialism.

opencode.media.mit.edu
Jello based processing language. All development on the web site.

E15
Take all content on the web and display it in a non browser environment. Change, modify, and organize how a user wants instead of viewing data as presented.

python code to generate 2d code onto 2d canvas. leverage ability to change things on the fly.

richer perception of time

3d browser history to view where you've been
load up a bunch of pages at once

e15.media.mit.edu (new project)

relation databases
social networking relationships
making the system easy to use

aggregating data to generate complete picture of someone online.

Tags: design flashforward2007boston visualization

September 26, 2007

Flashforward Boston: What's this button do?

Rough Draft Notes
robert hoekman, jr.

Need to get user up to speed, help to get through your application.

What's this button do?
I'm feeling lucky?

suffer from a lack of explanation, or lack of context, don't install confidence

Talking about instructive text:
Using senduit as an example. (upload file and get temporary URL for that file)
Need to communicate: purpose, benefit, usage
need to keep it short

using default value in field to prompt user
show default zip code value (5, 9, 5+4)

Squidoo (create pages to market things)
inline help balloons for instructive text

command line (something that triggers action) "call to action" verb-noun pair
people don't like object based actions "page organization"

people have gotten used to dragging, almost expect it on the web. People that have been on the web a long time might not expect drag and drop may not work. Be explicit.

once over drag, cursor changes. when dragging move other modules around to show them the change.

"I'm done editing" sense of closure

Old Version of WordPress.com page doesn't have clear way to sign-up. Links hidden in text. Redesigned to big green button (contrasting color, different background) "sign up now". Jumped up 10-12%. Instructive piece more obvious.

RSS. Most web users still don't know what RSS is. Why would a user click a button that says RSS if I have no idea what this means. "Subscribe to this blog" is a better way to approach it.

Feedburner has a good approach. Creates a stylized version of your feed. "Syndication" and "content" are stuffy words. XML is a scary word.

Addthis.com has a different approach. Easy one click subscription, but doesn't help inform a user if they don't know what RSS is.

commoncraft.com/ Screencasts are a great way to explain a concept or a new idea.

BaseCamp.com: Disposable constructive element. New page has text that goes away when user performs the action.

GoogleReader for a new user has a screencast that talks about what it does with screen shots. Put a personal face on the experience.

Software for making screencasts.
Windows: Jing, TechSmith Camtasia Studio.
Mac: Jing, SnapzProX.

Flickr and most popular tag page. Size reflects popularity. No one gets tag clouds. No real life methaphor. Big doesn't mean more popular.

LibraryThing.com "What are tags" link. Very scary tag cloud page. Information overload.

NYTimes.com has explanation of tag cloud above cloud. Still a horrible interface...

miva.org
miskeeto.com (new design firm)
updownrepeat.com (The art and science of web forms)

Q: How to capture the content scrolled off the web.
Snagit (handle captures all scrolling of the web page)

Tags: design flashforward2007boston flex

September 26, 2007

Flashforward Boston: Designing with Sound

Rough draft of notes

Dave Schroeder, pilotvibe.

Sound is a powerful communicator
Sometimes more powerful than visual and can be misused

Design is about seeing what isn't there as much about as what is there. Design is inventive and reductive. Sound design can be dangerous.

Sound design: Voice over, sound effects, navigation sounds, ambiance, music.
Visual story-telling: on screen, off screen, non-digetic (out of story space).
Sound relationship: sympathetic, contrasting, abstract/emotive. Bad day movie clip shown with 3 different sound tracks. showing each relationship.

How plan audio in interactive. Goal of audio, time & budget, mission statement + asset list, reference points hard to talk about sound (almost like a foreign language).

  1. music
  2. voice over
  3. ambience
  4. navSounds
  5. sound effects

Working with sound.
Music: focus on mood versus genre, creates singular/linear space, it can convey abstract things. Tempo and complexity. May focus your attention.

Voice overs: pro talent, one file = one thought, location recording (consistent background noise), inflection. Record some quick / fast and make sure it works before doing it all.

Ambiance: complete the picture, hard to find the perfect loop (build with layers instead), only need essential sonic cues. Non routine sounds can't loop. Speaking, accidents, etc.

Navigation Sounds: help user navigate and explore, focus attention on visuals, meaning derived from relationship with sound, reinforces communication goal.

Same sonic space (wet & dry sound). Reverb (delay) does a lot, helps to locate and place objects. EQ helps with that. Easier to make a dry sound wet.

Spatial sound: x: balance/pan, rising less low end, moving away less high end

Audio editing: Likes Pro Tools, important to input/export .wav, .aiff, .mp3, record to wav, high quality master files, import movies to work against

Tracks: 4 tracks of playback, separate tracks fof VOs/effects, layer sounds to ceate sounds, mock up a sound scheme.

MP3: compression is hard. Use EQ to shave off the top freqs. length is important, trim tight, respect tails. 80kpbs or higher is great, but be consistent.

Pro Tools example. Cut in middle drag end to beginning and overlap in middle with cross fade. Easier way to make a good loop.

Voice overs: Find highest peak across all files and make it louder. Normalize across all takes.

Tags: flash flashforward2007boston sound

September 26, 2007

Flashforward Boston: Beyond the Knowledge; The Art of Playing

Rough Draft Notes

Erik Natzke, Natzke Design

play.natzke.com

comes to interactive design from a design background.

looking to animate things in an organic manner
Flash is a digital sketch book
freeze and analyze life.
everything in advertising needs to have reflection

system based on percentages so that 15 second always takes 15 seconds
need to account for resizing
inventing new ways to be lazy

how do you make things file size sensitive.
build tools for yourself

curves and way points are a big thing

phenomenal flash generated video for an art installation.

Tags: flash flashforward2007boston

September 26, 2007

Flashforward Boston: BitmapData and 3D Image Manipulation in AS3

Rough Draft Notes

Paul Ortchanian, Goodby Silverstein & Partners

Effects don't all need to be done with OOP

Don't always view in terms of x and y. view in circle instead 0, 180, 360 degrees.
think in circles, best way to think of programming in 3D

cerate illusion of depth by scaling elements.
scale=fl/(fl+_z);
_x=x*scale;
_y=y*scale;
_xscale=_yscale=scale*100;

principal rotations

pitch, roll, yaw
find formulas on wikipedia

need to eliminate objects in background

bezier formula

model tween as line that point follows x, y determine speed at each point

Flash 8 added Flash Image API.
bitmap color: argb (alpha, red, green, blue)
can apply masks

DisplacementMapFilter
ColorTransformMatrix

3d radian manipulation
3d skew

Transform matrix is very complex but very powerful.

Tons of examples with code at: reflektions.com

Tags: 3d flash flashforward2007boston

September 26, 2007

Flashforward Boston: Keynote

Rough draft of notes

Flickr tag with flashforward


Kevin Lynch from Adobe

Pushing Flash forward with AS3. Complimentary copies of Essential ActionScript 3.0.

With FP9 and AS3: E4X, regular expressions, strong and lose typing.

Inside Tamarin is the Virtual Machine within FP9. Core of VM has been opened sourced to Mozilla. 10 times speedup in FP9. Also have this is as the scripting language for the web. FireFox and Flash Player 9. ECMAScript standard. Includes Just-in-Time compiler.

Showing RSS XML data and E4X possibilities:

feed.channel.title.text()
feed..title.text()
feed..item[1].text()
feed..item.(@id =="82").title.text()

Power of regular expression.

Showing comparison of AS3 and JavaScript 1.7. In general 10 times faster.

Flash Player adoption. Fp7 70% in 1 year, FP 8, almost 90% in one year, FP 9 90% in one year.

Picnik. Online photo editing. Zoom, rotate, alignment, color editing (saturation, temperature), sharpness, real-time editing.


Joshua Hirsch from Big Shapeship (Digital Creative Agency) talking about HBO.

8 apartments single building, like no walls. Projected onto side of building. Watch on-demand on digital cable. Also put the web.

HBO Voyeur. Using papervision for 3d effects. Full video.


Kevin: Adobe is focusing on digital technologies. Video workflow from creation to distribution. Adobe media player to view video on desktop.

H.264, multi-core cpu, full screen hardware scaling, bitmap downscaling, secured delivery of streaming video. IPv6, ISO video standard video camera, personal media players, set-top boxes, tvs. FP9 being updated to include H.264 code named Moviestar.

HD Video Demo. Releasing soon, new component for CS3 to use H.264 right in Flash. CSI HD video example. 70% of web video is in Flash.

Papervision example with multi-core speedup.


Adrian Ludwig talking about Flex. Already two versions of Flex. Currently working on Moxie. Language intelligence, profiler, visualization, workflow.

Flex is moving to be open source. bugs.adobe.com. Profiler demonstration. Memory usage. Object creations. Snapshot of application. Application is running faster than he expected (had to muck code). Zoom in on method that is taking a long time. Who was calling.

Showing refactoring example. Method rename. Workflow speedup.Sample application is using charting controls. Advanced data grid, has per column formatting.

Flex perceived as too big. Flex framework cache. Download framework code only once.


Kevin back talking about AIR. Flash, PDF, and HTML. AIR platform overview.

AIR sample applications. AIR Samples.
Showing badge install process. One click to install AIR and your application. PixelPerfect example.

artMusheen. Paint with shapes example. Native chrome.

digimix, mixing audio.

Finetune. Streaming music on your desktop.

Buzzword. Word processor. Edit locally or shared thorugh a cloud. Lists, tables, pictures, graphic editing. No drag'n'drop support out of the box yet.

Flickair searches Flickr for photos, nice chromeless application.

adobe.com/go/air

CS3 extension for Flash to just package application as AIR, should just work.

Tags: air flash flashforward2007boston flex

September 26, 2007

Flashforward Boston: Stylizing Flex Applications

Rough Draft of Notes

Joey Lott The Morphic Group

Main application to be styled is just using standard components. VBox, List,

Inline attribute on List: backgroundColor
This isn't preferred since you have no centralized location of what your style information is.

Adding . Type selector and Class selector.

<mx:Style>
List {
    backgroundColor: #0000FF;
}
</mx:Style>

Applies to all components. Another List in the program would also get it. To have more control you can use a style selector. Need to set it via styleName on a target component.

.exampleStyleSelector {
    backgroundColor: #0000FF;
}

Why do this. Can reuse selector on any other component while keeping the style information centralized. Camel case for style names or hyphenation. Inline styles must use camel case but CSS information can use either.

Moving selector into external styles.css file via:

<mx:Style source="styles.css"/>

Application {
    background-color: #000000;
}

Precedence of style application: Type selector applied first, then class selector, lastly inline style attribute.

What to style items in the List. Going to use an item renderer. Like Cell renderer in Flash. Using another MXML component to show the list item. Gets passed a data property which contains the list item.

<mx:HBox>
<mx:Image source="{data.image}"/>
<mx:Text text="{data.title}"/>
</mx:HBox>

Add itemRenderer="com.example.DataRenderer" to List we want to render items of. Always need to use full class name can't use class name only even if imported.

Style scrollbars with a type selector. It is using custom images for arrows.

ScrollBar {
    up-arrow-up-skin: Embed('images/scrollArrowUp.png');
}

Embedding fonts can use url or local directive can be used to reference font file.

@font-face {
    src: url("Verdana.ttf");
    font-family: Morphic;
}

Styling some of the other components. Some type selectors can reference other class selector names.

TabNavigator {
    tab-style-name: tabButtons
}
.tabButtons {}

VBox with nested image. Using scale 9 to control embedded image.

.framedImage {
    background-image: Embed('image.png', scaleGridTop=30, scaleGridBottom=59, scaleGridLeft=30, scaleGridRight=59);
}

Programmatic skinning. Consider a general style that you want to have many variations of. Graphic assets would require unique file for each variation and increase file size. A programmatic skin let's you do it in code instead.

public class ButtonSkin extends ProgrammaticSkin {
    // key method to override
    override protected function updateDisplayList(...);
    if (getStyle("backgroundColor") != null) {
        //pikcup value
    }
    // name property of programmatic skin
    if (name == "upSkin") {
        //skin specific style
    }
}

// in css
Button {
    upSkin: ClassReference("com.example.ButtonSkin");
}

Customizing the preloader. Make sure you only use ActionScript stuff, nothing from Flex framework since they won't be available yet.

public class CustomDownloadProgress extends DownloadProgressBar {
    override public function set preloader(value:Sprite):void {
        // progress and init_complete events
    }
    // dispatch complete event when done and application should start
}

<mx:Application preloader="com.example.CustomDownloadProgress"/>

scale9.com for premade styles

Tags: css flashforward2007boston flex styling

September 26, 2007

Flashforward Boston: SWX

Rough draft of notes

Aral Balkan is talking about SWX.

Some post lunch jumping to capture a room of a full of people in the air yelling SWX.

Aral likes to consult, speak, and teach about user experience design, development processes, and software architecture. Works primarily with Flash, Flex, and a focus on open source. Founded osflash.org. Currently working on SWX.

What is SWX: new and native data format for Flash platform. Like JSON which is data in JavaScript. SWF is the native format for Flash. Want to put data in a SWF.

Terms:
SWX: Native format for Flash.
SWX RPC: RPC protocol encoded in SWX.
SWX PHP: PHP backend for SWX.
SWX Tools: Service Expolkire
SWX AS Lib: Optional, high-level AS library that handles SWX RPC calls.
SWX APIS: APIS for Flickr, Twitter
Public gateway: Open SWX RPC endpoint

Why SWX: Issue with existing data formats.
loadVars, loadVariables: deserializing string is complicated, it's plumbing, should be handled for you
XML: What data structure is being loaded, first child, last first, what child
Remoting: Created SWX because of remoting. Go to Adobe and search for remoting classes. Barrier of entry is too high. Doesn't work with Flash Lite.

SWX just works. SWX is easy. swxformat.org
Demo of Services Explorer: Test services installation of PHP SWX Services.

Launch Data Analyzer, Launch Flash, AS 2 FLA: Create MovieClip named loader, In actions panel:

loader.serviceClass = "Flickr";
loader.method = "swxPhotosGetRecent";
loader.debug = true;
loader.loadMovie("http://swxformat.org/php/swx.php", "GET");

Data Analyzer has data that was returned. Creating second MovieClip called image:

// hack to get things up and running, see if it works
function onEnterFrame()
{
    if (loader.result)
    {
        image.loadMovie(loader.result.photo[0].src);
        onEnterFrame = null;
    }
}

swxformat.org/faq/ for information about Flash IDE Sandbox warning issue

swxformat.org/download (SWX ActionScript library) comes with classes and examples.

import org.swxformat.SWX;

var swx:SWX = new SWX();
swx.gateway = "http://swxformat.org/php/swx.php";
swx.debug = true;
// got rid of loader MovieClip
var callParameters:Object =
{
    serviceClass: "Flickr",
    method : "swxPhotosGetRecent",
    result: [this, resultHandler]
}
swx.call(callParameters);
function resultHandler(event:Object)
{
    trace("Hello");
    var imageSrc:String = event.result.photo[0].src;
    image.loadMovie(imageSrc);
}

Currently this only works with AS2.

How to create your own service side class. SWX MAMP Bundle to work with PHP on a Mac allows working with things easily. One click run on Mac, just download ZIP for Windows or Linux if you have a running web server with PHP.

HighScores.php SWX services example

<?php
class HighScores
{
    function getNames()
    {
        return array('Branden', 'Mario', 'Chafic');
    }
}
?>

Changing example from above:

swx.gateway = "http://localhost:8888/phph/swx.php";
serviceClass: "HighScores",
method: "getNames",

// updated resultHandler

var names:Array = event.result;
for (var i=0; i < names.length; i++)
{
display.text += names[i];
}

TextField component called display

FlashLite 2.0 and 2.1 are supported.

Showing demo of miniflickr using CS3. Trying to demo it on his Nokia N95 (couldn't get network).

Showing application with SWX that pulls Twitter data.

SWX Ruby (Locomotive one click Mac installer for Ruby)
creating swxrpc ruby application. Line of code to install SWX Ruby.
Showing example using Ruby service, same loader calls.

SWX uses: Mashups for Flickr, Twitter, Jaiku, Numpa, Nabaztag, etc.
Flickr API: current, MIT license, upload, actively maintained

Mobile applications: Limitations no POST. DeviceCentral doesn't support LocalConnection.

Games, Kiosks, CDs, Wrap it with AIR (Twimpa is an example)

SWX has a showcase on swxformat.org

AS2, Flash 6+, Flash Lite 2.0, 2.1 Mobiles, Wii, PS3, PSP, Chumby

Soon: AS3/Flash 9

Roadmap: Writting RFCs for SWX and SWX RPC, bundles for other platforms, more APIs.

nabaztag.com

Tags: flash flashforward2007boston swx

September 26, 2007

Flashforward Boston: Usability Approach to Accessibility

Rough draft of notes

Niqui Merret

Audience poll: Some people have done accessibility testing, but most have mot done so with disabled users.

Need to understand your users.

Accessibility is for everyone vs. technology or device. Focus on users with disabilities.

Accessibility in the real world, no technology is 100% accessible to all users. Aim to achieve best solution, maybe multiple technologies are needed. Combine Flash and HTML.

Definition of Accessible: To be able to be accessed. Want to break down barriers to accessing information.

Two main barriers:
Controls outside of Flash control: no tabbing between Flash and HTML site, wmode setting issues along with MSAA issues, MSAA didn't work with prior versions of Flash player, can't tell screen reader "I've made an update", can't set reading order on static textfields, Flash doesn't support voice over on Mac, Flash doesn't take high contrast settings on Windows.

Content and presentation barriers: stuff we build in that we need to think about (not everything needs to be accessible). Understand where the user is coming from. Screen reader users probably can't use mouse, need keyboard control.

Disability categories (these are all muddy and shouldn't be a taken as hard and fast):
visual (color blindness biggest issue), audio, motor, cognitive (good understand, foreign language).

Legal and General UK case study of accessibility and ROI.

Color and contrast (don't care about colors, need to distinguish content). Showing contrast demo with memoriaduo.com. Mac system settings has built in contrast control. Some tools available on other platforms. Don't talk about a color without a non-color cue ("Click on the green button") Provide tools to switch within your application if possible.

Size: Provide mens of controlling font size.

Keyboard Access: Provide logical structure. Flash accessibility dialog (easily set tab index). Focus highlighting is important if you have keyboard controls. Shortcuts make sense if someone is going to be using the site multiple times. Non visual users need to have them explained.

Audio: Provide textual or graphics of audio information. Using weebls-stuff.com videoas an example. Text on screen of audio lyrics. Harry Potter website is another good example.

Screen reader access: Auto next doesn't force update. Yahoo developer network has videos about screen readers and explanations from blind users and screen magnifier example. Set the name of buttons for non text buttons. Flash auto labels textual buttons. Specify reading order (tab index). Avoid using wmode.

Demo of Inspect tool part of Microsoft accessibility suite to show what is being sent to screen.

swffix.org Going to be best embedding technique, currently in public Alpha. Will replace SWFObject and UFO joint project.

http://www.adobe.com/accessibility/

http://blogs.adobe.com/accessibility/

How big is big enough for font size: Niqui recommends minimum of 11 or 12 for Arial. Font and context specific.

Standalone player and AIR don't communicate with MSAA.

Flash vs. AJAX accessibility. Flash is more accessible by default. osflash.org has AJAX aid which detects virtual buffer refresh. Easier to control visual output (contrast, fonts, etc.) in Flash.

Flash components can destroy tab ordering. Something on stage that that isn't labeled will throw off tab order. Best to set tab enabled to false.

Tags: accessibility flash flashforward2007boston