FITC 2005 Presentations - Keynote

Keynote

Mike Downey & Mike Chambers

FITC 2005

-> Nectarine animation OMG :)

-> Flash video / mobile / future of flash

-> Adoption curve (faster adoption each version)

-> Basement Factory (Toyota site) Flash developers

Dynamic audio
Majesta brand
Music changes based on user interaction
Adds instruments with each addition to car
EQ expands with each audio add as well
Allows download of file after creation

-> TJ MAXX

Shopping Cart Flash app
HTML for rest of site but flash for cart
No page refesh
Accordian pane
Flex application
"Web design agency Molecular developed the single-screen checkout function on the Macromedia Flex platform. Molecular spent six months researching the causes of cart abandonment and another six months developing the application, which sells (including customization and integration) for about $300,000."

-> Mappr (Flikr based app)

Ties image search to geographic location
Position Map ???
Uses open Web Services

-> NY Times

Interactive app for services in Vatican City
Look at his history and travels
Created a template that allows reporters to manage and create content without the developers input

-> Video on the Web

Users currently have to "solve a puzzle" to decide download type

-> CNET uses Flash video for features

Look into slide effect on homepage
Is it like b-page? (Flash)
CNET uses Web Services

-> Odopod in SF

Red Bull Air Race
Uses Flash video
Nice 3D integration
Progressive download of an flv
Race uses 7 simul streams synched together using FlashCom
Switch camera angles on the fly
Dynamic bandwidth adjustment so user does not have to worry about it
Server does this for you (for free)

-> Pennsylvania tourism office

Groundhog chasing it's shadow vid (funny)
Groundhogchase.com
Nice
One episode per week
All up online now

-> Adidas eCommerce

Use video of models to show off products instead of static bitmap
Video is totally integrated into the site

-> "Play means play" (no "choose connection speed")

-> www.macromedia.com/go/flashvideo

-> Mobile

Non-Flash devices
Car navigation devices
Nokia & Samsung liscensed Flash tech
Finally have hardware in the states with the Flash player pre-installed

-> IndiaGames Mobile games

-> Justin Everett Church won best FlashLite content last Nov.

Traffic App
Live dynamic traffic data and image
FlashLite exchange to download content up online now

-> Samsung in South Korea has entire user interface in Flash

-> www.macromedia.com/mobile/

-> The Future of Flash

-> Mike Chambers (Maelstrom demo FP8)

In Alpha stage
Improved rendering
Expressive creative focus
Blending modes and blurred filters
Gives the effect of depth (Grant Skinner's amazing demo)
Dynamic candle flame looks like bitmap but all filtered vector (Peter Hall)
**** Shit!
Bitmap caching tells the player that the vector objects are actually bitmaps which Flash can draw much much faster
Drop shadows / Blurs / Bevels
No 3D this release :(
Works on animated objects and can be applied to any asset in Flash including video
Blur video on the fly
Color matrix control on video as well as any other assets
Convolution effects as well
Text (Saffron software)
Renders the text incredibly well
Much much clearer type
Alpha channel (8 bit) support fot video
Overlay video on top of video

-> Bigspaceship example (No URL)

Amazing alpha support

-> Great new codec with much better quality for video

-> 8-Ball

Document classes shown in prop inspector
Filters panel in prop as well
Library drop down menu in panel
Improved library workflow
Panels allow pinning to fla file
Panel management now consistent with DW and FW (tabbed panels)
Panel groups can be named
Control caps and join in prop inspector with drawing tools stroke
Gradient support on a stroke
Toggle object drawing which allows shapes to be drawn on the same layer without taking a bite out of one another
Add filters in the authoring environment as well as through code
Stack multiple filters
Even input text fields can be filtered
Hide object but leave filter on objects (he made a quick wicked animated reflection of an animated dog)
Save filter stacks as a preset to use even in other files
Blend modes for mcs :)
Under color effect panel there is now a blend mode drop down (Hard Light, etc.) all dynamic
None of this adds any filesize to the file
All built into the player

FITC 2005 Presentations - Six Advanced Flash Video Techniques

Six Advanced Flash Video Techniques

Kevin Towes - [www.newyyz.com]

FITC 2005

-> newYYZ

Sync
Scrub
Captionate (Alpha Preview allows you to enter captions right in the flv itself)
Video Trans
Bandwidth scaling
Rock star video encoding

-> Flash video development course

-> Video 101

Stream content to over 42% more users than available to Quicktime
Progressive download in FP7
VitalStream, Akamai, etc. (offer FlashCom based streaming services)

-> Slide mode cue points

Have to be in slides mode
Cue Points is in the component inspector at the bottom

-> Non slide mode cue points

Cue Points controlled through actionscript
mx.controls.MediaDisplay
Add slides to AddCuePoint array
Use for loop to pull data dynamically if need be
Create slide mc and enter frame labels to control "slides"
Time is entered in the AddCuePoint array object as well for each slide
Listener created can also be used for progress bar???
Monitor timecode
Fire events to make display react
Grab code from his Website
He made custom monitorStream function to control progress bar
Uses setInterval
You can build your own cue point event handlers in there for closed captioning

-> Scrub bar

Need total duration - (grab from metaData :: .duration property :: spit out from Sorenson)
(You could also use a Meta Data Injector :: Google to find)
Need current time - ()
Store the meta data duration in the NetStream object
Progress calc = 100 * (ns.time / ns.duration)
Then reposition along a progress track
currPos = posDelta / endPos * 100
seekTo = (currPos / 100) * streamDuration
*** Ask about why seeking sometimes jumps ***
Must use ns["duration"] quotes and square brackets to add properties to strong datatyped pre-existing objects, could not use dot notation here
Very nice to add these to the netStream object, real clean
Also must use quote and bracket to reference these dynamic props
Some of the jumps may be caused by lack of a keyframe being on that exact frame
Is there a way to encode the file to assist in this issue???
Must stop interval when you grab handle
Set the onMouseMove to call a seek function
Code will be available to everyone from Website

-> Captionate

Manitu Group
They created the FLV MetaData Injector
beta@captionate.com 2 join beta
FLV Embedded
Closed Captioned
Cue Points
Currently the way we do it is using xml data (like RSSC video)
This allows us to embed the meta data for the captions right within the FLV in multiple languages
Also lets you embed cue points so you do not have to use AS if you dont want to
The CC files not can stay with the video
You can use this with progressive download as well as FlashCom
You can do this with 3 lines of code (and onCaption event)
ns["onCaption"]
Allows you to export a data only flv file or the XML
You can also edit the timeline of your FLV
Nice authoring environment
You can video preview within the FLV environment (nice)
Build markers on the timeline
It adds to list on the bottom
You can also tweak timecodes manually
Edit speakers as well (multiple speakers, etc.)
All it does is save the same flv file with the metadata instantly
Embeds it as an AMF packet
Get this!!!

-> FlashCom allows you to seek forward progressive will not

-> Video transitions

Tween class and transition class
Use tween classes to fade form one video to another
This could work with CC room
Nice fade instead of harsh switch, you cannot do this in any other media player
He will provide code for this as well
He builds an array of movieclips and an array of netStreams and binds them together
Uses a dissolve video function that takes two targets and crossfades them using Tween class (very easy)
Use the onMotionFinished to kill the old netStream object and delete the object
You could also extend this to also to crossfade the sounds using the Tween class as well

-> Negotiating Bandwidth

This really only applies to FlashCom

-> Encoding rockstar video

Currently two codecs and another coming soon
Two audio codecs coming as well
Bandwidth calculations he has in slides, download from site
Better to drop frame size than frame rate
Look at the motion in the video
Try to use files that have no pre-compression (Very important)
He also has examples of how Sorenson compresses the video on slides
The Flash player has a 4 megabit limit both in and out

FITC 2005 Presentations - Motion For Designers

Motion For Designers

Erik Falat - [www.deepplay.tv]

FITC 2005

-> DeepPlayTV

Allied Works Architecture
nab becomes content breaking down the separation
Bonfire Snowboarding (Older site)
Incorporated AE for rollover nav
3 ways of navigation
Provide many roots and avenues

-> New Allied site

Going live currently
They did Contemporary Art Museum STL
Very little copy
Motion experience
Projects are represented as glyphs
Very simple graphical navigation
Nice bold text shows first then copy fades in
Nice template for work showcase (NG?)
Easing scrubber in video section (Very nice) as you slide it eases into place

-> Motion graphics and industrial design will drive future design in Flash

Interactive was originally based in print
Old questions ::
How will it look?
How does it work?
New questions ::
How will the user experience the site?

-> David Carson

"Intuition is the instrument of invention"
Motion graphics are a way to tap those resources

-> Everything is shifting more towards interactive

The hardware is shifting as well towards traditional computers

-> Seamless integration into Flash is much better than component usage

"Current components are a good first take"

-> Interactive will penetrate all mediums

No longer just Websites

-> Matt Owens www.volumeone.com

Re-uses assets across multiple platforms
Uses AE
Elements recurring on multiple platforms

-> ResFest

2 day motion graphics digital film festival
By design segments
Example clip uses photoshop, AE, and a Nikon digital cam
Syndrome studios
Could almost all be done in Flash
Narrative structure
Utilitize that kind of production quality and integrate it into interactive and give use control over it
Possibility of using more AE effects in Flash

-> After Effects

Export direct to swf
Currently bandwidth will be a bit large
The bridge between video editing and Flash is getting thinner and thinner

-> Industrial Design

Heuristics
Adhering to conventions to make everyone learn something will not work
You cannot take one definition of what is usable and apply it to everything
Learning through interaction (Heuristics)
The Magic 8 Ball
It informs you at every step of the way that it interacts with you
You can infer something about what is inside of it
Might feel or see the window
You would infer that something is inside and you will want to see it (curious)
Point it up at yourself and you see the message
Don Norman analogy to explain heuristics
Navigation and content does not need to be limited
"Users CAN learn"

-> Practical advice

Motion in Flash is too easy to be learned the wrong way
Stupid intros
Do not use the properties of Flash without providing information to the user
Do not use sounds for no reason
Start checking out video motion graphics stuff
Get started in video editing
Use sound discreetly
See & Hear (only have access to 2 senses) on the Internet
Use Zigos Tween class (very easy to use)
or Transitions
Zigos is so fast and so smooth better to use

FITC 2005 Presentations - Breath of Complexity

Breath of Complexity

Jared Tarbell - [www.levitated.net]

FITC 2005

-> Iteration / Combination / Feedback

Some things that seem simple are really very complex (like taking a breath)
GOAL :: Simple code with complex results
You can use Flash and Processing together
Rapid application development
Processing is bitmap based and Flash is vector based
Z is built into processing so if you set something to a z value it will snap into 3d mode

-> Iteration

Look up binary ring code from Website
Must apply friction apply 90% of it's old value and add friction
With Processing you can repeat this 10000 times to make print images of background images
TRICK :: Mirror the left side or bottom to the right or top thus providing symmetry which the user will react to in a more emotive way
Humans are always trying to find symmetry in things
All source code and notes with be available on his Website
Instantiate on a delayed rate
Some things can simply exist as a tween not everything has to be drawn by code only in Flash
Look up "Lorenz Attractor"
Look up "Henon Phase"
Take colors from natural photographs, put pixels down at 20% or 40% opacity for a more natural look
Knock colors down to a 32 color GIF and use Processing to sample the colors from that
You can download his takeColor method from his Website for Processing
A fractal is an attractor
Took his fastest computer 6 days to render the Buddhabrot fractal
Substrate - grow until you hit another line and then stop and grow perpendicular to another line

-> Combination

Put things together in every possible way you can

-> Feedback

The origin of memory
Take the state of something and feed it back unto itself
He generates archival prints on complexification.net
Simple Binary Network
You can rotate a large mc and place icons within it to create a ring effect

FITC 2005 Presentations - Multi-User Concepts

Multi-User Concepts & Code

Colin Moock - [www.moock.org]

FITC 2005

-> Costs to keep trash in CyberSpace

-> No trash on the Internet

-> Environment changes because of users actually using it

Such as gum on a sidewalk
Bring those kinds of environmental changes into the online world
Visualize a pattern of use

-> U CO-OP

Goal is to force users to interact
Starts with a blank page
Accounts for deviance
Provide natural feelings of togetherness online
Take ideas from gaming community
Links that have been traveled more are darker like a deeper path cut through a field from more travelers
Collective knowledge is embedded into the environment

-> Dan Albritton & Marcos Wellkamp

Social Circles
Google News Map
Great multi-user applications

-> Dentsu site

Varying modes with numbers floating across the screen
Tracking elevators live
"tracking the path in the woods through a building"
Wanted to show activity inside the agency
100 color palette
Real-Time interaction with personal data
"Dentsu is moving"
Also going to do more interaction pieces with people swiping ID cards at front gates, etc.
Why elevators?
Echo of user activity
Includes a development mode where you can send him a swf and he can put it in there to see how it works

FITC 2005 Presentations - Information Visualization

Information Visualization

Branden Hall - [www.waxpraxis.org]

FITC 2005

-> Machine Creation to design layouts

-> Genetic algorithms

Apply "evolution" to code
You can "breed" for the qualities you want
Create an initial random population of organisms

-> Represent code in tree form

Simple data structure (Array)
Handle crossover and mutation
Use split and splice etc. to form crossovers

-> Computer knows "pretty" from "ugly"

How do we teach it?
Symmetry
Balance
Self-similarity (Fractal)
Computers are quite good at figuring this out

-> Neural Networks

Individual nodes do not make sense but the "whole" does
Perseptron based back propogation network
Old neural network

-> Nurture NET

Flash first to generate output
Feeds output into Python neuralNet

-> L-Systems

Used to represent how some natural organisms grow
String replacement
"ABAB"
Set up replacement rules and run for each generation
He mentions a MIDI L-System music generator from the 80s

-> Zen of Code Optimization (Book Link)

The author wrote the Quake engine
Flash is so removed from the CPU you have to be "smarter" to optimize speed (ah look at that finally Flash programmers are "smarter" :)

-> Look up L-System rendered on his Blog

-> Deptofnotation.com

-> Notes will be posted here

FITC 2005 Presentations - Computational Design

Computational Design

Casey Reas - [www.groupc.net]

Benjamin Fry - [acg.media.mit.edu/people/fry]

FITC 2005

-> Setup series of rules and let dataset affect the objects with rules set upon them

Gap between Data and Understanding
Computational Informational Design draws a thread between all of these different fields
Create map of latitude on one axis and longitude on the other
Find maximum and minimum values to plot (Example U.S. map shown with these coordinates -120 - -65 x val & 24 - 49 y val)
Dynamically type in zip codes and quickly traverse data and zoom in on zip codes in map (acg.media.mit.edu/people/fry/zipdecode) like position map
Seeing smooth transitions helps with the UI
Human Genome project visualization example (acg.media.mit.edu/people/fry/haplotypes)
Periodic table of the elements for the human genome example
Show multiple visual representations within one work and see how those visuals fit together

-> Processing.Org

Allow people to learn about programming while maintaining a visual base
Develop much quicker, get ideas out of your head and into the software quicker
Alphabot example (look up)
Full 3d engine inside of it
Deals well with both vector and raster drawing
Very fast at mathematical calculations
Gestural expressive animation example (http://www.moovl.org/)
Use as a sketchbook, "there are not a lot of good tools for sketching software"
The first language you learn can affect how you think about software
Teach this to Esty and Charlotte :)
You can use openGL renderer in Processing
Processing is a base for future learning
Encourage people to share their code with each other and this output is automatically included in the export
You can use either HSD or RGB values for color
Motion Theory used processing for dynamic star effect for Michael Stipe on REM video
They Rotoscoped Michael Stipe to black and white and then dynamically applied effect to that data

FITC 2005 Presentations - Digital Creatures

Digital Creatures

Liquid Journey - [www.liquidjourney.com]

FITC 2005

-> Mathematical Motion

2 components
1. Value you have going towards target value
2. Moving one value towards another

-> Motion :: Chase

A = A + (B - A) / Constant
Dynamically creates target values randomly around the core value

-> Motion :: Flex

Includes dampening
Bungee effect
More fluid effect
Still can use same target effect

-> Targets & Motion

Moving the targets frequently is just as important as the motion itself

-> Constants

Change constants
Add a sine value to a constant

-> MCs

Physical presence
Limited to approximately 16,000 clips on the stage

-> Movie Clip Chains

Elements as part of a hierarchy
Lead element and mcs in the chain
Adding rotation to create spiral effect

-> Objects

MCs without the baggage
Require no physical presence on the stage
Have no inherent physical props

-> Object chains

Hierarchy of interconnected elements
Chase their target
They can all be drawn into one mc

-> Trig

Angles & Magnitudes
New_x = Point_x + Magnitude * Cosine (Angle);

-> Creating Volume

Create a radial of relative positions
Animate core points and the radial points give the appearance of depth

-> Add sine motion

Value from -1 to 1
Multiply magnitude you can control level of sine motion

-> Wireframes and Fills

-> Give them emotive values

Can be value from 0 - 100

-> Polygon Bitmap Tiles

Use masks and bitmaps to simulate texture
MC holder with a mask and a bitmap
Can use curveTo to create pretty extensive and realistic tiles
Build it from back to front to control stacking
Proximity checking not hitTtest

-> Controls tiles like you would any other mc add effects or whatever

-> Recursive functions

Feed it a var and it will manipulate the var then call itself with the new var passed in
Create a loop limit
Use a combo on onEnterFrame to control recursion and not have it iterate in one frame (iterate over time)

-> Flash is a 2d space

Creating 3d environments in Flash
Creature will pull through itself in 3d space

-> 3d Flash specific issues

Choosing a depth
Hard to create an average depth from 3 or 4 points
MCs cannot intersect another so every MC must exist on it's own depth
And of the creatures points can travel through it's body
POV & Camera Position
Use a camera to calculate

-> Use the spokes of the wireframe to texture

Local Global rotations
Build the 3d world at perpendicular angles
Simulates a top down perspective

-> Include an offset

-> Cotangent to find angle

-> Uses "Motion Capture" data

Keyframed animation to pumped out x y values
Converted x y data to x z data and added y

-> Add delay to create natural swarm and motion effects

Email him to get source files and presentation
Presentation Files

FITC 2005 Presentations - Presstube.Com

Presstube.Com

James Paterson - [www.presstube.com]

FITC 2005

-> All music from his site is created by K-RAD

-> Started as a personal portfolio with others to showcase printwork

Evolved into digital ambient animation
DVD coming out soon check site

-> Arrangement engines

Export clips into AE
All of his work is scanned in and stored in the Flash library streamlined and vectorized
Organized chronologically

-> Builds drawing viewer machines

In AS

-> Starts with paper drawings

Start animating the best drawings sketched in from a wacom tablet
Breaks it apart into little tiny pieces
Then take each part and animate it in and out in an interesting sort of way
Add them all together and you have these intersecting animations coming together as a whole
Broken apart into little "nugs"
Store the pieces separately so they can be used apart
Then make additional libraries with "tracking" or motion guides
Multiple layers of animations
Also uses similar generative machines to create static images for prints
Makes full cycle from print to digital and back to static
Will animate "nugs" also

-> Tempo recorder

How fast he moves his hands records the animation
Then he can add this tempo recording to control his animations
Nice speed controller
Arrangers (tools) used to quickly and easily create work for clients
Spacebar generation

-> Doesn't put commercial work on presstube

By clients looking only at presstube work then the commercial work is only one generation away from his own personal work
VH1 bumpers

-> Rhonda

Fully 3d drawing tool pitaru.com

FITC 2005 Presentations - Composition Of Logics

Composition Of Logics

Yugo Nakamura - [www.yugop.com]

FITC 2005

-> Forget about context of all logic & reconstruct new logic

Use 3d programming in a 2d environment
Use Shape(s) for texture
Capture human movement and human activity
EX :: Capture logged users movements

-> 3 methodologies

1. Shift the context of logic
2. Collage / remix of logics
3. Wrong startpoint + Over sophistication
EX :: Start at the end point of a project first to create a different result

-> My goal of personal work is to explore unseen composition

-> Without any purpose

-> It's fun

-> Give particular form to particular human activities

-> Share the feeling of participation

-> A great example of human interaction > NEC Ecotohana

-> Another great example > www.intentionallies.co.jp

Each card represents a mini site of the project
Rigid polydynamics is the programming that harnesses the natural movement of the card
Start at the wrong starting point and oversophisticate it
Parallel module structure
Multilingual selection rotates it and selects the appropriate language

-> NID Gallery 2005

People and works from Nagaoka Institute of Design
Amazing!!!
Interaction and artwork work together with the mouse flow
You can also filter results (always filter)
Simple 2 ring structure

-> Toshiba FM festival site

This was done by him to portray an event website as an enhanced music viewer

-> Fotologue.jp (Amana Inc. like Corbis in the states)

Great look!!!
So good in fact the Yugo himself is going to become a client and use the tool himself
Rounded edges on the input fields makes a huge difference
Show this to Vaughn as a great example of an online application
You can update the look of the site (background colors etc.)
You can cycle through the interface whether you are in detail mode or in thumbnail mode
You can download a screensaver of your images and it will cycle through the images pulled from the image database

-> Pocky (very funny commercial do a google search)

FITC 2005 Presentations - Gmunk Exposed

Gmunk Exposed

Bradley Grosh - [www.gmunk.com]

FITC 2005

-> "Scale Wipe" was used in Finn movie to do pixel stretch effect

-> Methodology Tip > Track first then edit

-> Velvet.TV fave

Filmed with a huge macro lens to get the large wind up toys having sex
Used slow shutter speeds

-> Bas Vectuer was made for WWFT

-> He does all of his dynamics in Maya

To be a broadcaster designer these days you have to know a 3d package
Recommends Cinema 4d on Mac and Maya and 3ds on PC

-> Maya tips

He uses spring constraints a lot to control snapping and explosions in Maya
Uses hidden spheres to knock stuff out of place and use for wrapping objects around them as well
Brings type in from Illustrator and extrudes it and then uses huge spheres to blow it out of place

-> He says he is digging Processing and what it can do with video

"Shit like Levitated.net 'completely hurt me'". LOL
Come places worked include Engine / Tronic / Digital Vision / etc.

-> He uses a vibrating blur effect instead of straight blur out on text (nice effect)

-> He worked for Imaginary Forces and did Zorro whip for promo and movie intro

Used Maya hair dynamics to make whips
Used as a wire deformer to deform and affect the type
To blast apart the text he made separate layers with each letter broken apart into shards that have locators attached to main type and then the type goes away and the shards fade in

-> Watch for Zorro stuff when movie comes out

FITC 2005 Presentations - Becoming TOOL

Becoming Tool

Joshua Davis - [www.joshuadavis.com]

FITC 2005

-> The type of work you make is the type of work you will get hired to do

-> Department of Notation LLC (His new company)

-> Spend a lot of time hanging out with the client

-> Uses a Wacom Tablet for everything to trace sketches into the computer

Make programs that use your artwork
Instead of circles and squares etc.
Look at parts of things and sketch things from the clients realm
Separate objects from their context

-> Adobe has updated Streamline and added it into Illustrator called LivePaint

-> He writes components to generate art

Adds manipulative controls to remove or move stuff after random generation
He still wants to make sure that there is human interaction and you are in control

-> Never show color first to a client always black and white

Make them concentrate on what they are seeing as a texture then get into colors
Don't let them get caught up with the color issues

-> "For in" loops will calculate mcs within mcs without having to work with each one separately

Flash colors based on an array
"Tool" site is from the Snow White DVD color scheme loaded into his color generator
Find things in your surroundings that look like the colors that the clients are looking for
In the case of the "TOOL" Website they were purples, reds, and golds

-> colorstripping.joshuadavis.com

Save as a GIF with only a limited index of colors
you feed it a GIF and it will output colors as an array
Gaussian blur the base 9 color and then when you capture a screengrab you can feed it back into the color stripper over and over and over until you get the array to the size of color scheme you want
It diffuses the color and expands the color palette

-> Try to go to one of his classes in NY

-> The generator components he builds let you sketch very quickly

He used irregular architecture sketches knocked out as the "text boxes"
Paper Mario inspired the generative engine for the "TOOL" site
Objects are farther down the z axis but since they scaled the pattern up it is an optical illusion
Gets some inspiration from games? :)
Mapped in 3d space but scaled up to trick the eye

-> He made an application called the "TOOL" tool

Import artwork and map into 3d space
Outputs all to the XML file
Try to get into Beta program for TED genetic aesthetic coding program