I’m building a flash site that uses video transitions to go from section to section. Each section’s background is a still-frame photo at higher res than the transition videos themselves, which are scaled up during transition. The first frame of each video transition is the current background image, and the last frame of each video transition is the destination’s background image. Roughly speaking, this is the intended flow of navigation on the site:
Resting state:
hi-res image in foreground, no video elements
User clicks item on navigation:
Flash prepares an FLV via a netstream object and buffers it, which is accomplished through the netstream.play() function. Upon receipt of the “Netstatus.Buffer.Full” event, the netstream object is paused and attached to a video object, which is then added to the display list behind the hi-res image in the foreground. As soon as the video object has been added to the stage, the hi-res image in the foreground alphas out (via tween), leaving only the background video. When the foreground is finished tweening, the video in the background plays. As soon as “NetStream.Play.Stop” is received, the process happens in reverse; that is, a new hi-res foreground image tweens in over the video layer, and the video is removed from the stage as soon as that’s done.
I don’t think there’s anything wrong (at least in principle) with the flow I’ve outlined above, and it doesn’t sound like it should be that tricky to do. However, I’ve had no end of problems with the initial setting up of the FLV/video object. At first, it seemed that the FLV wasn’t queuing up properly, by which I mean that the hi-res foreground image tweened out to reveal a white screen, and the video popped in and only began playing after a second or two. (The first frame of the FLV is definitely not white).
I had no idea what might have been causing this behavior, but hackishly threw in a timer that plays the netstream for about 100 ms after “Buffer.Full” is received, thereby advancing the video past whatever might have been causing the white screen. This worked well locally but as soon as I put the site on a dev host, it was back to the white screen during transitions. The annoying thing is that bumping the hackish delay up to about 2 s got rid of the white screen problem on remote servers, but results were unpredictable; depending on connection speed, you might see everything work perfectly, or you might get thrown into a video that had already been playing for a second or two.
I’ve also tried similar approaches using bytesLoaded/bytesTotal instead of netStatus events, to no avail. My last experiment was using cuepoints; during FLV encoding, I threw in a cuepoint 0.2 seconds into the FLV and waited for THAT before tweening out the foreground; once again, it worked locally, but I was treated to a tween-to-white before the video kicked in when testing on a remote server.
I’m really running out of ideas here and would very much appreciate any advice you guys can offer. Thanks very much for your time and consideration!
Justin
FLVs are tricksy beasts at times.
I’m going to see if I can dig up some code I wrote a while back to handle all of this. In the meantime I like your idea about cuepoints, and I know why you’re running into trouble with them. Cuepoints are actually tied to keyframes – so you need to make sure your cuepoint is placed AFTER your second keyframe – that will ensure that at least the first keyframe of video has been displayed.