I have a html div layered on top of an interactive flash movie, but when the mouse moves over the div, it can't interact with the flash (the view changes as the mouse moves or is clicked). Is there a way to have the flash recieve the mouse movements and clicks but leaving the html visible?
I can't modify the flash SWF file.
Edit: To make it clearer, this is an layer of information sitting on top of Google Street View (flash), the trouble is that I can't move the street view around where the layer overlaps.
Try something like this:
<object>
<param name="wmode" value="transparent" />
<embed src="example.swf" wmode="transparent"></embed>
</object>
The main things to note are the <param /> tag with the transparent attribute, and the wmode="transparent" in the embed tag. You'll also need to run the following javascript code to make this work across all browsers:
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;
}
This code should be run when the document is loaded. The site I got this code from claims that it must be run from an external file in order to work (although I haven't tested that).
I got this answer from here, where you can get more detail and a working example:
http://www.cssplay.co.uk/menus/flyout_flash.html
I believe the short answer is: No.
Sorry.
However, If you had complete control over how the Flash object is authored - you might be able to expose a public API to the javascript - allowing it to "manually" forward live mouse-coordinate, and mouse-button information into the flash, as you operate the mouse on top of the HTML overlay.
It might be worth checking, if Google's street-view Flash object exposes a public javascript API that might allow you to take some control of the flash - based on mouse-events picked up by your HTML overlay.
Expect the skies to fall, if you try this. :-)
should be aware that wmode=transparent will kill use of scroll wheel in firefox. this is true even in FP10
Related
I am using flash to load a youtube video player with this code:
loader.load(new URLRequest("https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&fs=1&modestbranding=1&controls=1"));
The player loads and all intended functionality is there except for the full screen button on the control bar. There is just a settings button where I would expect to be a fs button. I thought the fs=1 param in the url was supposed to make it work however, it is not. Is there another technique or something that I can change to make this work?
-This site seems to have a working example, you need to hover on the small unit for a moment then it will launch the larger unit that has a youtube player with the fs button.
http://www.richmediagallery.com/galleryDetail/?id=36055
Also its interesting to note that if I use the same exact url and load within HTML using Embed/Object, it will work with FS button??!?:(doesnt help me because I need this to work in flash)
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&fs=1&modestbranding=1&controls=1"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&fs=1&modestbranding=1&controls=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="640" height="390"></embed>
</object>
Thanks!
youtube fullscreen button makes swf fullscreen not the player so you need to resize player to fullscreen
first off all add fullscreen eventListener to stage
stage.addEventListener(Event.FULLSCREEN, fullscreen);
then on event change make youtube player fullscreen or normal
private function fullscreen(e:Event):void
{
if (stage.displayState != StageDisplayState.NORMAL)
{
matrix = (player as DisplayObject).transform.matrix;//store matrix
player.setSize(stage.fullScreenWidth, stage.fullScreenHeight);
player.x = player.y = 0;
stage.addChild(player);
}
else
{
player.setSize(normalHeight, normalWidth);
(player as DisplayObject).transform.matrix = matrix;//restore matrix
loader.addChild(player);
}
}
I found a solution however, it was painful to implement.
After alot of guessing/researching the fix was to use DoubleClickStudio lib(google ads) and they have a component lib called YTPlayerProxy.
If you use those together, you can get the FS button to appear.
The biggest challenge was getting this to work within an ide like ftd because those libs were components within Flash Professional. So when coding in an IDE, your ide does not know about that code base and will throw errors everywhere.
To fix that I had to find where the component installed, then grab the swc asset though that was for YTPlayer.
For DoubleClick(I actually had a .fla with double click lib inside that was passed to me. I could not find a place to download from web though I didnt search super hard), I had to convert my .fla to a .zip then find the .swc that was holding double click info.
Once I got both .swc's I loaded them into FDT and everything was good.
I have 3D game made in Unity3D. After some time have been spent, it works in flash correctly.
Currently i need to find a way to display HTML content over my flash.
wmode=opaque, wmode=transparent have failed, because stage3d, which unity uses to render 3d content, requires wmode=direct.
I have tried other hacks like using iframe, but this works different in all browsers(correct behaviour only under chrome with release flash player)
Now i'm thinking about get screenshot of flash stage from action script, pass this data to javascript, render this on canvas, hide flash, and move custom HTML element over this.
All this looks so sad, am i missing some important information?
if you use flash and want to render the scene in an canvas :).... better use only flash, don't do that :) .. and strange why it doesn't work for you because I often put a div above the flash content and it works.
I have an embed SWF file on my page. This Flash contains the following AS line :
stage.scaleMode = "noScale";
I would like to override this settings with the default showAll scaling mode on the HTML page. The embed tag provide the scale attribute but it just doesn't scale anything! (I mean : a cropping occur when I reduce the size.)
Here's the code :
<embed
src="my/flash/file.swf"
scale="default" // I also tried "exactFit"
quality="high"
width="500"
height="400"
type="application/x-shockwave-flash"
/>
I noticed it works when I right-click the Flash object and check the "Show all" entry of the Flash Player menu. This mean that the Flash object behavior can be overriden in some way.
Why isn't the scale attribute working as expected ? Am I missing something ? Is it forbidden to override this hard-coded property in HTML ?
Thank you !
Edit : here are the two references for the AS scaleMode property and the embed attribute :
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001543.html
http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html
Im sure you can, as you can change the perimeters of the flash movie from outside of it, i wouldnt see why it wont work, theres away..
from experience i once read you couldnt overlap several flash movies on a page and also have a swf as a background, eventually i had achieved this using php and css proberly a fluke but eventually i had 5 swf on top of each including a swf bg 1920x1080 on the same page...
just to add put your whole embedding code here, if it is not properly structured it wouldnt work anyways..
sorry about spelling i read into this tomorrow it 5 am here.
I am embedding a pdf file in rails view using embed tag, i have write it in simple html and its working fine but i need to write this tag in rails conventions.
The code is like:-
<object data="file1.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="720">
<embed src="file2.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="720" />
</object>
It seems Ruby uses print to output to a client...
print 'Hello World!'
There is no "embed tag", that is an "object element"; using the correct terminology not only makes you look more professional to others though also greatly improves your ability to communicate in fewer steps. 99.9% of the time people are referring to an element, it is the whole element. A very rare correct reference to a tag would be something like, "In XHTML does the meta element self close or does it have an end tag?" (e.g. < meta / > or < meta >< / meta >).
Internet Explorer (as usual) has a bug that is unable to display flash objects correctly in certain situations such as with your code, I'm not sure if this applies to a PDF but they're both Adobe products so best to try this in IE7 to be sure. You need to have a movie parameter element.
Here is everything put together along with Ruby...
<object class="pdf" data="something.pdf" type="application/pdf">
<param name="movie" value="something.pdf" />
<p>This is alternative content that displays if the plugin is not suppoted.</p>
</object>
Another very important clarification: you need to have a height/width set or at least a minimum height and width set otherwise certain browsers (e.g. Firefox) will not load the resource. In fact when I change themes on my site if the dimensions change in the middle of the music playing the whole Flash object resets. Not such a big issue for a PDF though if it forces the browser to reload the PDF it may annoy your visitor and it's ALL about making sure your visitors aren't annoyed by doing things right the first time.
Lastly alternative content is any (X)HTML that appears inside the object element. You can add a link to download a PDF plugin if the client's browser doesn't already support one.
Hope this helps, feel free to ask for clarifications if need be.
I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
Add wmode=transparent as param.
Html solution
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
See:
http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Is very simple, just add this parameters to your iframe url and thats it:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
To get this to work in IE (at least 7 and 8) you must add this:
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.