HTML overlay on top of Flash

I see that using a javascript library like JQuery, I can
create overlays from one HTML page to another (code below). Our
Flash designer is suggesting that perhaps the JQuery function could
be modified to include the names of the external HTML pages so that
he could just reference this function to call up the overlays. Is
something like this possible? If not, is there an established way
of calling HTML overlays from a Flash .swf perhaps using
ActionScript?
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="overlay_external.aspx.cs" Inherits="overlay_external"
%>
<!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">
<head id="Head1" runat="server">
<title>Overlay as New Page</title>
<script src="jquery-1.3.1.js"
type="text/javascript"></script>
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="
http://static.flowplayer.org/js/jquery.overlay-1.0.1.min.js"></script>
<script src="jquery.expose-1.0.0.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="overlay-minimal.css"/>

<style type="text/css">
/* use a semi-transparent image for overlay */
#overlay {
background-image:url(images/transparent.png);
color:#efefef;
/* container for external content. uses vertical scrollbar if
needed */
div.wrap {
height:441px;
overflow-y:auto;
</style>
</head>
<body>
<form id="form1" runat="server">

<a href="ExtOverlay.aspx" rel="#overlay">

<button type="button">Show external page in
overlay</button>
</a><br />
<a href="ExtOverlayRegister.aspx" rel="#overlay">

<button type="button">Show Register external page in
overlay</button>
</a><br />
<a href="ExtOverlayVote.aspx" rel="#overlay">

<button type="button">Show Vote external page in
overlay</button>
</a>

<div class="overlay" id="overlay">

<div class="wrap"></div>
</div>

<script>
$(function() {
// if function argument is given to overlay it is assumed
onBeforeLoad event listener
$("a[rel]").overlay(function() {
// grab wrapper element inside content
var wrap = this.getContent().find("div.wrap");
// load only for the first time it is opened
wrap.load(this.getTrigger().attr("href"));
</script>
</form>
</body>
</html>

Limitations in the Android 2.x rendering model require Flash content to always be rendered as the topmost object.
It gets better in Android 3.x, but I'd highly recommend staying away from pop-ups and overlapping interactive elements where possible. It doesn't mesh well with the browsing experience in the context of small screens and touch input (you're always going to have wasted real-estate with a pop-up), and you'll avoid a lot of frustration.

Similar Messages

How to put flash as a table or cell background or put HTML elements on top of flash file?

Hi Guys,
Could anyone please suggest me that how to put flash file as a table or cell background. I want to design a website and want to put HTML elements like table, images, text on top of flash file. so its look like animation in background. please visit following websites for an example: http://www.gagudju-dreaming.com/ and http://disneyworld.disney.go.com/
Please guide me ASAP, thanks a lot in advance.
Nitz.

Hi Nitz
The first thing you must do is convert your layout from table based to css based, (tables are o/k for tabular data, but not layout) but if you have never used css for layout it may be a steep learning curve.
My recommendation is to start with the following tutorial on converting a table based comp to a css layout -
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
More info on using css is available here - http://www.adobe.com/devnet/dreamweaver/css.html.
Once you have converted your site the 'procedure' for using swf's as a background, (does not work well with flv's, but can be done using html5 video without a skin, to a limited extent) is the same as having a background-image resize automatically to the full browser view-port. The best way to learn how to do this is to view the code on a page using the background-image technique, view the code on this page - http://www.pziecina.com/indexold.php.
However, instead of having a fluid layout I would recommend using a fixed layout size to start with, as this overcomes many problems. I have uploaded a basic test page to illustrate the idea to - http://www.pziecina.com/test_ideas/swfbg_test.html. As I said the page must be resized in this example in order to see the effect, (so do not forget to resize the browser, even if it is only by 1px), but if you use a fixed size layout and your swf's size fits the desired area correctly the resize should not be required.
PZ
www.pziecina.com

Text Disappears when on top of an HTML overlay

Text Disappears when on top of an HTML overlay. This is a very simple file. It's not even part of an MSO. The text is disappearing when I view in both the desktop content viewer and the iPad.
I've tried converting to outlines, doubling the layer, copying and pasting back into. Nothing. Any suggestions

You might also try creating the html and leaving a space for you existing text. Select transparent background for you overlay and the text should be visible.

Is it possible to overlap a image on top of flash?

Is it possible to overlap a image on top of flash?
I am thinking to use index-x for a image to overlap a flash
in html.
Since I am here, I fail this approach but I just wanna know
is it possible to do so.
How could this to be done?
thanks,

mimihuhu,
> Is it possible to overlap a image on top of flash?
It is. Not only images, but text and anything else,
including other
Flash content. The solution is to use something called WMODE,
which is
known (and has been known) to be problematic. So consider
yourself warned.
:) Here are a few notes that will probably help get you
started.
http://www.quip.net/blog/2006/flash/how-to-position-flash-beneath-other-content
David Stiller
Co-author, Foundation Flash CS3 for Designers
http://tinyurl.com/2k29mj
"Luck is the residue of good design."

Update images in an HTML overlay

I edited the images in my HTML overlay, but the filenames are the same. Is there a clever way to force Content Viewer to update the images?

I edited the images in my HTML overlay, but the filenames are the same. Is there a clever way to force Content Viewer to update the images?

How to call html page with in the flash

I am new to action script, can some one guide me how to call html page with in the flash. lets say i have movie clip having instance name as "news_feed", I need to disply the html page in this news_feed. kindly help me, thanks alot

some one tell me, weather it is possible or not ??

Is there a way to store and access shared assets between HTML overlays in a Folio?

I'm using numerous HTML graphics throughout a folio, each one requiring common script and font files. Rather than store these assets in each graphic set within a folio's HTML overlay, is it possible to store them in a root folder in the folio that is then accessible to any HTML overlays used throughout it? And if it possible, how would I access them?
This would save a great deal on overall folio size. Though I suspect it's not possible, I'd find it a useful feature if it were somehow possible to implement it in the future.
Thanks,
Brice.

http://helpx.adobe.com/digital-publishing-suite/help/import-htmlresources.html

Rendering problem using meteor inside an HTML overlay

Hi everyone,
I'm having a pretty specific problem, using meteor, and could really use some help.
I've posted a detailed description of the problem on Stack Overflow, but the gist of it is this:
Inside of Adobe DPS, the headless browser used in overlays on iOS 6.1.7 has some issues with meteor.
specifically:
1- every meteor page -- no matter if it's just the out-of-the-box Hello Meteor page -- generates a non-obtrusive error: TypeError: 'undefined' is not a function. There's no stack trace, no other details (I used debuggify to discover the error)
2- after redirect from the "accept permissions" page(s) using the Facebook Login Alternative flow, the page will not render.
Neither of these errors occurs inside Mobile Safari, or Mobile Chrome on the iPad.
I believe this may be caused by some of the restrictions we're putting on the headless browser (hence error #1), and is a combination of the redirect having a hash (#) after the URL, and (maybe?) handlebars or some other js framework not loading in time.
If anyone has any ideas -- either to solve this specific problem, or a workaround for me (I need to log in to facebook using meteor, inside a DPS article HTML overlay on an iPad) I'd really appreciate it.
Article on Stack is here: http://stackoverflow.com/questions/18808652/meteor-rendering-in-adobe-dps-overlay-after-re direct-from-facebook-login
Thanks!
Strack

Unfortunately if something works in Mobile Safari that doesnt' mean it'll work in DPS, due to how the iOS Web Control works. It's kinda, but not exactly, the same as Mobile Safari, and sometimes things work in one but not the other. This isn't something we have control over either, it's just how the OS control works.
Neil

Autoplay HTML overlay error

Hello there
Wondering if anyone could help.
I have multiple HTML overlays set to autoplay containing a link to an itunes preview of a song.
These HTML overlays are each the second state of their own Multi State Object so that the user can effectively "Play/Pause" the itunes previews.
This all seems to work beautifully on the first open of the app, but on reopen, all the previews play at once wherever the user opens the app and can only be paused by activating each MSO
Does anyone have any idea? - It also happens on test stacks where only one HTML overlay is present
Could it be an issue with the itunes link? or Does anyone know of a workaround that may "solve" this issue?
All the best
Tim

Hello there
Wondering if anyone could help.
I have multiple HTML overlays set to autoplay containing a link to an itunes preview of a song.
These HTML overlays are each the second state of their own Multi State Object so that the user can effectively "Play/Pause" the itunes previews.
This all seems to work beautifully on the first open of the app, but on reopen, all the previews play at once wherever the user opens the app and can only be paused by activating each MSO
Does anyone have any idea? - It also happens on test stacks where only one HTML overlay is present
Could it be an issue with the itunes link? or Does anyone know of a workaround that may "solve" this issue?
All the best
Tim

Is it possible to put a photo overlay on top of a QuickTime movie?

Is it possible to put a photo overlay on top of a QuickTime movie?
Here's what I want to happen...... Once the QT arrow controller is clicked, then the overlay photo would disappear and the QT movie would play.
I tried to put the QT movie file in a table then place a photo as the background image, but it didn't work.
Anyone know how this can be done?

Easy using QuickTime Pro.
Size the image file to the dimensions of your QuickTime file.
Open the image with QuickTime Pro.
Select all (Command-a) and Copy (Command-c).
Switch to your QuickTime .mov file. Place the controller at the first frame.
Paste (Command-v) and Save As (self contained).
To give your still image file a bit of "time" add it (scaled) to a few seconds of audio and then "extract" the new video track.

Adobe needs to develop an api for communicating with HTML Overlays & Indesign Objects

I'm a front-end developer who has been assigned the task of developing one of our client's DPS every month. While I praise Adobe for saving a dying a industry and giving non-developers simple GUI controls, they need to develop an api for communicating from HTML Overlays to Indesign MSOs and other objects.
I've had to do some intense animations/pages; which I in turn simply developed all in HTML5 and did an overlay. The time put into those pages could have been greatly reduced if their was a proper API in place to trigger different MSO and events. Is anybody at Adobe working on this? As DPS matures, and more developers are tasked with making folios it's imperative we have a proper way way to develop.

We had a page for embedded movies in a lightbox; the client said customers were complaining that the folios were too large and took too long to download. So we switched to youtube streaming page, but they wanted a poster and autoplay enabled. If you have ever programmed with mobile video, you'll know devices are extremely difficult to manipulate.
I had to do an html overlay with a bunch of transparent divs for hotspots and buttons. If I could have told Indesign to move different objects layer orders or go to a different MSO it would have saved me hours.
Doesn't DPS support localstorage? Couldn't you guys whip up a little api to trigger events via localstorage?
Off topic, another request:
- enable the safari webkit inspector for debugging connected ipads with folios that have html overlays; you guys don't fully support HTML5 or certain js events and it's extremely annoying and difficult to debug.

Can't tap on links in HTML overlays without the navigation menu popping up

When I insert my html overlays, I'm trying to find a viable workaround for the following issue.
If a user tries tapping any of the links to trigger animations I've created in my HTML, the content browser's navigation pops up at the same time as the link triggering the animation. This is similar to what I run into with other vendors like pixel mags.
We recommended to them to have their navigation not pop-up unless a user double taps, 2 finger taps, or taps and holds the screen. Is there any type of distinction in the works for Adobe as well? Or are there any workarounds for this?
Most of the time, it's almost too easy to get the navigation to pop-up when I was simply trying to trigger something else.
Does this make sense? Apologies if this has already been addressed, and thanks.

Yes it has been adressed, several times before.
The one-tap solution for evoking the viewer UI seems to be a decision adobe
will stick to for the next time.
Although the html overlay triggers the viewer UI every time you tap a link,
that was aknowledged as a problem and we read that adobe is working on a
fix, don't know if it is included in the viewer that is currently under
review by apple.
—Johannes

How to make imsges overlay on top of a web page

Can anyone tell me how to make an image overlay on top of a
web page when the thumbnail is hovered over?
Ideally the image would be a bit transparent so that the web
page behind it can still be seen but this is not essential.

> Can you tell me how to set the script so that the
lightbox image is
> displayed
> on mouseover instead of mouse click.
Check the docs. Trent is usually very thorough in his
instructions.
Hint: I haven't studied it but it probably involves modifying
one of DW's
built-in Behaviors.
Walt
"ducati1" <[email protected]> wrote in
message
news:gkb906$qrd$[email protected]..
> Wow that DW extension is just what I needed.
> Thanks..
> Can you tell me how to set the script so that the
lightbox image is
> displayed
> on mouseover instead of mouse click.
> I currently have the thumbnails set to insert the ALT
text into a text box
> on
> mouse click.
>

HTML text on top of productBranding image

Hi all,
I'm new to using UIX XML in JDeveloper 10g and was wondering how I could render HTML text on top of an image (i.e. the text is not part of the image.gif). I'm able to display text all around the image but not on top of it. I'm guessing that this can be done since it is one of the BLAF specifications for the Product Branding guides.
Having spent a couple of days looking through various related posts, I've yet to make any head way.
Cheers

Woohoo! Got it. Could have done it in the stylesheet as well!
<rowLayout>
<contents>
<cellFormat height="70" width="300">
<inlineStyle>
<property name="background-image">url(images/financial_collage.gif)
</property>
</inlineStyle>
<contents>
<styledText text="Product Information">
<inlineStyle>
<property name="font">Garamond
</property>
<property name="font-size">+24
</property>
<property name="color">#336699
</property>
</inlineStyle>
</styledText>
</contents>
</cellFormat>
</contents>
</rowLayout>

Loading HTML or PHP page in flash

Hi,
I would like someone to tell me if there is a way to load html or php page in flash just like a movieclip without actually navigating from the flash player(by using getURL code). Basically, I am wondering if there is a way to load a html file just like we load movieclips and perform all the functions of html page.
Thanks,
Abinash

No. Flash can only display html content in textfields and only supports a very limited number of html tags (look up the htmlText property of TextFields). So to display an html/php file is not possible.

HTML overlay on top of Flash

Similar Messages

Maybe you are looking for