Is there a way to have a hidden swf ( flex application ) on a page and still have it be reachable from javascript and debuggable from flash builder? I have need to use flash to manipulate js but it needs to be reachable from js to be started.
I don't know if you have some other meaning in mind when you say "hidden" (if so, please explain) but if you simply mean an invisible element on the page, then sure. Just set the width and height tiny in the embed tags, and don't put any graphics in the swf.
User ExternalInterface to communicate back and forth between JavaScript an a swf embedded on the page.
as below:
<div style="position:absolute;top:100px;left:0;width:1px;height:1px;z-index:1">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1" height="1" flashvars="local=true&&refererdomain=yinyuetai.com" bgcolor="#FF0000" allowfullscreen="true" allowscriptaccess="always" wmode="window" id="" name="" src="flashlocalstorage.swf?rev">
</div>
the embed(in IE is:object) set: width:1px;height:1px, and the parent element set: position:absolute;top:;left:;.
It isn't complete disappear, but in common condition no one can find it.
Related
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
how do can I make the below full size flash inside my web browser aligned centre?
<body bgcolor="#000000">
<form id="form1" runat="server">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="50%" height="900">
<param name="movie" value="css/index.swf" />
<param name="quality" value="high" />
<embed src="css/index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</form>
</body>
You need to set width="100%" in the "embed" tag, not just in the "object" tag. Incidentally, the size you currently have set in the "object" tag is 50%. Oh and you'll probably want to set the page margins to 0.
To then adjust the placement of objects in reaction to the stage resize use stage.stageWidth
Incidentally, the specific embed method you are using is what you get when you publish from Flash directly, and that positions things differently than the embed method when you publish from FlashDevelop. FlashDevelop inserts some JavaScript that centers automatically without the developer having to do anything. I didn't until just now even notice that, it's pretty convenient.
To go full screen in flash you have to change the displayState of the stage. The following line would accomplish this:
stage.displayState = StageDisplayState.FULL_SCREEN;
I'm having a problem with youtube video embedding;
In some places on my site (like news etc.) video is normally displayed and can be watched, while in others (forum topics mainly) it flickers whenever I mouseover it (making a new HTTP request to YouTube, as I can see in Firebug).
It definitelly has something to do with CSS rendering; when I disable JS nothing changes but disabling CSS causes it to work properly.
Firefox version: 3.6.12
Flash version: 10.1.82.76
The code I'm using for embedding:
<object type="application/x-shockwave-flash" width="390" height="293" data="http://www.youtube.com/v/pIxVoDNbujM?ft=18">
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/pIxVoDNbujM?ft=18"></param>
</object>
(to keep it W3 HTML valid, flickering happens with normal embed code as well).
You can see it 'in action' here:
Youtube embed code flickering in Firefox
Edit: OMG, it works properly when I'm logged out... Now nothing is clear to me as CSS is the same for users and guests, there are just few minor differences in markup...
It was because of the elements that followed the embed (same level children of the parent div), there was a non-block-level element (small) with class clearfix (doing a clear:both), which was wrongly interpreted by Firefox.
Putting a display:block; on .clearfix did the trick, it's working perfectly now.
It does work fine for me (Firefox 4 beta), so maybe it's your browser..
I suggest you to use SWFObject always to embed Flash. It's the best and most compatible way to do it, and maybe you will already get rid of your issue then.
Google Chrome is displaying the z-index of a Flash video incorrectly.
Take a look at http://maxusglobal.com/ in Firefox or Internet Explorer.
Now take a look at it in Chrome.
The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.
This doesn't seem to be a WebKit thing, but specifically a Chrome bug.
I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.
Add wmode="transparent" to your <embed> tag. Like the following.
<embed wmode="transparent"
height="314" width="516"
type="application/x-shockwave-flash"
id="player"
name="page_player"
src="/swfs/player.swf"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=/attachments/files/u_t_o_N_1.mp4">
And hide the div of the hello image if that is not necessary.
I hope this helps!
There are a couple of options here as I see them:
Option 1
Use the wmode tag and you need to set this as the object is rendered. Adding it later will not work (ref1) (ref2)
Using opaque should allow you to target the object with CSS z-index styles. Be aware that you should set this value in the <embed> tag as well as as a param (ref3) (ref4)
Option 2
Hide the object until a user has clicked on your preview button. I spent ages tracking down the javascript that you used before I noticed that Sotiris had said the same thing. I believe this is your code here:
$('#play_video_box').click(function(){
if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}
$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});
I would amend one line to:
$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});
And use CSS to set visibility to hidden by default. Depending on your no javascript support requirements you may need to modify that.
The third link provided here is a rather good article on wmodes and how they work - I recommend checking that out if you decide to go with option 1 and run into trouble.
Hope that helps!
I too was having a problem with the z-index of embedded Flash objects when using Google Chrome 8. Everything worked perfectly in IE 7. lnrbob hit the nail on the head with his option 1 solution. I had set wmode to opaque in the <embed> tag; but I neglected to add wmode as a <param> tag. Once I added <param name="wmode" value="opaque"/> between the <object> tag and the <embed> tag, the z-index started to work perfectly in Chrome without breaking IE.
It doesn't work in Firefox 3.6 and Opera 10, also in Windows.
Possible solution: Just add in your CSS visibility:hidden; for the selector #both_video_and_preview_image #video_wrapper.
Then add jQuery code (I see that you use the library), so when the user click the preview image then the visibility change for the above selector to visible.
$("#page_video_preview_image").click(function() {
$("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})
the following code works in ie,firefox,opera, but not worked on chrome(version 21)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>
<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>
Have you tried using SWFObject and loading it like that?
I have some HTML that is generated via a Rich Text Editor outside of my Flex application but would like to display it inside Flex.
The HTML is simple HTML tags, things like styles, anchors, and possibly image tags, is there a control that would let me render this HTML in flex or am I going to have to roll up my sleeves and roll my own?
Any ideas appreciated...Thanks.
If the HTML is really simple, you can display it in a normal label or textarea component, If it is more complex, I'll quote what I answered in this question. The discussion there also has a little more info.
If it is complex HTML and Javascript, one possible way is HTMLComponent, a method that uses an iframe over your flash to make it appear like the HTML is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.
If this can move offline, you could use Air (it has an mx:HTML component built in). Deitte.com has a detail of this technique as well.
Check out the documentation on mx.controls.Label and flash.text.TextField (which is what displays the text in a Text or Label control in Flex). The TextField documentation states that
The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.
Which means that you can display an image in a Text component in Flex by setting its htmlText property to some HTML which contains an <img> tag. You can't use Label, because it is not multiline.
I've noticed that text fields have trouble with properly measuring their heights if the images displayed in them are left or right aligned with text flowing around them (e.g. align="left"). You may have to add some extra spacing below to counter that if you plan to use aligned images.
You will have to use flex iFrame control.
It is not an 100% flash solutions, and combines a bit of js calls but works perfectly for me.
You can grab latest source code from github https://github.com/flex-users/flex-iframe
Here is some sample code from the component author.
<!---
A basic example application showing how to embed a local html page in a Flex application.
#author Alistair Rutherford
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
horizontalAlign="center"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<!-- Example project presentation -->
<mx:ApplicationControlBar dock="true">
<mx:Text selectable="false">
<mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText>
</mx:Text>
</mx:ApplicationControlBar>
<!-- HTML content stored in a String -->
<mx:String id="iFrameHTMLContent">
<![CDATA[
<html>
<head>
<title>About</title>
</head>
<body>
<div>About</div>
<p>Simple HTML Test application. This test app loads a page of html locally.</p>
<div>Credits</div>
<p> </p>
<p>IFrame.as is based on the work of</p>
<ul>
<li>Christophe Coenraets</li>
<li>Brian Deitte</li>
</ul>
</body>
</html>
]]>
</mx:String>
<!-- Example using the 'source' property -->
<mx:Panel title="A simple Html page embedded with the 'source' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameBySource"
width="100%"
height="100%"
source="about.html"/>
</mx:Panel>
<!-- Example using the 'content' property -->
<mx:Panel title="A simple Html page embedded with the 'content' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameByContent"
width="100%"
height="100%"
content="{iFrameHTMLContent}"/>
</mx:Panel>
</mx:Application>
#mmattax
Indeed you can display images in a TextArea component. The approach is not entirely without problems though...