Full screen video mode preserving objects size

[Andrei1-bKoviI]

Hi,

My task is to show a video player in a full screen mode. I have no problem doing that but I need it to perform in a such a way that only video scales to the full screen while other objects (player controls) remain unscaled. If I just go to the fullscreen mode - everything on the stage is scaled up naturally.

Playing with the full screen features I could come up with the only solution which is to calculate a scaling factor (based on, say, stage.width and stageWidth) and adjust player controls dimensions and position accordingly.

Is it the best way to preserve objects sizes or there is a better technique?

I hoped that because each display object has it's own stage and I could show full screen only video by doing something like:

_video.stage.fullScreenSourceRect = screenRectangle;
_video.stage.displayState = StageDisplayState.FULL_SCREEN;

but it still expands all the objects.

Thank you very much for sharing you experience (or sources).

[Andrei1-bKoviI]

I got it with my freshly morning caffeinated neurons. You just have to manipulate individual objects when in full screen - not entire player. Duh!!!!

[Think Seed]

Can you elaborate on how you did this? I'm having the same issue. The stage.fullScreenSourceRect makes the controllers I custom made (like the progress bar, scrub, elapsed time, etc.) to scale along with the whole stage. The quality of the display of the controls is poor (pixelated even though they are vector objects).

[Andrei1-bKoviI]

Hey!

The issue was that I fell for Rectangle. I thought that by choosing a particular area of the flash to go full screen I would be able to manipulate the rest of the objects and resize them back. All the tutorials sort of prompt you to use Rectangle.

So, the solution is to keep it simple. That means that when you go FULL_SCREEN - StageScaleMode should remain NO_SCALE. So, the idea is to toggle StageDisplayState only. Miraculously, if you do just that - only video goes full screen and other elements do not.

So you have to reposition other elements (like player controls) to make them visible/invisible or be in a position of your liking relative to your newly scaled video.

I find it counterintuitive and dangerously limiting the way they decided to do full screen. Their assumption was that video is the king and default for going full screen is to resize video only. I would prefer to have a full control over what resizes and what not. Also, if you noticed, when you use Rectangle, graphics become pixelated when you change ScaleMode - Flash doesn't respect the fact that it deals with vector graphics any longer. My take is that in full screen everything is rendered as bitmap I (which may be not such a bad thing if you think about how much crap one has to nest to achieve some effects). I may be wrong though.

At the end who cares! It works. I wish they found time to document these kind of peculiarities. Well, now we did I guess :-)

Hope it helps.

Andrei

[Think Seed]

So how do I target the stage of the movie clip? I understand that each of them have their own stage, but when I try to target the stage of the Video object by using myVideo.stage.displayState = StageDisplayState.FULL_SCREEN;, it still zooms the entire SWF to full screen. I'm struggling with setting only the video object to go full screen and getting the other objects to not scale. I understand about the part about having to reposition the controllers, but I'm having trouble targetting them individually.

[Andrei1-bKoviI]

I forgot to mention another thing I thought would work - targeting a stage of the individual object. You should target just stage entire stage):

not myVideo.stage.displayState = StageDisplayState.FULL_SCREEN;

rather:

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.displayState = StageDisplayState.NORMAL;

You should also add an event listener:

this.stage.addEventListener (FullScreenEvent.FULL_SCREEN, screenListener);

inside the listener you can perform other objects repositioning depending on if the screen is full or normal.

How you get your other object I have no way knowing because I don't know your application architecture and where you placed the objects in the display list.

Hope it helps.

Andrei

[Think Seed]

Yeah, I thought that I had read that each Sprite has its own stage. I was hoping to target an object and make only that stage go full screen using the hardware render. When I read your post, (when you said "each display object has it's own stage"), it confirmed that this was the case. But I tried targeting an individual stage without much success. Originally, I had the entire Stage scaled like you suggested. Basically there are two things I want to manipulate (once I figure out how to do those, I'll further manipulate other things.

1. myVideo (i want this to go full screen - using the new hardware managed render if possible)
2. playerControls (to not scale and move to bottom of the screen)

FYI, I commented out my "playerControls" attempt in the code in my earlier post. I tried to individually set its display state to NORMAL without much success.

[Andrei1-bKoviI]

Frankly, I am getting confused with stage/Stage thing. Looks like it lives up (or down) to _root in AS2. I hope to overcome this mental challenge soon. In any case it looks like stage keeps translating to the highest parent's stage somehow.

In any case, in my previous post I described how I accomplished what looks like your task. In my situation one movie (player) loads another swf that constitutes skin (this one has controls and other things). When I go full screen I refer to the stage from within the movie that is loaded into the main Player as this.stage. This does the trick (see my previous code). Then I recalculate the dimensions based on System RESOLUTION capabilities (look it up - I am too tired to write about it). Then I place the unscaled player controls to the bottom of he FULL screen using calculations based on the resolution width and height.

When the screen mode listener detects that player returned to the normal state - I reposition controls accordingly. I register the original position (when class is loaded) of the player controls and then use them to return to the original position.

Hope all this raving sheds some light.

Andrei

[kglad]

andrei, are you using an flvplayback component and using a custom skin in that external swf?

[Andrei1-bKoviI]

Hey kglad,

No, I don't use any components - I just wrote a class that does all this streaming routine and instantiate the Video class. The playback controls are part of a written from the scratch skin that is in a separate - loaded at runtime - swf. Actually video is a part of the skin because clients need different aspects ratios, appearances of the video and all this jazz - all is dynamic. I need to do a lot of different things inside the player (playing video is the simplest task) so prewritten components don't seem to be an option.

[kglad]

then are you bypassing hardware acceleration for fullscreen video?

[Andrei1-bKoviI · Accepted solution]

Hi,

I must apologize for my stupidity in the post on 06/19/2008 12:08:40 PM (as well as other incidents of my brain malfunction). I made some statements that are not true. For instance I said: "Their assumption was that video is the king and default for going full screen is to resize video only." This is BS. They did not make this assumption and, actually, programmers have a full controls over display.

kglad, you prompted me to look deeper into hardware acceleration and now I understand things better (or so I hope).

I do bypass hardware acceleration and all the resizing occurs programmatically.

My understanding is that when one uses Rectangle to scale the video - it will scale up everything that falls within the boundaries of the rectangle. I could not find a way to scale just a video using rectangle. I hoped that a line like the following will work:

_video.stage.fullScreenSourceRect = screenRectangle;
_video.stage.displayState = StageDisplayState.FULL_SCREEN;

It did but in the same way as (note there is no _video in the scope)

stage.fullScreenSourceRect = screenRectangle;
stage.displayState = StageDisplayState.FULL_SCREEN; - meaning everything is scaling up.

I don't think I completely understand the concept of stage yet because in my mind each DIsplay Object had it's own stage and this stage didn't translate to the stage of a higher (parent) display object. In reality, when I refer to stage - it pulls the reference to the highest stage.

kglad, if you find time to clarify this - it would be an enormous contribution to humanity :-)

Back to the description of how I coded full screen WITHOUT utilizing hardware acceleration (in case anyone still trusts my intellect :-):

Step 1. Create some mechanism that will react to the user's wish to see the thing full screen.

It could be a button with a listener added. The listener will toggle stage.displayState

Step 2. Create a mechanism that will react to displayState change.

a. Get System.Capabilities.screenResolutionX and screenResolutionY - these two parameters will tell you how wide and high video possibly can be.

b. Calculate desired video dimensions based on the resolution and video metaData width and height. This means that one of the ratios will give you scaling factor. For instance:

var scaleFactor:Number = Capabilities.screenResolutionY/metaData.info.height will define how to scale it up (by setting _video.scaleY and scaleX = scaleFactor) using this newly calculated scaling factor (assuming you want the video fill entire screen).

c. Scale the video. Center it if desired.

d. Hide objects that you do not want to be visible in full screen mode

e. Position visible objects in a desired way. For instance, move player controls to the bottom of the screen calculating x and y, again, using screenResolution parameters.

When user exits the full screen mode - reverse what was done: resize the videos to its original dimensions, positions it to original x and y, unhide other objects, move player controls where they belong.

Done.

A brief look at the approach is to enter the full screen mode without resizing the swf originally. If no further action taken - your player will look as it originally looks: all the dimensions preserved and swf is position where it is by default (left, center or right). And then resize/reposition according to the specs.

Hope it helps.

Thank you kglad!

[kglad]

first, as i think you know, the stage property of each displayobject is exactly the same: it's the main stage. just like the root property of each display object is exactly the same: it's the main timeline.

--------------------------------------
"My understanding is that when one uses Rectangle to scale the video - it will scale up everything that falls within the boundaries of the rectangle. I could not find a way to scale just a video using rectangle."

that is correct. to scale only the video you can use the video's properties in stage.fullScreenSourceRect. but you must access these properties AFTER the video's ready event executes because the dimensions of your video will probably change (depending on the video's scaleMode, the size of the video on-stage and the flv being loaded) after loading.
-----------------------------------------------------------------------
so this solves your problem of scaling up the only the video and allows you to use hardware acceleration. the problem with this is if you have any other objects (like video controls) in this rectangle they will be scaled too (if you have fullScreenTakeOver assigned to false so those objects are displayed in fullscreen). and when other objects are scaled they are not scaled as vectors so they look terrible.

you can rescale them back to their original size in a fullscreen listener, for example, but they still look terrible.

if you're using an flvplayback skin (and you're using the latest component update), you can use the skinScaleMaximum property of you flvplayback instance to prevent the skin from being distorted. but it's still resized (to extend the width of the fullscreen video) and i can't find a way to prevent that resizing.

in summary,

1) by-passing hardware acceleration for fullscreen video makes it easy to control the stage layout.

2) using hardware acceleration, controlling layout AND maintaing display quality for non-resized objects is an unsolved (to my knowledge) problem.

[Andrei1-bKoviI]

Thank you very much kglad!

Things are much more clearer for me now and, hopefully, for everyone who reads this thread to supplement their knowledge.

Andrei

[kglad]

you're welcome.

[Guest]

Thanks everyone for this discussion!  It was very helpful!