This question is answered. Helpful answers available: 0. Correct answers available: 1.


Permlink Replies: 48 - Pages: 4 [ Previous | 1 2 3 4 | Next ] - Last Post: 16-Feb-2012 16:55 Last Post By: kaya Threads: [ Previous | Next ]
monkeyboy

Posts: 1,217
Registered: 21-Jun-2008
Re: Thumbnails in PNG format
Posted: 05-Jan-2012 23:30   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
Does Flash support them,
Flash Player itself does support PNGs (since v8). However, I guess not all Flash presentations support them. This would likely be dependent on the author of the SWF file.
do flash based skins work if it is supported? Is there a test (is one needed) that can be applied if PNG images have been used? Or is it just a case of checking the image extension?
SimpleViewer works fine and the PNG thumbnails and images created by jAlbum 10.4b1 display fine (with transparency) by just using the thumbPath and contentPath variables respectively.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 05:25   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Experimentation has answered most of my questions. Both thumbnails and scaled images are output as PNG's if you add a PNG to the album, and the scaleToFit() routine does, indeed, return a properly scaled PNG if you feed a PNG into it.

Using saveJPEG() to write out the scaled image works with a PNG, despite the name - should I be using something else?

So, the routine now looks like this:
if(!logoBounds.equals("original")) {
	bounds = logoBounds.split("x");
	AlbumImage ai = new AlbumImage(new File(logoPath), engine);
	ai = ai.scaleToFit(new Dimension(Integer.parseInt(bounds[0]), Integer.parseInt(bounds[1])));
	logoImageWidth = ai.getImage().getWidth();
	isScaledLogo = true;
	ai.saveJPEG(new File(rootOutputDirectory, logoImage), 90);
}
One discovery, however - XBorderFilter does some weird things with PNG's if you use it to create a drop-shadow. I'll poke around with the filters a bit more, but it wouldn't surprise me to find others that choke on PNG's.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 05:56   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Using XBorderFilter to put a drop-shadow on a GIF is particularly ugly - the output image is blank.
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 10:10   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
I've now made jAlbum write transparent PNGs as well as JPEG images.

The transparency of PNG may be quite useful, what I'm trying to understand is what impact using PNGs may have on how skins work. Does Flash support them, do flash based skins work if it is supported? Is there a test (is one needed) that can be applied if PNG images have been used? Or is it just a case of checking the image extension?

Edited by: RobM on 05-Jan-2012 21:37
Flash 8 onwards!


Transparent png's seems to work with the Flash based skins I tested with yesterday.
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 10:16   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
EarlyOut wrote:
davidekholm wrote:
I've now made jAlbum write transparent PNGs as well as JPEG images.

I'm assuming this applies to thumbnails and scaled images. But what about images that the skin is processing outside of the album images? I've got a routine for scaling a title bar logo that looks something like this:

if(!logoBounds.equals("original")) {
	bounds = logoBounds.split("x");
	AlbumImage ai = new AlbumImage(new File(logoPath), engine);
	ai = ai.scaleToFit(new Dimension(Integer.parseInt(bounds[0]), Integer.parseInt(bounds[1])));
	logoImageWidth = ai.getImage().getWidth();
	isScaledLogo = true;
	scaledLogo = removeExtension(logoImage) + ".jpg";
	ai.saveJPEG(new File(rootOutputDirectory + "/" + scaledLogo), 90);
}
If the provided logo image is a PNG, I'd much prefer to let jAlbum scale it, but keep it as a transparent PNG. How would I do that? Does scaleToFit() now return a PNG? And if it does, I'm guessing I should be using something other than saveJPEG() to write it out?

Currently, I've just rewritten the saveJPEG method to respect the extension of the file passed to it, so if the extension is "png", then it will save the image as PNG instead. I will probably rename the method to saveImage and keep saveJPEG for backwards compatibility.

To let jAlbum use the PNG type whenever possible, use engine.getTargetName(String originalName)

You can also use the "classic" engine.jpegName(String originalName), which is now modified to return a file name with a "png" extension if the original file is a PNG or GIF file, but in the future, moving to using the more correctly named getTargetName() looks better (they map to the same code now anyway).
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 10:24   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
EarlyOut wrote:
Experimentation has answered most of my questions. Both thumbnails and scaled images are output as PNG's if you add a PNG to the album, and the scaleToFit() routine does, indeed, return a properly scaled PNG if you feed a PNG into it.

Using saveJPEG() to write out the scaled image works with a PNG, despite the name - should I be using something else?


Currently not, but I'll introduce a name change so you will be able to write saveImage soon.

So, the routine now looks like this:
if(!logoBounds.equals("original")) {
	bounds = logoBounds.split("x");
	AlbumImage ai = new AlbumImage(new File(logoPath), engine);
	ai = ai.scaleToFit(new Dimension(Integer.parseInt(bounds[0]), Integer.parseInt(bounds[1])));
	logoImageWidth = ai.getImage().getWidth();
	isScaledLogo = true;
	ai.saveJPEG(new File(rootOutputDirectory, logoImage), 90);
}
One discovery, however - XBorderFilter does some weird things with PNG's if you use it to create a drop-shadow. I'll poke around with the filters a bit more, but it wouldn't surprise me to find others that choke on PNG's.

I rewrote all classic image filters but the XBorderFilter as it is a rather complex filter that I haven't been developing myself either. If you're willing to test my modifications I can give it an optimistic shot to rewrite it for transparency support!
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 12:32   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
EarlyOut wrote:
Using XBorderFilter to put a drop-shadow on a GIF is particularly ugly - the output image is blank.

I've attached a quick modification to it here. Put it inside the "plugins" folder. Note I haven't even tested this one. The only changes I made was to try to use the same image type as passed, and where there is no existing image to base new images on, I simply changed the type from RGB to ARGB (i.e. alpha channel + RGB)

If it doesn't work, try playing with various combinations of "INT_RGB" and "INT_ARGB" inside the code, then recompile using the compile.bat or compie.sh script that you find inside jAlbum's "plugins" folder.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 15:57   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
Attachment paypaldonate.gif (2.7 KB)
Attachment Green-Globe.png (197.9 KB)
Attachment bluegreen.gif (29.3 KB)
Attachment maple_leaf_314x360.png (36.2 KB)
That cures the "blank GIF" problem is some cases, but not others - it's all a mystery to me, as I don't know a thing about image formats.

The drop-shadow on a transparency is a unique problem, however. XBorderFilter is counting on having the image obscure most of what it's creating, leaving only the visible shadow at the margins. A transparent image, of course, doesn't do that!

What you'd really want to see is a shadow that follows the contours of the non-transparent part of the image. As you can imagine, that would be a very complicated piece of coding, far beyond what that filter can do. I'm not even sure what very pricey image-processing software packages can do with that situation.

Just for your general amusement, I've slapped together a quick demo album, using the beta XBorderFilter:

http://earlyout.jalbum.net/DSDemo

The thumbnail page is using CSS3 box-shadows, and you can see what that does - it applies the shadow to an imaginary box around the image. Anything more would be too complex. The enlarged images have an XBorderFilter drop-shadow applied, and you can see how variable the results are.

Attached are the original PNGs and GIFs used in that album.

I'm not sure this is worth a lot of time and effort, in search of a solution. Increasingly, CSS3 attributes will be used to achieve most of what XBorderFilter does, anyway. I'm only using it for the enlarged images because of some odd issues within Highslide JS (I can't get it to leave the extra space around the image that I would need to use a CSS3 box-shadow on it). When it comes to GIFs, I have no problem telling people to convert them to JPGs before using them in an album.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 16:12   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
Attachment bluegreen.gif (29.3 KB)
davidekholm wrote:
I rewrote all classic image filters....

Mostly good - no problems with FixedShape, Grayscale, and Zoom. The watermark filter works OK on everything except the attached GIF - blank image again, like XBorderFilter.

Haven't tried some of the messier ones, like Tint, Logo, Sharpen, and Blur (not built into my skins, so testing them is a lot more work!).
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 16:15   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Attachment TintError.jpg (23.6 KB)
Attachment TintPNG.jpg (90.7 KB)
Trouble with TintFilter - error attached. It won't handle the GIFs at all, and does some very weird stuff to tranpsarent PNGs.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 16:20   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
LogoFilter - good on PNGs, blank GIF with that bluegreen.gif example.
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 16:23   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Attachment BlurPNG.jpg (56.3 KB)
BlurFilter does some bizarre color-shifting on a PNG.
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 22:16   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I agree with your reasoning regarding XBorderFilter EarlyOut.
Can modern web technologies make drop shadows that follows the contours of images with transparency? If not, it calls for a completely new drop shadow filter! (Would be pretty fun to write). After all, you're not using all the bells and whistles of XBorderFilter, you just want a stylish drop shadow, right?
davidekholm

Posts: 21,873
Registered: 18-Oct-2002
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 22:18   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
EarlyOut wrote:
Trouble with TintFilter - error attached. It won't handle the GIFs at all, and does some very weird stuff to tranpsarent PNGs.

How are those GIFs looking in jAlbum 10.3.1 then?
jGromit

Posts: 34,196
Registered: 31-Jan-2006
Re: Thumbnails in PNG format
Posted: 06-Jan-2012 22:48   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
davidekholm wrote:
I agree with your reasoning regarding XBorderFilter EarlyOut.
Can modern web technologies make drop shadows that follows the contours of images with transparency? If not, it calls for a completely new drop shadow filter! (Would be pretty fun to write). After all, you're not using all the bells and whistles of XBorderFilter, you just want a stylish drop shadow, right?

I haven't seen anything that can produce a convincing shadow on a transparent image. It would be quite a challenge. You're not just trying to put a fuzzy border around all the edges - it needs to create a convincing illusion that the light is coming from a specific direction, like from above and to the left.

XBorderFilter can still do some things that there's no good way of doing in CSS3 yet. The semi-transparent inset borders come to mind. Multi-color frames in CSS require a bunch of pseudo-elements - I haven't played with them, but it looks really klunky. And doing brackets is pretty dicey.

But the CSS3 drop-shadow is much better than the one from XBorderFilter. The illusion that the image is floating above the background is much more convincing. On top of that, you can use them on a background texture, and shift them on mouse-hover. See http://earlyout.jalbum.net/css3demo (I slapped that together manually, but Matrix 7 has it built in, and more cleanly implemented).
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums