shift+control

76design’s blog

Archive for the 'Development' Category

Creating the Next Generation Happy Meal Toy (FITC 2008)

Posted by Brett Tackaberry on April 21st, 2008 Comments Leave a Comment

Speaker: Julian Dolce of Fuel Industries

The session spoke to the development process in creating www.fairiesanddragons.com.

Explore the inevitable challenges working with a highly inter-disciplinary team presents. Learn about the various tools and approaches adopted to ensure a smooth project work flow from conceptual to delivery, on time and within budget.

Challenges and moving from short-cycle projects to long term and high resource projects:

  • Working with a big team
  • Version control
  • Bug logging
  • Testing & Q/A
  • Multiple locales
  • Cross platform development

Step 1: choosing technologies for a desktop app installed from cd. A feature comparison and requirement checklist between Zinc, mProjector, SWF Studio, and AIR. Side bar note: current reservations with AIR are with the requirement of the AIR runtime which really puts up an obstacle for the general public and general accessibility to that platform. Chosen technologies: mProjector, Zinc, InstallBuilder (enable easy and streamlined installation), FDT (flash coding ide) and WPF (windows presentation foundation) for integration into windows platform.

Step 2: Tactics in streamlining production. A couple examples:

  • Automatic nightly builds
  • Image cropper and importer - automatically prepare images
  • JSFL to automate flash processes =

Step 3: Debugging and QA.

  • Use Mantis or Bugzilla
  • Test on low spec machine
  • Check OS configurations. For example, UAC on Vista

Cross platform development:

  • Key elements: folder delimiter, performance of transparent desktop, and build on each separate platform.

Weird "features":

  • Cool OSX trash can feature
  • OSX Icon refresh rate
  • Windows titles could not exceed 8 characters when running off a CD on Windows NT
  • On lower end machines mouse clicks get ignored by the desktop wrapper

FITC ‘08 - Synchronizing Desktop Data with AIR and SQLite

Posted by Steve Lounsbury on April 21st, 2008 Comments Leave a Comment

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

76labs: Now Accepting Payments

Posted by Steve Palmer on August 9th, 2007 Comments 1 Comment

This week I’m on vacation in Vancouver but 76labs is still forging ahead on our secret project. My task this week is to evaluate and compare options for handling payments.

But first, before I jump in, I have a small confession to make. In my delirious excitement last week, I may have claimed that this new product we’re developing is “going to turn the music industry upside down”. While I did acknowledge in that same post — in the next sentence, in fact — that this was a tall claim, I feel a bit like John Lennon after his “bigger than Jesus” remark… minus the backlash, of course. Some colleagues of mine provided me with some sage advice following that hyperrific outburst so all future posts about this product will probably make slightly more modest claims about which industries it may or may not turn upside down.

Alright, got that off my back. Let’s return to our regularly scheduled posting…

At the core of our new project is a subscription model where our customers collect recurring fees from their customers. It’s akin to a consignment shop in some ways. He/she who wields the credit card is buying something from one of our customers. However, the payment is made to us and then we reimburse our customer with their share of the transaction money. Perhaps that sounds complicated, but it’s really not that important at the moment. The bottom line is that we need to accept payments online with credit cards.

In the interest of getting a beta version finished as quickly as possible we’ve decided to steer clear of setting up our own merchant account to process the cards ourselves. Why? Well, on top of not wanting to re-invent the wheel when we don’t have to, it makes sense when we’re starting from a stationary position. Setting up a merchant account is an expensive process and if we can start out using something that’s essentially free, then it probably makes better business sense to focus on squeezing a few more features into the product than building a custom solution for accepting payments.

Once we’d arrived at that conclusion we had a few options to look at:

  1. Amazon’s Flexible Payment Service - came out in beta last week and, like Amazon’s other web services, is geared heavily towards developers. This means that it doesn’t work “out of the box” so to speak and would require a lot of work to integrate it into an existing product. Unfortunately for us, it doesn’t really matter because it’s not available to non-U.S. merchants yet anyways.
  2. Google Checkout - it’s been out for a year and is free (as in, no transaction fees) for the remainder of 2007. It’s rather basic, which makes setup easy but the lack of customization makes it a bit of a drag. Once again, it’s not important because it’s only available to U.S. and U.K. merchants. Score: unusable options 2, Canada 0.
  3. PayPal Standard - the vanilla fudge option. It’s lean but it certainly does the trick: simple to integrate, a trusted brand in the payment industry, and customers don’t need PayPal accounts anymore. What’s the catch? Well, during the checkout process customers get bounced to PayPal’s site to enter their credit card info and then back to your site when they’re done. While it is possible to “skin” the PayPal page to match your own site, it’s still obviously a PayPal page and probably a little jarring to your users’ experience as they navigate through the checkout process. But hey, it’s a free service so it’s hard to complain. If only PayPal offered a paid service that allowed you to really skin their page so that the payment process was completely seamless…
  4. PayPal Pro answers the call. For $20/month you get a turnkey solution that allows customers to stay on your site from start to finish for a totally seamless experience. PayPal Pro basically fixes everything wrong with PayPal standard, and then some. Seem too good to be true? It is, if you’re in Canada. This service is only available to U.S. and U.K. merchants for now.

Until PayPal pro makes its way to Canada, the clear winner for us is PayPal standard. Well, technically it’s the winner because it’s the only option. As Homer once said, “the two sweetest words in the English language: ‘de fault’”. It’s not perfect, but it’s the quickest and easiest way for us to process credit cards.

I didn’t really get into the nitty gritty of comparing per-transaction fees. They’re all pretty competitive in that respect - ranging from roughly 2 to 3% per transaction depending on who you go with and what kind of volume you’re doing.

That’s a real quick and dirty analysis of what’s available (for free or nearly free) to Canadian merchants. Something I didn’t mention above but did weigh heavily on our decision (well, before we recognized how geographically handicapped we were) was scalability. At some point it’s going to become more economical for us to migrate to a merchant account and process the cards ourselves. With bigger volume also comes the need for more infrastructure to handle the volume. Adding in an order-management tool or developing something ourselves would be a lot easier with a merchant account.

When we get to that point we want to make the transition minimum muss’n'fuss. Apart from Amazon, pretty much every option would adapt well to the merchant account model (we’d basically just be filling in the gap in the process occupied by PayPal or Google). Unfortunately Amazon’s solution would require us to do a lot of custom work (well, a lot more than zero which is basically what it would be with PayPal or Google) to communicate with their APIs to integrate it into the purchasing process. That’d be work that we’d pretty much have to toss in the trash if we transitioned to a merchant account.

What’s next? Next week we take the development team’s user-flow diagrams, architecture and wireframes and start on designing the interface for the front end (and back end). Pressure’s on the design team ;)

Let’s get physical: Exploring Environment, Devices and Ambient Interfaces with Flash (FITC 2007)

Posted by Brett Tackaberry on April 24th, 2007 Comments Comments Off

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.

Flashing in public - Flash in public facing user interfaces (FITC 2007)

Posted by Brett Tackaberry on April 23rd, 2007 Comments Comments Off

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.

ActionScript 3.0 and Flash CS3 (FITC 2007)

Posted by Brett Tackaberry on April 22nd, 2007 Comments Comments Off

Speaker: Colin Moock, www.moock.org, the full presentation for ActionScript 3.0 and Flash CS3

Veteran ActionScript educator and author Colin Moock discusses the new links between ActionScript 3.0 code and content created in Flash CS3. Topics covered include the document class, linking symbols to classes, automatically generated classes, accessing on-stage instances from linked classes, and symbol instantiation.

Colin is a regular speaker at FITC and has been for a couple years now. His presentations are always informative and he never fails to humble any self-proclaimed flash guru. Colin’s new book Essential ActionScript 3.0 is due out in early June.

This presentation is particularly timely in light of Adobe’s recent launch (March 27) of Creative Suite 3 which includes Flash CS3 (or the much anticipated Flash 9). Although ActionScript 3 isn’t a new technology (released last summer), there is a lot of new and neat stuff in Flash CS3. For a full review see (P)review of Flash CS3.

A few highlights of the presentation:

  • The mechanics of AS3 is rooted deeply in objected oriented programming. The presentation focuses on the new APIs and changes in actionscript and how the changes affect development.
  • The display API (documentation on Adobe.com) provides control over all shapes, bitmaps, video on the stage. It provides control to draw and move any objects in a movie. Although this isn’t a new concept, the changes in the construction of the language provide a more flexible approach for object oriented programming.
  • A major change in the architecture is the addition of the document object inherent on the root in all flash documents. This simply means the Flash cleans up any non-object-orinetd-programming objects on the timeline and makes them accessible (programmatically) to the root document.
  • Like document object model programming (others include XML, HTML, etc), you can reference document objects with functions such as addChild(), getChildByName().
  • disabling stage instance auto-declaration: [Open File > Publish Settings > Flash > ActionScript Version > Settings] Under Stage, uncheck “Automatically declare stage instances”
  • *** AttachMovie is gone. Attaching a movie to the stage is to be done by creating a new instance of a class (class name is set through linkage of object) - in true OOP form.