Damn, it’s been a long time since I’ve had a site a launch. But I’m happy to announce my latest project at Firstborn has gone live: SoBe.com. I was the lead flash developer for this project. The current SoBe campaign also featured a facebook app with contest and a mobile version of the site as well (which were not developed by me, but Phil and Miller respectively).
There are two sides to the site. The product ‘flavors’ section features videos of real people stopped and interviewed on street about what they think of SoBe lifewater (which we, firstborn, filmed). We used streaming video from FMS provided by Akamai in order to provide responsive seekable video. This was actually a challenge, as streamed video has some slight programmatic behavior differences than progressive download. For instance, streamed video will not dispatch any Net Events for when it has reached the end of the stream. Another issue I ran into was that due to security restrictions, the BitmapData.draw function is prohibited unless specifically enabled on the FMS side. The other side of the site, ‘world’, was pretty straight forward, except that since we will be doing updates for the rest of the year the site needed to be extremely dynamic. This section of the site also features actress Ashley Greene in the nude, painted in two skinsuits to promote SoBe lifewater’s two new flavors.
16 thoughts on “SoBe.com”
Great lookin site, really nice work.
Nice site! Did you architect the structure of the site yourself or did Senior Developers assist you?
We adapted a base framework that we had developed for another project. Basically all it did was control the section/asset loading as well as navigation control integrated with SWFAddress. But other than that base framework, I took care of laying out the rest. This was the first time I’ve used a preexisting framework to build a site. I have mixed feelings about it. It was defiantly a huge help not needing to worry about coding control for SWFAddress and section loading, and the framework was coded solid. But on the other hand, whenever I use something pre-existing like that, I feel slightly limited to what I can do since it needs to fit within the bounds of how the framework operates.
Very true about frameworks, but none the less you did a great job on the site. Would be nice to see a little post about this framework that you used :)
Stay away from SoBe and other “energy drinks” because they are designed to change a person’s DNA, causing cellular permutation, leading to death and damnation of the soul.
You’d have to check Pepsi’s corporate site for any info on active ingredients, but I’m pretty sure drinking SoBe does not turn you into a lizard. But then again, I could be one of those evil space lizards trying to trick you, so who knows.
Beautiful build. The flash work is really what made that site an FWA.
Can you share any optimization tips? The site runs ridiculously smooth. Very slick overall.
Sure, is there anything in particular you were curious about?
Going on with what gabe was asking, how did you handle the loading of assets for each section? Did you just load in the stuff you needed when you needed it or did you load as much as you can from the start?
Assets that were used more or less globally are loaded in at the beginning of the site. These assets are all compiled in one swf to save time, since each time you start and complete a load it takes a few extra frames as the load needs to initialize and complete. (Back when I did the Sports Chalet site, I originally was loading in like 70 really small 5kb image files, and even running the site locally it would take a few seconds to load. Packing all those assets into one swf so it was one asset to load instead of many improved the performance greatly.)
Assets that are unique to sections are loaded as needed per section. For images in the interview section, images are loaded whenever a user clicks on a different flavor. However, when no loading is required, I begin a ghost load of the other files that are needed, but I don’t keep them in Flash’s memory. By just loading the files, they are cached locally on the user’s computer. So when that asset is later needed, the loading is almost instantaneous, since it is loading from the computer rather than the server.
I think that’s about it for asset loading optimization. Of course, using Photoshop to compress images helps a great deal too. You can compress a jpeg at 10 instead of 12 with virtually no noticeable difference or artifacts and reduce the file size in some cases over 80%.
Interesting approach with the ghost loading. What happens if you are ghost loading asset 1 and during that loading process the user actually needs to load asset 1 normally. Do you stop the ghost loading, or does ghost loading apply to assets in different sections?
The ghost loading is only for that current section. So for instance, in the interview sections when the user isn’t currently needing to download new content, in the background rollover states are downloading and the rest of the other interviews (only applies to the static image interview section, the video interviews are streamed).
Since you can’t stop a load in Flash, if something is currently ghost loading it can’t really be stopped. So if the user request an asset that is ghost loading, I *think* the way I have it is that once it finishes the ghost load, it calls that image, which is now cached, so it’s almost instantaneous.
That was going to be one of my questions! That ghost loading technique is really nice. I like how you are not adding to the SWF’s weight unless it is necessary. I’ll be sure to use that in a future build.
1. I noticed the large background images are 1440×960. Is this your typical prep size for fullscreen style backgrounds?
2. Since each interview detail section has 3 associated large images (main, nutrition, bottle) are you removing assets from Flash’s memory as you leave that detail section to keep the overall size down?
3. Any benefits to using f4v vs. mp4s?
4. Care to share any workarounds for the lack of a complete event when a stream has ended?
Hey Gabe, thanks for the questions.
1. Nope, not necessarily. It also depends on what assets you have to work with (cropping, etc).
2. Once you leave a section, all the bitmaps are just marked as null and all references to them are removed, so the are marked for garbage collection and on the next pass Flash removes them from memory.
3. Do you mean f4v vs. flv, as these are the video formats used for Flash? The benefit of f4v over flv is that f4v uses the H.264 codec, so you can get better video quality.
4. It doesn’t sound glamorous, but just when the video is playing on an enter frame, check the current time/position of the video and check it if it has passed the duration. I noticed sometimes the video would actually complete before the duration, and thus the current time would never pass the duration. So I added another catch, that if the video is playing, and the current time reads back as the same for multiple frames, and it’s close to the end, it figures that the video is stuck and completes. Additionally, there are three ways to get the duration of a stream, and all of them returned different results. 1. You can get it from the metadata, as you would a progressive downloaded video. 2. This might just be an Akamai feature, but there’s a “getStreamLength” method you can call on the connection object though the call function that will return the stream length. 3. You can just do it manually from XML. Sadly, reading the length manually seemed to produce the most accurate and reliable result.
Thanks for taking the time to answer the questions!