[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2902
  • Last Modified:

Custom Preloader for external flv using FLVPLAYBACK component

Hi, I am trying to add a custom preloader to my flash movie to show while large a flv loads in the background.
Here is my setup.
I have the flvplayback component on the stage and use a poster frame to show/hide when the user clicks the poster frame, it hides the posterframe and plays the flv. However, those with slower connections, the video stutters or stops until it downloads enough to play. I should also mention that i have NO controls on the player for artistic purposes. I would like to have a pre loader mc i created play or show once the user clicks the poster frame to start and hide and play movie once it fully downloads, thus avoiding the stuttering problem. I have searched high and low for a solution, and found some on this site, but none that cover what i am trying to do. I found this code(and it does exactly what i want), but is uses .jps not flvs. Anyone know how to make it work with flv files?
Any help would be great.

cheers
a

var myRequest:URLRequest = new URLRequest("large_image.jpg");
var myLoader:Loader = new Loader();

myLoader.load(myRequest);

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

var myPreloader:Preloader = new Preloader();

function showPreloader(event:Event):void {
	addChild(myPreloader);
	myPreloader.x = stage.stageWidth/2;
	myPreloader.y = stage.stageHeight/2;
}

function showProgress(event:ProgressEvent):void {
	var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
	myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
	myPreloader.bar_mc.width = 198 * percentLoaded;
}

function showContent(event:Event):void {
	removeChild(myPreloader);
	addChild(myLoader);
}

Open in new window

0
adrian7474
Asked:
adrian7474
  • 3
  • 2
1 Solution
 
asaivanCommented:
The FLVPlayback component also has a VideoProgress event which it dispatches.  You can add code such as:

flvPlayback.addEventListener( VideoProgressEvent.PROGRESS, handleVidProgress );

function handleVidProgress( event:VideoProgressEvent ):void
{
        var percentLoaded:Number = event.target.bytesLoaded/event.target.bytesTotal;
        myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
        myPreloader.bar_mc.width = 198 * percentLoaded;
}

Also you should set your bufferTime to at least 2 for your FLVPlayback.

To substitute for the Event.OPEN listener, you could try Event.ADDED_TO_STAGE for the FLVPlayback.
0
 
adrian7474Author Commented:
Hi, I am getting this error when I try to plug in your function

1046: Type was not found or was not a compile-time constant: VideoProgressEvent.
0
 
adrian7474Author Commented:
Ok, I got that error to go away by adding this to the top of the code:

import fl.video.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
talentplayer.bufferTime = 8;

However, now this error comes up:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
      at flash.display::DisplayObjectContainer/removeChild()
      at preloader_complete_fla::MainTimeline/showContent()
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
      at flash.display::DisplayObjectContainer/removeChild()
      at preloader_complete_fla::MainTimeline/showContent()

I changed the open part like you suggested, but maybe I am missing something?
When I test in bandwidth mode, a blank page show up until to movie is loaded.
Here is the code I have so far.

import fl.video.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
talentplayer.bufferTime = 8;

var myRequest:URLRequest = new URLRequest("large_image.jpg");
var myLoader:Loader = new Loader();

myLoader.load(myRequest);

myLoader.contentLoaderInfo.addEventListener(Event.ADDED_TO_STAGE,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

var myPreloader:Preloader = new Preloader();

function showPreloader(event:Event):void {
	addChild(myPreloader);
	myPreloader.x = stage.stageWidth/2;
	myPreloader.y = stage.stageHeight/2;
}

function showProgress(event:ProgressEvent):void {
	var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
	myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
	myPreloader.bar_mc.width = 198 * percentLoaded;
}

function showContent(event:Event):void {
	removeChild(myPreloader);
	addChild(myLoader);
}



function handleVidProgress( event:VideoProgressEvent ):void
{
        var percentLoaded:Number = event.target.bytesLoaded/event.target.bytesTotal;
        myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
        myPreloader.bar_mc.width = 198 * percentLoaded;
}
talentplayer.addEventListener( VideoProgressEvent.PROGRESS, handleVidProgress );

//poster frame code -------------

function showPosterFrame(event:Event):void {
    myposter.visible = true;
	
	var myTweenAlpha_in:Tween = new Tween(myposter, "alpha", Strong.easeOut, 0, 1, 2, true);
}
 
function hidePosterFrame(event:Event):void {
    myposter.visible = false;
	
}
talentplayer.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
talentplayer.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

//play video button code-------------

function playMovie(event:MouseEvent):void {
    talentplayer.play();
	 myposter.visible = false;
	
}
 
myposter.addEventListener(MouseEvent.CLICK, playMovie);

Open in new window

0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
asaivanCommented:
Try instantiating your Preloader before you add your event listener.  Also, add the event listener of Added to Stage to the FLVPlayback component, not the loader.
0
 
adrian7474Author Commented:
Wasn't exactly what I wanted, but I moved on and just wanted to close the question.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now