HTML based AIR app with transparent background (PNG)

Hi guys,
I have been developing a VERY simple HTML / JavaScript AIR app with Dreamweaver CS3 and Photoshop CS3.
I have skinned the app with a simple transparent PNG file (Photoshop > Save for Web and Devices). I have set the PNG as the <body> background-image via CSS and the body background-color is undefined. I have also set the app to:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
My problem is that I get a white opaque background showing through behind / around the PNG.
Q: Is it possible for HTML / JavaScript AIR apps to have transparent backgrounds (I have seen lots of info about how to do this in Flash / Flex but not HTML)?
Q: What do I need to change or do to make it work?
Many, many thanks,
B

Oops, sorry.
I was using the BluePrint CSS Framework and it turns out that that was setting a background color.
Please ignore this thread!

Similar Messages

HTML-based AIR app with transparent UI, shadows, etc.?

I'm debating on whether to use Flex or HTML/Ajax for a widget
in a project. If I make an HTML-based widget, is it possible to
have UI tricks like shadows and transparency, basically, NOT being
confined to a standard OS "box" window? Is this possible?
Thanks.

Yes it is possible to do this with an HTML-based AIR app.
However, since the visual elements will be HTML-elements, not
display objects, you can't use the Flash APIs for shadows and
transparency. Also, in a transparent window, SWF and PDF content in
HTML cannot be displayed.

Framing image with transparent background png frame

hi,
i'm trying to find a way to frame images with transparent background png frames...
what i'm doing now is
1-drawing my image on a panel
2-creating a 2nd image using the frame's filename, stretching this 'frame-image' to a size slighlty larger than that of my main image and drawing the 'frame-image'
the problems with this method are:
1-depending on the width of the frame, the frame sometimes hides parts of the image (thick frame), and sometimes there is a gap between the frame and the image (thin frame).
2-if the image file containing the frame is larger than the frame (Ex: The image is 300x300, the frame is centered in this image and is 200x200; as opposed to the image is 200x200 and the frame takes up all the space), when i position the 'frame-image' near the top left corner of the image i want to frame, the frame appears at the wrong place (shifted down and to the right). This is due to the fact that i'm placing the top corner of the created 'frame-image' and not the frame, who is not in the top corner of my 'frame-image'.
Is there a way to do what i'm trying to do???
My ideas (which i don't know how to achieve are)
1-To 'analyse' my transparent background png file and
     1-only keep the frame,
     2-calculate the frame's thickness
OR
2-Let java do the analyzing for me and tell it to frame my image with the frame in the png file
please feel free to ask for more explanations if my description/question is confusing,
thanks.

Have you looked into the Border interface? If what you really want to do
is put a custom border on a component, you may be able to do it this way.
Anyway, here is some code that stacks and centres 2 images. It's not hard to do.
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
public class Example extends JComponent {
    private BufferedImage backgroundImage;
    private BufferedImage foregroundImage;
    public Example(BufferedImage backgroundImage, BufferedImage foregroundImage) {
        this.backgroundImage = backgroundImage;
        this.foregroundImage = foregroundImage;
    public Dimension getPreferredSize() {
        int w = backgroundImage.getWidth();
        int h = backgroundImage.getHeight();
        return new Dimension(w, h); //assuming this is bigger
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        int w = getWidth();
        int h = getHeight();
        //paint both, centred
        int x0 = (w-backgroundImage.getWidth())/2, y0 = (h-backgroundImage.getHeight())/2;
        g.drawImage(backgroundImage, x0, y0, null);
        int x1 = (w-foregroundImage.getWidth())/2, y1 = (h-foregroundImage.getHeight())/2;
        g.drawImage(foregroundImage, x1, y1, null);
    public static void main(String[] args) throws IOException {
        URL url1 = new URL("http://weblogs.java.net/jag/Image54-large.jpeg");
        URL url2 = new URL("http://weblogs.java.net/jag/DukeSaltimbanqueSmall.jpeg");
        JComponent comp = new Example(ImageIO.read(url1), ImageIO.read(url2));
        final JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(comp);
        f.pack();
        SwingUtilities.invokeLater(new Runnable(){
            public void run() {
                f.setLocationRelativeTo(null);
                f.setVisible(true);
}

Flash in HTML-based AIR app: Urls do not open

Hy there
Like the title states, I have a HTML-based AIR application, which embeds flash. This flash opens Links which should eventually open the default browser. For this I previously had to set the following property in my AIR application:
window.htmlLoader.navigateInSystemBrowser = true;
Like this the URL calls were forwarded to outside the application and then opened the webbrowser. We had successfully tested this on various systems.
However, now there are users of our application, who report that on their system (Including WinXP Professional SP3!) the websites do not open at all. When clicking on a link inside the app nothing happens.
Their system:
Hardware: Lenovo IdeaPad S12
Windows XP Home Edition v2002 Service pack 3
IE 7 (Version 7.0.5730.13)
Firefox 3.5.7
I had a look at the system and things like switching the default browser or re-installing Firefox did not work. Unfortunately this is a critical issue and kinda urgent so any help would be greatly appreciated. Thanks very much.

Thank you for reporting back and letting us know.
Chris

QuickTime with Transparent Background

> This message is in MIME format. Since your mail reader
does not understand
this format, some or all of this message may not be legible.
--B_3234432307_151173
Content-type: text/plain;
charset="ISO-8859-1"
Content-transfer-encoding: 8bit
Hi
I am having problems in publishing a file done in Flash- a
logo spinning,
and I want the background to be transparent. Under Publish
Settings, I have
the following:
ALPHA: Alpha-transparent
Layer: Auto
And checked the Flatten (Make self-contained).
However when I import the file into another application-
Apple�s Motion, I
get a white background- which is what I have originally. Am I
doing
something wrong?
I even check the track in QT Pro and set the Movie Properties
but it is not
becoming transparent. I appreciate any tips on it.
Thank you.
Kelvin
--B_3234432307_151173
Content-type: text/html;
charset="ISO-8859-1"
Content-transfer-encoding: quoted-printable
<HTML>
<HEAD>
<TITLE>QuickTime with Transparent
Background</TITLE>
</HEAD>
<BODY>
<FONT FACE=3D"Arial"><SPAN
STYLE=3D'font-size:12.0px'>Hi<BR>
<BR>
I am having problems in publishing a file done in Flash- a
logo spinning, a=
nd I want the background to be transparent. Under Publish
Settings, I have t=
he following:<BR>
<BR>
ALPHA: Alpha-transparent<BR>
Layer: Auto<BR>
<BR>
And checked the Flatten (Make self-contained).<BR>
<BR>
However when I import the file into another application-
Apple’s Moti=
on, I get a white background- which is what I have
originally. Am I doing so=
mething wrong? <BR>
<BR>
I even check the track in QT Pro and set the Movie Properties
but it is not=
becoming transparent. I appreciate any tips on it.
<BR>
<BR>
Thank you.<BR>
<BR>
Kelvin </SPAN></FONT>
</BODY>
</HTML>
--B_3234432307_151173--

I've never gotten it to work either. I usually set the
background to something not used in the animation, like bright
green, and then composite the video. I've never used Motion, so I
don't know if this is possible.

Embedding swf into HTML+JS AIR app

Hi
I'm trying to embed swf into HTML+JS AIR app with no luck.
First, I created flash library with this class in default package.
package
     import mx.controls.Alert;
     public class Utilities
          public function Utilities()
                         //asdfasdf
               Alert.show("asdasd","");
Then I compiled the project with Flash Builder and got library.swc as result. Then I extracted swf file.
After this is added required code into my html:
<html>
<head>
    <script type="text/javascript" src="AIRAliases.js"></script>
    <script type="text/javascript" src="AIRIntrospector.js"></script>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script src="library.swf" type="application/x-shockwave-flash"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert('loaded');
            air.Introspector.logError("aaa");
            var v = new runtime.Utilities();
    </script>
</head>
<body>
</body>
</html>
Then after I run application, I get error that result of expression is not constructor, function etc.
Could you help me please? Thanks in advance.
Here is sample code:
http://depositfiles.com/files/jztpnlb3a

No. I mean that the Flex framework makes certain assumptions about the environment it is running in -- like having a stage to work with. The Alert function, for example, works by creating a sprite and adding it to the Flash display list. Since your embedded SWF is not on a stage, there's no way for it to work.
You can can possibly use certain non-visual parts of the framework, such as the rpc package, but I can't guarantee it.

Flash exe with transparent background

Hi,
   Is there a way to project an EXE with transparent background from flash (only using flash).
If not only flash,
      then what else should I use??
As I know there are softwares like NorthCode, Zinc, etc., But all of them affects the script in some way like "fscommand("quit");, loadMovie();" does not seem working.
What I exactly need is:
1) Flash projector (EXE as well as APP) with transparent background
2) I need to loadMovie (call exteranl swfs) into the main projector file.
      "note:The external swfs are FlashPaper files, so I should I have access to API, so that I could resize them, edit UI as I want."
Thanks in Advance.
Vinod Kumar.K.V

from "Render and export a composition as an FLV or F4V file":
"To include the alpha channel in the FLV output, use the On2 VP6 codec and select Encode Alpha Channel in the Video tab of the export settings dialog box."

Combining 100 pngs with transparent background, vertically into one image PSE9

As the question suggests,
In PSE9 is it possible to combine 100+ PNG files (with identical dimensions & transparent background) into a single PNG file where the images are stacked vertically? and without trimming/cropping the transparent part of the image! I want to retain the exact original image dimensions so that they all stack neatly and precisely.
So far what I've tried is opening up the 100 PNG files in PSE9, create a new document with transparent background using the same width as the individual files and the height set to the individual file height multiplied by 100. (i.e. original image is 36 x 120 so the new file will be 36 x 12000) Then I get stuck! Whenever I drag a single file into the newly created document, it seems to be cropped to the image edges and no longer retains it's original height and width. Not to mention that hand dragging 100 files seems like a long-winded way of doing things... My automate button seems to be greyed out (so no contact sheet?) and I can't find any other automated process.
Any help would be greatly appreciated,
Thanks
N.
PSE 9 on Win 7

Please compare the resoultion of the two documents too. And a better way of arranging the layers would be to use distribute option in the move tool. You can find more about the move tool at http://helpx.adobe.com/photoshop-elements/using/moving-copying-selections.html#main-pars_h eading_0
Thus your workflow would be:
Create a new document with the required dimension.
Use File>Place to place all your png files on the created document as layers
Use distribute option in move tool
A still better workflow would be to use put all the files in a folder and write an ExtendScript to read the files and place them as layers on the document of said dimension

How do i save a .png with transparent background? cannot find in help

how do i save a .png with transparent background? cannot find in help

rickseng
With what program are you working and with what version of the program and on what computer operating system?
I suspect that you are working with some version of Photoshop Elements. If that is correct, then be advised that some how
your thread got posted in the Adobe Premiere Elements Forum (video editing) instead of the Adobe Photoshop Elements Forum (photo editing).
If Photoshop Elements question, then please re-post your thread in the Adobe Photoshop Elements Forum or wait for a moderator
here to see your thread here and move it from here to there.
Photoshop Elements
Thought....if are creating an image on a transparent background in Photoshop Elements Windows for a Premiere Elements Windows project, then you Save As png or psd.
Please clarify if I have misinterpreted your question.
Thank you.
ATR

Png files with transparent background show black only in firefox for android

I have a wix created site and png files with transparent backgrounds are showing with a black blackground in Firefox for Android. They show transparent in all other browsers I have tried.
I have tried saving the file as a gif, as a smaller png, interlaced, not interlaced, png 8, png24. It still shows black in Firefox for Android.

Hi evelswoman,
Thank you for your question. This sounds like a good one for the web compatibility team. Currently there are some compatibility documentation for background-image here: [https://developer.mozilla.org/en-US/docs/Web/CSS/background-image] and more details on background: [https://developer.mozilla.org/en-US/docs/Web/CSS/background]
Filling a bug with webcompat.com with an example url can go a long way as well, I hope this helps.

Export locally png with transparent background

Is it possible to use Ps touch to remove the background from jpeg images and export them locally as png with transparent background (reducing the size of the picture)? I would need to use this feature to create more keynotetouch-friendly images.

Yes. That's possible. You can export a PSTouch project as png to the Camera Roll....and there are other channels as well where this is possible, like "Share By E-mail" , "Send to iTunes" etc.
Those options are accesible via the Share menu (see attached screenshot) as part of the PSTouch project organizer

Convert HTML/javascript AIR app to flex-based AIR app?

Hi all,
I've already built an AIR app using HTML/javascript that I
would like to monetize.
I would like to use O2app's E-Commerce framework, which right
now only supports Flex-created AIR apps.
My question: Is there a simple way to "convert" an
HTML/javascript AIR app to Flex 3 format? I'd rather not have to
rebuild the app from scratch in Flex 3 if I don't have to. :)
Thanks,
Al

Hi,
There's no simple way to convert an HTML AIR app to flex.
But it is possible to create HTML Root windows from a Flex
AIR App. By root window, I mean the same kind of window that is
launched when you launch an HTML AIR App.
For more info, look at the HTMLLoader.createRootWindow()
call. (This will be available from a Flex AIR app as well)

Can I run an html/javascript AIR app on Android or iOS?

Is it possible to compile an already-existing HTML/javascript app to install/run it on any mobile OS (Android or iOS, in particular)? I haven't found anything that says it's possible, only instructions for doing it with a Flash/Flex based AIR app.
I have a large html/javascript app, with a lot of value put into it, and my client would like to be able to package it for use on tablets. Ideally, I'd like to be able to not only have it run there, but also be able to "hide" the html/js code from prying eyes, if there's a way to do that.
Thanks much in advance... I've done considerable research trying to get an answer to these questions.
- Jack

Hi Ross,
the certificate used for APK files is a self-signed one so at this point, no need to use Google Console yet.
See http://helpx.adobe.com/digital-publishing-suite/kb/publishing-process-android-amazon-mobil e.html (Create a certificate file using Keytool)
Testing is only a matter of installing the APK file on the device where you should be able to test.
The Android developer account will be useful for testing if you have in-app purchases matching 'retail' folios.

Image with transparent background als foreground of a button

I'd like to build an app with buttons using the phone's accent Color as Background and an Image with transparent Background as foreground of the button. It should look like the tiles on the start screen of WP8.1.
The following code doesn't work (no foreground appears)
<Button x:Name="myButton" Background="{ThemeResource PhoneAccentBrush}">
<Button.Foreground>
<ImageBrush ImageSource="/Assets/myImage.png"/>
<Button.Foreground>
</Button>
Are there any ideas?
Thanks
Martin

Hi mfv_technet,
The Foreground property is used to get or set a brush that describes the foreground color. So we can not bind the Foreground to a image,
if I do not misunderstand you, in my mind if we want to set the button look like the tiles on the start screen of WP8.1, maybe you can try to refer to the following xaml:
<Button x:Name="myButton" Foreground="Red" Background="{ThemeResource PhoneAccentBrush}" Margin="116,136,0,363" Width="195" Height="141">
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source="/Assets/myImage.png" Width="80" Height="80"></Image>
<TextBlock Text="Button"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
The result:
If I have misunderstood you, please feel free to let me know.
Best Regards,
Amy Peng
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Using animated gifs with transparent background.

Hi guys,
Keynotes 6.2.
I have been onto apple support with this problem.
I add a transparent animated gif to my project.
It show as a movie correctly in the presentation but when exported as quicktime or HTML the movies fail.
We eventually found out that quicktime does not support animated gifs. ( support.apple.com/kb/ht3775 )
So I exported the animation onto a folder with all the frames separately and brought them into final cut pro.
I then followed these tutorials on how to export with transparent background. ( http://provideocoalition.com/mspencer/video/fcp-x-and-alpha-channels and http://www.larryjordan.biz/fcp-export-transparency ).
I now have a quicktime movie that if I bring back into Final Cut Pro it has a transparent background.
However when I bring into keynotes it still has a black background. (presumably keynotes does not recognise the Apple Prores 444).
Any ideas how I can achieve what I need. ?
I am using a program called crazytalk animator and can output with transparent background. Animated Gif or a series of image stills BMP, JPEG, TGA or PNG.
Cheers
SteveW

This has been an ongoing issue for me since I switched from Powerpoint to Keynote. Most of the animated gifs with transparent backgrounds that I used with Powerpoint are no longer transparent in Keynote. You may want to search for those earlier threads on this topic...
To summarize: I've had to open up my animated gifs in After Effects and use the Color Key effect to restore transparency, with mixed success.
Good luck!

HTML based AIR app with transparent background (PNG)

Similar Messages

Maybe you are looking for