Is editing parent html page from the embedded flash file possible? - html

A client wants the company I work for to build an expandable flash banner, I'm a dev, so my solution is: stack 2 flash banners, small one visible, big one on top of it, with display:none, catch the click event, animate the big one into position.
The client wants it done without javascript (their banner rotation network doesn't support additional javascript).
I'm baffled, as I have no clue how a flash file can modify it's own html embed code and the css styles and as far as I'm aware, it's not possible.
Any suggestions/ideas? Is there an api in flash to talk to the html file, is there some actionscript magic that could make this happen?
Thank you for your time

You can talk to the parent HTML file via the ExternalInterface API.
You can pass the call() method entire javascript functions to do what you need. This way, you don't have to add extra javascript to the parent HTML file.
For example:
ExternalInterface.call("function() { document.getElementById(\'foo\').dosomemagichere; }");

Related

Flash Object to small for Security "Window"

I have made a flash as3 project in adobe flash pro with the dimensions 20px x 150px.
i would like to ceep it this size, but the problem is that my application needs to ask for the MICROPHONE premissions
( like in the image )
but this only happens if the flash object is big enough.
are there any workarounds with maybe the "overflow = visible" method or something ?
thx for any help
Here are a couple of options:
Temporarily increase the dimensions of the SWF in HTML. I've never done this, but I imagine it would work and is the most simplest solution.
Use wmode="transparent" or wmode="opaque" in your embed code. In both of these modes you can layer HTML on top of or underneath the Flash object. The SWF should be sized so that it is big enough to display the dialog. When the dialog is not visible, you can hide portions of the Flash app by covering them with HTML.
I've used the 2nd option successfully, not for this purpose, but for showing some HTML elements (arrow images and text) to guide the user through these "allow" camera/microphone dialogs.
For both of these options to work, you need to be able to detect when the user has closed the dialog. Though there is no official Flash API for doing this, however, there are some good work arounds for doing that.

Custom images for HTMLLoader

There is powerful HTMLLoader component for AIR wrapped in mx:HTML for Flex.
I want to supply images manually (ideally from bytes) for mx:HTML, which will display my generated content. The point is to pack all resources in the application without external files. I can pack different html pages in the app and switch them when mx:HTML dispatches Event.LOCATION_CHANGE. Now I want the same for images. What do you suggest?
Solved! Went through several stages:
Make HTMLLoader's background transparent with paintsDefaultBackground="false" and backgroundAlpha="0". Get notified of pictures location with javascript and draw them on HTMLLoader's graphics. This is complex and has problems with resizing (pictures get shifted), but was almost done...
Next idea - use <canvas> to draw images on them, sending data to javascript.
While reading canvas tutorials, stumbled upon data URI scheme, which does exactly what I needed in simplest possible way. Images are embedded in html page in base64 encoding.

Using img tag in an AS3 TextField without width and height attributes

I'm attempting to load HTML from the Shopify blog API into a TextField in Flash. The problem is that Shopify doesn't add width and height attributes to images that are in the blog posts. When I load these into Flash, the width and height of the image is ignored and the height of the TextField is incorrectl, which screws up my scrollbar among other things.
Is there any way to read the width and height of the images as they are loaded? I could possibly do this with PHP before it gets to Flash, but I'm not sure how.
Not sure about your original question about getting the image info in flash, but in PHP it wouldn't be much trouble, although it would slow down the process down somewhat.
Step 1: Setup a PHP proxy, which you call from your flash.
Step 2: In your PHP proxy, after grabbing the HTML, loop through all the img-tags. (You can do this easily, with e.g. PHP Simple HTML DOM)
Step 3: While looping, if the image dimensions are missing from the img-tag, download the image, check the image size and update the tag. (Also easy using PHP Simple HTML DOM)
Step 4: Echo the updated HTML to your flash movie.
If you use the BitmapData class you can get access to the width and height of images, along with other useful properties and methods.
if you load the image data (URLLoader in FlashPlayer or FileStream in AIR)
(FileStream would lets you do it synchronously)
with some effort you can parse the width and height of the image from the file HEADER synchronously.
if you want to display the image from the image data, throw it at loader.loadBytes for Adobe to decode it for you. sounds like you want it to show up in the htmlText though.
if you can manage to take a synchronous path to get all this data, your textfield can take into account the image height before the next frame so it won't look jittery.

How to submit HTML and receive a bitmap?

I have an app that allows a user to use JQuery and Javascript to add images and position them in a div dynamically.
I would like to be able to submit the div with all the HTML to a WebService and receive back an image so we have a bitmap of the result of the end user's work.
I would prefer a solution in .Net as this is what I am most familiar with but am open to pretty much anything?
I would like to be able to submit the div with all the HTML to a WebService and receive back an image
Try http://browsershots.org!
Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place.
How about this. You load the html into a webbrowser control and then use the DrawToBitmap method. It doesn't show up on intellisense and this is probably not the best solution, but it works. Observe the DocumentCompleted event and add the following code:
private void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
var bmp = new Bitmap(100, 100);
var rect = new Rectangle(webBrowser.Location.X, webBrowser.Location.Y, webBrowser.Width, webBrowser.Height);
webBrowser.DrawToBitmap(bmp, rect);
bmp.Save("test.jpg", ImageFormat.Jpeg);
}
You'll probably want to change the width and height of that bitmap object (do it in some smart way or something). Hope this helps.
EDIT: I see now that you are using a webservice for this, hence this solution probably won't work. I'll leave it here just for information's sake.
I was not able to figure out how to do this by submitting the html and receiving an image but I was able to create and ASHX handler that returns a png file based on this blog post
which was good enough for my scenario.
He uses CutyCapt to take a screen shot of an existing web page, write the image to a folder on the webserver and return it.

How do you make a SWF resize inside a HTML page?

The stageHeight and stageWidth are read-write properties of the Stage class.
Is there any way to embed the swf so that when you set them to a different value, this is reflected in the HTML page? Possibly without calling a JS function via ExternalInterface to modify the embed's parameters?
The main idea is that I don't know what size my swf will be. I'm loading a video inside it and I want to resize the swf to match the size of the video.
We use
http://code.google.com/p/swfobject/
which allows for auto resizing in addition to some other nice features.
Your definitely going to need to call a JS function, the good news is it's really simple code, something like this:
function resizeIt(height)
{
document.getElementById("myDiv").height = height;
}
Using SWFObject in this case you can set the width and height to be 100%, so it'll resize with the containing DIV, so you're not modifying the embed paramerters, but just the css.
To my knowledge you can't do that. I can't actually fiddle around with it, 'cause i currently don't have access to flash.
It could work if you would insert the swf into a div, or whatever, that's "too big" for it in the first place, and then just try and resize it. What are you using to embed the swf, the basic thingie offered by the Flash IDE or something else, like swfobject?
I don't know, you might have to actually use ExternalInterface or something like that to get the job done. And if it's not terribly important to work the player into your web layout, i would just implement the whole thing in the flash movie.