Flex Video Player fullscreenButton override - apache-flex

I'm using mxml to create a spark video player with controls. When I click on the "fullscreen" button in Chrome, it goes full screen on the browser but I am unable to go back to normal size. In Internet Explorer, the whole screen is filled up but the zoom on the video is too big and thus my controls are no longer visible.
Is there any way that I can use ActionScript to control the size of the fullscreen? How would convert the mxml to Actionscript to override this?
Thanks!
Source code from: Flex Video Player
The code I'm using to create the player:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:VideoPlayer
source="video.flv"
horizontalCenter="0"
verticalCenter="0"
autoPlay="false" />
</s:Application>

You can try to constrain the area for fullscreen display using stage's fullScreenSourceRect property.

Related

Flex 4: Window's minimum size is too big

I tell the window to create with a size of 32x32
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
showStatusBar="false"
width="32"
height="32">
but it appears like this
The yellow box is an image that's 32x32.
try setting minWidth=32 minHeight=32
You have something in your window that is more than 32X32 so the window got resized to fit its content, sharing your full code will help us finding the problem.
The AIR application config xml file has a minwidth property. I assume you're on windows. In that case, the close, minimize, fullscreen buttons should always be visible, so you can't make smaller window (try resizing notepad.exe to understand). If you want smaller, you have to make a chromeless application / window (again in the config xml). That will allow you to create 1x1 px windows as well, but you'll have to add your own close button.
<systemChrome>none</systemChrome>

Displaying spinning AJAX loader image

I would like to display a spinning image, when my application is not connected to the socket server and is in an "offline" state.
So I've tried using an ajax-loader.gif, courtesy of http://www.ajaxload.info/
<s:Image source="#Embed(source='assets/ajax-loader.gif')"
horizontalCenter="0" verticalCenter="0" includeIn="offline" />
but unfortunately the bitmap is not animated (does not spin).
Is there a way to do that, how do you approach displaying a "loading indicator" in your Flex 4.5 programs?
Or do I have to fallback to mx.controls.ProgressBar?
When you embed a gif, only the first frame gets embedded.
You can either use an "swf" animation file that has a spinner and use it inside an Image tag or you can also check out gif libraries in as3, as3 gif player and as3gif.
Why not just use the progress bar set to in determinant ;)

The height and width properties on my Flex 4 app are not working?

In the opening application tag of my Flex 4 app, I set the width and height properties as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()"
backgroundColor.mainState="0x303030"
xmlns:components="components.*"
width="798"
height="240">
What I go into Design mode in Flash Builder 4, the app is the correct size. But when I embed the .swf file into a HTML page, the application's background color covers the whole screen, and when the Flash Player Settings message box pops up it is outside of the area I defined in the code above. What am I doing wrong? Thanks for reading.
Set the Flex Application width and height to 100%.
No matter what, the html template's width and height are always 100%,
you have to set the flex application width and height to 100%. Flex
Application itself cannot render on the browser. It needs some kind
of wrapper to render it on the browser. Hence Flex Application gets
wrapped inside an HTML template and the Browser eventually renders
the Flex Application.
Flex Application --> HTML Template --> Browser
Check the index.template.html in the html-template folder. That's the file that generates your index.html when you build; perhaps you could address your problems in there.

Why are my swfs not the right resolution?

Forgive me if this is a really stupid question, but I cant figure it out.
I must admit this is my first project in flex as opposed to flash cs3.
All of the assets that I'm using in my .swc are in a .fla that is 1024x768.
Nothing in my actionscript code is scaling down the size of my app, but every time I test my project, my project only takes up maybe 600x500 of the stage, instead of filling it up as I had imagined..
What am I doing wrong here?
In standalone player use exact width and height not percentage.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="768">
<!-- more staff -->
</mx:Application>
And as far as I know there are no way to may it work in standalone player with percentage.

How to make a window show up outside the app?

In our Flex AIR app, we have the problem that our main app window is fairly narrow. This means Alert dialog boxes are chopped on both side, while the right click menu is cropped. How can we get these windows to not get cropped by our main window?
Turn your main AIR window into an invisible transparent window and make your app's primary working window a child of the invisible one. Then when you AIR app starts, make the invisible window the size that encompasses the desktop. You'll then be able to position as many windows and dialogs as you want on this desktop area without worrying about them getting clipped as is happening to you now.
If you want to support multiple screen displays - such that your visible app window can be drug around from display to display, then make your invisible window the size of the entire graphics coordinate system such that it encompasses any and all display screens.
Once you go with the invisible window approach, you'll be able to achieve windowing behaviors that are like that of native applications.
How are you showing the Alerts? If you are using Alert.show(), it will use the default width. However, you can get around this by creating an Alert Object, setting the width manually (or even dynamically), and then using the PopUpManager to show it, place it where you want, and hide it. It takes a little more code, but gives you a lot more flexibility.
Here's a small sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function creationCompleteHandler():void
{
var alert:Alert = new Alert();
alert.width = 100;
alert.text = "this Alert is\n100px wide";
PopUpManager.addPopUp(alert, this);
PopUpManager.centerPopUp(alert);
Alert.show("this Alert uses the default width");
}
]]>
</mx:Script>
</mx:WindowedApplication>
With flex applications running inside of the flash player, windows cannot be shown outside of the stage. So the only way to make this work would be to make your app larger.
You could though use the flex/ajax bridge and call a javascript alert box instead, they would not be bound by the stage. But it would not be skinned like the rest of the application though and would take some more work to get hooked in, especially if you are listening for the user to click the okay button...
I believe the dojo extensions for adobe air should be able to do what you are after. Never used it myself and not sure what the trade off will be but it might be worth looking at.
http://sitepen.com/labs/dair/

Resources