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.
Related
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.
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.
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.
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.
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; }");