Monday, December 18, 2006

"Asking Why" - Neville Brody

Last session of the conference and I chose to hear Neville Brody, a well known designer and artist. He looked tired and slightly edgy. I got the impression that he's good at yelling.

The start of the session was rambling - I really thought I'd blown it coming to this and not going to Mario Klingemann's "Mash Up Baby!". The first half was a bit aimless but as he went on he got more and more interesting. When he hit his typography examples he suddenly lit up and the last quarter was fascinating.

At the start I put my notepad down thinking I wasn't even going to bother making notes. By the end I was scribbling furiously - well after he'd finished talking.

  • If we don't understand the context (which is often social) - we can't understand why we're doing stuff

  • Design is about image and type

    • About story telling

    • Creating emotion

  • Design, like programming is working with limitations, because you're working on something in a context with an end result.

  • Traditional management sphere in an ad agency is an inverted triangle to mirror the corporates who they work with - in order to communicate

    • His company's structure is normal triangle - something which has made communication with corporate customers sometimes difficult.

  • You should fire 1 client per year to keep your ego up

    • So often everyone is terrified of getting fired

    • In UK, clients tend to have an attitude that design services are a supermarket and try and dictate the creativity

    • But working for clients is compromise - as long as you don't sacrifice your ethical or quality standards

  • There are 2 levels in typography

    • The text = content

    • The delivery which often gets overlooked but is very important for visual communication

  • In design/communication there is no objective, only subjective

    • So be honest and give emotion

    • Leave it open-ended, an evolving process

  • Type is a contract between the sender and receiver

    • Contract that a certain config of elements means a certain thing.

    • Once you start playing with that you head into the realm of the abstract

  • Computers have done for type what cameras did for painting, i.e. liberated it

  • Started running out of time big time so started rattling through stuff

  • Too much stuff that looks the same is around these days

    • 100 channels on the TV

    • CD covers

    • Cities

    • High streets

    • Brands

  • Scream the differences

    • Colours

    • Shapes

  • Ask why - remember the context

  • We're under pressure to reply to 100 messages a day, so we become defined by our input and output

  • More spaces in life like TV or the Web are filled with waffle

    • We're so busy that we can't choose and just select from the dross

    • We don't have time to change stuff

    • The need to fill these vast spaces has reduced us from a million colours to 256

  • We're running faster and faster - our lives are filled with fear

    • Fear of losing a client

    • Not hitting a deadline

    • Someone will bomb us

    • Fear of failure

    • Fear of challenging the rules

    • Fear of changing

    • Fear of being different

  • No statements anymore, no risks

    • Because of the danger and fear around, people are terrified to take risks

  • We're forgotten how to be human

    • Need to use the technology we have to touch and enable people

    • Messages need to be more fluid so people change and no just accept it

  • We need to stop being frozen in our tracks and take risks

  • Embrace danger and the input

  • Listen not just broadcast

  • Put real meaning into the phrase "to think different"

  • What next?

    • If we don't risk we won't find out.

"The Power and Problems of Prototyping" - Chris Pelsor

By session 4 on day 3, it definately felt like the conference was easing off. Especially since I'd chosen mainly design-orientated sessions to finish off with.

  • Why prototype - Prototyping gives cheap answers to expensive questions

  • Standard project dilemma - triangle with one of these at the points: fast, cheap, good

    • For each project you only get 2 - you can never have 3

    • Pelsor's Collarary: Reduce the size of elements in your project and you can reduce the discrepancy between these factors

  • Who should prototype? - Ideally a designer and a developer together

  • What is it?

    • Representation of functionality not dependent on words

    • It's a tough one to define

    • Examples

      1. wireframe

      2. mock-up

      3. elemental prototype

      4. fully functional prototype (bad - they've got you to make the final product)

    • Everyone has their own names for these things

    • So most important thing at the start is to "agree on definitions"

  • Create a playbook which is a record of the prototyping and design decisions

  • Cheap and dirty is ok

    • Get it done quick to answer the questions

    • Do it properly later

  • Check out Fuse Generator to do animations

  • Designers and developers have a different goal

    • Designer: create visually unique and beautiful stuff

    • Developer: to do it quickly with no bugs

  • Solving problems:

  • Asked how many people had been in Agile process and hardly anyone raised their hand

    • Prototyping can be weird in the Agile process

    • But it can receive results

    • But you have to be careful that your prototype code doesn't accidently slip into a release by stealth - this would be very bad!

  • Recommended work-flow:

    • Wireframe

    • Mockup

    • Elemental prototype

    • Test/critique

    • Repeat

  • Most common workflow

    • Mockup/designer sketch

    • Elemental prototype/launch

  • Second workflow can be caused by

    • Delivery pressure

    • Lack of understanding by project owners

  • How to avoid this??

    • Keep banging on that this is not production code

    • Stress long-term value

    • "Remember: cheap answers to expensive questions"!

    • Curb their enthusiasm

    • It doesn't have to be right first time - don't get stressed by it

  • Prototyping helps answer (or at least discover) design questions before the hard work starts

  • Non-disclosure agreements (NDA) - how to get round in interview?

    • Basic functionality tasks

    • Nothing to do about what we're doing

    • Discovering if they can come up with solutions quickly

      • Process

      • Workflow

      • Problem solving

  • Motion can be the hardest thing to convey between developer and designer

  • At this point a plonker in the audience started raving about his convoluted textField class and how it did so much blah blah.

  • A lot of this is about trust i.e. prototyping

  • Its about getting involved early in the process to root out those inevitable design problems.

"Photoshop to Flash: Optimizing Pixels and Workflow" - Michael Ninness

Michael Ninness broke the ice by handing out sweets to the crowd to sweeten them up (sorry, the bad joke was mine). He commented on how reserved the Brits were. I think the American speakers at the conference have felt that we're a tough crowd!

  • Aimed to cover 5 things

    1. Layered PSDs into Flash

    2. How Flash handles embedded bitmaps

    3. Loading external bitmaps at runtime

    4. Photoshop to Flash colour issues

    5. Quick image enhancement technique

  • 1. Importing PSDs into Flash

    • Demo-ed doing it straight away. Image looked fine but it was a composite image (i.e. all layers in one)

    • Alternatives:

    • 1. Export layer by layer

      • Duplicate layer to a new file

      • Helps if layers are numbered by depth

      • Imported layers are all put on one layer

      • Select all of this and use Distribute to Layers to spread them about

      • Compositing bottom to top to import correctly

      • But imported files come in with bounding boxes for while pic not just contents of the layer

    • 2. Automate the process

      • File > Scripts > Export Layers to Files - but no PNG (only format for transparencies)

      • But ImageReady has... Export Layers to Files

        • You can optimise each layer separately

        • Layers aren't named - boo!

        • Format is PNG24

        • Bounding boxes are ok

    • 3. Export from ImageReady as a SWF

      • Usually turn off Keep Appearance

      • Choose Lossless 32 (which is actually PNG)

      • No layer names come in - Boo!

    • 4. Plugin from MediaLab - PSD to FLA extension

      • From photoshop - File > Export > PSD to FLA

      • Good bounding boxes

      • Layers named

      • Symbols named

      • No blend modes go across

        • Note them and add the equivalent in flash

      • Clipping layers - clipping mask

        • Narrows the layer to just the contents of that layer

      • You can achieve most stuff with a bit of trickery

    • 2. How Flash handles embedded bitmaps

      • When you bring in a PNG it get exported as a JPEG!

        • Flash doesn't recompress JPEG and GIF

        • But does to PNG

      • JPEG quality slider in Publish Tab effects only PNG!

        • Unless you change the defaults of the image in the library

      • In general, do your JPEG compression in Photoshop

        • Will go out of Flash as they came in

    • 3. Loading external bitmaps at runtime

      • Lots of rookie stuff which, none of which I bothered with...

    • 4. Photoshop to Flash colour issues

      • Flash only has one colour profile: sRGB

      • Photoshop has loads and tends to use Adobe RGB

      • So when file comes into Flash, Flash ignore the colour profile and just uses sRGB

      • When opening a file in Photoshop, always choose to use the embedded colour profile

      • Then copy the file and convery (edit > convert to profile) and choose sRGB

        • You can hardly tell the difference

      • There is also a cross platform Gamma issue

        • PCs show colours darker than Macs

        • You can use View > Proof Setup to show the differences

        • Switch back and forth to check

        • Best way - duplicate files

        • Tile them next to each other

    • 5. Quick image enhancement technique

      • Hold alt key when doing things stops the popup alerts - calls the "Make better" key

      • Resolution doesn't matter - its only for print

      • Its all pixels!

      • When resizing, use Bicubic Sharper (when reducing size)

      • Good to change your preferences so this is the default

      • Best way to sharpen files

        • Make a duplicate layer and add filter HiPass (highlights only the edges)

        • Put the radius to around 2.5

        • Add adjustment layer of overlay (removes the grey)

      • Ctrl-shift-B - autocolour command

        • 90% of the time this will sort out any colour issues (i.e. if its too blue)

"Accessible Flash: Oxymoron?" - Niqui Merret

Niqui Merret's accessibility session saw a big turn out - the Pavilion was almost full and people were packing in even past the start. Its good to see that people are interested in accessibility in regards to Flash. The session was mainly an introduction to the concepts of accessibility and didn't really go into the murky depths of Flash accessibility.

I was pretty disappointed that the problem with tab order going crazy in a Flash movie when MSAA is active wasn't mentioned. This is an undocumented issue which I'm sure vexes many people trying to make accessible Flash movies. I'm going to try and get a tutorial up on this blog soon explaining how its works and how to make it work properly.

But for now, my notes on Niqui's session...

  • Show of hands for people who had tested with disabled users and also tested their flash apps on screenreaders was impressive.

  • Target?

    • Accessibility is for everyone or

    • Accessibility is for people with disabilities

    • Niqui took it as the later for this talk

  • Why accessibility? - Discrimination is wrong

  • Side benefits

    • Improves general usability

    • Increases support for low literacy

    • Increased support for users with little or no knowledge of the language

    • More potential customers

  • DDA 1995 UK - Part 3: Access to Good and Services

    • This is the key clause

    • "Make reasonable" effort to make site accessible

    • So for a small company it may not be economically viable (or therefore not reasonable) to make their site accessible

    • Big corporates and the government on the other hand have no excuse.

  • Myths of accessibility

    • A text-only site can be truly accessible - MYTH

    • Accessible sites are bland - MYTH

    • Accessibility is expensive - MYTH

    • Accessibility is not possible in Flash - MYTH

    • Clients should choose if a site is accessible or not - MYTH

    • A tool can be used to automate accessibility testing - MYTH

    • Accessibility is only about screenreaders access to the content - MYTH

  • Statistics

    • UK - 8.6 Million registered disabled users (14%) - source DRC

    • 2 million users have a sight problem - source RNIB

    • 9% of pop with colour blindness

    • 3.4 million can't use standard mouse, keyboard and screen setup without difficulty

    • 12 million users aged over 60 (so more chance of a disability)

    • Companies are potentially losing £50-60 billion pounds of revenue a year from disabled users

  • Which screenreader should you optimise for?

    • Tough one to call

    • Look at what is most used in the community

    • WindowsEyes and JAWS are a good starting point (Ed note: every test I've done with Hal has handled Flash content very badly. I'd recommend not using it as your baseline)

  • Forcing a screnreader to start reading a page again

    • Apparently can be done by switching to another frame - (Ed note: I haven't tested this to see if it works categorically)

  • MSAA

    • Current Flash accessibility is dependent on MSAA - so is only available on a PC

    • Would be great if Adobe supported Apple Voiceover which is supposedly good and free

      • But which only came out in last version of OS so can't blame them for not (Ed note: I doubt unless the Mac version is using something like MSAA that this will happen anytime soon)

    • No standards for screenreaders so it is difficult for product creators to support them all in the same way

  • Pushed SWFObject again but no one has mentioned that same problem - no JavaScript enabled = no Flash, even if they have a valid Flash Player

  • I realise at this point that the guy in front of me smells really bad

  • Raised idea of an audio brand (a quick and unobtrusive jingle) to differentiate your site

    • Example:

    • Ed note: Could be really annoying for non-screenreader users. Could use a 1 pixel flash movie to detect if a screenreader is present and play the jingle only if it is

  • Dyslexics with Scoptic sensitivity syndrome struggle with too much contrast

    • Best to have high contrast as an option, not as a default

    • Ed note: Nice example demonstrated how accepted "standards" for accessibility can actually be deceiving

"Flash in a Web 2.0 World" - Geoff Stearns

The last day of Flash on the Beach. First up, Geoff Stearns from New York with a cracking session...

  • Invented SWFObject for embedding Flash

  • What is Web 2.0

    • State of mind, not a specific technology

    • Easy way for people who "get it" to talk shop

    • Using technology available to you in the best way possible

  • Flash 2.0 - he used the term very tongue-in-cheek

    • No intro

    • Flash as style and behaviour (XML/database as content)

    • Flash video

    • Progressive enhancement

    • SWFObject (Detecting flash/flash version)

    • Using flash what it is good for

      • Remember, its not always the best tool for the job

  • Philosophy of Web 2.0 (or one of them anyway)

    • Use progressive enhancement

      • Content HTML

      • Style CSS

      • Behaviour JavaScript

    • Flash can be all 3 - where does it fit in?

    • Flash as a Web 2.0 technology

      • 1. Separate content from the behaviour

      • 2. Use progressive enhancement

      • 3. Recreate basic browser functions

      • 4. Only use it when you need it

  • 2. Progressive Enhancement

    • Build HTML version and/or upgrade message

  • 3. Browser functions

    • Provide back button and browser linking

    • Don't break searchability

    • Tools to do this

      • SWFAddress

      • StateManager

    • Users JavaScript to update URL and back button

      • Needs Flash 8 and JavaScript

      • Not just for flash - Can also be used for Ajax

  • 4. Only use it when you need to

    • Don't be stupid!

  • HUF Technique - HTML Under Flash

    • Build HTML first

    • Then add Flash

    • Google gets HTML

    • User gets Flash

    • About providing alternate content

  • SEO

    • Google can read swfs but why would you want it to as there's no content in them.

    • Want Google to index your HTML content

    • HUF Technique + "Crawl Pages" = SEO for your site

  • Into the future - we need:

    • Browser makers need to fix <object> tag

    • Built in plugin version detection

    • Really need to sort out plugins in browsers

      • Working group or something like for HTML and CSS

  • Progressive Enhancement applies to Flash more for content rather than applications

  • To avoid having to duplicate content its good to generate HTML using include

    • Content in the XML can be XHTML

  • Bugger with SWFObject is that you can't use it if you want users with JavaScript off but Flash on to get content - it seems silly to lock out these users (example could be a corporate or school)

  • Links

"Flash Lite 2" - Richard Leggett

For my last session of day 2, I caught Richard Leggett on Flash Lite 2, Flash's mobile phone platform.

  • Good resource -

  • Has a book coming out "Flash Applications for Mobile Devices"

  • What is FlashLite 2?

    • Flash 7 Player + extra functionality (i.e. backlight, vibrate, signal strength)

    • Bundled with phones (Nokia, Sony Ericson)

    • Create with Flash 8/9, Adobe Device Central + a few IDE updates

  • New in 2.0

    • AS2 Classes

    • XML/LoadVars

    • Video/Audio (mp4, 3gp, midi, gif)

    • Colour object and drawing API

    • Major text improvements

      • HTML

      • TextFormats

    • Text metrics (_height)

    • Local (Mobile) SharedObjects (MSO) - work differently from desktop

    • Depth sorting - better control over screen elements and positioning

  • V2.1 (released recently)

    • Inline text inputs

    • XMLSocket

  • Content types - what is it good for?

    • Screensavers

    • Backgrounds

    • Animated ringtones

    • Browser content

    • Standalone apps/games

  • Mobile applications

    • Remember the device you are designing for

    • Users tend to want "productivity" or "life" tools

    • Users expect stuff to just work

  • Good ideas for mobile games

    • Keep them simple

    • Action games - difficult to pull off

    • Strategy/RPG - great, use MSOs to save progress

    • Sport - simulations are no good, but strategy (i.e. football manager) is good

    • Skill - can work well

    • Multi-player - yet to be proven

  • Structure

    • Simple - timeline based

      • Rapid

      • Good for small projects

    • More complex - Pure AS2

    • Both have pros & cons and it depends on budget

  • No keyUp event so movement is constant

  • Re-use graphics to cut down overhead

  • KISS - Keep it Simple Stupid!

  • 16fps is the new 31fps - good speed for phones

  • _focusRect = false - gets rid of yellow tab state

  • Fscommand2("SetSoftKeys", "", "exit")

    • Sets the keys under the screen

  • ExtendedKeyClass - SOFT1-15 for different keys on phone

  • Video formats -

    • System.capabilities.VideoMIMEType (or something to that effect - missed the actual syntax)

    • Video can stream (from Real Media Server)

    • Can be local

    • http:// getURL()

  • SMS

    • Really easy to do

    • Instead of mailto: use sms:

    • Pops open message editor

  • SUSHI XMLSocket

    • Is good for FlashLite2 multi-user stuff

    • Helps minimise data

    • Polling wastes a lot of data but is necessary in FlashLite 1 (but not FL2)

  • General note - its good to put attachMovie linkage in a static property so you get an error thrown if you get it wrong

  • Bandwidth is expensive

    • Do everything to reduce amount of data being passed about

    • Put config in the SWF to save data overhead in loading an extra file

  • Future of FlashLite

    • Convergence - FlashLite extends desktop onto the mobile

    • Hardware is speeding up

    • Bandwidth costs are going down

    • Controls - are always going to be an issue (i.e. 1 button games will always be good on mobiles)

"Ajax: Flash Killer?" - Jeremy Keith

Jeremy Keith preparing for Ajax: Flash Killer?

Over to the Pavilion for Jeremy Keiths Ajax session...

  • Short version - Is Ajax a Flash Killer - NO!

  • Long version...

  • Ajax was coined by Jesse James Garret to describe existing technologies

  • Buzzword

    • Sounds cool

    • Myth based

    • Has the letter x in it

    • Gets associated with web 2.0 along with rss etc (Note: he refused to say "web 2.0" - only inferred it)

  • What is it?

    • XML is not necessarily intrinsic to it

    • Javascript is integral

    • Asynchronous is the key

      • Server sends bits to you as you're interacting with the page on browser

      • Result is an apparent increase in speed

    • If traditional web was letter writing, Ajax is instance messaging - Didn't catch who he was quoting here.

    • His def: Ajax is a way of communicating with the server without refreshing the page

  • XMLHttpRequest - not snappy enough for buzzword

    • Been around since IE5

    • Invented by Microsoft

    • Mozilla, Opera and Safari eventually took it on

    • W3C is turning it into a standard

    • Samples

  • Diagram of a line. The far left end of the line represents basic, HTML documents. The far right of the line represents full-blown web applications

    • Ajax is useful at the left of the slider, less useful at the right

    • Flash is opposite

  • Principle of Progressive enhancements

    • Positive spin on degrading gracefully

  • Workflow

    • 1. Start with content which is semantically structured (HTML)

    • 2. Add presentation layer (CSS)

    • 3. Add behaviour (AJAX)

    • Take away any layer and it still degrades down to the last layer and works/content is viewable

  • New term - Hijax

    • Termed by Jeremy Keith

    • Workflow

      • Build your application old-fashioned way

      • Get completely working with conventional calls

      • Then use JavaScript to hijack calls and replace with XMLHttpRequest

    • So when something goes wrong - app still works

    • Not many people doing it this way

    • If you can't apply progressive enhancement then you've crossed the line - Ajax is no good - use Flash

  • Pattern recognition

    • Do small stuff with Ajax

      • Logon feedback

      • Add to cart

      • Rate this

      • Add a comment

  • The alternative to progressive enhancement is the Plugin

    • If you're going to cross a technological boundary (i.e. user must have JavaScript) then go for a boundary which is a rich experience (Flash)

    • When?

      • Widgets (i.e. sliders)

      • Audio/video

      • Image manipulation

    • Choose best tool for the job - ask: "Why am I doing this?"

  • Design challenges

    • Not letting technology get out of control

    • Keeping the user at the core

    • This is something Flash devs have been doing for years

  • Beyond the Browser

    • Ajax screws back button and bookmark

    • Something that Flash has had to deal with for years

    • If bookmark of back button doesn't work and needs to, then you're changing too much of the page!!!

    • User feedback for clicks - need to tell user what is happening (i.e. load bar)

    • What happened feedback for user

      • Let people know what changed

      • Conventions

        • Yellow fade (

        • Visual effects

  • What is good design?

    • "Being able to justify every pixel" lookup author

    • Why does it do that?

    • User testing!!

  • Accessibility - Ajax has really bad accessibility

    • Ajax can't pick up if a screenreader (SR) is present

    • Myth that SRs don't do JavaScript

    • They do part of JavaScript

    • So instead of locking out all JavaScript func and dropping down to presentation layer - it tries to do it and screws up

  • Answer? Flash + Ajax

    • Use a Flash movie (1px) to detect if a screenreader is present and then tell the Ajax via a JavaScript method

    • Analogy was Flash Gordon movie: together Flash and Ajax (Gordon's spaceship) combined to kill Ming the Merciless ;)Ming the Merciless impaled on the spike of Flash Gordon's spaceship

  • His DOM Scripting book looks really good

  • Numbers for Ajax enabled browsers is hard as different factors

    • JavaScript enabled

    • XMLHttpRequest in IE5/6 is activeX control so activeX needs to be enabled

"Actionscript 3.0 Design Patterns" - Joey Lott

Joey Lott preparing for his session at FOTB

An eagerly awaited session as Joey has basically written the book(s) on ActionScript. I was surprised by how young he was. Cool jersey by the way Joey!

  • This session won't be entertaining or funny. It will be dry, we'll cover a lot of ground and there'll be a lot of code in it.

  • What are design patterns?

    • Elegant solutions to common problems

    • Guidelines

    • Shared language

  • Why use design patterns?

    • Don't reinvent the wheel

    • Work smarter and faster

    • Communicate more efficiently

  • "Design Patterns: Elements of Reusable Design" - recommended book as a starting place for design patterns

  • Pitfalls of using Design Patterns

    • Designpatternitis

      • Turning apps into design pattern stew

      • Using patterns inappropriately for the sake of it

    • Over-complication

    • Inflexibility

  • Important Fundamentals of Design Patterns

    • Programming to an interface/polymorphism

    • Understanding abstract classes

    • Using inheritance and composition

    • Architecture 101

      • Discreet groupings

      • Keep to 1-3 responsibilities for a class

  • 1. MVC - Model Viewer Control pattern

    • Remove data from representation of the data and again from the control of the data

    • Model - just store data

    • View - displays it

    • Control - allows different views

  • 2. Singleton pattern

    • One managed instance of a class in your app

    • Creating it as a public static and gets it from class using public static method

    • Constructor never called from outside class

    • Can force this using an internal "enforcer" class

  • 3. Iterator

    • Puts all the iterative processing behind an interface to force a it be done the same way - forces a common language

    • So if you want to do something different (i.e. get stuff in reverse) create a new iterator which also uses the interface so commands called are all the same

    • Iterator can then be swapped out at runtime without breaking!

  • 4. Command

    • Similar but for commands

    • E.g.

      • ICommand - execute()

      • IRedoableCommand - redo()

      • IUndoableCommand - undo()

    • Keep history (call stack of instances) and just call undo() in each - simple and easy!

  • 5. Memento

    • Missed most of this as dropped my pen and spent most of the time on the floor looking for it - eventually remember another one in my coat pocket!

    • Made up of...

      • Originator

      • Caretaker

      • Memento

    • E.g.

      • Memento tells radius and colour of circle

      • Originator - creates circle object and gets rad and col from the memento

      • Caretaker - main class, instantiates the originator with the memento values

    • This is a bit muddled because of the pen incident

  • 6. Decorator

    • Allows permutations

    • Put decorators on the top of each other to keep extending them

    • Decorators can be a direct inheritance or creating using an abstract class in a real object and passing it into different decorators and getting a modified one in return (this sounds a bit muddled but his example was ace)

      • Shape (abstract) > Circle (shape) > Blue (deco) > Bevel (deco) > Size (deco)

      • MyBevel = new BevelClass(myShape);

    • His book sounds good: "Advanced ActionScript 3 with Design Patterns"

"The Devil is in the Details" - Mike Jones (Flex Components)

Mike Jones speaking about Flex components

Day 2 of Flash on the Beach. The weather was crazy - balmy yet windy with sweeping showers. You arrived as if you've walked out of the Singaporean rainy season, damp with both rain and sweat.

First up for the day was Mike Jones to talk about Flex components...

  • AS3/Flex 2 components - the architecture now works!

  • Create and extend with MXML or AS

  • Core methods

    • Constructor() - replaces init()

    • createChildren() - same as before, instantiate children

    • measure()

      • replaces size()

      • calling measure() or invalidateSize() won't necessarily size

    • updateDisplayList() - replaces draw()

    • targetChrome()

      • deals with the chrome around containers

      • doesn't effect anything in it (i.e. the panel)

    • commitChanges() - if you change anything, this will do changes on the next frame

  • To implement the components, you declare a namespace in the MX:Application tag

    • Lists path to the package

    • Its bits and bobs are now available in the intellisense

  • Next step is to allow users to manipulate

    • Main metadata tags

      • [Bindable]

        • Is equivalent of [Bindable(event="propertyChange")]

        • [Bindable(event="FCChangeEvent")]

          • For custom events

          • Create your own event class to handle this

        • [Inspectable]

          • Same as AS2

          • Few extra properties (incl category)

        • [Event]

          • [Event(name="FGClickEvent", type="")]

          • May want to make a public static

            • Helps assist avoiding code spaghetti and is easy to change

          • Events also

            • Bubble!

            • Can be cancelled

  • Customising components

    • Inherit, composite or customise?

    • Overriding methods

      • invalidateDisplayList()

      • invalidateProperties()

      • invalidateSize()

        • Calls the redraw but doesn't notify parent

  • IMXML Object

    • Can create a bespoke component

    • Has one public method called initialized()

    • Can't create in the IDE

      • Create any other component type in the IDE

      • Change by hand to type <mx:Object>

    • Method receives 2 params Initalized(document:Object, id:String)

  • A few components are different from traditional components

    • One is IMXMLObject (above)

    • Another is Template component

    • Based on UIComponent or IDDeferredInstance

    • You can restrict parts of it and what can be in it
      • E.g. restrict to only buttons can be in it

    • Throws an exception in IDE and at runtime if this restriction is broken

  • IDeferredInstance is different

    • Slightly different syntax in how you restrict

    • Bit more flexible as it can be modified on the fly

  • Detail - Documents, Samples and Source

    • Assume no prior knowledge by the user of your component

    • Just because it makes sense to you, doesn't mean it will make sense to your users

    • Samples give a chance for you to catch bugs before it goes out

    • Keep it clear and simple

    • Treat every component as a black box

    • Try to provide some sort of context

      • Clear and transparent naming

    • ..args allows any length of args (check this)

  • Packaging your components

    • Still SWCs

    • Create with Flex library project

      • Dump all code and assets into directories

    • If compiling from the command line - needs a manifest.xml (eek!)

    • Go into classes in properties and do it that way - automatically compiles them
      • You can choose library paths, asset by asset

    • Best way to distribute is SWC

    • Creating a SWC and adding it to design is how you get live preview

    • SWCs are zip based

  • Add a bit of polish

    • Custom icon [IconFile ... ]

    • 18x18 PNG file

"Create Unique User Experiences with Custom Flex Components" - Mark Anders

Mark Anders, one of Adobe's Senior Principal Scientists (Adobe knows how to come up with job titles), came on to carry on where Tink left off with the Flex seminar. I felt his main purpose was to challenge the preconception that Flex applications are aesthetically boring. He did this by creating a Flex app which looked like something from Apple (who are of course reknown for their strong design).

You definately got the impression that Flex was an amazing tool which hadn't penetrated enough into the community to produce real showcase sites. I think this will change very quickly in the next 6 months.

  • The sample Mark used can be viewed here:

  • Took through hierarchy of objects

    • DisplayObjects

      • Low level

      • Shapes - vector

      • Sprites - group of shapes

      • Bitmaps

      • Can't be used in containers

      • But can be used inside Flex components

    • UIComponent

      • Does core functionality - "Work horse of Flex"

      • Can only go inside other UIComponents

      • Can contain DisplayObjects

    • Containers

      • Does higher level logic to layout UIComponents (i.e. scrolling)

      • Canvas Container is not the best place to do drawing (badly named!!) - use it for layout

      • Containers can only contain UIComponents

      • UIComponents only inside UI

      • DisplayObjects only in UIComponents

  • Flex's components rendering is managed by the LayoutManager

    • Redraw is called in function updateDisplayList()

    • To call a redraw, call invalidateDisplayList()

    • All drawing should be done in updateDisplayList()

  • Flash and Flex have a different idea of size

    • Flex has several

      • Measured size (how big it wants to be)

      • Explicit size (it must be this size!)

      • Percentage size

      • Actual size

    • Lots of different methods around this

    • Flex sizing and measurement also managed by LayoutManager

    • invalidateSize() - informs the parent that the size has changed (so layout can update)

  • DataProviders

    1. Arrays and XMLLists

      • Fast

      • No change event support

      • Best for quick and dirty manipulation of small lists

    2. IList

      • Support random index based choosing

      • Dispatches event notification on change

      • Good middle ground

    3. ICollection

      • Powerful but heavy

      • Missed most of what he said on this!

  • ItemRenderer

    • This is the factory which can generate as many instances as we need

    • Mx.core.ifactory

    • invalidateProperties()

      • calls commitProperties()

      • another generic function to do stuff

  • Has pre-defined animation primitives

    • Transitions between states

      • Move

      • Resize

      • Zoom

      • Rotation

    • Higher level animation

      • Parallel

      • Sequence

    • Animate property available for everything else

  • Animation can also be scripted and MXML or AS

  • HistoryManager - I saw this in his code but we didn't touch on it - what is it!!??

"Memo to the CEO" - Aral Balkan

Aral Balkan came onto the stage bursting with energy, almost like a short Tony Robbins and started hitting us with great one-liner quotes about software development. He went on to talk about traditional software development methods and the benefits and drawbacks of using Agile methodologies to replace them.

Here are my notes:

  • About 50-70% of IT projects fail (data was a bit outdated but its still bloody high!)

  • General trend of not gathering usability and accessibility requirements

    • Hardly anyone put their hands up when this was asked - scary!

  • Development can be super stressful: stress = unhappiness

  • Failure has become the norm in our industry

  • Usual, typical, standard = failure

  • Software development is about managing risk

  • High risk approaches - waterfall process

  • He went on to produce a brilliant piss-take about the waterfall process - I wish I'd video-ed it!

  • Waterfall assumes that there's an end to the development process

    • The moment you stop developing your software is DEAD

    • To keep momentum you need to keep evolving

    • It's a process of refinement

  • Low risk approaches-

    • Evolutionary

    • N-shot (i.e. iterative)

    • Outside-in

  • Possible solution - Agile methodologies

  • Stories - must be non-technical

  • Tasks - stories broken up to answer the technical

  • Mentioned adding more people doesn't help [Ed note: reference to the Mythical Man Month]

    • More communication - more complexity

  • Flag dependencies to the customer at the planning game

  • Complexity is not your friend

    • Keep it simple stupid!

  • Complexity happens, simplicity you have to strive for

  • The Truck Factor - what would you do if one of your developers got hit by a truck tomorrow. Would you project would be screwed?

  • Bug tracker - remove feature request category - simplify it - just have stories

  • Links

  • Customer is central to the development process - but what about the user?

  • Respect user effort

  • Usability approach to accessibility

    • Not checkbox accessibility

  • Common sense is a dangerous myth

    • Can't rely on common sense - all bad design decisions can be traced back to common sense

    • The test: Does your user accept it?

  • XP - customer may accept but if user does not then it's a failure

  • User testing in development - do it!!

  • UI is a competitive advantage

  • UCDP - User centred development process

  • There are pros and cons to having a domain expert (i.e. usability expert) on your team

    • Make sure they're not involved in user testing as they're too deep (ed note: unless you've got no one else of course)

  • No test = religious debates - i.e. you can't prove something works or doesn't work for a user unless you test it!

  • Recommended Steve Krug "Don't Make Me Think"

Unfortunately Aral ran out of time and had to hurry to finish. This was a shame as I would've liked to hear more about his closing points. All in all, this was a very engaging seminar.

"Understanding Apollo" - Mike Chambers

Mike Chambers, the Senior Product Manager for Developer Relations, gave us the lowdown on one of Adobe's exciting new products for 2006: Apollo, a run-time engine which will bring rich internet applications and Flash applications to the desktop.

  • Not a general application framework - focussed on RIA feature set

  • Install size for the RTE is aimed to be around 5-9mb

  • Aim is to eventually be cross device as well as cross platform - in future Apollo will go to devices

  • HTML engine is webkit

    • Open source

    • Safari

    • HTML is fully integrated

    • Really makes content format independent (Ed note)

  • Plugins within HTML

    • Some will - initially Flash, PDF

    • 2 different ways to do Flash

      1. Object embed - uses default player version on the user's machine

      2. Another way will use Apollo's built-in player

    • No Quicktime or WMV yet

  • Synchronous or Asynchronous loading

    • So loading smaller files will be automatic (configs etc)

  • Apollo apps have to feel like accepted desktop applications

    • So standard desktop functionality is a given

    • Includes system level notification events (bouncing toolbar in the mc/bubble menu bar alert in windows)

  • AS & JS interaction at a low level - i.e. seamless interaction between the two, including passing whole objects

  • Install options

    • 1. AIR file - installation bundle (ZIP based format) - requires Apollo RTE to already be installed

    • 2. Native installer - create win or Mac installer

    • Checks for Apollo

    • If not there, installs Apollo, then application

    • 3. Web install - click on a link - if no Apollo it'll prompt to install RTE and then app

  • All applications have a application XML which defines metadata for app

  • Full control over the app chrome

  • Timeline for release - early 2007 (labs), v1.0 sometime 2nd half of 2007

  • Apollo info:


    • (Apollo smart category - aggregates)

  • You'll be able to go full screen and push to selected monitors if more than one available

  • Security model

    • In development so couldn't say too much

    • Aim to have different "sandboxes"

  • An Apollo app can be installed from a CD-ROM but won't run from a CD-ROM - big distinction - maybe SWFKit ain't going to go out of business after all

  • Aiming to have framework APIs to take the grunt work out of common functionality, i.e. file saving, online/offline syncing and caching

  • Admin rights to install on Win - you may need admin rights to install the RTE. You won't to install apps (he couldn't be definitive on this as its still in dev)

  • Aiming to make dynamic updates to apps possible!

  • Benefits over similar technologies such as WPF

    • Leverage over web technologies

    • Cross-platform support

  • But its not for everyone - some reqs may make WPF a better options

Tuesday, December 05, 2006

“Introduction to Flex 2.0 for Flash Developers” - Tink

Tink on stage at FOTB

First session after the keynote speech and Tink had a big turn out for the Flex introduction.

He had a lot of ground to cover to introduce the product. I found about the first half you can learn yourself from the introduction to Flex in the FlexBuilder help files. But once he got onto the more complicated stuff, it was much more interesting and whetted the appetite for the later Flex sessions in the conference.

Here's what I noted down about what he said:

  • Flex SDK - its free and you can use any text/XML editor (i.e. FlashDevelop)

    • Or get FlexBuilder

  • Components

  • Metadata tags

    • i.e. [Bindable]

  • Events - if (text == “tink”) ? CustomEvent.Match() : CustomEvent.NoMatch()

  • Intelli-sense will pick up your own events etc - finally!!!

  • Started a bit slow but as he passed the basics its got more interesting

  • You can embed a specific symbol from a swf using the [Embed] tag

    • Allows you to use swfs as asset repositories

  • Everything in Flex (in the MXML) is public, no private or protected stuff

  • Flash Player 9 is required - so imperative of the client is relevant here.

  • AS2 components are useless - all legacy components will need to be re-factored

  • Skinning - every skin has a class which can be customised to have custom graphics

  • General flow - roll with Flex - if you fight it its just painful

  • Don't be fooled into thinking everything needs to look the same in Flash - it can be dynamic

Files for the sessions examples can be found at:

Keynote Speech - Mike Downey - “Flash and the Adobe Engagement Platform”

The main hall of the Brighton Dome Theatre

The laptop shoulder-bag festooned crowds filed into the dimly lit Brighton Dome Theatre.

By the time it settled down, it looked like maybe 200-300 people were in attendance.

Mike started by covering highlights from 2006:

  • Flash Player 9 penetration is growing

  • Flash Video is becoming web standard

  • Mobile uptake growing

He then went on to talk about things to look forward to in 2007...

  • Adobe Device Control

    • Authoring application for mobiles

    • Release 2007

    • Based on Flash 8 IDE but will run as a standalone

    • Hard core emulator

    • Every device that can host Flash will be available in the emulator

    • This will be updated dynamically as Adobe's database increases

    • You can save sets of devices so you can use a common testing rig

    • Testing individual devices

      • Memory taken up shown

      • Screen size

      • Helps optimise the application

      • Control backlight

      • Reflections, gamma, colour

      • Language, timezone, time

      • Battery level

      • Network type and speed

  • Mark Anders came on to talk about Flex:

    • Flex itself is free - Flex SDK

    • Flex Developer costs the cash

    • Demos were impressive but we go more into that in later sessions

  • Mike Chambers came on to talk about Apollo:

    • Not a general desktop application runtime - specifically designed for RIAs

    • No worries about platform as Apollo completely abstracts that away

    • Can work online/offline with syncing

    • Full HTML integration

  • Flash 9 IDE!

    • Import PSDs and Illustrator files

      • Maintains layers

      • Import process allows you to assign folders, create movieclips and assign instance names

    • Bezier pen tool is now the same as in Illustrator

    • New set of components written from scratch in a new component structure.

      • Cuts the component size in half (at least)

      • Makes them easy to skin

    • Double-click on a component on the desktop and it goes into “component editing mode”

      • Displays all states as mcs

      • Go into each mc and edit

      • Live preview of your changes on the stage

  • All assets for components an library

  • Different style needed - just duplicate the assets and change the duplicate

  • Can convert animations into AS3 (XML)

    • Put generated XML into a frame, movieclip or into Flex

General Disclaimer for Notes from Sessions

Please note, that my posts summarising sessions are based on my notes which were scribbled onto a notepad in near dark. I may state things here that are partially or completely incorrect. I only also have taken notes about things that have interested me, so vast swathes of the speakers's sessions could be missing. What is written is also my interpretation what the speaker has said - I make it clear when I'm actually quoting them verbatim.

So don't take it all as gospel. If you spot a mistake, please email me on with the error or leave a comment and I'll fix it ASAP.

Bits and Bobs from Tuesday

  • Joey Lott has broken the PC duck. He's the first speaker I've seen not using a Mac lappy.

  • Re: my query yesterday about Flash Media Server - will this session do the trick “Creating Multiplayer Flash Games”. I won't find out as its at the same time as the Accessibility lecture.

  • I think there's scope for an “eLearning/SCORM and how it relates to Flash” session in the future if this event happens again.

  • Someone has got up and left from every single session I've been to except “Ajax: Flash Killer?”

  • Green pen is useless in the Brighton Dome theatre as its so dark its like writing in invisible ink - use black!

Bits and Bobs from Monday

  • Conference faux pas 1: leaving your phone on by mistake and being the only person in your sessions all day that manages to get a very obvious text message.

  • Conference faux pas 2: sitting the end of the aisle in the Corn Exchange (which has the narrowest foot-room in the whole world) and then everyone being too polite to ask to push through. Result is an almost empty row right in the middle of the theatre. Doh!

  • First proper swearing in a session by a speaker award goes to Aral Balkan.

  • All the speakers in the 5 sessions I went to had Apple Mac Laptops.

  • Microsoft bought everyone free beer for half an hour after the sessions finished. Talk about good PR!

  • Why are there no sessions on Flash Media Server 2 at the conference??

Monday, December 04, 2006

And We're Off...

The Main Foyer of the Brighton Dome Theatre full of people attending FOTB

The first 2 sessions are over. First up was Mike Downey, a big-wig from Adobe, with the keynote speech. He gave an overview of what has happened around Flash this year before going into the new stuff which is coming out soon. And that new stuff looks very exciting - the Adobe Device Centre for developing Flash apps for portable devices, Flex 2 (which has been around for a few months but is now taking off), Apollo for taking Flash to the desktop and, of course, the Flash 9 IDE.

The Flash 9 IDE in particular looks very cool.

For the 2nd session I caught "Introductions to Flex 2.0 for Flash Developers" by Tink, a London based Flash and Flex developer/guru.

As it was an introductory session, I found the first half pretty basic as he had a lot of ground to cover. But when he got to the more complicated stuff in the 2nd half of the presentation, it was much more interesting.

Flex is starting to sort itself out for me in my head and I'm thinking of more and more ways we can use it at work. There's 2 more sessions at the conference about Flex components, so that should hopefully give me some more info and help settle the final pieces in my mental puzzle.

There does seem to be a few obstacles (though not insurmountable by any means of the imagination). These are that old AS2 components are basically useless in Flex - which means a lot of re-factoring of legacy code (and that's a lot of components) and that Flex apps require the Flash Player 9 - which has a current market penetration which isn't suitable for most of our clients. This is changing fast though so I doubt it'll be an issue in 3-6 months time. The first issue will sort itself out given time - once Flash 9 IDE is realised, we'll be developing everything in AS3 anyway.

I'll be typing up my notes later and posting them when they're done. Which means probably not many beers for me tonight!

Up later today: sessions on Apollo, Agile development and more Flex.

Sunday, December 03, 2006

Registration Done

I wandered down to the Corn Exchange this afternoon between manic spells of sideways rain to get in for early registration for FOTB.

A bunch of friendly people greeted me, checked off my name on a list and handed me a bag full enough of free goodies to make even the most hardened and cynical web developer smile.

Free goodies from FOTB - a t-shirt, a bag and loads of other stuff

Its going to be like the scramble for Africa when I bring this stuff back to the office as everyone tries to claim something for not being able to go themselves.

First session kicks off at 9:30am tomorrow...

Saturday, December 02, 2006

Welcome to Brighton

The ornate entrance to the Brighton Dome

Houston, we've landed!

Whenever I visit Brighton, I'm always struck by how cool it is. Its a happening place and the people here know it without being uptight about it like in London. The bars are heaving and pounding out the latest tunes. Fashion is personal expression and you'll see everything from hippy chic to mod rocker to if-Pete-Doherty-was-a-toff all sitting in the same pub. Choosing to have a conference here is a great choice.

I popped down to the Brighton Dome this evening to have a recce. There's no obvious sign of FOTB 06 about to kick off. No signs on walls or anything.

Looking down a dimly lit street towards the Brighton Dome

The early registration kicks off tomorrow. I'm not really sure what its for but I'm guessing its to sign up for the sessions you want to see. The schedule has changed a little since the last post but the general wishlist is the same with only a few minor deviations.

I'll be posting my pics up here: My FOTB06 Flickr set. I'll hopefully update it each evening (if not in the pub between sessions as long as I can sneak some wifi for free off some unsuspecting business).


Andy and I stayed behind in work last week to listen to the Adobe web-seminar about their new desktop RTE, Apollo. It sounds really great and we'll hopefully get a good look at it at FOTB.

Our discussions have raised a few questions which will hopefully get answered during the week...

  • Will Apollo be able to communicate with other applications running on a user's machine? (i.e. Outlook)

  • How will non-administrative logons effect the installation process? (there's been documented Flash Player install quirks from this scenario)

  • What sort of legacy versions of Windows will be supported? (I'm thinking Win98 here)

If you've got anymore questions about Apollo, post them in the comments and I'll do my best to track down the answers this week.

Either way, this new app will causing a few worries for people such as SWFKit and FlashJester who sell products to make Flash more consumable as a desktop application.

That's all until after registration tomorrow.

PS: I was thinking I was the only delegate going from Wales according to the FOTB06 Backnetwork delegate map. But my latest check shows some peeps from BBC Wales in Cardiff coming down too.