Topic: optimizing images in flash

I am having difficulty. I am trying to put up some examples of my portfolio using snagit. When I capture one page of my site and bring it into photoshop, change resolution to 72, resize it to w=280px h=225px, save as .jpg and bring it into Flash- it looks all pixelated- quality is soooooo poor.

What am I doing incorrectly? There has got to be a way- I am definitely missing something!

Thanks.
CRO8

First of all, try saving the image in png format and importing that into Flash. Flash will convert to jpeg, so it gets mangled twice if the original is jeg to begin with.

Then check out the quality settings in your Publish settings. It's probably set to a fairly low quality to make the file size small. You might tinker with that. Also, try double clicking the png image in the library - there's the option of setting some quality settings there, including the option to not compress the image at all. One of these suggestions should help.

you might have also a look at this...that won't help you much, but its related to the topic.
oh and there has also been a discussion about a very similar topic in my forum,

yah PNG24s are the gee-oh where ever possible.

this sounds weerd and i have no idea why it works , but does make images (in most formats) look and behave better.

with your image on stage (and at 0,0) click the image to select it.
press ctrl-t (to bring up the transform window).
enter 99.99% in either input of the transform window and press enter.

the dimensions of the image might (might not) change slightly but when you next select it, its transform still equals 100%. reposition the image to 0,0 if it moved during transform.

thats it. =D

if you're loading JPGs on the fly, _xscale = _yscale = 99.99; will have the same effect.

also check that images are seated bang on a pixel (like 10,10 not 10.123, 9.456) this can make a difference. with publishing settings they reckon 'JPG quality 'should be in the high 90's but less than 100.

hth, g'luck,

Weadz

[This message has been edited by Weadah (edited 09-02-2003).]

Thanks all. I will re-post with my progress.

I imported as a .png and altered the publishing settings to 100%. I also tried Wead's advice- to no avail. I read the articles- sure that relates to my situation- and supports .png format! Still no progress. I posted the png in question. I am making it pretty small h=280px x w=whatever it come out to be. Looks all pixelated. Listen to this: I imported teh png at its original size, something like 500px x 400px. I import that and re-scale it to w=280px. Looks pretty damn good. But this cannot be the only way- because its still a 500x400 size image simply resized! My coworker said I am screwed because I am starting with a 72 dpi image.

ping image

[This message has been edited by CRO8 (edited 09-03-2003).]

.fla n such > http://mmmhmmm.com/rubbish-bin/pleasent.zip

looks about the same i think. you've capped the mouse cursor too btw =D
ya should be able to update the image ok from here tho.

added these lines also, wondered if scaling might be the issue.....

Stage.align = "LT";
Stage.scaleMode = "noScale";
_quality = "BEST";

Weadz

Thanks Weadah. Let me play with it for a bit and see what happens- thanks!

quote:

---

My coworker said I am screwed because I am starting with a 72 dpi image.

---

No disrespect, but your coworker is a nitwit. I'd find another coworker for advise.

*agrees with steve*

you might also resize your image before bringing it into flash, just a thought. after screen-capping the image change your image resolution to 72dpi then set your dimensions to what you need, making sure you don't exceed the dimensions of your original image. the only thing that really matters is your pixel dimensions, the dpi setting is only referring to how photoshop interprets the image's size for printing purposes.

chris


KAIROSinteractive

1. I tried to use the settings within snagit: Prior to capturing the image- I set my res to 300 and size to width=280px. Imported into Flash and boom- no difference. I think its the Flash settings, which I changed to 100% jpg quality. The key is resizing it as explained on the snagit support page. It says there is image quality degradation when minimizing size.

Wead- I have version 4- I think that is why I could not open your zip file.

. . . hour later . . . I recreated a small portion of my page in photoshop and STILL it apears pixelated in Flash. I am convined that my settings are what effecting the fuzzy image.


Thanks.
CRO8


[This message has been edited by CRO8 (edited 09-05-2003).]

CRO8: can you post anything to look at? I can't visualize what you mean by "pixelated".

And yeah - most screen captures that involve text will look lousy if downsampled - in Photoshop, sceen cap software or anything else. I've tried reducing the size of dialog boxes and palettes for tutorials and they look wretched most of the time. And capturing a 72 dpi screen image at 300 dpi to be reproduced at 72 dpi on a screen doesn't make a whole lotta sense to me.

I will post the sample later tonight.

I am at work now and viewing on a Mac and it doesn?t look so bad. Like I said I brought it into PS and re-wrote some of the characters. Choosing to view only a small sample of the page makes it lots less pixilated- but I wish I could show the whole page. I think I am going to re-create the small portion in Flash- vector drawing will guarantee that is looks smooth. Oh yeah I only have Illustrator at work and they do not like it when you spend time on outside work!

CRO8



[This message has been edited by CRO8 (edited 09-05-2003).]

pixelated in flash

I have decided I am going to re-create in flash small portions (ie corners) of each site I have done- create in the same program I am trying to import into! No more pixels! So it will view perfect!

Done. Moving on . . .

[This message has been edited by CRO8 (edited 09-06-2003).]

ok, from what i can tell the problem doesn't lie in flash, you're simply taking a low-res image and trying to blow it up farther than its detail allows. no matter how high-res you capture it at those pixels only exist at 72dpi as far as their detail and are going to pixelate as they get bigger.

chris


KAIROSinteractive

OK. Let me see if I follow: Even though I set my snagit resolution to 300px prior to capturing, I captured a 72 dpi image (website) so I lost pixels as it went to 300 resolution- its still 72, but blown up to 300. Is that it?

So if I capture a 72 dpi image, with my res set to 72 dpi- I should come away with good looking image?

well, think of it like any image you've got in photoshop: there's only a certain number of pixels. when you screen cap something you're taking it in a bitmapped form (as opposed to vector) so its not going to scale, as you scale it up the pixels are going to get bigger.

as far as dpi, let's say that your image is 3" x 3" on screen, making it 226 pixels x 226 pixels (72dpi on-screen). if you capture it at 300dpi you'll have an image that's 900 x 900, but you've still only got a source that's 226 x 226. there's more pixels, but its still got the same amount of detail as your source. make sense?

chris


KAIROSinteractive

ahhh. yes, yes, yes. Alrighty- thanks.

I found a solution! At least this is what has worked for me in the past....

JPEG with a width of 400 pixels and a height of 200 that has some detail which Flash is seriously messing up:
First I zero the x and y (217 instead of 216.7). Then I set the width to 401.0 -> amazingly, it looks great!

Screen captures of Outlook at 1024 x 768 - I needed it smaller because the Flash movie was only 800 pixels wide but I only had 1024 screenshots to work with. When I had Flash shrink the image to 800 it looked like trash. So I opened Abode and shrank to 800 it then saved as gif. In flash, it looks better and is now at least legible even though some detail is still lost. (also the file size doubled, but it was going to a CD anyways)

I hope someone out there can use these ideas too - they have definately saved me some headache.

Thanks dege and welcome to the asylum. see the faq

Actually, when trying to position bitmap images in flash, I've found it's better to round off the x/y to the nearest whole and to resize the size of the images by -0.1 (so a 200 wide image becomes 199.9). This is because the image smoothing (that you can't turn off, even if you uncheck the "allow smoothing" option for the image source in the library) in flash seems to smudge the images to the left and right by 1 extra pixel than it's current width. Resizing the image by +0.1 will make it look better (and avoid the 1 pixel border clipping issue that can also happen as it forces the boundry of the image to be larger), but the image will actually display 1.0 pixel bigger to the left and right, which can be a ripe pain if you're after pixel perfect alignments using actionscript to dynamically position elements.

The -0.1 trick seems to work in most cases (at least, it hasn't failed me yet), it might even fix the alpha blending warp issue but I've not tested it with that yet. This keeps the image displayed at the exact same size so positioning with actionscript won't cause 1px overlaps as it can when you use +0.1

NB: I was hoping that the flash 7 player would fix all of these annoying habbits, but it didnt seems to, at least, not whilst playing flash 6 swf files. But I'm hoping they didn't impliment any backwards compatability bug fixes in this area due to all the wacky hacks people use to subvert the problem. I'm hoping that swf 7 files viewed through the flash 7 player won't have to deal with this issue.

ps. Always check your image alignments in the web based flash view ( like in a browser) as opposed to the in flash "test movie" player, as this player is completly hopeless when it comes to dealing with bitmaps, so chances are any alignment issues you see here won't actualyl appear when viewed through the flash browser plugin.



[This message has been edited by Dracusis (edited 09-21-2003).]