I'd like my flash movie to not play until it's visible on screen and then pause when off screen. Is there a way to capture some event indicating that the swf is rendering or visible or within the visible bounds of the browser window that I can addEventListener to so I'll know when it's within view?
Use Flash's ExternalInterface to call a javascript function that checks to see if the element of off screen. In javascript, use JQuery with the Viewport plugin to figure out if we're off screen. (http://www.appelsiini.net/projects/viewport).
I haven't tested the Viewport plugin, but I've talked to people who use it, and it worked out OK for them.
In as3:
var returnValue:int = ExternalInterface.call("jsCheckerFunction");
if(returnValue == 1) // your flash is on-screen.
in javascript:
function jsCheckerFunction()
{
if($("#flashContent:in-viewport").length > 0)
return 1; // flash div visible
return 0; // returns 0 if the element is offscreen
}
You could have it call jsCheckerFunction on each frame to see if the status has changed.
Related
I'm implementing an FLV video player based on Flex 3 and I would like to add a feature similar to YouTube player.
I want the progress bar to display both the video displaying progress, but also the video loaded status. How can I implement this behaviour?
Using 2 progress bars on top of each other? I'm also using Flex mx: VideoDisplay component, do I need to change this?
yes you should place two bars ontop of each other in the background you place the laodingbar and in the Front you place the current position bar.
But finally this is a bit more work than it looks to make it fully functional...
I would create a new class implementing all bar/slider functionality.
The laoder is only listening on update(val) to set its new value on percentage.
The playingbar will need some functionality on click and mousedown/mousemove for seeking AND the update function to be set again, including an event to trigger seek in the player aftern userinteraction.
Then you bind the loading bar update to the progress event of the player
All events can be found here
//setting up loadingbar
player.addEventListener(ProgressEvent.PROGRESS,slider_update);
//function to update the slider
private function slider_update(E:ProgressEvent):void{
var percentage:float = 0;
if(E.bytesTotal != 0){
E.bytesLoaded/E.bytesTotal
}
slider.update(percentage)
}
With the current playbar its allmost the same
//listens to statechanges of the player to handle updates for cur-pos
player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, checkStatechange);
private function checkStatechange(E:VideoEvent):void{
if(player.totalTime!=0){
timeSlider.update(E.playheadTime/E.totalTime);
};
continue with binds on click to set seek immediatly - to mouseDown and the move to make the scrolling on video possible...
actually for the seek with mousedown the mousemove should be listening on stage so the mouseUp otherwise the user has to stay on the loadingbar while seeking this is in most cases allmost impossible to handle ;)
-have fun
}
I'm trying to make an instance of FLVPlayBack run in fullscreen, without affecting the rest of the application.
According to stuff I've read, I have set the players scale mode so it will fit the window when its scaled up.
flvPlayer.scaleMode = "exactFit";
And in order to stop the stage from scaling up I've also set the stage's scale mode too.
stage.scaleMode = "noScale";
Then in order to try and control what the video player does when I click the fullscreen button, I also use the fullScreenTakeOver setting on the player.
If I set the code like to 'false'
flvPlayer.fullScreenTakeOver = false;
Then the whole interface becomes fullscreen, with the stage positioned in the centre of the window, I guess this is because I set the stage not to scale. The video stays its normal size and carries on doing what it was doing. Exiting fullscreen shrinks the stage back to normal.
If, on the other hand I set it to 'true'
flvPlayer.fullScreenTakeOver = true;
Then the video takes over the screen, but it doesn't scale up, instead it positions the video in the middle of the page, and the clickable areas of the controls move to where they would be if the video was full size, leaving my guessing where the buttons should be.
In both cases the video carries on running fine.
Can anyone help me with the right combination of settings? I want the application to stay its windowed size and the fly player to scale to fit fullscreen by itself.
Thanks.
There is a property in flvplayback named fullScreenTakeOver which is set by true by default. this will interfere with fullscreen really bad. if you want to apply fullscreen without changing logic of your stage you better set this as false after instantiation. this will decrease your troubles a lot
You'll want to set a few settings which some you've already done
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
flvPlayer.fullScreenTakeOver = false;
Now when you enter full screen your application stuff will positioned top left. You will want to make an event listener for full screen mode.
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
In that event is where you will handle resizing and moving the video (Also hiding other objects on the stage if need be)
function fullScreenHandler(e:FullScreenEvent):void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
// Setup NORMAL Layout
// resize and reposition the flvPlayer
}
else
{
// Setup FULL_SCREEN Layout
// move the flvPlayer to x:0 and y:0
// set the flvPlayer width and height to stage.stageWidth and stage.stageHeight
}
}
I would like to know if flash events (say clicking a button) can be captured somewhere outside the swf. Say, I click on a button and a popup comes up telling which buttom was clicked. The popup should not be a part of swf.
Thanks in advance
Try:
In your javascript:
function sayClicked(whatWasClicked) {
alert(whatWasClicked);
}
in ActionScript:
protected function onButtonClicked(e:MouseEvent):void {
ExternalInterface.call('sayClicked', (e.target as MovieClip).name);
}
ok your short answer is you cant, flash is only limited to its own movie, anything outside this movie, object can only be detected from another language such as java, php.
So by stand alone im assuming just a swf on a html page or just a pop out advertisement.
But it is possible to trace the mouse when it leaves the flash movie area,again it is detecting that there is no mouse in the flash movie area, its not detecting the mouses position on the rest of the screen to say, or web browser.
Nothing seems be to working properly. I have a .flv with less than 15 sec. With a resolution of 900x500, 25fps, 300kbs.
The main idea is to control the video with keyboard keys. In this case, playing the video backwards while pressing the ↓ arrow key:
function myKeyDown(e:KeyboardEvent):void {
var swfTimeline:MovieClip = mLoader.content as MovieClip;
if (e.keyCode==Keyboard.DOWN) {
swfTimeline.gotoAndStop(swfTimeline.currentFrame-1);
}
}
I've tried several things, such as:
placing it directly on a timeline of my main stage,
placing it on a timeline of an external swf
using lower video bitrates, framerates, lengths, and video resolution (initially at 1080x600).
Has anyone here had this problem before?
Is it possible to do it using a flvPlayback component?
Here's a nice example of what I would like to achieve:
http://pavilion.expo.cn/z0001/ssize/explainchinavenue/index.html
I'm sure this must be a common question, but I haven't found an answer elsewhere.
I've got a Flash object embedded in a long webpage. I listen for the MOUSE_WHEEL event in Flash, and scroll my Flash content accordingly. However, when I scroll over the Flash object, the webpage also scrolls.
Is there any way to prevent this behaviour, i.e. lock the webpage's scrolling position when the Flash object has focus? I'd prefer not to have to use JavaScript.
Here is an excellent solution that doesn't require JavaScript:
http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/
(Technically, it DOES use JavaScript, but the JavaScript is injected by Flash, so you don't need to add anything to the HTML page yourself. In other words, the only code you need to manage is AS3).
This seems to work on every browser I've tested.
I don not think this is possible without JavaScript.
You would need to communicate from the Flash movie to the browser using ExternalInterface whenever the Flash movie changes focus.
Then, have a JavaScript function on the page trap and eat the mousewheel event:
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', handleWheelEvent, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = handleWheelEvent;
function handleWheelEvent(e){
e.preventDefault();
}