I want to make a webpage with flash background & want to put html contents on it. It is like instead of having any background color or background image i want animation that i have created in flash. Is it possible to make flash as an html background?
yes you can accomplish this. Just have look at this code & made setting according to your needs..
<div style="position:absolute; z-index:1;">
<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="put width" height="put height">
<param name="movie" value="put your swf file here" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="put your swf file here" quality="high" type="application/x-shockwave-flash" width="put width" height="put width" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div style="position:relative; z-index:2">
<!-- Here you can add your html content -->
ABCD
</div>
</div>
You would need to create an html object element and play the flash file through that.
I have this html...
<div class="video2" style="display: none; width: 470px; height: 310px; background-image: url(http://www.jameshay.co.uk/images/Competitions/SipplicityPreview.jpg); background-position: top left; background-repeat: no-repeat;">
<object id="mediaplayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701"
standby="loading microsoft windows media player components..." type="application/x-oleobject"
width="470" height="310">
<param name="transparentatstart" value="true" />
<param name="animationatstart" value="false" />
<param name="autostart" value="false" />
<param name="filename" value="http://www.jameshay.co.uk/videos/MiSIPP_Overview.wmv" />
</object>
</div>
... but the background image isn't showing, I'm just getting a black screen (possibly the first frame of the video, though I did ask the agency to make that frame a preview image). Now annoyingly it sometimes shows, and sometimes doesn't. If I press the Stop button when the page first loads, the image appears. F5'ing may still show the image a few times before it goes back to black.
Has anyone got any hints on how I can fix this? It's looks so much nicer with a preview showing properly, rather than a large black square.
For my website I have an image showing a screen. Inside that screen I have moved an embeded youtube video inside that screen. So the embed is on top of the image. I can get the embeded video into the correct place using this:
<div style="position:relative">
<img src="screen.png" />
<div style="position:absolute; left:0px;top:0px;">
<embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>
</div>
</div>
I want the entire thing to be centered, however if I surround this with tags then obviously nothing centers because of the position; the embed stays 544 from the left of the window, not from the left of the image. Is there a way of making the embed move to match the images centered postion?
(NB: I'm aware that I should be using a seperate CSS doc for all styles, but I'm not interested in that right now, I just want to get it working then I might encapsulate styles into a seperate place later)
try this
<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;">
<img src="screen.png">
<div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;">
<embed width="425" height="349" allowfullscreen="true"" src="http://www.youtube.com/embed/qoSEzTpbxP4">
</div>
</div>
try this... good looking video frame !!!
<object height="360" width="580" id="video_MT6UDIruUkU" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
<param value="always" name="allowScriptAccess">
<param value="transparent" name="wmode">
<param value="video_id=MT6UDIruUkU&playerapiid=MT6UDIruUkU"
name="flashvars">
<param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
name="movie">
</object>
<div class="controlDiv play"></div>
EDIT: I need to clarify what I'm trying to accomplish. I am popping up a ChildWindow from the application. When the childwindow is displayed and the browser is resized, there are no scrollbars and there is no way to reach parts of the childwindow. The scrollViewer.scrollViewerVisibility=auto suggestion below displays scrollbars but they belong to the main application for which all the controls are disabled when a ChildWindow is displayed.
I'm trying to get the browser to display scrollbars when it is resized smaller than my SL application. I've acheived this by setting width and height for the object tag in the html. The problem is, now a black 1px border appears around the application. I've tried various attributes and styles on the tag and containing tag but cannot get it to disappear. Any ideas?
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="1230" height="830" style="border-style:none">
<param name="source" value="Silverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
<iframe id="_sl_historyFrame" style="overflow:auto !Important;visibility:hidden;height:0px;width:0px;border:0px"></iframe>
I want to make it so that when I click anywhere on the embedded Flash element, it takes me to a destination URL.
Here is my current code, which does not produce the desired effect:
<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';">
<object height="410" width="720">
<param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700">
</embed>
</object>
</div>
Right now it is making the space behind the .swf file clickable for the link, but the Flash element is not clickable.
If the right thing to do is to edit the .swf file somehow, please let me know that. I don't consider myself a Flash developer, but are there any resources on where to get started or how to do something this basic with an existing .swf file?
Any suggestions are much appreciated!
I had the same problem, found this thread, but ended up creating my own solution.
I added transparent element to the link, then made it overlap the embeded swf
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf">
<embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed>
</object>
<i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i>
</a>
Note - you should probably include the css in a separate file for production code.
Update after more research:
This question has been asked before, and the best answer is that you have to create the link within flash.
Usually this is done dynamically by passing a parameter (conventionally named clickTAG) to the .swf to tell it where to link to.
In your case (since someone else provided your swf files) I can see 2 options:
Your .swf author may have already implemented the clickTAG method (you can ask them, or just try it out on the .swf to see if it works.)
You could make a flash wrapper file that implements clickTag, and have it load and display your .swf file. I know this seems like a hack, but I can't see any other alternatives.
Hope this helps!
I've also seen something like this used [edit: but I can't get it to work! Googling suggests that it's not possible]
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700"></embed>
</object>
</a>
(For example here)
Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.
You could create your own swf (or have someone do it for you) that has a button editable with FlashVars over the stage and that loads in your subject swf underneath that button.
I've created one for you: Download.
You just need to add two FlashVars when you embed it:
url - The URL that will be visited if the swf is clicked.
swf - The swf file to load.
I got mad to solve the issue.... I tried several tricks including jquery and javascript.
Definitely the SOLUTION that works and works in ALL browser is the one above my reply.
Thanks user user2628529
<div class="containe">
<div style="position:absolute;"> </div>
<div >
<object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'>
<param name='flashvars' value='clickTag=&clickTarget=_self' />
<param name='allowScriptAccess' value='always' />
<param name='movie' value='banner-one.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>
There is a best way i've got found
<div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Flash Size*/
height:220px;
/*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/
}
https://gist.github.com/m-pokrovskii/6558817
<div id="logo" >
<div id="linklogo" style="position:absolute;"><img src="transparent.png"></div>
<div id="flashlogo" >
<object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'> <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object>
</div>
certainly
eliminates the problem in all cases
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Thank You!
now. It worked
<div style="width: 400px; height: 100px;">
<a href="http://www.sample.com" target="_blank">
<object height="100" width="400"><param name="movie" value="1.swf">
<embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed>
</object>
<i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i>
</a>
</div>
You can't add a link to a flash object, but you can overlap a transparent image with a link, over the flash object.
This is my example:
<div style="position: relative;">
<div style="position: absolute;
left: 250px;
top: 0px;
z-index: 9999;">
<a href="http://terrazasmedicina.com.ar/hometerrazas.html">
<img src="logoLinkTR.png" width="504" height="103"></a>
</div>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script></div>
In my case the object is embeded by a script, but it should work the same.
You have to wrap in a relative div the object and a div with the image, and then position as absolute the div with the image aligning it by left, top, right and bottom properties, and asigning z-index property to overlap the image.