|
HTML - Working With Flash Objects
Hi,
I'm adding a flash games page to my site. My question is - I have a swf file (say for pac-man), how do I put it in the html? Is this even how one goes about putting a flash game on a page? I've also tried this: I've seen a game that I want - then I've just looked at the source info - then copied the part that "is" the game... like say this: Quote: <object classid "clsid87CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400"> <param name="movie" value="http://www.flashstash.com/media/swf/catch33.swf"> <param name="quality" value="high"> <embed src="http://www.flashstash.com/media/swf/catch33.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="v" type="application/x-shockwave-flash" width="400" height="400"></embed> </object> ...and just pasted that in an html page, to see if it would work and it did. But, when I do that, is it actually just linking from that page and playing on my screen? What's the right way to go? Can anyone help me? Similar TutorialsI basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab">
<param name="SRC" value="splash.swf">
<embed src="splash.swf" width="640" height="480"></embed>
</object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. Hi All, Can anyone help? The website is www.rivalinsurance.co.uk my flash header works in IE but not in FF. Could somebody veiw the code and tell me where I am going wrong?! Been pulling my hair out for weeks now! Thanks, akw144 So this is the website that I got: Quote: http://eksow.com/ This is the source code for it: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Eksow Event Design & Management</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> function showPictures(n) { obj = document.getElementById('changingPictures'); document.getElementById('bottom').style.top = "0px"; if(n==1) { obj.src="http://eksow.com/images/Eksow_07.jpg"; obj.style.visibility="visible"; } else if(n==2) { obj.src="http://eksow.com/images/Eksow_13_07.jpg";//Change this value to the url of second set of images obj.style.visibility="visible"; } else if(n==3) { obj.src="http://eksow.com/images/Eksow_12_07.jpg";//Change this value to the url of third set of images obj.style.visibility="visible"; } else{} } </script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id="container"><img src="http://eksow.com/images/Eksow_01.jpg" width="1024" height="261" alt=""> <div id="left" class="rollImages" onclick="showPictures('1')"></div> <div id="middle" class="rollImages" onclick="showPictures('2')"></div> <div id="right" class="rollImages" onclick="showPictures('3');"></div> <img src="http://eksow.com/images/Eksow_07.jpg" alt="Home Page" id="changingPictures"/> <div id="bottom"></div></div> </body> </html> This is the CSS of it: Quote: body { background-color:#000000; width:100%; padding:0px; margin:0px; margin-bottom:10px; } #container { margin:0px auto; width:1024px; padding:0px; text-align:center; } img { border-width:0px; padding:0px; margin:0px; } #left { background-image:url(http://eksow.com/images/Eksow_03.jpg); margin-left:74px; } #left:hover { background-image:url(http://eksow.com/images/Rollover_1_03.jpg); } #middle { background-image:url(http://eksow.com/images/Eksow_04.jpg); width:296px; } #middle:hover { background-image:url(http://eksow.com/images/Rollover_2_04.jpg); } #right { background-image:url(http://eksow.com/images/Eksow_05.jpg); position:relative; } #right:hover { background-image:url(http://eksow.com/images/Rollover_3_05.jpg); } .rollImages { width:292px; height:229px; float:left; cursor:pointer; } #changingPictures { visibility:hidden; } #bottom { height:8px; background-color:red; text-align:center; background-image:url(http://eksow.com/images/Eksow_08.jpg); position:relative; left:50px; top:-260px; } #bottom:hover { background-image:url(http://eksow.com/images/Rollover_4_08.jpg); height:8px; } What I'm trying to do is insert Quote: http://eksow.com/eksow.swf Which is Flash (160x15 px) into the actual website RIGHT UNDERNEATH the 'bottom'. I've tried, and tried, and tried again... But nothing works :S Does anyone know if there is some trick that I have to do or I'm overlooking something? Im not really in the mood of screwing it up, you know? hello I tried to publish a flash video so I could use it as a website background. everything works great in dreamweaver, but when I transfer all my files to my schools server the video no longer works. does anyone have some ideas? Ill provide files if needed. Thank you-Micah my hyperlink on the flashbutton is not working in FF (the button is placed in a div layer) Can someone help me?? Thank you Greets Denise You may have seen this question before, but I cannot for the life of me find an answer that works. I embedded a .swf flash file on a page on my website. This flash plays perfectly on IE and Chrome, but nothing shows up on Safari or Firefox. I, at first, wrote the code by hand. Then I instead used swfobject to properly write the code (this still hasn't fixed the problem) I used the w3 markup validation site to check the code, and it comes back with 0 errors. Any Ideas? The code is below: <!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="posthink.swf"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "9.0.0"); </script> </head> <body> <div style="text-align: center;"> <object classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" id="myFlashContent"> <param name="movie" value="posthink.swf" /> </object> </div> </body> </html> (I inserted a space in the classid= tag to do away with the : D turning into a smiley) Thanks for your help. I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head>
<title>iSwim</title>
</head>
<body>
<div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;">
<object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object>
</div>
</body>
Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. I am trying to insert the same html page http://www.danhead.com/store/dirtfest/index.html into several other pages including a myspace profile. Thanks to the blocking of iframes on MySpace the only solution I have found so far is to embed the html in an object. This is the code I am using now to insert the object: Code: <object type="text/html" data="http://www.danhead.com/store/test/index.html" width="420" height="800"></object> My problem is that the object is visible in Mozilla Firefox but not IE and possibly many other browsers as well, for I only have the two to check. With IE, all that appears is a blank frame the intended size of the object. My ultimate intention is to have both the object visible and the transparent background to show through on all browsers. You can view the code in use he http://www.dirtfest.com http://www.myspace.com/dirtfest Thanks in advance! Hi, I think this should be pretty simple to solve but can't find a resource online anywhere. I've written a photo viewing site using HTML server side includes. It is simply a large (480x360px) photo with an embedded object navigation menu below. The navigation menu has thumbnails of all the photos. It looks fine but the glitch is getting the navigation menu to change the large photo. I'm trying to avoid using JScript as it may be seen by those with basic computers (developing countries) although this is an option. The only resources I've found for this suggest creating a new page for each photo. This seems inefficient but I can't figure out if there's an elegant solution (CGI?) to pass which photo is required to a generic webpage. I'm pretty computer literate (degree in computer science in '99) but haven't programmed since I graduated and things have obviously moved on since then. You can see the page at http://osburn.co.uk/testpage/lebleu.shtml and the source below. Thanks for any help! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href= "css/main.css" name="default" type="text/css"/> <title>Davellos test page - business portal</title> <META Name="KEYWORDS" Content=""> <META Name="DESCRIPTION" Content=""> </head> <body> <br><br /> <table class="davell_photo_standard"> <tbody> <tr><td> </td></tr> <tr align="center"> <td id="vu"><a href="movie.shtml"><img alt="Davell tulip" src="jpg/chalets/brad/large/brad.3.jpg" name='SlideShow' align="center" border="0"></a></td> </tr> <tr> <td><object name="lebleuembed" class="davell_smallphoto_embed" data="lebleu2.shtml"></object></td> </tr> </tbody> </table> </body> </html> Hi, I am trying to create a 'Add to Basket' button on my site using HTML. I have created the following code whcih you can see in action at www.martinspares.com/shop.html (its about halfway down the page). The trouble is that the Quantity box is lower than the button but i would like them to be level which other. How can I achieve this? I am new to all this and am quite confused so any help is much appreciated. Paul HTML Code: <iframe name="cart1" width="0" height="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe> <form action="http://ww4.aitsafe.com/cf/add.cfm" target="cart1"> <input type="hidden" name="userid" value="66349534" /> <input type="hidden" name="nocart" /> <input type="hidden" name="return" value="www.martinspares.com/basket.html" /> <input type="hidden" name="product" value="Mac 600 Colour Wheel" /> <input type="hidden" name="price" value="26.97" /> <input type="hidden" name="scode" value="123456" /> <input name="units" type="hidden" value="2" /> <input type="text" name="qty" size="1"><input type="image" name="Submit" src="wpimages/Add to Basket.png" alt="Add Item to Shopping Cart" onclick="this.src='wpimages/Added to Basket.png'" /> </form> I'm fixing a website for work, and I need help. I know that you can find out which browser the user is using, but is there anything else you can find out. Specifically, screen resolution or internet speed? Ok im am kinda new to html i have set up a website that in my mind is not to bad considering i dont know much.. but when i minimize my buttons and 2 logos at the top all smash up together and it looks like crap.. All the help i could get would be great.. thanks for all the help http://www.dlsvendingllc.com Hello all, Working on a site for a client, and unfortunately I'm getting some errors in IE. Chrome and Firefox seem to work fine, but with IE8 I'm not sure of the changes. Here is the page: http://redd-design.com/clients/shepedals/index.htm I'd love to hear some input...thanks! My header looks weird. I tried using a table to get it down, but it doesn't want to seem to work the way I want it to. I want my search box and submit to ditchtime.com blocks to be right under each other all on the same line with my other ads. Instead the submit 2 ditchtime block is underneath everything else. Any table I could use to fix this? site http://www.ditchtime.com I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ ------------------------------------ Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg http://cortlandareatribune.com/test2/index2.html i have not defined any margins, actually removed them all together, by my two SWF files are being displayed with big gaps between them. how do i get these to display as normal block elements without the gaps? edit: i'm an idiot. had a wrong height defined in the html. Hello. I need to insert MS Word and MS Excell documents directly into html file. I use <object> tag for these perposes. Everything is ok and the whole documents can be viewed in IE through html file. But the problem is that these documents can not be printed currently from html file! One possible reason is that version of server(office) to print these OLE objects must be exatly the same as the version of office they were created in. Is there are any others ways to create printable html (or xml) document with office OLE objects inside? Hi, I am trying to figure out how to make my links stay on the left side page while scrolling down or up. Not sure if this is the right place to post. Any help, codes, and/or examples would be great. Thanks |
|||||||