Captivate Not Handling PNG-24 Buttons with Transparency

I've got a problem with the way Cp 5 is handling transparency in PNG 24 images:
I've created a button from a Photoshop CS5 comp that has a drop shadow effect. When I insert the HelpButton_up image as an image in Captivate, the transparency works great. When the exact same image is used in a button, I get the white halo effect on the button. Can anyone shed some light on this? What are the best settings to use in Photoshop to preserve drop shadow transparency in buttons? I used "Save for web and devices" and used the PNG-24 setting with Transparency checked and Interlacing unchecked.
Much appreciated!
Jim Leichliter

Hi Jim,
I don't know where the buttons are cached, but I have had my fair share of problems with PNG images and Captivate 5 as well. The new project approach worked for me as well, but it's pretty annoying ;o)
/Michael
Visit my Captivate blog with tips & tricks, tutorials and Widgets.

Similar Messages

Buttons with transparent background ?

HEllo everyone:
I have a background with a degrade color effect where I need
to insert buttons with transparent back so dregrade can be
viewed... welll I tried to create those buttons in FW and it is
impossible in JPG, the I tried GIF but it does not show the white
letters.. then I finally achieved it creating buttons in PNG and
calling them as they are: PNG files... it works OK. but when I
visited other computers, in som of them, I do not know why, the
browser automatically adds a white or black back tpo the buttons,
so it takes off the effect because it covers the degrade.... Does
anyone please know how to deal with it ? I was wondering if this is
much better to create all the buttons and headers as flash movies
an insert them, but my customer requirements ar not flash at all in
oreder to be seen in aall handhelds also.... thanks in
advance...

.oO(Sw Jiten)
>Thanks Micha. It works great now. Just one curiosity: Why
"definetly not" about
>Flash ? Flash is working on most of the PC's now... isn't
it time to be more
>open to this friendly technology ?
It's not a friendly technology, that's the problem. It
creates many
usability and accessibility problems and may even affect the
system's
performance (like any plugin does) and security. Additionally
search
engines are usually not able to read a Flash's content and to
follow any
links in it.
Like JavaScript Flash is highly overrated and used too often
(IMHO). It
can be an advantage and add something useful to a site, but
it should be
used rarely and properly.
> Another question: I am trying to find a pop-up calendary
which lets you to
>choose a date, and as soon as you do it, it changes the
text field that you
>have to your left (You have both text field and
Calendary)
>
> I have looked for it and found many solutions in
JavaScript on google, however
>none of them change the text field values... any help ?
thanks in advance...
Can't help you with that at the moment.
Micha

Import png to pixmap with transparency

How can I import a PNG and unflatten it to create a pixmap whilst maintaining transparency in the image?
Even though I save the image with transparent pixels, when I bring it into my picture control using the "Read PNG File" and "Unflatten to Pixmap" VIs the transparent pixels are replaced with white ones. Is it something to do with a mask?
Thanks.

The Image cluster, from read PNG.vi contains these info.
In the 24 bit image info the first byte is the alpha channel.
Ton
Free Code Capture Tool! Version 2.1.3 with comments, web-upload, back-save and snippets!
Nederlandse LabVIEW user groep www.lvug.nl
My LabVIEW Ideas
LabVIEW, programming like it should be!

Should Not handle large base64Binary data with BPEL?

Hi,
we need to implement a file saving function. I have no problem to implement the web service with Java class by using MTOM streaming but I question on the best design with BPEL for this or if BPEL should not be used for this at all. Please help.
For the requirement, the file content could be the text entered from a web page or the binary data from any resource such as an existing file or email message body etc, which is not limited. Also the web service would receive the desired file name. But the actual file name should be created by the web service based on the desired file name plus some business rule.
I am thinking of creating a BPEL app for this. The input for the file content is designed to be of type base64Binary so that the application could handle either ASCII or Binary data. In this BEPL app, it needs first to call a web service to get the information where to put the file (this is dynamic) and generate the actual file name and then it calls another web service to save the file with the actual file name and content. I wonder in the case of saving content of big size such as content read from a PDF file, it could cause resource issue due to the dehydration in BPEL. I am not so clear about dehydration. Does that mean when the BPEL invokes the 1st web service to get the information where to put the file, the base64Binary data for the file content would be first saved into the DB (dehydrated)? Would this cause issue? If so, does that mean for this business needs, we should not use SOA, instead, we should just implement it with JAX-WS?

Operating System is Windows 7
I do not know what you mean by Patched to 7.0.4
I do not have a crash report, the software just freezes and I have to do a force close on the program.
Thank you for your time...

Button with transparent for Mobile apps using flex

Hi,
I am new to adobe flash builder 4.5 and flex 4.5 sdk. I have created a viewbased mobile application for Iphone and Android. What I tried to do is, I placed a button in my first view and attached an image into it (.png file).
I went to Buttons Property sheet - Appearance tab - I changed the Chrome color to white to change the background color of the button to white. Now my image is seen properly. But my image looks too small. And more thing is, I see the black border.
What I basically need is, I just want to create a transparent button so that my image is clearly seen.
Can anyone help me in this?

I think you need to look at the button skin
this might help
http://help.adobe.com/en_US/flex/using/WSA95C9644-B650-4783-B5C0-D2C7F95A23E3.html

INPUT textfield does not show non-English letters with transparent mode

INPUT textfield does not show non-English letters when i
type, if transparent mode turn on
this is bug of Flash Player 9?
will this bug had be fixed?

I just tested Firefox and Chrome on linux, i doesn't work either, but i get different weird chars: Ã©Ã¨Ã§a
However, on both mac and linux, if i copy the chars and paste them in the input field, it passes.

Two button with single function

I want to create two buttons for single function and one button for one function. For example, I click button1, the screen will show "clicked1"
If I clicked button2, the screen will show "clicked2". If I click button1 and then click button2, it will show "two button are clicked". However, it does not work in two button with single function. What is the problem? Here is the code.
import flash.display.MovieClip;
import flash.events.MouseEvent;
var button1:MovieClip=new Button1();
button1.x=200;
button1.y=200;
addChild(button1);
var button2:MovieClip=new Button2();
button2.x=300;
button2.y=250;
addChild(button2);
button1.addEventListener(MouseEvent.CLICK, onClick);
button2.addEventListener(MouseEvent.CLICK, onClick2);
var isClicked:Boolean;
var isClicked1:Boolean;
function onClick(evt:MouseEvent):void{
          isClicked=true;
          trace("clicked1");
function onClick2(evt:MouseEvent):void{
          isClicked1=true;
          trace("clicked2");
if (isClicked&&isClicked1){
          trace("two buttons are clicked");

It works but I want the screen only shows the "isClicked" only when I click button1. But now when I click button1, "isClicked" and "two buttons are clicked" show at the same time.
import flash.display.MovieClip;
import flash.events.MouseEvent;
var button1:MovieClip=new Button1();
button1.x=200;
button1.y=200;
addChild(button1);
var button2:MovieClip=new Button2();
button2.x=300;
button2.y=250;
addChild(button2);
var isClicked:Boolean;
var isClicked1:Boolean;
button1.addEventListener(MouseEvent.CLICK, onClick);
button2.addEventListener(MouseEvent.CLICK, onClick2);
button1.addEventListener(MouseEvent.CLICK, onClick3);
button2.addEventListener(MouseEvent.CLICK, onClick3);
function onClick(evt:MouseEvent):void{
          isClicked=true;
          trace("clicked1");
function onClick2(evt:MouseEvent):void{
          isClicked1=true;
          trace("clicked2");
function onClick3(evt:MouseEvent):void{
          trace("two buttons are clicked");

Transparency not working on smartshape button filled with transparent (PNG) image.

I'm using Captivate 8 and have had no problems so far importing PNG images with transparent backgrounds.....that is until I try and make a smartshape button and import a transparent PNG image as the background.
It displays fine on screen, but whenever I preview it or publish, the white background of the image/button displays. Is this a known Captivate 8 limitation?
Sorry if this is a repeated question....I've tried trawling through the forums and all I can see is to try different file formats for the images, such as GIF or BMP, which I've tried and nothing works.
Any advice or suggestions?

If it is a button, what is inserted for Rollover and Down state? I just recreated a shape button, with three different images for the states. All are in one PS-file as layers which I imported into Captivate. I kept Stretched checked in this case, because I know there is sometimes a slight change in size between states. Here are screenshots of Up, Rollover and Down state. The stroke was set to 0 for the shape, but to prevent all color contamination I also set stroke to the color of the background (light grey). In the first (Up) image you can clearly see where the stroke is due to truncation of the Question mark.
Seems only possibility is in the creation of the PNG's? What was your work flow?

Imported png with transparency not working as mask

I created an image with several wavey lines in photoshop to
use as a mask layer in Flash. I "save for web" as a png with
transparency. I import it to Flash and when it is on the stage it
is indeed transparent. But when I go to use it as a mask it masks
the entire rectangle of its dimensions, not just the waves. I trade
breaking it down and converting it to a symbol but no go. What am I
missing here?

Images are rectangle or square, even if you have transparency
or not, the entire image will be a mask.
The way you must work is usign vectorial shape as mask. You
can do it directly in Flash or use illustrator to build you shape
and then import it in Flash "Copy paste or export as swf". I know
that you have several wavey lines in photoshop. So, to keep them,
you have 3 possibilities.
1- Simply use path in Photoshop and export them into
Illustrator set them a color and use it in Flash
or
2- Import your image in Flash, then use the Trace Bitmap
option (Modify / Bitmap / Trace Bitmap)
or
3- Import you PNG in Illustrator and Convert it into shape
usign the Live Trace option.
These 3 way works great, depending on the complexity of you
graphics, each one have its own advantages

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

[iPhone SDK] non-rectangular button with png

Is there any way to create an image button with a png. but make it so that the transparent areas are not hittable?

Now we're cooking with gas! Thank you so much for your
assistance!
The only issue left;
is it possible for the Events to penetrate through, so that
if two elements slightly overlap, the transparent part of obj1 will
allow a onclick (and subsequently the onmouseover) event on el2,
preferably dynamically so that I don't have to add event handlers
between the two.
Is there a simple way or do i need to calculate the overlap
using the x/y coords and width/height of each element, then
manually dispatch?
here's where I'm at thus far (with this discussion)
Firstly, the class for the movie clip,
then our frame.

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.

ImageView with transparent image not clickable

I created an ImageView with an image with transparent portions. I also did some scaling and moving, which I though might cause this effect, but that is not the case. When I click on the transparent portion of the image the onMouseClick event is not fired. Other mouse events (mouse enter, mouse move, mouse exit, ...) get fired. Only when I click on the non transparent part the click event is fired.
Image img = new Image(getClass().getResourceAsStream("barrel_icon.png"));
ImageView view = new ImageView(img);
view.setScaleX(0.5);
view.setScaleY(0.5);
view.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent mouseEvent) {
    System.out.println("Clicked on the scaled icon");
StackPane root = new StackPane();
Group group = new Group(view);
group.setManaged(false);
group.setLayoutY(-13);
group.setLayoutX(-13);
root.getChildren().add(group);
The area between the barrel and the shadow belongs clearly to the image, however is transparent.
I am wondering if there is a reason for this behaviour and what is the best way to work around this issue, as my image has large transparent portions and the non transparent parts are hard to click on.
By the way this is all based on JavaFX 2.2.
Regards
Hotzst

For future reference here is the workaround I have come up with:
public class TransparentImageViewClickableArea extends Rectangle{
    private final ImageView imageView;
    public TransparentImageViewClickableArea(ImageView imageView) {
        super(imageView.getLayoutX(), imageView.getLayoutY(), imageView.getImage().getWidth(), imageView.getImage().getHeight());
        setOnMouseReleased(imageView.getOnMouseReleased());
        this.imageView = imageView;
        bindBounds();
    private void bindBounds() {
        DoubleBinding layoutXBinding = new DoubleBinding() {
                super.bind(imageView.layoutXProperty(), imageView.scaleXProperty());
            @Override
            protected double computeValue() {
                final double imgWidth = imageView.getImage().getWidth();
                final double actualWidth = imgWidth * imageView.getScaleX();
                double diff = imgWidth - actualWidth;
                return imageView.getLayoutX() + diff/2;
        layoutXProperty().bind(layoutXBinding);
        DoubleBinding layoutYBinding = new DoubleBinding() {
                super.bind(imageView.layoutYProperty(), imageView.scaleYProperty());
            @Override
            protected double computeValue() {
                final double imgHeight = imageView.getImage().getHeight();
                final double actualHeight = imgHeight * imageView.getScaleY();
                double diff = imgHeight - actualHeight;
                return imageView.getLayoutY() + diff/2;
        layoutYProperty().bind(layoutYBinding);
        widthProperty().bind(imageView.getImage().widthProperty().multiply(imageView.scaleXProperty()));
        heightProperty().bind(imageView.getImage().heightProperty().multiply(imageView.scaleYProperty()));
It is not a perfect solution, as it does not consider the case that the image might be changed as well. This however could be improved easily but was not necessary in my use case.

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);
}

Transparency with *png in MHP with DVBAlphaComposite-what's the problem?

Hello!
I know this topic exists already, but it could not help me with my problem:
I want an HIcon with an transparent picture in it but I am not able to get any transparency..To me that code seems to be right,
but when testing it with the IRT RI, the Graphic is opaque..
Does anybody see what i am missing?
public void startXlet() throws XletStateChangeException {
MediaTracker tracker = new MediaTracker(this);
picture = Toolkit.getDefaultToolkit().getImage("AlphaGrafik.png");
tracker.addImage(bild, 0);
try{
tracker.waitForAll();
catch(InterruptedException e) {
picture = null;
cont = new HContainer(0, 0, 720 , 576);
icon1 = new HStaticIcon(picture, 0, 0, 720, 576);
cont.add(icon1);
scene.add(cont);
scene.setVisible(true);
icon1.requestFocus();
public void alpha(Graphics g){
DVBAlphaComposite compositeRule = DVBAlphaComposite.getInstance(DVBAlphaComposite.SRC_OVER, (float)0.5);
DVBGraphics image = (DVBGraphics)g;
try {
image.setDVBComposite(compositeRule);
catch (org.dvb.ui.UnsupportedDrawingOperationException ex) {
System.out.println("Exception: " + ex);
image.drawImage(picture,0,0,null);
Any help is very useful for me!
Regards, Alex.

I have simular problem applying alpha composing to Graphic layers.
If I draw graphic elements like circle or rectangular with some color or draw images with transparency (Alpha) then I can see only background IFame under top element. It seams when I draw something on graphic layer then middleware compose background video layer and DVB colors of element that I am drawing at the moment. Colors of elements that placed under the top element are ignored. I tried verious composing rules but It does not give any correct result. It seams middleware does not suppot alpha composing at this moment. Did you get some exception applying alpha composing?
I use Alticast MHP middleware installed on my Humax STB

Captivate Not Handling PNG-24 Buttons with Transparency

Similar Messages

Maybe you are looking for