Prototyping

In my earlier post, “Simulated Drag and Drop with Catalyst,” I showed how a horizontal slider could be used to demonstrate some drag-and-drop interactions.  In that case, I showed how a successful (accepted) drop would behave.

There will be cases when you want to demonstrate a failed (rejected) drop.  In this update I’ll show you how simulate a draggable element resetting after it’s been rejected from a drop zone.   This tutorial assumes you’ve set up your file the same way as in the previous example.

What we want to do:

• Create two states–one in which we can drag the slider thumbnail over to the drop zone, and one in which it’s back in its original position
• Be able to repeat the behavior without having the refresh the SWF.

Continue reading →

Over the past weekend, I put together a quick and dirty (and cheesy!) Flash Catalyst prototype, to show off the capabilities of this application to my colleagues.  The end result seemed worth sharing.

Here’s a screenshot of, and link to, “Squirrl,” an imaginary web app for finding and stashing tchotchkes.  Its purpose is to demonstrate PSD > Catalyst import, quick component creation, data lists, and custom/generic components. Though this is a mid-to-low-fidelity prototype, there should be enough to fiddle around with.

Continue reading →

(Check out my follow-up tutorial showing how to simulate a drag-and-drop with a fail/reset state)

Recently, I was asked if I could help someone build a Catalyst prototype to help them demonstrate drag-and-drop functionality.   The current version of Catalyst does not yet support this as one of the built-in interaction types.  But, since my goal is to help my peers get on board with using prototyping tools including Catalyst, I set out to find a way to simulate the nature of drag-and-drop using the tools available in the application.

Ultimately, the simulation had to:

• Allow a piece of artwork to be dragged from one location to another
• Upon release of the artwork, trigger a state that makes it appear as if the artwork has been successfully dropped inside of a zone.
• Allow the artwork to be dragged at an angle (given the setup of my peer’s UI)

After a little investigation, I found that hacking a horizontal slider element would be the best way to achieve these goals. It gives the visual illusion of drag-and-drop, and triggers the “dropped” state upon mouse up of the artwork.

I created this “Trip Packing List” demo to show off the basic idea.  Click and drag the bikini artwork from the “Clothing & Accessories” module and release it (while still holding the mouse cursor over the artwork) when it slides over the empty square in the “Packing List” module.

Continue reading →

I’ve been playing around with ways to simulate rich tooltipping with Flash Catalyst CS5.  I decided to create a prototype around the idea of having a geotagged, map-view showcase of my watercolor paintings from around the world.   In this prototype, I focused on simulating rich tooltips that would contain their own gallery controls to view each location’s artwork, as well as trying to simulate simple tooltips with a datalist element for the large gallery view.

Continue reading →