Hi all!
Since new flashplayer release I've been having some problems resizing the stage.
The scenario:
I have a flash app inside a html <div>. The html div has width and height controlled by jQuery. In flash, i have
this.stage.scaleMode = StageScaleMode.NO_SCALE;
Ok, no news until now. The content of the flash changes every 3 or 4 seconds. Since there are other elements in the page around the swf, we decided to use the browser scroll to roll the page. So, if flash's content is about 1200px height, the swf makes an ExternalInterface call and JQuery will resive the html DIV to that height, so user can scroll the page and see the content.
It works fine, but here comes the problem. When jQuery resizes the div, the flash app "blink" and "squeeze" in many horrible ways until it sits to the right dimension. It is "scaled" for some seconds. It is very fast, but since it happens many times per minute, turn things ugly, "buggy".
I did a video of the screen and catch some frames into a GIF image, so you can see what happens. The image can be see here:
http://imageshack.us/a/img109/4255/flashreposit.gif It has 4 frames. The first one is the initial state. When I set the html DIV around its half height, flash goes through 2 strange scales, until gets to the last 4th final frame, with the correct aspect and correct ratio.
Does someone know how to prevent that? It is really annoying and use a flash internal scroll isnt an option on this project. Before flash 11 I could manipulate the html div (that holds flash) freely with no staging distortion.
Thanks in advance.
Pedro Paulo Almeida
Brazil
What is the HTML setting the flash objects size to? Is it a percent or a pixel amount in height and width? Do you have any CSS being applied to the object itself?
Is the entire site Flash? If so, why have a <div> when the Flash plugin is block-level and will create a scrollbar when you resize the flash plugin object itself?
Hi, sinious.
a) The object size is: width="738" height="1936". Before new flashplayer, height was height="100%".
b) I dont have any CSS applied to it, just the inheritance like "margin 0, padding 0, border 0, etc".
c) The website isnt full flash. There are html elements at the right, that interact with the flash app through javascript (ExternalInterface calls).
The idea is not create a scroll just to the flash content (like old iframes look like). You can visit the page and the problem occurring here:
https://br.betboo.com/sports/livebetting/
As you can see the data of the server changes the flash height automatically many times per minute. Acctually i can found this problem in many other websites, including the full flash apps.
Thanks for your help.
Sorry if i was not clear about one thing: acctualy the javascript is changing the <object> flash plugin directly. If you open firebug (or similar) and click in the left menu in the "Futebol" button (witch toggle the soccer games) you will see the page "blinks" and the height of the <object> tag changes the hegith size. The new size is calculated by flash and sent to jquery, witch changes the <object> height size.
It used to be wonderful and works so great. Until new flashplayer.....
thank you all.
I realize this doesn't answer your OP but might just solve the issue regardless. Have you tried publishing for 10.2 to see if it solves the issue or does the same issue persis because the users computer may have FP11 installed anyhow? You should always be targeting the least version Flash Player necessary for the biggest compatibility demographic.
Yes, i did. Actually i'm doing an app and exporting it to 10.3, as the agency asked. And i have the very same problem. And this app >IS< 100% x 100% full flash window.
If i resize the window, flash flicks all that strange behavior and after that sits the correct way. This error is really anoying mainly because it looks like i cant do anything. And Adobe guys probably will not say anything about it. Hope someone who had notice it (with their own apps or not) be adivise and have in mind: flash apps with stage that constantly resizes its dimensions may be a bad option.
What im going to do: set flash (tag <object>) "wmode=transtarent" and the height with a enourmous dimension (like 5000px), inside a div element with overflow:hiden. This overflow:hidden div inside a master div. Flash will tell jQuery (ExternalInterface.call) its current visual size, and jQuery will redim the master div height. So, things around will be aside flash. Flash stage will be always that 5000px and i will control the external HTML div to show the correct flash content in the page.
Very sad and souns like a horrible work around. But it is better than punish my users with worst flash crazy resizes all the time. But, please, Adobe: NO_RESIZE should means this: no resize. And not "flick, mess arounnd, distortion and after that - and just after all that-" no resize.
Do you have a public link where I can see this artifact in action?
5000px and transparent is asking for a LOT of trouble. While Flash tries to optimize by automatically only rendering redrawn regions, that is a huge amount of space. Just a browser rendering a transparent PNG at that size would be costly enough and bog the entire screen.
BTW you should never set something to 100%, the browser will continuously fight with the need for scrollbars. I realize you said you're going overflow:hidden; but previously you were 100%. You shouldn't do that, just a future note.
Also please keep in mind Browsers implement the majority of what you're doing, not Flash. The event chain hierarchy is pretty much in question here. You should be sizing your content in flash before you ever request the Flash plugin container to be resized. It looks like the resizing of the object happens before the data, but I can't be sure with your sample. A public sample would be much easier to diagnose.
Thanks for the adivice, sinious.
As i sad before, you can see the app here: https://br.betboo.com/sports/livebetting/
There is a menu in the left. Try click the gray buttons that opens and close the contents (or just wait for the data updates). You will see the flash mess.
Now its height is beeing set by jQuery. The stage is StageScaleMode.NO_RESIZE mode.
Thanks
Yes the stage should be set to NO_SCALE not NO_RESIZE (or if you did set it to NO_RESIZE, there's your issue).
Aside that I did take a 30fps screen recording of the content changing. Here's 6 frames from the movie.
Frame 1, selecting nav item.
Frame 2, squishing as you mentioned. How is the interface not updated before the resize request?
Frame 3, frame 4, frame 5, frame 6. These are not as you have been told to develop it. These should have been drawn and the layout completed before the resize but clearly the data is not in place before you resize. You need to go back and check your layout issue. You're not properly sensing when the layout of the new data is finished while resizing ahead of time.
Regardless if it worked in a previous version of Flash, the issue is with the order in which you're doing things. That or if you're using the invalid "NO_RESIZE" instead of "StageScaleMode.NO_SCALE".
No, no. I dont think it is related to update data in the screen. So, I did a very simple example: create a simple project that shows in the stage a "grid" of squares. A very simple movieClip. And than, i use javascript (with jQuery) to set new width and height to the <object> tag in the page.
It shows the very same problem: strange squeezes and scales before sits in the correct ratio.
Here it is online: http://ppwebart.com/lab/resizetest/index.html
Here it is the source project: http://ppwebart.com/lab/resizetest/ResizeTest.zip
What is more strange: within the stand alone flashplayer, this effect of stretching never happened.
Could you test the project yourself and see if you get the same results?
Thanks for your help.
Only on Webkit browsers. While I still see the order of your information (the one you're concerned with) is out of order, it works fine on Mozilla and IE. Webkit (Chrome/Safari) on Win are showing blinking. Chrome specifically shows the warping that you are experiencing, but Safari appears to only blink.
Here is a SCALED, 12fps example video of the scaling happening in 4 browsers open to approximately the limits you set, at the same time. You can see the Safari browser blink, sometimes to black. You can see Chrome blink, and sometimes warp like you're seeing. Mozilla and IE dutifully resize with no artifacting.
Typically if one browser engine has issues (e.g. WebKit) then all browsers with the same engine will also. That's why I brought up 2 to illustrate that (Safari/Chrome).
I seriously doubt you'll be able to fix this without an extensive workaround involving screenshot foolery or (what I consider) unacceptable routes like 5000px documents to compensate.
You seem familiar with jQuery, why not just do it in HTML?
There's nothing about the interface HTML/JS/CSS couldn't handle that I can see but I'm just looking at the front page.
Yeah, you're right. One reason more to leave flash as a web tool. This app was coded many years ago, and used to work brilliant. But now, every corner I see, flash has a huge problem and people always say "Hey, why dont you do this with HTML or Canvas?".
Yes, flash, these ar hard times to be with you. And each day even more.
Sinious, thanks for all your help and interesting in my problem. I really appreciate it.
Flash has a purpose that has simply changed. While it was perfectly possible to do most of what jQuery seems to make effortless before, nobody was willing to take on the mammoth task of browser differences with scripting. Only with the browser market conforming to standards is it becoming possible. Flash did fill that gap for a long time.
However that was never the main purpose of flash. Flash is about simple and/or sohpisticated animation, as spicy as you like. People using it for the wrong purposes doesn't mean it's Flash's fault any more than WebKits poor resizing of the Flash plugin is. It's WebKits fault, not Flash.
With 3D on the rise I feel Flash will finally debut as the preferred multimedia engine for upscale web content. The difference between HTML and Flash should be the difference between YouTube and IMAX. Point being, you should be able to tell the difference or else the author didn't use it for the right purposes.
You're welcome and if you're all set can you please mark it answered so we can filter unanswered questions and good luck!
North America
Europe, Middle East and Africa
Asia Pacific