Archive for December, 2010

Using interactive Flash elements in a Prezi presentation

I made a Prezi presentation about using interactive Flash elements in a Prezi presentation. You will encounter some issues because Prezi will also act on mouse clicks that are meant for interacting with the Flash element. I describe the solution or workaround that I came up with in the Prezi presentation. See it here.

You can download example flash files here (right click to save):

Below you find the code (placed on the timeline) of the wrapper that toggles by typing ‘q’. block_mc is a movieclip that is shown in Prezi mode. It is placed on top of all other layers to prevent that lower layers receive mouse events.


import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.events.Event;

stop();

var preziMode:Boolean;

init();

function init():void {
 // Set up listeners for all events that you don't want to bubble up to Prezi.
 this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler)
 this.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler)
 this.addEventListener(MouseEvent.CLICK, clickHandler);

 if (this.stage) {
 this.stage.addEventListener(KeyboardEvent.KEY_UP, keyboardHandler);
 } else {
 this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
 }

 block_mc.visible = false;
}

function addedToStageHandler(e:Event):void {
 this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
 this.stage.addEventListener(KeyboardEvent.KEY_UP, keyboardHandler);
}

function keyboardHandler(e:KeyboardEvent):void {

 // Test for 'q'
 trace ('Char code: ' + e.charCode);
 if (e.charCode == 113) {
 togglePreziEditMode();
 }
}

function togglePreziEditMode():void {
 block_mc.visible = !preziMode;
 preziMode = !preziMode;
}

function rollOverHandler(event:MouseEvent):void {
 if (preziMode)
 event.stopImmediatePropagation();
}

function rollOutHandler(event:MouseEvent):void {
 if (preziMode)
 event.stopImmediatePropagation();
}

function clickHandler(event:MouseEvent):void {

 if (preziMode) return;

 event.stopImmediatePropagation();
}

11 Comments

Mozilla Open Data Visualization competition

Introduction

You can read about the competition as an introduction.

Or go straight to the visualization.

I started looking at the answers that the Mozilla team was looking for, but at the same time I tried to find what kind of information I would be interested in myself. One of the questions that the Mozilla team wants to be answered is:

Do people who use more tabs use more bookmarks or fewer bookmarks?

Inspired by that question, I was wondering if a lot of people are like me: hording bookmarks but never use them. Or perhaps there are people that diligently structure their bookmarks and by doing so can have their surfing needs satisfied by only selecting bookmarks. And can we identify different bookmarking habits by each age group?

Preprocessing the data

Data per user session

To be able to get a grip on the data I decided to extract the following parameters for each user session. (I define a user session as the user actions between starting up the browser and browser close/crash.):

  • duration (in milliseconds)
  • inactive time (in milliseconds)
  • number of stored bookmarks at browser start up
  • number of bookmark folders at browser start up
  • maximum folder depth at browser start up
  • number of selected bookmarks
  • number of tabs at startup
  • number of windows at startup
  • the event type of the last event (usually ‘browser shutdown’, but this is different if the browser crashes (?))
  • is the browser restarted after a crash

Data per user

Then for each user, I aggregated all sessions to a single record describing for each user:

  • average session time
  • average number of selected bookmarks per hour
  • average number of stored bookmarks at browser start up
  • average number of folders at browser startup
  • average bookmark depth
  • average number of tabs at start up
  • the age group to which the user belongs

Data per number of bookmarks interval

Finally, based on the individual user statistics, I categorized all users into categories that are based on the average number of bookmarks . The categories are power of two intervals, i.e.:

  • 1 bookmark
  • 2 up to 4 bookmarks
  • 4 up to 8 bookmarks
  • 8 up to 16 bookmarks
  • 16 up to 32 bookmarks
  • and so on

Visualizations

People with more bookmarks use more bookmarks

Sounds pretty obvious, but if I look at myself: I do a lot of bookmarking, but (I think) I almost never use them.

Fig. 1

On the horizontal axis we see the number of stored bookmarks. On the vertical axis we see the number of selected bookmarks per hour. Clearly, the line is ascending. There is a big orange bubble in the category 4096 up to 8192 bookmarks. Using the tooltip, we can see that the bubble relates to 3 users. The application gives you the possibility to ignore small groups. By using one of the controls, we can hide all bubbles that correspond to 6 users or less. We then get a different picture. See Fig. 2.

People with more bookmarks have more tabs open at browser start up

The big orange bubble of Fig. 1 is filtered out and the remaining bubbles scale to fit between the minimum and maximum bubble radius. We see (by examining the bubble size) that people with more bookmarks have more tabs open at browser startup.

Fig. 2

We see the same pattern if we don’t use the bubble size to indicate the number of open tabs, but if we use the vertical axis, see Fig. 3. In Fig. 3 we choose that the bubble size corresponds to the number of users. So we can see that most users (in the selected age groups) have between 8 and 256 bookmarks.

Fig. 3

Younger people use bookmarks more often

Using the controls at the lower right, we can set the transparency of each series. If we select the series that correspond to users of age:

  1. 18 to 25 years old
  2. over 55 years old

We clearly see that the younger age group uses more bookmarks (green bubbles are positioned higher, albeit with the top purple bubble as an exception).

Fig. 4

People with more bookmarks surf longer

Differences are small, but you can see a trend of longer session times (time between starting up a browser and closing it down) of people with more bookmarks. See Fig. 5.

Fig. 5

Most users in age group 18-25, increasing bookmark usage with increasing number of stored bookmarks

A difficult (and incomplete) title. But that’s why we need visualizations: explain it with images! This is one of my favorite images of this series. You can clearly see the different age group trends:

  • Most users in age group 18-25
  • Number of users decrease with each step to the next (older) age group
  • bookmark selection increases as the number of stored bookmarks increase

Tools

During development/analysis, I used Adobe Flash Builder 4, Flex SDK 4.1, Adobe AIR and SQLite to do all parsing and visualization.

The final product is a web application and only uses Flex SDK 4.1 (with an xml-file as input). Right-click above the application to view/download the source code.

2 Comments