Live blogging presentation by Sean Voisen

To develop with AIR you need to know AS3. AIR has a built in SQLite database and you can use it to store data on the client.

You can synchronize data with the client so that you can use that data while offline. This leads to faster startup times, making things easily exportable and makes working with large datasets easier.

There are a few sync strategies:

• Manual Sync
  • good for small amounts of data, requires a button to be pushed, easy to implement, but user can forget to do it.
• Background sync
  • user doesn’t need to know about it, uses a timer, server can push data to the client (AIR tech: Livecycle data services)

Question you need to answer: who is the master, the client or server? You need to know who to trust when data collide.

Design of your code is important, aka Design Patterns (yeah man!)

Design Pattern: Brett Rampata, Adobe XD: gives the user a nice heads up view and can use both manual and background sync, shows connection availability.

Update: Link to Brett Rampata’s design pattern from above.

Demo of Paypal Desktop AIR App.

Demo of Paypal Desktop AIR App. 2.5 months of development time (one dev, one designer)

SQLite

• embedded database, stored in a single flat file, supports views, transactions and triggers
• Adobe added some types to the SQLite db to support AIR app development

AIR and SQLite

• supports synchronous and asynchronous connections.
• synchronous will stop the app while the query returns data.
• asynchronous will run in the background and uses an event listener to let you know when everything is done (nice and clean).
• supports prepared statements and named parameters in queries, and you shouldn’t use string concatenation (nice!)
• better performance over and above string concatenation because AS compiler will cache query and optimize for you.
• supports results paging.

Connection detection in AIR

• AIR will let you know when you have an internet connection available.
• Event will only tell you when things have changed, not if you are connected or not. You have to figure out if the change event means you are connected (ping some site, etc).
• Can use the service monitoring library which will let you know if a URL is available.

Action Script Programming strategies

• Use a DAO to abstract your SQL from your app. They are singletons (only allow one object to exist at a time) which handle the DB interfacing.
• Use “CREATE TABLE IF NOT EXISTS” so that you aren’t destroying your tables on each startup.

Demo “Library” App Available on Sean’s site

Resources:

coenraets.org
peterelst.org
probertson.com
xd.adobe.com

These guys have been blogging since June but I just heard about them today! (thanks Amie)

Aviary is in the midst of releasing a suite of tools for creatives that is entire web-based (yes, web-based!).  If you look at the list of applications they’re working on you’ll see they have an incredible range of products that cover everything from photo editing to video to 3D to music to font editing.  They’ve even got some more business-y tools like a word processor and a distributed file system for storing data. And how could you not love those charming feathered icons?

From the looks of it this is production quality stuff — not just some lame rip of Adobe’s tools.  Check out the examples on their blog to see what’s possible.

I haven’t played with any of them myself (yet) but it looks like they’re all built in Flash.  Very cool!

We recently redesigned the Portrait Gallery of Canada’s website, including a flash exhibition of fascinating collection highlights. Happily, our work was mentioned in an article about the Portrait Gallery in today’s Globe and Mail. The Portrait Gallery doesn’t yet have a new physical home, but we’re pleased that people are noticing its new virtual home.

You can find the Globe and Mail article here. And you can find the Portrait Gallery of Canada website here.

Speaker: Niqui Merret

Contrary to popular belief, making a Flash movie accessible to a wider selection of users does not require cartwheels and back flips. A few basic usability and accessibility considerations can take your movie to the next level and reach a wider audience. The most basic step of embedding a SWF into a page incorrectly could cause a screen-reader to hang.

This session will take a cause and effect look at accessibility covering a selection of common problems and possible solutions. Niqui will cover visual, audio, mobility and cognitive disabilities and demonstrate how Flash can help or hinder access.

Notes:

Any information provided along a timeline should include synchronized text based description such as captions accompanying a video. For exmaple, weebls toons have captions.

Accessibility in the real world: no technology can be 100% accessible to all users. Level accesibility is directly proportional to level of effort put in.

Barriers to accessibility: technology (flash, browser, screen reader), developer (interface designer, programmers, copyrighters). Content developers cause barriers by not being aware of accessibility considerations.

Technology - Flash player interfaces with screen readers and keyboard well. Focus (big yellow box around object) is clear to user and focus is made available and is fed through to assistive technology.

Standards and guidelines? Current documentation is difficult to comprehend and digest. The key is to understand the user - its not a case of understanding rules and guides.

Simple tests. Take away the mouse and attempt to follow similar paths.

Simple disability categories. Visual (vision, colour blindness, etc). Audio (lack or partial). Motor (hands and holding). Cognitive (understanding).

Screen readers. Needs to gain access and report back to assistive technology. Not fully integrated with OS and sometimes unreliable - they are stuck in the middle of a chain of information.

Tips for flash: set the name of buttons; specify the reading order; avoid using wmode(!); and, test with screen reader and Microsoft Active Accessibility 2.0 Software Development Kit Tools. Tab index (found on accessibility panel in flash) is very useful in providing proper experience in flash - note this only applies to dynamic text fields. Flash also provides ability to program shortcuts for elements.

Tip: put tab index right on mockups.

As compared to AJAX, flash accessibility can send screen updates to the screen reader. HTML pages are treated as linear and do not send updates to the screen reader.

Microsoft Active Accessibility Tools allow deveoper to view the screen reader output in realtime.

On windows, OS contrast adjustment does not affect flash movies. On Mac, adjusting contrast settings affects the colours on the screen. Another possibility is to provide accessibility controls that allows the user to adjust the contrast - the flash object in turn adjusts the colour scheme in the movie.

Font size controls in browser do not affect flash movies. However, a particular approach (see Text-Resize Detection), is to listen to when a user adjusts the font size n the browser, and using javascript, pass that information back into the flash movie.

The creators of SWFObject and UFO have are working on SWFfix.

Keep in mind: Progressive enhancement != accessibility.

Also see: Adobe DevNet

Speaker: Craign Swan from CRASH!MEDIA

In recent years Flash has broadened as an Interactive tool offering more than just a platform for animations, websites, games and RIA’s, but a whole new world of Interactive possibilities. Engaging Installations. Alternative Interfaces. Calm Computing. Physical Prototyping. Interactive Environments. Making things and Exploring the User as the Interface.

Craig has been a regular speaker at FITC over the years. He never fails to impress - this year was the best by far. Craig’s presentation covers a lot of ground, and this post doesn’t do it justice, however, here are some notes I scribbled down:

• Flash has an ambient awareness - microphone and camera capabilities provide flash with an awareness of what is happening in its environment. Although, this control has been around for a little while by now, a new suite of tools has increased possibilities. Sophistication is limitless. Many new ideas and possibilities with new tools such as bitmap toolkit and new video tools.
• Interaction with camera enables new interfaces including gesture capturing and more interactive user-interfacing. Use color tracking and mapping objects to colour. Technically, poll the screen for the presence of a colour and perform various procedures depending on location and intensity (or any variable) of colour.
• Input devices. [unfortunately, my notes get more sparse as his presentation goes on] IPAC device, a simple input controller, allows developers to piece together their own interfaces. You can use any type of sensor to generate the simulation of a keypress and in turn capture that event within Flash. PhidgetRFID is an easy to use and easy to integrate RFID reader. Make board, tilio board, controller board allow the designer/developer to create alternate output. Monome 8″x8″ controller is a input/output device that is a 10×10 grid of LEDs that double as an input device. Craig was using this as a video mixing board. MIDI controller with a number of knobs provides a wide range of real time control. Craig was using this to interact with a live video feed in realtime controlling various aspects of colour and timing. Connect to WII controller through bluetooth (max msp).

For examples of Craig’s work, go to the CRASH!MEDIA site and click on “Labs”.   A lot of it is in there. Enjoy.

Speakers: Anthony Eden and Scott Weeks from Snepo

Flash is the ideal technology for public facing user interfaces but few flash developers have had the chance to cut their teeth building complex kiosk applications. Come on a journey to the land of hardware peripherals, exotic software integration and regression testing. The possibilities are endless for flash if you know which tools to use and what lies on the outer extremities of the flash universe.

Presentation description

A few points from the presentation with respect o building interactive systems:

• Touch screen technologies (haptic devices) include: Point-of sales systems, kiosks, iPhone, check in system, etc
• Attract user -> engage user -> educate user-> call to action
• User is constantly aware of where they are in their process (location, state, etc) - important because user may come into appliaction at any time during the process. Users very frequently end part way through an application - set an appropriate timeout.
• Rule of thumb: “fat fingers” - move navigation to bottom of screen - navigation must be obvious - just press: dragging and scrolling is not intuitive and release event is not intuitive either
• Accessibility: plan for limited vision so use big thick fonts; plan for color blindness so use high contrast colours. Be aware of mechanics of using the device.

What worked well:

• Transaction services and xml for storage: provides high service level and is relatively easy to develop.
• JSFL: automation scripting for flash helped to strealine production
• Logging ever single piece of interaction. You are able to track entry and exit points - this provides evidence of points of confusion and where users become frustrated and give up.
• Testing: especially brute force testing - putting the system through any imaginable situation. Example: hire a few computer science interns.
• Remote monitoring: transaction server on kiosk would send heartbeat back to server. Central server would expect hearbeat and can repsond by performing diagnostic and basic support such as restart, reset, clear memory, etc.
• Experimentation!

What didn’t work very well:

• Computationally complex procedures may cause kiosk to slow down and possibly become unresponsive.
• Dying computers and enclosures: ensure mechanical robustness of kiosk.
• Screen calibration: potentially a big issue. Callibration can creep from true state.
• Updating was cumbersome: especially as it pertained to physically loading onto machine.

Upsides:

• Environment: you know your and can define your environment - no browsers or campatibility issues.
• Economics: there is money to be made.