Tag: casalib

Comcast – Versus – Tour De France Interactive Map 2010

The latest (I’ve been so happy and honored to hopefully make this an annual project for me) Tour De France interactive map was a great ride. Last year’s map we all felt was a good start but if we had more time, there were ideas left on the table. As always, it’s great to meet with the Versus team and brainstorm some ideas on what to do for this year’s map. After a few conversations, we had a comp, an idea and I went to town. Versus usually gives me room to develop with creativity and there were multiple times I was able to give creative input and make a difference.

This project was built in Flex Builder 3, a pure AS3 project and I used a couple libraries to speed up development. As always, I use casalib, I used as3coreLib, greensock, and yes, the thePlatform PDK video player was used for video playing clips of each stage. I would think I stayed a bit more true to the MVC framework ideal than I ever have before (and not letting little details and ‘proper’ format get in the way).

This is the full page when hosted on the versus.com domain.

The 2010 Tour De France Interactive map

Here’s a view of the map when a user selects a stage and is viewing the stage detail view:

Versus.com Tour De France 2010 Stage Detail View

Clicking on any of the images above will take you to the current live site. I think the two images above show in a nutshell what the app was all about. The detail view has a stage image, stage description, video highlight of the stage course, an RSS feed view and some external URLs for more content per stage. The current structure of the versus.com website and this full stage map, has really filled the need for a ‘higher-level’ view of the tour.


Comcast – Versus – Camp Versus

Well, here’s a quick hitting project that ended up looking pretty sweet. This project uses thePlatform video player, the dreaded/not-so-bad/awesome/hair-pulling/ETC thePlatform PDK player. I was able to build a pretty cool wrapper for the player and can now pull in a PDK compiled player into a project. I still need to get a few more features added, but I’m now able to at least push in a PDK compiled player into a project and smile.

Built in Flex Builder 3 as a pure AS3 project, some casalib thrown in, of course the PDK video player, I used a standard .FLA for assets compiled out to a .swf that was embedded into the pure AS3 project. Overall a nice practice on my MVC directory skills.

Welcome to Camp Versus

Why not take a quick stroll through the camp and see where you fit in?

(my best late night attempt at getting you to be amused)

Update:Seems the initial push for Camp Versus is over, so the link has been changed to a local beta build on this domain…


thePlatform PDK – get a player up and running – some tips

So, I’ve got another project (a few actually) that will be integrating thePlatform’s video player. I’m slowly but surely getting a grip on how to use this player but I admit, it’s not the easiest API to work with. I guess my biggest gripe is how I want to so badly just load an instance of the PDK player and just call something like player.loadPID(videoPID,true) with the second arg being a start on load boolean and if false, show the video thumbnail. Just having a player.stop() so I can directly just stop a video would be nice. Instead you need to go into the player component, to the controller, then HOPE and PRAY the function or property you’re looking for is there….[/vent]

/**************** Put on AS3 Code Speak hat *********************/

That being said, here’s a tip: Create a class that extends the PDKContainer: example:

public class your_videoPlayer extends PdkContainer
{
//add whatever props you need here
public var _pdkPlayer:Player;

public function your_videoPlayer()

{ super(“your_videoPlayer”,0,true); //the true parameter is a ‘wait for stage’ boolean which without it, will cause the container to think it’s the only class being loaded and probably give you null values when it tries to access the stage

//Do everything else you would normally and assign the player to the _pdkPlayer class propert

//Ok, that being said, in your class that creates this “your_videoPlayer” instance example:

var yourVideoPlayer:your_VideoPlayer = new your_VideoPlayer();

// I just created a thumbnail loader (Thanks again casalib!) that would load the thumbnail for the video and on press calls

yourVideoPlayer._pdkPlayer.controller.setReleaseURL(releaseURL,true);

/**************** Take off AS3 code hat – Put on Nerd Speak Hat *********************/

with the releaseURL being the targeted releaseURL you have for the video you want to play and the true boolean being start the video on loading.

I couldn’t find an easier way to get the player to behave with loading the video thumbnail consistently, having consistent control over the player. I have yet to figure out how to get ads to load properly but will post the solution to that if I can (in talks with thePlatform’s support team now).

Hopefully this helped someone out there in internet-land that is a flash dev working with compiling the thePlatform’s PDK.


Versus – Tour De France 2009- Interactive Stage Map:

Well, this project was a memorable one, mainly because I started to really use casalib’s library. I was able to leverage casalib’s casasprite and a few other features. Loading data is a breeze, and the distribution class is awesome, really saves a ton of time.

As for the project itself, Versus wanted to create some ‘feel’ behind their TourDeFrance push that year and so it became a test project to create an interactive map. Main focus to just deliver additional information for each route and let the actual event become the content. The only tricky part I came up with was allowing the detail screen to position itself over the area of the map that is chosen. So….if you chose route 4, the detail screen would give you the additional data for route 4 but also visually show you the route.

We planned that if this project went over well, we would revisit the idea next year. So that being said, I’m currently working on the 2010 version. Always a pure joy to do work and have your client return for more. It’s always great working with the Versus.com team and hope to continue for a long time. Some screenshots below and a demo link to follow.

Once the interactive tour map went live, a feature went live on the homepage:

Standard view of the map. This image shows the map with stage 5 as the current stage. You can see the routes in their proper state (past, current, future)

I just really liked this logo (I had nothing to do with it’s design but I fought to keep it in the map). It ended up not making the final version but  I thought it had style. Kudos to whoever created it.

tour logo that was never used

This view is how the application would display if a user selected a stage route. The detail view takes over the entire page and shows more detailed information on the stage’s city, anything interesting about the stage route, and an image for the route. I was able to leverage some nice casalib utils in this view. For example the stage number count, each number is active and pressing it would show that stage’s information. To add the listeners to each number was all taken care of by creating a casaLib distribution object.

Here’s a link to a live demo


Versus – Multi-Sport Scoreboard

Multi-Sports Scoreboard:

viewing college football scores

A small project for Versus.com that really turned into a nice project. This pure actionscript Flex builder 3 project pulls data from an external scores feed. The SWF file is designed to show both College Football and NHL (National Hockey League) scores. The scoreboard will also allow the user to click through to either a preview or a recap on the versus domain. If the game is not over, the user would see the preview, otherwise they would get redirected to the versus recap page of the game.

The feed has an auto update feature and will show scores as games progress. The single SWF but multi-purpose SWF allowed Versus.com to embed the same SWF in multiple URLs and only change flashvars.  Built in Flex builder 3 as a pure actionscript project with using a Flash FLA library for visual assests. I also leveraged the CasaLib library as much as I could. Still loving and using CasaLib. If you don’t know, go check it out: CasaLib

This project was pretty cool to show how a single SWF can support two different sport scores. Saved a ton of time as compared to building two separate projects for College Football and NHL scores.


History

Copyright © 1996-2010 Sierra Star Studio. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress