topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

tutorial(s) -- flex/as3

material(s) / actionscript / animation(s) / example(s)

section(s) -- 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

chart(s) / help / lookat(s) / tutorial(s)

section 0 -- getting started

lookat -- www.adobe.com/products/flex
flex SDK -- opensource.adobe.com/wiki/display/flexsdk/Downloads : flex 3 / flex 4
IDE? -- flex builder (sdk 3) / labs.adobe.com/technologies/flashbuilder4
read -- flash player 10 / developer documentation
explore -- bubblemark.com / www.google.nl/search?q=rich+internet+applications

course(s) -- multimedia authoring / interactive visualization

multimedia authoring / interactive visualization

flex/as3 sdk -- declarative + operational
web-based multimedia -- flash(player) is (de facto) standard
coding multimedia -- design + development
application(s) -- alien(s) ... (musical) flowers ... shopping ... tunnel(s) ... flow(s)

explore, copy & paste, understand, adapt

lookat(s) -- selected examples
flex & actionscript -- from livedocs
animation(s) -- foundation animation: making things move
flex construct(s) -- professional flex 2
example(s) -- miscellaneous topics

getting (in) shape(s)

help / getting (in) shape(s)

image gallery -- tutorial / example
bitmaps/filters -- tutorial(s)
amf php -- tutorial / example
(u)maps -- tutorial / example

chart(s) / help / lookat(s) / tutorial(s)

section 1 -- programming the display

read -- about flex development(s)
lookat -- getting (in) shape(s)
flash/as3 -- flash.display.Sprite / flash.display.DisplayObject / flash.display.DisplayObjectList
flex/core -- mx.core.UIComponent
control(s) -- mx:Image
container(s) -- mx:Canvas / google(s)

compiling with mxmlc / compc / asdoc


  mxmlc file.mxml / file.as / file.css
  mxmlc -include-libraries corelib.swc -source-path+="." file.mxml 
  compc -output book.swc -is com -is org
  asdoc -source-path . -output apidoc -doc-sources file.mxml 
  asdoc -source-path . -output apidoc -doc-sources net/ximpel/

read -- getting started with mxmlc and as3 / asdoc
consult -- option(s) / swc file(s)

setting (y)our style(s)

lookat -- style(s) / embedded style(s) / css / runtime style(s)
flex/as3 -- mx:Style
explore -- accordeon(s) / item renderer(s) / css property list(s) / skin(s)
try -- style creator / style explorer

creating (the) component(s)

look at -- photo viewer / gallery / photo show
read -- documentation
see -- flickr photo viewer / blog(s)
try -- mxml component explorer

chart(s) / help / lookat(s) / tutorial(s)

section 2 -- media & playlists

lookat -- video player / camera(s)
event(s) -- mx.events.VideoEvent
control(s) -- mx:VideoDisplay
read -- extending the video display component

loading the playlist(s)

lookat -- video player (script)
event(s) -- mx.rpc.http.mxml.HTTPService / mx.rpc.events.ResultEvent / mx.rpc.events.FaultEvent
read -- working with XML data
study -- e4x tutorial / example(s)

the powerrail experience

lookat -- powerrail / presentation
read -- about blog.papervision3d.org
explore -- selection(s)

configuration(s) & parameters

lookat -- configuration(s) with XML and object parameter(s)
read -- about using XML and flashVars
and do not forget to look (again) at -- ximpel.org / view(s)

professional (XML) components

lookat -- XML / flex data / viewer(s)
read -- programming AS3 / working with XML
explore -- dishes / e4x

chart(s) / help / lookat(s) / tutorial(s)

section 3 -- handlers & interaction

lookat -- alarm clock / color picker / drag & drop
read -- handling events

drawing (on) the screen(s)

lookat -- draw tool / script / diagram(s) / effect(s) / scribble(s) / paint
read -- drawing lines and curves / tutorial(s)
explore -- display(s) / drawingboard

chart(s) / help / lookat(s) / tutorial(s)

section 4 -- animation(s) & effect(s)

lookat -- garden(s) / bubble(s) / firework(s) / rotation(s)
see -- physics flash animation(s) / animation(s) / advanced animation(s)
explore -- playground(s) / algorithmic visual generator

infamous (cover) flow(s)

lookat -- fish eye(s) / coverflow(s) / book(s)
read -- designing for flex -- guiding with motion
explore -- coverflow(s) / user interface animation
question(s) -- what is missing in the iPhone?

chart(s) / help / lookat(s) / tutorial(s)

section 5 -- graphics & bitmaps

lookat -- mask(s) / ascii art / scrap book image(s) / led(s) / iso metric(s) / filter(s)
read -- using the drawing API / available display filters
explore -- filter workbench / selection(s) / example(s)
let it -- rain / snow / burn: (media|create)

distortion(s) & visualisation(s)

lookat -- distortion lab / media cube / perlin landscape(s)
read -- flex graphic trick(s) / blending
explore -- flex graphic component(s)

filter(s) & shader(s)

lookat -- alien(s) / lady in red / selection(s)
read -- convolution matrix
explore -- crystal(s) / hypno(s) / plane(s) / tunnel(s) / vortex

chart(s) / help / lookat(s) / tutorial(s)

section 6 -- sound & visualizations

lookat -- sound explorer / wave(s) / flower(s)
read -- working with sound

chart(s) / help / lookat(s) / tutorial(s)

section 7 -- organize (y)our code

lookat -- object(s) / component(s) / template(s) / code(s)
read -- creating flex components / livedoc(s)
explore -- selection(s) / editor(s)
try -- iframe(s) / bridge(s) / wii: actionpaint (documentation/code)

chart(s) / help / lookat(s) / tutorial(s)

section 8 -- libraries & frameworks

lookat -- student(s) / lib(s) / material(s) / philosopher(s) / roamer(s) / game(s)
read -- about
explore -- google map(s) / declarative graphics

chart(s) / help / lookat(s) / tutorial(s)

section 9 -- wrap up(s)

lookat -- flex.org/showcase / www.gotoandlearn.com
read -- designing for flex / extra(s) / math game(s)
explore -- replay(s)

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.

tutorial(s) -- flex/as3

material(s) / actionscript / animation(s) / example(s)

section(s) -- 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('tutorial-flex-sections'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 0 -- getting started

section 0 -- getting started

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-0'); if (!slidemode) document.write('.html');document.write('>');

course(s) -- multimedia authoring / interactive visualization

multimedia authoring / interactive visualization

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-0-why'); if (!slidemode) document.write('.html');document.write('>');

explore, copy & paste, understand, adapt

explore, copy & paste, understand, adapt

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-0-example'); if (!slidemode) document.write('.html');document.write('>');

getting (in) shape(s)

help / getting (in) shape(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-0-tutorial'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 1 -- programming the display

section 1 -- programming the display

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-1'); if (!slidemode) document.write('.html');document.write('>');

compiling with mxmlc / compc / asdoc

compiling with mxmlc / compc / asdoc

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-1-mxmlc'); if (!slidemode) document.write('.html');document.write('>');

setting (y)our style(s)

setting (y)our style(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-1-style'); if (!slidemode) document.write('.html');document.write('>');

creating (the) component(s)

creating (the) component(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-1-components'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 2 -- media & playlists

section 2 -- media & playlists

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-2'); if (!slidemode) document.write('.html');document.write('>');

loading the playlist(s)

loading the playlist(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-2-playlist'); if (!slidemode) document.write('.html');document.write('>');

the powerrail experience

the powerrail experience

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-2-powerrail'); if (!slidemode) document.write('.html');document.write('>');

configuration(s) & parameters

configuration(s) & parameters

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-2-config'); if (!slidemode) document.write('.html');document.write('>');

professional (XML) components

professional (XML) components

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-2-config'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 3 -- handlers & interaction

section 3 -- handlers & interaction

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-3'); if (!slidemode) document.write('.html');document.write('>');

drawing (on) the screen(s)

drawing (on) the screen(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-3-drawing'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 4 -- animation(s) & effect(s)

section 4 -- animation(s) & effect(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-4'); if (!slidemode) document.write('.html');document.write('>');

infamous (cover) flow(s)

infamous (cover) flow(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-4-flow'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 5 -- graphics & bitmaps

section 5 -- graphics & bitmaps

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-5'); if (!slidemode) document.write('.html');document.write('>');

distortion(s) & visualisation(s)

distortion(s) & visualisation(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-5-colors'); if (!slidemode) document.write('.html');document.write('>');

filter(s) & shader(s)

filter(s) & shader(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-5-goodies'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 6 -- sound & visualizations

section 6 -- sound & visualizations

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-6'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 7 -- organize (y)our code

section 7 -- organize (y)our code

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('tutorial-flex.html#slide-'); } document.write('sub-tutorial-flex-7'); if (!slidemode) document.write('.html');document.write('>');

chart(s) / help / lookat(s) / tutorial(s)

section 8 -- libraries & frameworks