I have a simple HTML file which embeds a Flash file. On the page styling I have a #flashContent with width:100% and height:100%; the Flash object itself has width="100%" and height=100% and is inside a div with id="flashContent". The idea is to make the Flash object (which is a game) to fill the whole browser window even as it resizes.
This works with no problems on IE and Firefox, but there is a small problem on Chrome. About 90% of the time when the page first loads all that is shown is black (the page's background color). The game only appears if the user resizes the window; from then on out it works correctly.
I'd like to ask if there is anything I am doing wrong or if there is an workaround to ensure the Flash game appears correctly on the Chrome browser.
http://reisio.com/examples/fullflash/
<!doctype html>
<html>
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<object
data="Flash.swf"
type="application/x-shockwave-flash"
width="400"
height="300">
<param
name="movie"
value="Flash.swf">
</object>
</div>
</body>
</html>
Try using exact (or very big) length for the height, not percents. I had similar problem and I solved it by indicating exact height instead of 100%
but I also use AC_FL_RunContent(...), and in my case the actual height generation was happening there, and there is actually where I had to set the height and for some reason it wasn't setting it to 100% in Chrome. Other browsers work fine though. Below is the code:
<script>
AC_FL_RunContent(
"src", "flash/ConstructionKit03",
"width", "100%",
"height", "740",
"align", "middle",
"id", "ConstructionKit03",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ConstructionKit03",
"flashvars",'historyUrl=history.htm%3F&lang=<%=userLanguage%>&initialUrl=<%=workflow_url%><%=(!edit.equals("") ? "&initialState=editable" : "" )%>&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
</script>
<object id="ConstructionKit03" width="100%" height="740"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="ConstructionKit03.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="flash/ConstructionKit03.swf" quality="high" bgcolor="#869ca7"
width="100%" height="740" name="ConstructionKit03" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
Related
I have an SWF object that I have embedded on an html page. I simply want to center the object on the screen. I've tried a hundred different things (setting the align attributes on the object to center, wrapping the object in a div and centering that...) but the object always appears flush with the left side of the screen. I'm sure its a very simple line of code somewhere that will make this work, please enlighten me as to what that is...
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.
Learn more about Flex at http://flex.org
// --><head>
<title></title>
<meta name="google" value="notranslate" />
<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- position:center;
background-color: #000000;}
object:focus { outline:none; }
#flashContent { display:; }
</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">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#000000";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "middle";
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:center;");
</script>
</head>
<body>
<div id="flashContent" align="center">
<p>
To view this page ensure that Adobe Flash Player version
10.2.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>
<noscript>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="middle" id="Main">
<param name="movie" value="Main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object data="Main.swf" type="application/x-shockwave-flash" width="100%" height="100%" align="middle">
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<!--<![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>
</div>
</noscript>
</body>
</html>
PS this is my issue when I try to edit the html file generated with the SWF. When I try to create a new HTML file and embed the swf in it, I can center the file, but I can't get it the object to scale to fit the vertical dimensions of the screen (the objects at the bottom of the page are below view, whereas on the automatically-generated html file, the swf auto-zooms to fit the screen, but I can't center it..) A solution to either of these problems would be greatly appreciated
Here is an example in jsFidle
It's very simple, you use absolute position and just specify 50% from top and left and then put top and left negative margin half of the container.
Here is the css:
.container{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: blue;
}
Remember, for this to work you need either fixed size or javascript updating margins on window resize event!
Here is an HTML markup:
<div class="container">
<iframe width="400" height="400" src="http://www.youtube.com/embed/Awlp8B5os0k" frameborder="0" allowfullscreen></iframe>
</div>
I've built an intro page for my website (it's a .swf file) and I'm trying to embed it into an .html file, but the html code won't allow me to resize the file (I want the file to take up the whole page, so I tried resetting the height and width parts of the object tag to 100% - it didn't work)
someone told me that the best way to resize the file would be by using javascript. How would I do this?
the code is as follows:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="intro to elianas website" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="intro.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#1C140D" />
<embed src="intro.swf" quality="high" bgcolor="#1C140D" width="100%" height="100%" name="intro" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
You also need to provide the height and width for the Object as well.
<object width="100%" height="100%">
<param name="movie" value="file.swf">
..
<embed src="intro.swf" width="100%" height="100%" />
</object>
Seems like an inactive post but just in case someone looking for a solution stumbles upon this, here is the solution:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,40,0"
width=100% height=100% id="intro">
<param name="movie" value="sample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#1C140D" />
<embed src="/path/to/sample.swf" quality="high" bgcolor="#1C140D"
width=100% height=100% name="intro" align=""
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Note:
Don't define the width and height parameters in double quotes (when using %)
This technique will not work for XHTML, <embed> can't be within <object>
tag
Here is a short and to the point tut about embedding swf in html:
http://www.tizag.com/flashTutorial/flashhtmlcode.php
Use CSS to increase the page width and height of your body and html tags
<style type="text/css">
html,body {
height:100%;
width:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
I had a similar issue with a full page flash file, where firefox wouldn't display the flash and chrome displayed it with a limited height towards the top of the page.
I have a swf file and a html page which shows the swf file. I want to prohibit right click on swf file. I do not mean removing right click menu, I just want to prohibit the right click action. Then if you right click nothing will be happened.
Here is the html code:
<html>
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#swf-holder').bind("contextmenu", function(e) {
return false;
});
});
</script>
<title>Help Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">html {overflow: hidden;}</style>
<style type="text/css">body { background-color: #07090e }#swf-holder { margin-top: 0px; width: 715px; position: center; top: 0px; left: 0%; margin-left: 0px; }</style>
</head>
<body>
<div id="swf-holder"><object id="content" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="715" height="580"><param name="movie" value="Main.swf" /><param name=quality value=best /><param name=bgcolor value=#07090e /><param name=allowScriptAccess value=always /><param name="wmode" value="opaque" /><object id="gecko" type="application/x-shockwave-flash" data="Main.swf" width="715" height="580" bgcolor=#4A4A4A wmode="opaque" quality="best"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" border="0" alt="Get Adobe Flash player" /></object></object></div>
</body>
</html>
Any trick or idea for doing this?
Try putting this under the HEAD of your HTML page
<script language="text/javascript">
var message="Function Disabled!";
function clickIE4() {
if (event.button==2) {
alert(message); return false;
}
}
function clickNS4(e) {
if (document.layers||document.getElementById&&!document.all) {
if (e.which==2||e.which==3){
alert(message); return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById) {
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
(Edited code just for formatting reasons)
SOURCE: Hypergurl
There are some other methods on that page which may help you, but this seems like the easiest to implement.
Also, just so you are aware, if visitors to your site really want to get your content, there isn't any way to stop them from getting it other than not displaying it, using the right tools in the right browser, I (and you) can get an image off a site easily.
Method: Prohibit right-click menu in an ID and it's children
This small code will stop the user from right-clicking in the given ID (Can be easily changed to suit any object). Just make sure you have a set width and height of the containing ID.
To Implement:
Copy this code directly into your HEAD.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#swf-holder').bind("contextmenu", function(e) {
return false;
});
});
</script>
Then in your Body, find the element you want to protect (SWF Div) and add the attribute id="swf-holder"
Hope this works for you, took me a little reading to find it.
I made a JSFiddle for it too, link is here
To avoid the right click on flash SWF file make sure you include the settings shown in BOLD
I just tested it correclty on IE9
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="540" height="140">
<param name="movie" value="flashmovie.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" / >
<param name="menu" value="false" />
<embed src="flashmovie.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
menu="false"
width="540"
height="140"
pluginspage="http://www.macromedia.com/go/getflashplayer"
allowScriptAccess="always" />
</object>
Taken from
http://www.aleosoft.com/flashtutorial_disablerightclick.htm
I am trying to put a 1024x168 flash video(swf) in a web page and but the video is getting clipped, I wish to have scroll bar appear whenever it overflows. Below is my code:
<!DOCTYPE html>
<html>
<head>
test
</head>
<body>
<div style="overflow: auto;">
<object id="M97012085" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" style="overflow: auto; align:middle;" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
<param name="movie" value="path_to_swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<param name="play" value="false" />
<embed bgcolor="#ffffff" align="middle" name="M97012085 loop="false" src="path_to_swf" width="100%" height="100%" style="overflow: auto; align:middle;" play="false" wmode="transparent" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>
Please advice how can I have the scrollbars appear when video overflows ?
I think by setting the height and width to 100% on your object you are telling it to fill up the whole div, which is why you don't get scrollbars.
Try setting the actual dimensions for the height and width and then when a video's dimensions are larger then the div you should see the scrollbars.
i would like to show my flash movie in a browser window so that it fills width and height as good as possible without distorting the movie.
when i use the width and height attribute to the object/embed tags it only scales the width but not the height.
<body bgcolor="#000000"
width="100%"
height="100%">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="100%"
height="100%"
align=""
id="slot">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="..." />
<param name="quality" value="high" />
<param name="width" value="100%" />
<param name="height" value="100%" />
<embed src="..."
width="100%" height="100%" quality="high" align="middle" allowScriptAccess="always" allowFullScreen="true" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
I think you just need to add some CSS to the HTML page:
html, body { height: 100% }
It should work is youset the width and height to 100%. Then set the scalemode to showAll, that should prevent the movie from distorting.
Then you could of course set the css padding and margin of the html body to 0px the get the most area of the window.
Use swffit. It resizes flash when the browser window is changed.