Its one of the biggest and most complex projects I have had to work on in a long time and I thought it was worth going through some of the key elements explain how we got it done.
In regards to flash/actionscript there were two main areas to the site:
- the logic for building the sequence
- content, tracking and data insertion
I’ll give a bit of a run through each of these sections and explain some of the techniques used, but first a bit on info about how things were set up.
Once the data was collected from Facebook it was marshalled into objects for use inside the app. Each of the friends featured on the site had their names and profile pics collected, whilst the main user had their name, age, profile pic, some alternative profile pics (if available), a cropped profile pic and some pics from of their gallery.
Once I had all that information I could start building the sequence.
Generating the sequence
The sequence of the story generated for each user always followed a similar story arc consisting of 9 main chapters – Introduction, Breakthrough, Rise, Fall, New Life, Comeback, Golden Years, Death and finally your Funeral.
Each of those chapters was split up into 3 sections for the purpose of the logic. These were main videos, support segments/videos, and then a large collection of photos.
All this content was laid out in XML in a style that kind of related to this structure. Each piece of content was marked up with a url to the content and the duration (there was bunch of other things, but for the purpose of generating sequences they were the main ones).
When I generated a new sequence, I would loop through each of the chapters and select 1 main video, 1 support segment, then as many photos as was needed to populate the required amount of time for that chapter. I then ordered them so it would follow a sequence of Main Video, Some Photos, Support Segment/Video and then Remaining Photos.
Sounds pretty simple huh? Yeah. I thought so too. Then came some changes
After reviewing the content it became kinda clear that a totally random approach wasn’t going to work. Some elements just didn’t seem to fit with other elements, and others didn’t make sense without particular backup elements.
A great example for this was the situation where the story took you to prison. It didn’t make sense to show picture of the countryside when you were supposed to be in prison. Conversely, it didn’t make sense to show pictures of prison when you were in a retirement home.
Sooo… what to do? I had to make it smarter.
I added in some extra optional attributes to the XML and came up with a linking system to help tie it all together.
Firstly, I added in a ‘link’ attribute where you could write in a keyword. If an element was selected that had a ‘link’ attribute, the link would be stored, and then any other segments with the same link would be given preference when the app was randomly selecting pieces.
That worked pretty well, but I needed a bit more control. Thats when I created the ‘ignore’ and ‘required’ attributes. If a segment has an ‘ignore’ attribute and it matches a previously selected ‘link’ attribute, it will be removed from the possible pieces that can be used. In a similar fashion, a segment would not be considered for selection unless a previous segment with a matching link had already been selected.
To help prevent users being shown images that weren’t age appropriate to them, I added in ‘minage’ and ‘maxage’ attributes that would be compared to the user’s actual age. If they were outside the range then they would also be ignored.
Finally, I added in an ‘order’ attribute. This was used to force some elements to appear before or after other elements.
<segment duration="2" link="jail" ignore="model" minage="30">
All this was done using the power of E4X and regular expressions. I won’t go into the gritty details, but basically I did an E4X query on the XML to gather a list of possible segments, then did multiple calls on that list testing each of the conditions until I had either a filtered list to randomly select an item from, or an empty list which meant that there were no more suitable elements.
The code looked a little bit like this:
// instance vars
var regExp:RegExp = new RegExp([previous found links here])
// inside method var list:XMLList;
list = chapter.story.segment.( (hasOwnProperty('@link') && regExp.test(@link)) || (hasOwnProperty('@required') && regExp.test(@required));
if(!list || list.length()==0) list = chapter.story.segment;
// trim back the list
list = list.(!hasOwnProperty('@ignore') || !regExp.test('@ignore'));
list = list.(!hasOwnProperty('@minage') || Number('@minage') < user.age); list = list.(!hasOwnProperty('@maxage') || Number('@maxage') > user.age);
// bail if there is nothing
if(!list || list.length()==0) return null;
// select a random segment from what is left
var node:XML = list[ Math.floor(Math.random()*list.length()) ];
// if this segment has a link attribute, add it to the reg exp now for future selections
// delete this node from the xml so it cannot be selected again
// return the selected node
And that was that. I would just loop through each chapter, then through each subset of main images, photos, etc. selecting segments and generating a list.
Once I had a list it was onto the fun stuff – the actual content – but that will have to wait for another post because I’m really tired right now :p
You can read the second part by clicking here