I'm having this problem with my Actionscript 3 website. Basically, it's the background element (a movie clip), is supposed to resize to cover the stage. However, this doesn't happen. The browser window is indeed the colour of the stage (dark grey), but the MC remains at its default size in the top left corner.
It all works fine when tested inside Flash CS5. After publishing it and opening it in the browser though, the problem arises.
I was puzzled not to find more information on this as I assume that every flash website with auto-resizing content has to somehow overcome this issue.
Below follows a bare-bones example that illustrates the issue:
import flash.events.Event;
import flash.display.MovieClip;
import fl.text.TLFTextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
var back:MovieClip;
var email:TLFTextField;
var coming:TLFTextField;
var count:TLFTextField;
var i:int;
init();
function init():void {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
back = new MovieClip();
email = new TLFTextField();
coming = new TLFTextField();
count = new TLFTextField();
email.text = "address#host.com";
configureTextField(email);
coming.text = "coming soon";
configureTextField(coming);
i = 0;
count.text = "" + i + " " + stage.stageWidth + " " + stage.stageHeight;
configureTextField(count);
back.graphics.beginFill(0x330000, 1);
back.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
back.graphics.endFill();
back.addEventListener(Event.ADDED_TO_STAGE, addHandler, false, 0, true);
stage.addChild(back);
stage.addChild(email);
stage.addChild(coming);
stage.addChild(count);
stage.dispatchEvent(new Event(Event.RESIZE));
}
function addHandler(event:Event):void {
stage.addEventListener(Event.RESIZE, resizeHandler);
back.removeEventListener(Event.ADDED_TO_STAGE, addHandler);
}
function configureTextField(currentText:TLFTextField):void {
var format = new TextFormat();
format.font = "Calibri";
format.size = 24;
format.color = 0xFFFFFF;
currentText.setTextFormat(format);
currentText.autoSize = TextFieldAutoSize.LEFT;
currentText.selectable = false;
}
function resizeHandler(event:Event):void {
back.width = stage.stageWidth;
back.height = stage.stageHeight;
email.x = stage.stageWidth/2 - email.width/2;
email.y = stage.stageHeight/2;
coming.x = stage.stageWidth/2 - coming.width/2;
coming.y = stage.stageHeight/2 - 64;
count.x = stage.stageWidth/2 - count.width/2;
count.y = stage.stageHeight/2 + 64;
i++;
count.text = "" + i + " " + stage.stageWidth + " " + stage.stageHeight;
configureTextField(count);
}
And part of the published HTML code, if it helps:
<head>
<title>comingSoon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #333333;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="800" id="comingSoon" align="middle">
<param name="movie" value="comingSoon.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="800" height="800">
<param name="movie" value="comingSoon.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Any suggestions are greatly appreciated!
Thank you!
cc
You should set the width and height of your object tags to be 100%.
So change:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="800" id="comingSoon" align="middle">
for
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="comingSoon" align="middle">
Also change:
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="800" height="800">
for
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="100%" height="100%">
Related
I am trying to embed this flash banner in side but url on it is messed up.
So I placed an invisible div on it with the correct url .
The trouble is when I click on it, I get transferred to both the correct url and the incorrect one.
<div class="invisible" onmousedown="window.open('http://ags.gns.co.il/cdn/DigitalCloud/iMarkets/2012/Gadi_Back_To_News/?Media=maof')" style="z-index:10000">
<object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/Imarkets_150x75.swf" width="150" height="75">
<param name="movie" value="http://s-maof.com/stuff/Imarkets_150x75.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
</object>
</div>
You are not overlaying the flash, you are just containing it !
try this html:
<div class="invisible">
<a class="overlay" href="http://ags.gns.co.il/cdn/DigitalCloud/iMarkets/2012/Gadi_Back_To_News/?Media=maof"></a>
<object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/Imarkets_150x75.swf" width="150" height="75">
<param name="movie" value="http://s-maof.com/stuff/Imarkets_150x75.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
</object>
</div>
now we set the link to overlay the flash
.invisible{
position:relative;
width:150px;
height:75px;
}
.overlay{
z-index:10000;
display:block;
width:150px;
height:75px;
position:absolute;
top:0px;
left:0px;
background:red;
opacity:0.3;
}
DEMO
you can remove the opacity and background, they are just for demonstration.
I have a FlashBuilder project for which I want to set the displayed size (in browser) only via the html file. I don't want to hardcode the size of the swf in the flash code.
Also I need to provide several parameters with flash vars.
My html is a modified version of the standard html code generated by FlashBuilder. I try to set the size of the swf in JavaScript and using a container div. So I have the following html code to display the swf:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens
with two hyphens -->
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
flashvars.json = "some json file.json";
flashvars.width = "900";
flashvars.height = "480";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "direct";
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "left";
swfobject.embedSWF("Main.swf", "flashContent", "100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left");
</script>
</head>
<body>
<div style="display:block;text-align:left;width:900px; height:480px; position:absolute; top:50px; left:100px">
<div id="flashContent">
<p>To view this page ensure that Adobe Flash Player version 11.1.0 or greater
is installed.</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>");
</script>
</div>
</div>
</body>
</html>
And the following in my flash main method:
public function Main(){
swfWidth = LoaderInfo(root.loaderInfo).parameters.width;
swfHeight = LoaderInfo(root.loaderInfo).parameters.height;
swfFrameRate = LoaderInfo(root.loaderInfo).parameters.framerate;
json = LoaderInfo(root.loaderInfo).parameters.json;
loadJsonFile(json);
stage.frameRate = swfFrameRate;
stage.scaleMode = StageScaleMode.NO_SCALE;
view = new View3D();
view.width = swfWidth;
view.height = swfHeight;
camera = view.camera;
cameraController = new HoverController(camera, null, 150, 10, 10);
this.addChild(view);
}
However, when I open this in browser the displayed size does not match the size given in the hmtl (with the above code it results in about 700x430 px).
What am I doing wrong?
Finally, I managed to fix it.
The problem was the Main.html and index.template.html created by Flashbuilder (and wich is not easy to revise, as it is very complex and more detailed than actually needed.
I created a new .html file with the help of this generator:
http://www.bobbyvandersluis.com/swfobject/generator/index.html
.. and now the stage is set as provided by the flashVars.
This is how my Main looks like now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("Main", "11.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="850" height="480" id="Main">
<param name="movie" value="Main.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFile.json&width=850&height=480&framerate=60" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Main.swf" width="850" height="480">
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFilejson&width=850&height=480&framerate=60" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
This has been driving me nuts. I've worked with SWFObject in the past which is great. However I have a requirement not to use JavaScript. So when I try to do flashvars examples all over the net, they don't seem to work for me.
Steps to repeat:
1) Create a pure AS3 project using Flex or Flash Builder
2) In the index.html wherever there is a .swf, add a name value pair suffix.
test.swf?foo=bar
3) In the constructor of the main class Sprite, trace(root.loaderInfo.parameters.foo).
Expected: bar but traces out as undefined
I've tried setTimeout() to evaluate 5 seconds in the future, still doesn't work as if it's not loaded at all.
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
<param name="movie" value="${swf}.swf?foo=bar" />
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="${swf}.swf?foo=bar" width="${width}" height="${height}">
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
AS3
package
{
import flash.display.LoaderInfo;
import flash.display.Sprite;
public class FlashVarsTest extends Sprite
{
public function FlashVarsTest()
{
var paramsObj:Object =
LoaderInfo(root.loaderInfo).parameters;
trace("foo="+paramsObj["foo"]);
}
}
}
This doesn't work either:
package
{
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
public class FlashVarsTest extends Sprite
{
public function FlashVarsTest()
{
this.addEventListener(Event.ADDED_TO_STAGE, init)
}
private function init(event:Event):void
{
var paramsObj:Object =
LoaderInfo(root.loaderInfo).parameters;
trace("foo="+paramsObj["foo"]);
}
}
}
Update after seeing OP code:
Your error is in the non-IE object tag:
<object type="application/x-shockwave-flash" data="${swf}.swf?=foobar"
Gotta love a typo!
Have you tried using the FlashVars object param tag instead of passing them as part of the URL?
<object classid="blah blah">
<param name="movie" value="test.swf" />
<param name="FlashVars" value="foo=bar" />
<embed src="test.swf" FlashVars="foo=bar" />
</object>
Obviously I've omitted a lot of extra stuff here, but this should illustrate how variable passing is done.
As a side note though, passing variables though the URL should work in AS3, as this blog by Peter deHann illustrates: http://blogs.adobe.com/pdehaan/2006/07/using_flashvars_with_actionscr.html
Testing myself:
I used ExternalInterface to output to the Firebug console. Both outputs come out as expected, proving that there is not drawing delay associated with root.loaderInfo
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.external.ExternalInterface;
public class Main extends Sprite
{
public function Main()
{
if(ExternalInterface.available) ExternalInterface.call("console.log",root.loaderInfo.parameters.foo);
(stage) ? init() : addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(evt:Event = null):void
{
if(evt) removeEventListener(Event.ADDED_TO_STAGE,init);
if(ExternalInterface.available) ExternalInterface.call("console.log",root.loaderInfo.parameters.foo);
}
}
}
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: #ffffff; }
object:focus { outline:none; }
#flashContent { display:none; }
</style>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="Main">
<param name="movie" value="Main.swf?foo=bar" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Main.swf?foo=bar" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.2.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</body>
</html>
I'm trying to position my Flex app so that its in the bottom 40% vertically, and the left 70% horizontally. This is how I define the flash section in CSS:
#flashContent { display:none;position:absolute; top:60%;width:70%;height:40%;}
Here is the HTML:
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="434" height="100%" id=app name>
<param name="movie" value=link_to_the_file />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data=link_to_the_file width="434" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.0.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</div>
But it's still just appearing in the top-left corner. What am I doing wrong?
Thanks for reading.
Please don't use the values in percentage in flex. If you want to put your stuff in centre, then we have horizontalAlign and for vertically, we have verticalAlign properties.
Specify left, top, bottom and right in numbers only,
I have a generated HTML page with flash content in it. I am trying to reposition the flash content and make it "absolute". I have tried to wrap the object tags with a div tag, but to no avail. Can anyone tell me how to do this? Removing the generated positioning attributes does not work.
See relevant code below (it is not very neat, but this is how it is generated. I have removed most irrelevant code):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>* welcome *</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#000000">
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '430',
'height', '200',
'src', 'bar',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'right',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'bar',
'bgcolor', '#000000',
'name', 'bar',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'bar',
'salign', ''
); //end AC code
}
</script>
<noscript>
<div style = "position: absolute">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="430" height="200" id="bar" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="bar.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#000000" />
</object>
</div>
</noscript>
Thanks in advance!
you should place the JS script that actually creates you object inside your div not before it.
Since your div is wrapped in noscript it will only be shown if javascript is turned off, are you sure that is the behaviour you want?
#Fuzzy76 & #epeleg.blogspot.com is right
#pypmanetjies -> Your code must be like this (shortened):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>* welcome *</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#000000">
<div style = "position: absolute">
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
...
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="430" height="200" id="bar" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="bar.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#000000" />
</object>
</noscript>
</div>
You might have to set a width and height on your as well.