FM12 - "Black" images in HTML5 output

Hello
I'm using Framemaker 12, and I work with HTML5 output to publish online helps.
In my FM files, I use PNG images which are in anchored frames.
My problem is, after I did the HTML5 output, my images appear "black" as you can see below. Any idea about where this problem comes from would be greatly appreciated !
Thanks a lot.

Hi Arnis,
In fact the problem was in the transparency. My images are transparent .png files, and it looks like FM (still) does not know how to deal with transparency, and puts black where my images are transparent.

Similar Messages

[FM12] Linking multiple books for HTML5 output

Hi all,
Here is the problem I'm facing :
I've created several FM12 books. Each one has a life on its own, as the main purpose is to publish in PDF format.
I would like publish in HTML5 to put all the books in an online help, that would be integrated into my company's website.
I have a problem dealing with the structure of my online help.
When putting out each book individually in HTML5, my TOC format is perfectly preserved as such :
ChapterTitle
- Level 1
- Level 2
- Level 3
ChapterTitle
- Level 1
- Level 2
- Level 3
However, if i put all my books in a same master-book, and generate a master-TOC, the HTML5 Output breaks my TOC format, as I have the following result :
Book 1 name
- ChapterTitle
- Level 1
- Level 2
- Level 3
- ChapterTitle
- Level 1
- Level 2
- Level 3
Book 2 name
- ChapterTitle
- Level 1
- Level 2
- Level 3
- ChapterTitle
- Level 1
- Level 2
- Level 3
Any hint or idea on how to solve this problem would be greatly appreciated. Thanks a lot !

This question has been cross-posted to two different forum
categories. Please direct any responses to the thread where the
question was originally asked. You may do this by
clicking
here.
Forum posting guidelines may be viewed by
clicking
here.

Images are stretched HTML5 output viewed in IE8. Workaround?

The images in my HTML5 output are being stretched vertically when viewed in Internet Explorer 8. I know there are HTML5 issues in general with IE, especially older versions, but is there a quick fix for this? I've attached an example below. The first image is supposed to be the search icon (magnifying glass) and the second is a little printer icon. Both are stretched vertically.

Hi,
I’ve not been paying much attention to the forums the last couple of days. Sorry for the late reaction.
The problem is that the image is stretched and IE8 incorrectly interprets this as that it has to stretch the image. If you are using IE9 in SharePoint (IE8 isn’t officially supported), you can press F12 and set the rendering mode to IE9 standards mode. This will make the output behave.
Greet,
Willam

Questions on HTML5 Output in FrameMaker 12

I have a couple questions about the HTML5 Output:
1. I have images that are not appearing in the output (they are in the source FM file, but not in the HTML5 output). What am I doing wrong?
2. Is there a way to disable the glossary function so that it doesn't appear as an option in the HTML5 output?
Any help is greatly appreciated. Thanks!

1. Are all of the images in anchored frames? Have you edited any of the settings under Style mapping > Image?
2. Currently, AFAIK, this is hardwired. You could try spelunking in a saved settings.sts file (it's just a zip container) to see if this can be turned off there [if you're quite familiar with XML, DTD's (.slp file), HTML and javascript],

How to Change the color of the black image

Hi,
I have created a black image. But want to insert some text and chnage the color of the same. I am trying to do it, by usign various classes of javax.imageio.*, java.awt.image. But, I have not the required output till now. I am showing my code below. The image I created is totally black.
Any suggestion greatly appreciated.
File f = new File("C:/tomcat5.5.15/apache-tomcat-5.5.16/webapps/plugintest/03974701.jpg");
BufferedImage image = ImageIO.read(f);
int height = image.getHeight();
int width = image.getWidth();
int type = image.getType();
ColorModel cm = image.getColorModel();
System.out.println("Width of the Image is "+width);
System.out.println("Height of the Image is "+height);
System.out.println("type of the Image is "+type);
BufferedImage image1 = new BufferedImage(width,height,type);
//image1.setRGB(45,45,rgb);
File f1 = new File("blank.jpg");
RenderedImage ri = image1;
ImageIO.write(ri,"jpg",f1);

Color c = new Color(0, 0, 0);
Graphics g = image1.getGraphics();
g.setColor(c);Thanks for your suggestion I added these lines to the
code(code is shown above), but the there is no change
in the color of the jpg image saved in the file. Am I
missing something.Yes.
a) Do you know what color 0,0,0 is? Hint: not mauve
b) When you call set color that sets the drawing colour. But you aren't drawing anything. You can draw things with the methods of Graphics and Graphics2D. I suggest starting with fillRect
http://java.sun.com/developer/Books/Graphics/
Thanks

Captivate 7 - HTML5 Output and Interactions - coming to the front

Hi all,
Don't know if anyone else has had this issue. I have found that when using inetractions with HTML5 output they automatically come to the front of the slide regardless of where you placed them in the story file.
I had used white rectangles to hide the interaction border but this now doesn't work in HTML5 (does the trick in SWF format).
Any ideas?
Cheers.

Hi again Mayank,
Little way down the road and it's not working . I have been testing away and discovered several things.
I started a new project and copy and pasted my slide from the main project with the accordian widget over to it. This was initially not working when tested in HTML5 so i proceded to chop away stuff untill it worked.
I discovered that if you have any objects with a shadow on the slide in any place (including not overlapping the widget) the whole widget breaks. I also found that if you had a 'line' smart object anywhere that the whole widget breaks.
Once i made sure i had no lines and shadows on the slide the widget then worked as expected with it staying at the back.
However i have found that no matter what i do in my main project the widget never works, even when it is the only thing on a new slide? This suggests a project wide issue and i have no idea what that could be.
Is there a chance that the actual save of my project is the issue as it was created before i changed the code? If so is there somthing i could change in the code of my save file to make it work?
I thought maybe i could copy and paste the entire project into a new project but of course all the click boxes change back to continue which is a nightmare.
EDIT: I just tried copying the entire project over to a new project and although all click boxes were on continue the slide with the widget worked fine (with the above amends).
EDIT EDIT: Hah, okay i have now discovered that deleteing the images of my master slide allowed the original project to work with the above amends (lines and shadows removed) too? So its the master slide thats the problem!

Video Issues with HTML5 Output

Hello there,
I have a project with several videos on seperate slides that are located inbetween normal content slides.
Works fine with SWF output and HTML5 output viewed on the pc, but...
when I test the course on an iPad the video plays quite fine the first time I watch it.
However when I jump back to the video the screen stays black for the duration of the video.
When there is audio in the video the audio plays but the screen stays black!
What I happening here?
Someone any ideas?
Thanks in advance
Ruwen

Hello there,
Have you inserted multi slide synchronized video or event video?
and which format of video have you inserted?
Please tell the complete version of Captivate 6 (help> about captivate) and which version of iOS is it?
You can also try improve the slide quality to optimized or 24 bit in the properties of the slide (for every slide).
Thanks.

Discoloring of mp4 videos in html5 output

I am using Adobe Captivate to be able to publish to html5. As swf is incompatible with html5, I have to use mp4 videos. However, the videos are somehow discolored in output. Can anyone tell me why this happens, an what I may do to fix it?
The image on the left shows the video in html5 output. The one on the right is taken from the editor.
There is no difference using event or multiple slide mode for the videos.

What do you have set as your slide quality settings? Perhaps you need to increase it.

CP8 Glossary in HTML5 output problems

When publishing a SWF file that includes the glossary interaction, the glossary obeys the stacking order of objects when the file is viewed. When the file is published as HTML5, the glossary appears above items that were above it in the stacking order. In the image below you can see that I've added images above the glossary widget so I can make some appearance changes since you can't modify the widget's shape, and in the SWF output the widget appears below the images. In the HTML5 output the widget is being placed above the objects.
The other problem I'm seeing is that the glossary interaction doesn't even appear when viewing the published file in Chrome. So I have 2 questions:
1) How do you get the glossary widget to obey the stacking order in HTML5 output?
2) How do you get the glossary widget to appear at all in Chrome.?

Hi,
In regards to your first question I've had exactly the same problem. I've created elements to appear over the top of the widget which work fine in SWF but I've had no luck getting the sort order correct in HTML5. I've tried a number methods to try and find a solution but without any luck and so I would love to hear if anyone else has been able to do this.
What version of CP are you using? I do not have problems with the glossary widget appearing in Chrome using HTML8 and I'm using the latest build of CP 8. I did have problems with older versions but found that when I upgraded a project that had a glossary widget I also had to remove the old widget from the project and reinsert it again. Hope this point helps.
AndyK

Getting black image when resize to thumbnail

When uploading images through a servlet via a webbrowser, I am saving the image to the harddrive and then resizing the image as thumbnail for certain view pages.
I have tried serveral approaches to resizing the image, with all solutions I use the thumbnail image is being returned as a solid back image.
I started with the example on the Sun Tech Tips site: http://java.sun.com/developer/TechTips/1999/tt1021.html
    public static void createThumbnail(
            String orig, String thumb, int maxDim) {
        try {
            // Get the image from a file.
            Image inImage = new ImageIcon(orig).getImage();
            // Determine the scale.
            double scale = (double) maxDim / (double) inImage.getHeight(null);
            if (inImage.getWidth(null) > inImage.getHeight(null)) {
                scale = (double) maxDim / (double) inImage.getWidth(null);
            // Determine size of new image. One of them
            // should equal maxDim.
            int scaledW = (int) (scale * inImage.getWidth(null));
            int scaledH = (int) (scale * inImage.getHeight(null));
            // Create an image buffer in which to paint on.
            BufferedImage outImage = new BufferedImage(scaledW, scaledH,
                    BufferedImage.TYPE_INT_RGB);
            // Set the scale.
            AffineTransform tx = new AffineTransform();
            // If the image is smaller than the desired image size,
            // don't bother scaling.
            if (scale < 1.0d) {
                tx.scale(scale, scale);
            // Paint image.
            Graphics2D g2d = outImage.createGraphics();
            g2d.drawImage(inImage, tx, null);
            g2d.dispose();
            // JPEG-encode the image and write to file.
            OutputStream os = new FileOutputStream(thumb);
            JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);
            encoder.encode(outImage);
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
    }I have tried other approaches from various posting I found off google such as:
    public static void scale(String filename, String outputfile, int width, int height)
            throws Exception {
        ImageIcon source = new ImageIcon(filename);
        double sf_x = width / (double) source.getIconWidth();
        double sf_y = height / (double) source.getIconHeight();
        System.err.println("Scale_factor_X: " + sf_x);
        System.err.println("Scale_factor_Y: " + sf_y);
        BufferedImage bufimg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = bufimg.createGraphics();
        g.setComposite(AlphaComposite.Src);
        AffineTransform aft = AffineTransform.getScaleInstance(sf_x, sf_y);
        g.drawImage(source.getImage(), aft, null);
        FileOutputStream os = new FileOutputStream(outputfile);
        JPEGImageEncoder enc = JPEGCodec.createJPEGEncoder(os);
        enc.encode(bufimg);
        os.flush();
        os.close();
    }No matter the implementation, the output is always the black image. I tried additional steps such as adding the JVM flag of:
-Djava.awt.headless=true
I've certainly spent a few hours on the google search engine and reviewing various newgroup posting, your suggestions come with many thanks.
Cheers,
Justen

I tried your method and it worked okay. The only way I can get the black image is to send in a distorted path. One of the problems with the ImageIcon.getImage technique is that you get no feedback about loading failure. Here's a way to peek into the process for some indication of how it went. If you can tolerate j2se 1.4+ you could use the ImageIO methods in lieu of the proprietary JPGImageEncoder.
import com.sun.image.codec.jpeg.*;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;
public class ImageScalingTest extends JPanel
    public static void createThumbnail(
            String orig, String thumb, int maxDim) {
        try {
            // Get the image from a file.
            ImageIcon icon = new ImageIcon(orig);
            int status = icon.getImageLoadStatus();
            String s = "";
            switch(status)
                case MediaTracker.ABORTED:
                    s = "ABORTED";
                    break;
                case MediaTracker.ERRORED:
                    s = "ERRORED";
                    break;
                case MediaTracker.COMPLETE:
                    s = "COMPLETE";
            System.out.println("image loading status: " + s);
            Image inImage = icon.getImage();
//            Object o = ImageScalingTest.class.getResource(orig);
//            /*Buffered*/Image inImage = ImageIO.read(((URL)o).openStream());
            // Determine the scale.
            double scale = (double) maxDim / (double) inImage.getHeight(null);
            if (inImage.getWidth(null) > inImage.getHeight(null)) {
                scale = (double) maxDim / (double) inImage.getWidth(null);
            // Determine size of new image. One of them
            // should equal maxDim.
            int scaledW = (int) (scale * inImage.getWidth(null));
            int scaledH = (int) (scale * inImage.getHeight(null));
            // Create an image buffer in which to paint on.
            BufferedImage outImage = new BufferedImage(scaledW, scaledH,
                    BufferedImage.TYPE_INT_RGB);
            // Set the scale.
            AffineTransform tx = new AffineTransform();
            // If the image is smaller than the desired image size,
            // don't bother scaling.
            if (scale < 1.0d) {
                tx.scale(scale, scale);
            // Paint image.
            Graphics2D g2d = outImage.createGraphics();
            g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                                 RenderingHints.VALUE_INTERPOLATION_BICUBIC);
            g2d.drawImage(inImage, tx, null);
            g2d.dispose();
            // JPEG-encode the image and write to file.
            OutputStream os = new FileOutputStream(thumb);
            JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);
            encoder.encode(outImage);
            os.close();
//           ImageIO.write(outImage, "jpg", new File(thumb));
        } catch (IOException e) {
            e.printStackTrace();
    public static void main(String[] args)
        String path = "images/cougar.jpg";
        String fileName = "imageScalingTest.jpg";
        int size = 75;
        ImageScalingTest test = new ImageScalingTest();
        test.createThumbnail(path, fileName, size);
}

HTML5 Output to Web Browser view

The middle image displays a play button I have to press before previewing my HTML5 output page. Is this what my users have to do each time they view my page created in Captivate? or is this just the view in the Preview mode while I'm working on the project?
If this is set by default, how can I turn it off when I publish it to HTML?
Please advise.
Thank you!

Hi Susanne
Couple of workarounds and their pros and cons have been discussed this thread. Suggest you check it out.
http://forums.adobe.com/message/4599200#4599200
Sreekanth

Why does USB Snap.vi return a black image?

I am using the USB camera drivers/tools to perform a snap acquire with a Logitech Quick Cam Chat. If I use the Snap.vi example file in LabVIEW 7.1\examples\IMAQ\imaqUSB examples.llb I get a blank (black) image. But if I add a for loop in the first frame of the sequence around the snap function and do about 5 iterations before outputing the image to a display everything seems fine. It seems that i need to do at least 4-5 iterations to get a clean image. I would like to know whay I can't just do a single snap iteration.
Thanks
Dan Berry
Faculty Research Assistant
Oregon State University

IMAQdx Snap is included in the Vision Acquisition Software package (the $400 version I mentioned previously).
There is a very old KB article that references a list of all the VIs in the package. The better way to find that list is in the help files:
If you want to try out the software, you can download it and use it in eval mode for 30 days or so...
Greg
Certifed LabVIEW Developer

Stacking black images for noise reduction

Hello,
I do a lot of timelpase photography and use Adobe software in my post workflow. I would like to master the process of using black images to reduce the digital noise of astral timelapses taken at 3200iso. I work in a RAW workflow then output to DPX image sequesnce.
Here is a link to forum topic I started on a timelapse forum with a similar query. I am just wondering if there is a way to do this with Ae in the RAW workflow or something similar. Instead of using other software. Maybe a Ps batch process?
http://forum.timescapes.org/phpBB3/viewtopic.php?f=8&t=10955&p=59144#p59144

If you want to investigate a way to do it in AE, you could look at Color Finesse. It might treat crushing those blacks more gently than anything else.
AE has a denoising effect, but I'd be afraid it would de-noise the stars right off the image.

Need help in decoding javascript tag for HTML5 output.

Hello all,
I am working on a project in Adobe captivate 7 64 bit which consists of around 500 slides with most of the slides being text and image. The problem I am facing is very unusual which I guess I am the first one to experience (as per my search on google and forums). So, after I publish my project the output works fine in html (local and online) BUT when I run index.html (i.e., HTML5 output) the course does not run and screen is blank.
After spending a week on searching online and using the trail and error strategy I was able to find out that it was the URL text "F:\usrnew\purchase" placed in the the middle of the course which caused the whole damage. However the url was removed and the project was submitted.
After spending some extra time I found out that the letter "\u" which is a javascript tag was causing the problem for the HTML5 output. I don't really know much about javascripting but found out that the tag can be decoded using some programming strategy. Now this is where my knowledge comes to a standby and needs a lift from you guys.
Any ideas, help, knowledge sharing would be very helpful for me and all those who might face this issue in future.
Looking forward for your views.
Kind Regards,
Mirza

Voila! The issue is resolved.
Solution: Change the single slash "\" to a double slash "\\".
Cheers,
Mirza

How do I lighten or remove dark/black images or layers in Photoshop CS5?

For several months, I have been trying to find the best ways to reduce the excessive amount of toner that is required to print many pdf documents in black and white, or even grayscale. I use Leanprint but it can still leave pages of dark and black images.
Several Adobe Acrobat X posts say to use Photoshop to remove black graphics and/or reduce the darkness of images. However, they give no further information about what to do in Photoshop. I am not a simpleton but I know very little about Photoshop other than that there are probably several ways to accomplish this, depending on the circumstances. I dread having to spend more hours trying to figure out what is the best option to use in each specific situation.
It is puzzling that it has been so difficult to find the information needed, especially since many other people would like this information as well.
I hope that someone can advise me or just point me to some directions and resources as places to start. Even knowing the best search terms to find this information could be useful.
Thank you for any assistance.
Cathy

Ok, something to keep in mind with CS5 photoshop any change of its brightness and or contrast usually is considered a permanent change.
However if your image is a camera raw file (straight from the camera in its native raw format) a tiff or a jpg, you can and should open the file in Adobe Camera Raw (ACR) as any edits done in ACR are non-destructible in that any changes made can be changed or reset at any later time in the future as it does not alter the image it self, but applies the edits to the metadata.
That said, it means in order for a program to see those changes it needs the ability to read the metadata, which not all programs can do.
In ACR you will find a contrast slider, by decreasing the contrast the image will become lighter. You can also increase the highlights or whites and you can decrease the shadows or blacks. This effectively is similar to lowering the contrast, but because it is an additional step, you can do all three sliders effectively reducing the contrast even further than you would be moving the contrast slider by itself.
Since this is a metadata alteration, this change you made can be applied to a folder full of images that are the same formats I mentioned above, or you can select a group of images in bridge and apply to just the selected group.
At any time in the future you can remove the edits should you need to use the original image once again.

FM12 - "Black" images in HTML5 output

Similar Messages

Maybe you are looking for