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.
Related
I'm loading in an external image (a book cover from goodreads.com) into a library viewer AIR app (used on ipad and in-browser) running on Starling (in case you need to know). After it loads, the cover should be clickable to take further action.
This all works fine on ipad and when directly built from FlashDevelop, but when it's viewed in-browser, click events don't do anything on the loaded images. It'll work on my embedded placeholder bitmaps no problem (sitting in a "Book" class extending Sprite).
It seems to be a security problem, but if it was, I'd expect the image to not load at all. But instead it loads but isn't interactive anymore. I've tried various things like:
Add loader and click listener to the Book object
Add loader.content as Bitmap and click listener to the Book
Create a BitmapData and draw the Loader.content, then add the resulting Bitmap (it's blank in-browser, but works perfectly when built from FD)
Add loader and place a transparent sprite on top of it, add listener to the sprite
Has anyone had this problem? Would anyone know a work-around?
Thanks!
This was a sand-box problem.
I think it's intentional; you shouldn't be able to hot-link other site's assets unless given express permission.
I fixed this by only pulling images hosted locally and using crossdomain.xml to make sure there was no lookup issues when www.domain.com and domain.com were different.
Please bear in mind that I have never used Web Workers before and I'm having some trouble wrapping my head around them.
Here's an explanation of a simplified version of what I'm doing.
My page has links to various files - some are text, some are images, etc. Each file has an image showing a generic file icon.
I want the script to replace each generic icon with a preview of the file's contents.
The script will request the file from the server (thereby adding it to the cache, like a preloader), then create a canvas and draw the preview onto it (a thumbnail for images, an excerpt of text for text files, a more specific icon for media files...) and finally replace the generic icon's source with the canvas using a data URL.
I can do this quite easily. However, I would prefer to have it in the background so that it doesn't interfere with the UI while it's working.
Before I dive right in to this, I need to know: can Workers work with a canvas, and if so how would I create one? I don't think document.createElement('canvas') would work because Workers can't access the DOM, or am I misunderstanding when all the references I've found say they "can't access the DOM"?
You cannot access the DOM from web workers. You cannot load images. You cannot create canvas elements and draw to them from web workers. For now, web workers are pretty much limited to doing ajax calls and doing compute intensive things. See this related question/answer on web workers and canvas objects: Web Workers and Canvas and this article about using webworkers to speed up image manipulation: http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx
Your simplest bet is to chunk your work into small chunks (without web workers) and do a chunk at a time, do a setTimeout(), then process the next chunk of work. This will allow the UI to be responsive while still getting your work done. If there is any CPU consuming computation to be done (like doing image analysis), this can be farmed out to a web worker and the result can be sent via message back to the main thread to be put into the DOM, but if not, then just do your work in smaller chunks to keep the UI alive.
Parts of the tasks like loading images, fetching data from servers, etc... can also be done asynchronously so it won't interfere with the responsiveness of the UI anyway if done properly.
Here's the general idea of chunking:
function doMyWork() {
// state variables
// initialize state
var x, y, z;
function doChunk() {
// do a chunk of work
// updating state variables to represent how much you've done or what remains
if (more work to do) {
// schedule the next chunk
setTimeout(doChunk, 1);
}
}
// start the whole process
doChunk();
}
Another (frustrating) limitation of Web Workers is that it can't access geolocation on Chrome.
Just my two cents.
So as others have stated, you cannot access the DOM, or do any manipulations on the DOM from a web worker. However, you can outsource some of the more complete calculations on the web worker. Then once you get your return message from the web worker inside of your main JS thread, you can extract the values you need and use them on the DOM there.
This may be unrelated to your question, but you mentioned canvas so i'll share this with you.
if you need to improve the performance of drawling to canvas, I highly recommend having two canvas objects. One that's rendered to the UI, the other hidden. That way you can build everything on the hidden canvas, then draw the hidden canvas on the displayed one. It may not sound like it will do much if anything, but it will increase performance significantly.
See this link for more details about improving canvas performance.
I am rendering an image to a Sprite inside of an Iterator. I'd like each render (iteration) to remain on the canvas indefinitely, so that each successive render layers on top of the previous ones. How can I do this?
There are no Clears or any other layers in my composition.
In Quartz Composer, you'll almost always want to use a Clear patch — don't assume that you can rely on the prior contents of the framebuffer. So, to accomplish this, you'll need to load all of your images into a structure (probably by using JavaScript to feed an Image Loader patch and build a Queue from that), and then display all of the images each frame using an Iterator.
Check out Apple's "Image TV" sample composition, available in the OS X Developer Library in the Quartz Composer Conceptual Compositions bundle. This example demonstrates how to load a series of images into a structure and then display them.
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; }");
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.