Tag: Flash

First Flash Experiment in a Long Time

John Winkelman

Here it is. My first real experiment in Flash 9.

Click to play.

Because, first and foremost, Flash is a trip toy.

Code for this experiment here:

package {
 import flash.display.*;
 import flash.events.Event;
 import flash.geom.*;
 import flash.filters.BlurFilter;
 public class BitmapRotate2 extends Sprite {
 private var _graphic:PolyStar;
 private var _graphic2:PolyStar;
 private var _bitmap:BitmapData;
 private var _image:Bitmap;
 private var _m:Matrix;
 private var _blurFilter:BlurFilter;
 private var xSpeed:Number = .9;
 private var ySpeed:Number = 1.1;
 public function BitmapRotate2() {
 _graphic = new PolyStar(0,0,7,false,50,30,0,0xff0000,100,0x0000ff,100);
 _m = _graphic.transform.matrix;
 _blurFilter = new BlurFilter();
 addEventListener(Event.ENTER_FRAME,registerStage);
 }
 public function registerStage(event:Event) {
 if(stage) {
 removeEventListener(Event.ENTER_FRAME,registerStage);
 _graphic.x = 0
 _graphic.y = 0;
 _bitmap = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xff000000);
 _image = new Bitmap(_bitmap);
 _m = _graphic.transform.matrix;
 _graphic2 = new PolyStar(stage.stageWidth/2,stage.stageHeight/2,9,true,stage.stageWidth/2-20,stage.stageWidth/6,0,0xff0000,100,0xff0000,0);
 addChild(_image);
 addEventListener(Event.ENTER_FRAME,onEnterFrame);
 }
 }
 private function onEnterFrame(event:Event) {
 _graphic.rotation+=5;
 _graphic.x = mouseX;
 _graphic.y = mouseY;
 _m = _graphic.transform.matrix;
 _bitmap.draw(_graphic,_graphic.transform.matrix);
 _bitmap.draw(_graphic2,_graphic2.transform.matrix);
 _bitmap.applyFilter(_bitmap,_bitmap.rect,new Point(),_blurFilter);
 }
 }
 }

The “PolyStar” class is here:

package {
 import flash.display.Shape
 public class PolyStar extends Shape{
 public function PolyStar($x:Number,$y:Number,$points:Number,$vertical:Boolean,$outerRad:Number,$innerRad:Number,$lineW:Number,$lineC:Number,$lineA:Number,$bgC,$bgA:Number) {
 var points:Number = $points*2;
 var angleDelta:Number = (Math.PI*2 / points);
 var angle:Number = 0;
 var anglex:Number = 0;
 var angley:Number = 0;
 graphics.lineStyle($lineW,$lineC,$lineA);
 if(typeof($bgC)=="number") {
 graphics.beginFill($bgC,$bgA);
 } else {
 graphics.beginGradientFill($bgC.type,$bgC.colors,$bgC.alphas,$bgC.ratios,$bgC.matrix);
 }
 if($vertical != true) {
 graphics.moveTo($outerRad,0);
 } else {
 graphics.moveTo(//change orientation of polygon
 Math.cos(angle + (angleDelta/2)) * $outerRad,
 Math.sin(angle + (angleDelta/2)) * $outerRad
 );
 }
 for(var i=0;i<points;i++) br=""> angle += angleDelta;
 var temp:Number = (i%2) ? $outerRad: $innerRad;
 if($vertical != true) {
 anglex = Math.cos(angle) * temp;
 angley = Math.sin(angle) * temp;
 } else {//change orientation of polygon
 anglex = Math.cos(angle + (angleDelta/2)) * temp;
 angley = Math.sin(angle + (angleDelta/2)) * temp;
 }
 graphics.lineTo(anglex,angley);
 }
 x = $x;
 y = $y;
 }
 }
 }

Enjoy!

FiTC: Notes from Papervision3D

John Winkelman

introducing papervision3D
carlos ulloa
www.papervision3d.org
blog.papervision3d.org
wiki.papervision3d.org

open source 3d library or Flash

genesis: Spark conference Amsterdam 2005
-presentation by joost korngold – renascent

2006.12.02 – papervision went open source
-papervision license: MIT license – free for commercial use
-open-sourced so that people could use it

2006.12.10
ralph hauwert – the guy who built he rhino

core team: carlos ulloa, John Grdner, Ralph Hauwert

COMMUNITY has been very important. Feedback has been invaluable

WHY PAPERVISION?
-powerful: Flash 3d is extremely difficult to do well.
-easy to use : people should be able to pick it up quickly, immediately be useful
-production driven design
-high performance realtime 3d rendering
-linear texture mapping per face
-hierarchy, instances, materials management

EASY TO USE
-useful for developers and designers
-designed for Flash
-AS3-style syntax -3d objects should not be more complex than movieclips
-no maths required defaults to using degrees

-you can use your own 3d package
-create and modify without recompiling
-preview your scenes in realtime

COLLADA – data format
-open standard
-XML based
-scene format
-multiple objects and textures per scene

-supports camera, materials, paths, tween & skeleton animation, physics
-originally created by Sony for PS3 and PSP-now property of Khronos

Free plugins available for Maya, 3dsm, softimage XSI, and Blender
-adopted by many commercial game studios, game engines, and Google Earth
-Thanks, Collada!

METAPHOR which we use in papervision
-in a computer, 3d data must be rendered in 3d

1. Scene (stage) -> Objects (thing) -> materials (look and feel) ->
2. Scene -> Camera (viewpoint)

OBJECT
org.papervision3d.objects
displayobject3d -> xyz pos, xys rotation, scale, scale xyz, visible, name, parent, root

3d model
-created by a 3d artist in a 3d package (GENERALLY NOT DESIGNED BY THE DEVELOPER)

planes
-planes moving in 3d, mimicking a 3d object

Primitives
-cube, sphere, cone, cylinder

Skybox
-panorama

Particles
-e.g. stars

Materials
org.papervision3d.materials
Textures
-bitmapdata, MC, library assets, jpg, png, flv
-Photoshop CS3 extended

Cameras
-the location from which the scene is being viewed
org.papervision3d.cameras
extends displayobject3d
-target – a thing the camera follows

ONE LINE OF CODE
-each behavior can be implemented with one line of code
-Flash CS3 component in the works

MORE COMING SOON
animation
-Tim Knip – skeleton animation
-Jim Armstrong – classes for hands, arms, etc.

MATERIALS
-visual quality
-z-flat shading : quick, easy, not the best
-phong shading
-z-flat shading textured implementation
-phong shading

-argh! Too many ways of rendering to copy down!

BumpMapping

COMING SOON
Normalmapping – high poly to low poly without datsa loss
specular maps – reflection mapping
cubic environment mapping – thing the Terminator 2
Mip-Maps
Real silhouettes/outline shading..not cheating using a filter
plugin structure for custom materials
lighting structures
shadow structures
z-buffer(?)

PERFORMANCE
current RC2 speed increase: 20%

better clipping, fogging, depth queuing

Demo reel: HOLY SHIT!!!!!!!!

[also lots of photos of the screen]

FiTC: Notes from Experience Information

John Winkelman

Experience Information
Marcos Weskamp
www.marumushi.com

-one number really doesn’t mean anything until compared to another number

wikipedia: information visualization

many different ways of visualizing a dataset.
many different datasets can be included in one visualization

Voronoi diagram — look this up

data can be both useful and beautiful

[.eps printouts of dynamic visualizations]

PARSE
ANALYSE
reduce
organize
learn
VISUALIZE
difference
contextualize
reduce

PROJECT: Wieden + Kennedy (www.wk.com)
used QT back in 2001.
brought in MW for a re-build of their site

anything can be information
in any data source, decide what the information points are, and create the interface based on which aspect of the data is most important

APPLICATION ARCHITECTURE

Justin Lewis, Instrument — www.instrum3nt.com

“restful” : CMA
-RoR /Ajax
-beautiful

[I need to dive into Flex]

EXPERIMENT EXPERIMENT EXPERIMENT!!!!!!!

DIGG API EXPERIMENT

FiTC: Introducing the Chumby

John Winkelman

Introducing the Chumby
Steve Tomlin CEO
Duane Maxwell Head of Software Engineering
www.chumby.com

What is Chumby?

-still in Alpha-level prototype
-A device
-a company
-a media (widget) network

-plug powered, wifi connected
-connects to Chumby network
-runs Flash Lite 2.1.1, eventually Flash Lite 3

Flash Lite community
-Chumby team
business partner
flash community at large

Why is Chumby?
-some stuff on internet is REALLY important to us
-we can’t spend all day in front of our computers
-but we want the internet around us all the time
-PCs require interaction and full attention and don’t integrate well into our lives
-smartphones don’t PUSH, they PULL
-think “look at your watch” rather than “browse on a PC”
-we want a lot of info in our lives

Chumby: the religion
-make it inexpensive
-make it powerful
-make it “open”

SO WHAT’S THE DEAL FOR US?
-we sell Chumbys as close to cost as possible
-Chumbys display, they don’t store—always connected to Chumby network
-network grows: more widgets

WHAT’S THE DEAL FOR JOHN WINKELMAN (DEVELOPER)?
-we create audience for your work
unlike mobile phone ecosystems, Chumby is open
-no taxes, no publishers, no carrier certification, no deck placement issues
-i.e. fewer middlemen
-Chumby is viral; Chumby content providers retain total control of their content; think of it as Chumby having a license for our work

WIDGETS
if widgets are good, they should be available everywhere
-virtual Chumbys in MySpace, apple dashboard, cellphones, etc.
-widgets should be everywhere, and Flash is more fun

NEW CHUMBY INFORMATION!!!!!!!
-price $165, +$9.95 s&h
-if it is cheaper, we will lose $$
-no additional fees
-no subscriptions
-accessories (chumBling)
-new classic colors, plus limited editions

-accessories to customize chumby (currently 1 USB port, later probably 2)
[input from stuff talked about in “making it physical” ]
-FM radio adapter
-IPOD

-launch this summer with Flash Lite III
-Flash video & audio
-based on Flash 8

WE NEED YOUR HELP
-create and upload cool Flash Lite Widgets
-stay in touch with us (blogs, forms, wikis)
-move to San Diego and work for us!

CHUMBY TECHNICAL SPECS
3 versions of Chumby
-foo — prototype last august
-katamari — 2nd gen prototype
-ironforge (production)

[photo of lots of screens — too much info to type]

Chumbys talk loudly over LANs

-Chumby doesn’t need to be on network to test new hardware/software

-public widgets are hosted on chumby server, but content that Chumby displays can be pulled from anywhere

-the CHUMBY is going to be freaking cool!

-Chumby native resolution is 320 x 240px, but it is Flash, so it is vector

-ads will be more sponsors, rather than commercials
-“chumBooty” — offer for stuff, ring tone, scavenger hunt clue, etc.
-“advertoon” think YouTube, but with advertising
-ads will keep the bandwidth free.
-possible future subscription for people who don’t want ads at all.
-“we’re trying not to screw it up and make it annoying”
-pin-out for larger LCD? Yes, info on forum.
-video — playing 12fps full screen takes up 60% CPU, on the alpha build of Chumby

-Chumby network — limited to Flash files
-a lot of work has gone into privacy/security, so there won’t be any Benedict Chumbys

FiTC: Notes from Building Casual Games in Flash

John Winkelman

Building Casual Games in Flash
Philip Kerrman
philipkerrman.com/fitc/

Built most of these games for MSN messenger.

Casual Game: “Carefree game”

<50 megabytes
try -> explore -> buy

“adver-game”
-either fully sponsored (branded up the wazoo) or maybe a subtle watermark, or an ad you have to see before you play

casual games are not usually done in Flash—more often director/java, etc.

Casual game -> you pay for
advergame -> client pays for it

casual game market is HUGE, >50% women

a casual game will sell for ~$20

try/buy conversion rate:
>2% is a hit
1-2% is the norm
<1% is poor

portals will pay the author ~30%

Advergames
-usually work for hire
-simply skinning an existing game isn’t popular
-wide range of money-making opportunities for free games with advertising
-banner ads
-in-game sponsorship
-pre game ad
-in-game (break-time) ad

ARMS RACE
-more and more advanced graphics
-increased user expectations

XBLA—6m xbox users
-try but — very frictionless
-they say 75k – 300k to produce a game
-certification
-games sell for $10
conversion rates around 30-35%
-better revenue share: 50/50 or better
-gatekeepers

WINDOW LIVE MESSENGER
-250m users
15 unique game users per month
-potentially 30-35m players
30% average yearly growth

-subscriptions
-ad revenue

NOMENCLATURE
Up sell — try version gives you a nag screen to buy the full version

frictionless —

Portals — “publishers” for your casual games.
-big portals take a bigger cut, but tend to be more stable and more trustworthy

badges/achievements — visible “pride” based declaration of your awesomeness at a game

ADAPT YOUR SKILLS
-use the appropriate tools for the target market

TECHNICAL STUFF

1. GAME MUST BE FUN!!!!!
2. user experience
2. user experience
4. user experience

USABILITY
MS Games prototyped using PAPER mockups of all the screens

Casual games often have to live within a framework, which YOU have to adjust to, because THEY won’t change it for you.

You will need to include “ad breaks” functionality in your game

You are living in reality
-lean toward the lowest common denominator

MULTI-PLAYER
-griefing situations
-race conditions
-technical limits
-home-made random seed
-turn-based is MUCH easier
-don’t underestimate difficulty involved
2 player game > single player game * 2

AI
-many different ways of thinking about it

PORTING OF GAMES
-many many many venues in which a game can live

LOCALIZATION — allow for many different fonts, lengths of words
-this could be the hardest/most frustrating part of the development

CHEATS
-think of them as “hints”

-Keep the number of server requests to a minimum.
-synchronizing is difficult, but very important
-if two people perform an action on an object at the same time, before the info is sent to the server
-learn ways to make data smaller so it gets sent faster, especially in situations where a lot of info is constantly going back and forth

GRIEVING — one person quits, the other stays on, expecting to play

Games need to be bulletproof, and they need to talk loudly but briefly to the server

[jigsaw game] — every piece has the same registration point: 0:0. Even if it is visually all thee way across the stage, it is a small visible portion of a big empty movie clip

-international portal games can have a long development process

FiTC: Notes from The Blind Sketchmaker

John Winkelman

The Blind Sketchmaker- exploring evolutionary and generative art with Flash
Mario Klingemann – quasimondo.com

Can computers create art all by themselves?

No: Only artists can create art.

[stuff about art as a system of belief]

art happens because our brains want an assignment after the basic work is done:

color – find food
danger – pattern matching
aim/estimate distance
orient/find your way home
-select mating partner
-protect and care for offspring
-learn new things
-get bored

What makes it art? Good networking

Komar and Melamid: “America’s most wanted painting”
www.diacenter.org/km/

Artist battle
http://www.saatchi-gallery.co.uk/showdown/
is it art or not?

If not Art can computers at least create art?
can computers create interesting pictures?
Maybe.

Learning to see
-The more you know, the more you see
-What do we have to look for?
-How can we tell art from noise?
-How can a program “See” after all?

This session = Too much art, not enough generative.

This session has nothing to do with anything. I just wasted an hour.

Well, he pulled it together a little bit in the last five minutes, showing us how his tool creates generative art…based on the “Biomorph” experiments of Richard Dawkins.

It has created some badass art.

Great tool, fantastic experiment, boring session

FiTC: Notes from Let’s Get Physical

John Winkelman

“Let’s Get Physical” — ambiance as input data
Craig Swan
crashmedia

talking about ideas

“change the way you look at things— and the things that you look at change”

API — (H)API Human Application Programming Interface

flash can be a set of ears — using a microphone
-it knows how loud things are—useful for building environments

eg. “ambient awareness”

everything which you can make Flash aware of an be a variable

VISION
-flash can “see” using the camera
-flash can measure change in video from moment to moment
-e.g. motion sensor recording
with bitmapdata Flash can record video and play it back, non-linearly

detecting motion-
flash can react, real-time with video captures being used to interact with “virtual overlays”

gesture-based interface

grabbing bitmap data from live video, applying live filters for display

find keys for content delivery from the environment. Give Flash eyes and ears. take the input and make use of it.

TIME
time as meta data of real-time input
replay frames, or parts of frames, at different time intervals, or completely out of sequence
videograbber
timescanner
timetunnel

TOUCH
all input devices are CONTACTS — one thing making a connection with another

IPAC — allows the creation of your own controllers for a computer input is interpreted as key presses—WHICH CAN BE USED BY FLASH

EXAMPLE. Wired up a wind chime. The wind outside controls an app running in Flash

EXAMPLE: Ethernet cable — wires hooked up to finger rings which, when contact is made, sends info back to Flash

Conductive thread
conductive paint
conductive marker

you can draw an electric circuit on a wall, or sew it into a garment. Plug it into the IPAC and you have a new input device

LITEGRAF
painting with light drawn from a physical palette

EXAMPLE: Wired up a simple lock and key which could be used to lock/unlock accessibility to a computer

TOOLS:
Arduino
Phidget RFID

RFID detectors/readers can be picked up for $60

The many Flavors of Sensors
breath distance proximity light temperature acceleration noise remote current

Once the input comes in, you can can process that info and send it back into the world in another form

“Teleo”?

wireless flash zipzap remote

Sudden Motion Sensors (inside all mac books — accelerometer)

Blinking lights and buttons — MONOME input device

“OSC” Open Sound Control

two-way communication between flash and controllers

Playing with knobs : MIDI

midi2flash by crashmedia olaf matthers

WIImote to Mac controller: wiili.org “darwinremote” by hiroaki kimura