Tag: Flex Builder 3

Comcast – E! online – Recap 2008 – Year in review

This was a great project to be a part of, working with the team in LA and the great Felix Turner. The E! team came up with the idea of splitting out content into silos of different content and to provide an easy way to view all the year’s photos, videos and even an interactive quiz. I was tasked with creating the video, quiz, and the intro portions of the app. The portions were pulled into a shell component that used swfAddress for deep linking, had omniture tracking used brightcove for the video services, and served DART ads. Since E! moved to thePlatform’s services, the video portions no longer are working.

The intro to E! online’s Replay 2008:

E! online - Intro to the Replay 2008

The user in the video view:

E! online Replay 2008 - Video View

The quiz portion was fun to build, the app would present the user with a video asking a question within the video, the video would pause, present the user with a multiple choice form. The user would choose their answer and if correct, they would be presented with a video saying something along the lines of “Hey, you got it right!”, if wrong, the video would present the correct answer. From a developer perspective, the only hard part was getting the following video cued up and ready to try and present a seamless experience. I would love to do this type of app again and really nail some of the issues I ran into before. It was awesome having a production team at E! that could literally whip up video content for the quiz as needed.

The user in the quiz section of the app:

E! online Replay 2008 - Quiz view

The only part of this project I really feel I could have ‘super’ improved: I could have used the AS3 re-parenting aspect in the video clips. I created new instances of the brightcove player (in order to show the video’s preview thumbnail) and thus on initialization there would be a pause on slower machines. I could have tried to find a way to get just the thumbnail paths of the videos and just created one true instance of the brightcove video player and just re-parent it as needed. I’m sure there (maybe I did try it and had no choice) had to be a way to get those video thumbnails without loading the entire video player instance. We had a tight timeline, so maybe that’s why I couldn’t dig deeper into it, but seeing how years later, I’m still talking about it…..you get the point by now right? :o)

One aspect of the project that drove me (and I think the team) nuts was how the mouse interacts with the view. We wanted to create a ‘film-strip’ type of view and allow the user to scroll side-to-side with the mouse. This is fine when viewing just static videos or photos but when interacting with the interactive quiz I built, it would move the content when the user would attempt to make a selection. I believe I locked the chosen quiz in the center and released when the quiz was either exited or completed.

Here’s some screenshots and since the app still lives on the E! site, I’ll post the link below. Don’t expect any video to stream, the app is still looking for Brightcove video streams and thus they all fail since E! moved to thePlatform’s video services.

A different set of ‘boxes’ of content within the intro section

E! online Replay 2008 - Another Intro view

Here’s the link to the live content

Keep in mind this link could go down at any moment


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…


Keep your Flex Builder 3 play area clean….Trust me

While working on a fairly large pure AS3 project, I wasn’t able to export a release build. Well, it was more like, Flex Builder 3 just gave up and didn’t even give me an error. Another issue I ran into: Running the debugger on a project….and….it…..takes……

FOREVER

…..then

FAILS

right in your face.  (Was I expressive enough with the big cheesy font in red?) You check your flash version, you get the latest debugger, nothing works. What worked for me:

Clean your project! Project->Clean…

Then pick the project you’re currently working on. Always seems to work for me. Hope it helps someone out there.


Comcast – E! online – web video gallery

This one was a great project to be a part of and I got a chance to work with a great guy in the Flash community. While working on FEARnet.com’s video players (will be posting those projects in the near future), I worked with Felix Turner as he was also doing some contract work with Eonline.com. We wrapped up a pretty cool ‘year in review’ celebrity project and he began work on a video gallery for E! I went to another project and eventually was handed his work. Can’t say enough good things about Mr. Turner and his code.

So I picked up this project and continued development for a good 6-7 months. It supported Brightcove’s video platform (they migrated over to thePlatform’s feed services) and uses DART video ads. Most of the work I did for this was refactoring, adding new features, and bug squashing. A project I’m proud to say I was a part of.

The Video Gallery with a stream open and showing video

E! Online Video Gallery with a video playing

The Video Gallery with the video player closed and all streams showing

The gallery in a closed state

The E! Online Video Gallery with the video player closed

Working with the team out in LA was a great experience for me, I was able to work on this very cool project, went out to the E! Offices in LA a few times (once was in January with freezing temps in Philly and a sweet 70-ish temps. People were wearing coats out there…). Hopefully our paths will cross again and we’ll get to do more work together.

Here’s the live version up now

(it’s been updated since but you’ll see how cool it is :o)


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 – thePlatform Syndicated Video Player

This project was a roller coaster ride to say the least. It’s built with thePlatform PDK. We used thePlatform’s component video tools and used their CMS data backend for all the video storage and delivery. thePlatform’s backend data services are very, very powerful, but my past experience with a earlier version of thePlatform’s PDK left me hoping it matured since then. There’s just so much focus on easy it is for anyone to put together a video player with their online tools, but every client/job/project I’ve ever had: we want our own custom touch, we have our own custom needs and we have sWalt (that would be me, the flash developer that we’re paying to do this custom stuff) to code it all.

Sooooo, that being said, the story continues:

Versus thePlatform Video Player

Versus needed some custom features and wanted more control within the player, so we took thePlatform’s PDK and got started. I built the player in Flex Builder 3  as a pure actionscript 3 project and after working closely with thePlatform’s support team, we were able to get their ‘demo’ player up and running.  For the video, we created custom feeds for serving video streams and let the video team handle uploading content.

So using the thePlatform’s “piece-by-piece” video tools, I was able to get a new player up and running pretty quickly, it was getting the Versus requirements all working together that was a challenge. We were ‘strongly recommended’ not to dig into their SWC files to write our own code. So for me, it was playing with black boxes and hoping to figure out the documentation enough to get things working. The only issue was, not only did I not understand why some features were having issues working, thePlatform’s support team couldn’t figure it out. We were able to get new SWC files compiled with ‘fixes’ that in the end, followed the documentation I was working with. After getting the player list, header populating and video running smoothly, we did some custom skinning for the video player (we created some custom visual assets and used external FLA libraries) . The video player supports DART video ads, with a supporting banner ad shown, all within the single SWF. We also have the player sending tracking data to DART and to some custom platform backend tracking fields.

If anyone says ‘use the canvas tools’ to me again, I’ll go nuts. Why? because we were ‘baking’ settings into the single SWF and not using the typical HTML canvas process.

The biggest challenge for this player is that we needed a single SWF, hosted from the Versus CDN to be syndicated out to Versus’s partners. Mainly the yardbarker.com domain and it’s sub-domains. We ran into the typical cross domain issues, both from my test domain and the Versus test domain, no biggie there (after developing in Flash for 10+ years now, the cross domain stuff was easy). Then the issue was, “how can we get custom embed codes for each of our partners that we can trust to actually work?” Sooooo, I created a simple configuration app that the syndication partners can create their own embed codes. The app allows users to choose what categories they want to provide, any configuration options we wanted to allow and the app creates the correct embed code. We were able to get the player launched, have a single SWF on the Versus CDN (which allows us to easily make any needed updates without numerous domains doing anything), get the full power of thePlatform’s backend data feeds and have everyone’s content update as needed. It felt great to make some needed updates after launch and push to the CDN, see the changes filter out and have a beer watching it all come together. Working with the team at Versus (Hi Jack and Neil!) is always a pleasure and it was awesome knowing that your client ‘gets’ it, sees that there are some issues to work out and no: Flash isn’t broken.


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.


Versus – NHL Playoffs and Finals scoreboard

NHL Playoffs and Finals scoreboard:

This scoreboard is based on the College football/NHL scoreboard (see below). Basically, a new skin and only providing NHL playoff scores. The scoreboard is on the latest and greatest version of Versus.com and will be updated when the season reaches the finals (Go Flyers!).

The app was built as a pure actionscript project in Flex builder 3, I extended the base classes I created for the College football/NHL scoreboard. I also created a new NHL Playoff FLA library for the new skin. This one was pretty smooth but we could have had a few more features if our data feed would have provided the additional data. The app has an auto-update for keeping the scores recent. A nice re-skin project for sure.

Just an image of the rollover state:

Versus NHL Playoff Scoreboard

Currently live at : http://www.versus.com/nhl


History

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