The Shape of a Story

Sticky Elemental Snow

What does the shape of a story look like? Does the story progress in a linear fashion? Does it have any loops along the way? Is it a circular plot?

My ultimate goal here is to combine an abstracted visualization of the story with navigation, so that the user can maintain context as they work through the content. In this study, I've represented visual assets by color. So, chapter one is mauve and has a mauve menu icon. Chapter three is red, and so on. We know we're at the right chapter, because it's menu button is the same color as the background. I could have used picture icons for each scene, but using colors seemed a lot more simple and abstract to me.

I've written a silly little story that can be presented with either a linear or circular progression, just to help illusrate the concept. It's very much still a work in progress.

Where's the Code?

In this piece, I've decided to go back to what first made Flash amazing: the ability to combine visual assets in the Flash authoring environment with a little timeline code. In this case, I'm applying navigation control to the elements in the plot visualization.

By giving my menu buttons names like "step1", "step2", ..."step" + n, I've made it very easy to apply code to each symbol from a single framed code segment. Nothing revolutionary here.

// number of buttons in navigation menu
var countMax = 12;

//assign step property and event listener to each menu item
for(var i=1; i<=countMax; i++){
   var item = navMenu.diagram.getChildByName("step" + i);
   item.step = i;
   item.addEventListener(MouseEvent.MOUSE_UP, clicked);
}

// navigate to appropriate frame for this menu item
function clicked(event:MouseEvent):void {
   gotoAndStop(event.target.step);
}

 

Source?

Coming soon.

 



Click on the color boxes to progress through the story lines.