What I'm doing
Hello Im having problems loading external images into my flash (builder) application.
To show the image I use a BitmapImage with smoothing enabled like this:
<s:BitmapImage id="image" smooth="true" smoothingQuality="high" width="100%" height="100%" fillMode="clip" />
I also show thumbnails using the new flex4.6 scaleMode ZOOM like this:
<s:Image id="thumbnail" scaleMode="zoom" smooth="true" smoothingQuality="default" />
I preload the external image using a SWFLoader because I need to store the original image width and height
The problem
When I test my application locally everything works fine! But when I run it from my web domain I see its showing problems. For images running on the same domain and images from Flickr = no problem. But other images like from imageshack show the following problems:
The larger BitmapImage is not smooth.
The thumbnail is not scaled like its supposed to. It's showing minuscule in the upper left corner of the thumnail Image. When I hover my mouse over it, the thumnail is shown but like it would be shown with the default scalemode and fillmode CLIP
Cause?
Im not really sure whats causing the problem, but the only difference I see in the image sources is in the domain policy. The crossdomain.xml for Flickr allows all http://farm1.static.flickr.com/crossdomain.xml unlike imageshack.us http://www.imageshack.us/crossdomain.xml
If this would be the cause then I dont understand why the image is still being loaded but crappy. Does anybody know what's going on exactly? Any solutions? Thnx.
There are certain limitation to loading images cross domain without the correct policy enabled. Flash will load the data, but not allow any manipulation, including smoothing.
There are a number of ways around this. You could use a server-side proxy, loading the image via a local php or asp page. It's not the fastest solution, but it will work.
You could also try loading the image with LoadBytes, then passing the byte-array into a Loader object. It's not as pretty as using the Flex component, but it should restore some control to you.
Related
I'd like to create a layered image for use on tvOS 9.0 using TVML markup.
This seems like it should be a relatively common problem, but there doesn't seem to be any way to do this (as of tvOS Beta 3). In the Apple TVML demo app it accomplishes this by using multi-layer images that are pre-compiled into a single .lsr file, rather than in markup with each layer separately noted.
It is possible to script the creation of .lsr files using the layerutil CLI program, but this would be a huge hassle for the app I'm trying to build where the images will be user-generated-content.
Instead it would be great to be able to do something like this (note the src-layer1 property for adding an extra layer above the base src):
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" src-layer1="https://server.com/path/to/overlay.png" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
</lockup>
Is there any other efficient way to do this other than scripting a lot of back and forth to a server to generate a .lsr file?
Update - Oct 21 2015: At the bottom of this documentation page Apple provides a checkmark overlay image that would be perfect for this use called resource://button-play. But there still seems to be no way to use this icon overlay in TVML. :-/
You can use overlay for layering images in lockups.
https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/CoumpoundDisplayElements.html#//apple_ref/doc/uid/TP40015064-CH18-SW3
<lockup>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" height="180" width="320"/>
<title>Rick Astley - Never Gonna Give You Up</title>
<overlay style="padding:0;">
<badge src="resource://overlay-checkmark" />
</overlay>
</lockup>
If you continue to have trouble positioning the check mark overlay, try padding it with transparency so that it is the same aspect ratio as the video thumbnail.
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.
I have a phonegap application that loads external images.
sample img code:
<img src="http://example.com/hello.jpg">
Will use this code to put the gif with some css
<img src="loading.gif">
I want to show a loading gif on top of the image till the image has been loaded and hide the loading gif afterwards.
Want to know how to detect if image is ready and hide the gif.
Thanks
There are a few ways to do that. Off the top of my head and in order I'd try them:
Use phonegap's File API to download the image, and display it only once you've got it.
Use an XHR to download the image, and once you get the whole thing send it to the image via a data: URI.
Set your "loading.gif" image to a lower z-order than the foreign image, with the same left/top/height/width.
Use 'loading.gif' as a background.
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.
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.