[RESOLVED] Photo Optimization, I'm confused about something...

[sandyrivers]

Hey gang,

I was helping a friend out by creating a transition effect for a website he is building and I came across something very curious while I was doing it. When the user navigates to a new page on his site, he wanted the current page to burn away, revealing the new page underneath (think "Bonanza"). I achieved this effect by creating a 27 frame by frame mask, and then added 27 png files on the layer on top of it, to give the edges that burnt look. The effect came out looking really spiffy and we are both very pleased with it.

Now to my question. Originally I published using the over all JPEG quality at 80, and the swf file was 1.3 meg. I almost pooped myself at the file size, calmed down, and then went in and changed the quality settings on each individual png to 50% (by right-clicking on the library, choosing 'Properties', and then adjusting the compression to Photo(JPEG)). Since each png is only visible for one frame, I'm not looking for super high quality. I republished thinking that would do the trick, and it is still publishing at 1.3meg.

What gives? Why didn't my file size change when I compressed all the pngs?

I am grateful for any insight.

-Sandy

[RUSHVision]

I'm actually surprised it turned out that small....which is still enormous for what it is. The first thing I would do is to consider using fewer frames, perhaps cutting it as much as by half. That's a tough one, though. You're using an awful lot of large images, and transparent .png's don't tend to give you the smallest file sizes to begin with.

Other than that, have you tried reducing the overall JPEG quality to less than 80?

[sandyrivers]

Hey Rush,

Thanks for the reply. I've considered cutting a few frames here and there and seeing what it'll look like. He wants it to be as realistic as possible, so I don't think I'm gonna be able to cut it by half... maybe by a quarter... I'll have to play with it.

The thing that I don't understand is why didn't the file size change? Even if it was still huge, shouldn't it have changed at least some when I optimized? The two files are exactly the same size...

As to changing the overall JPEG quality, he's got a lot of other photos going on, so no dice. We both decided that 80 was the smallest we could go.

Thanks again for the reply!

-Sandy

[RUSHVision]

How big are the images?

What version of Flash are you using?

Are you using PNG-8 or PNG-24?

Also, did you uncheck 'Use document default quality' in the Publish Settings?

[sandyrivers]

Hey Rush,

Thanks again for helping me on this...

I cut 9 frames out and reduced the file size by 221kb.

How big are the images?

The 18 pngs range in size from 14.9kb original (2.6kb compressed) to 2397.4kb original (44.1kb compressed). Most are just over 2mb original.

What version of Flash are you using?

I'm trading off between MX04 and 8 right now. I have 8 at home, and MX04 at work (slow IT procument department). The effect was built in MX04.

Are you using PNG-8 or PNG-24?

PNG-24

-Sandy

[sandyrivers]

To answer your edit... I did uncheck it on the individual pngs... didn't see the option in the Publish Settings....

-Sandy

[RUSHVision]

Sorry, that check box is in the dialogue that pops up when you double-click the image in the Library. I realized after I asked the question though, that you have to uncheck it to access the quality percentage so I figured you had done it.

When I was asking about the size I was actually curious about the dimensions of the image, sorry I wasn't more clear about that. It's mostly a matter of curiosity, however. For anything bigger than say, 320x240 you're going to quickly run into a situation of diminishing returns in respect to cool factor vs. file size. If I understand you correctly you have now been able to get it down to about 1mb as opposed to 1.3mb, but I have to say that's a pretty hefty download for what amounts to a nifty transitory effect. If the rest of the site is as heavy with the graphics, I hate to say it, but you might want to consider other options.

I don't know exactly what this thing looks like, but is this something you can recreate in Flash without using the PNG's? If you wanted to post a screenshot of the effect someone might be able to suggest a better way. No guarantees, though.

[sandyrivers]

Hey Rush,

Sorry I misunderstood. I don't have the file in front of me, but the larger of the files are around 600x800.

The current published size is 1.1mb. The pages are currently loaded from the library using attachMovie because the designer was more comfortable with creating it that way, but I'm going to get him to start using loadMovie and keep the files separate. That should drop another 200 to 250k.

I completely understand your thoughts, but I don't think this effect can be done in just Flash. Since it's not my site and it's not finished, I'm hesitant to post links out of respect for the designer. I've mentioned to him that I brought this question to the boards, though, so I'm sure he'd be ok with my sharing the link with someone I had a rapport with. Rush, do you mind if I PM it to you? I realize that you may not have the solution, but it would be worth it to me just to have you see exactly what it looks like and then go from there.

If that is ok with you , let me know and I'll shoot you the link.

Honestly, my original intent was only to figure out why did my file size not change after optimization, regardless of what the original size was. I still don't understand why the published size did not change at all after optimization. Makes me think I'm doing something wrong.

Thanks for all your insight, Rush! I really appreciate all that you do around here.

-Sandy

[RUSHVision]

Sure, you can PM it to me. Maybe send along one of your .PNG's as well. I don't know if I can do anything with it, but it would be nice to know exactly what you are dealing with.

You're right though, it should reduce the file size of the published .SWF if you reduce the quality level in the Library image properties dialogue. I'm not sure why it wouldn't be happening for you...oh wait...could it be because you are using attachmovie instead of having them inside the main movie? I admit to not being certain, but could it be that the optimization doesn't touch attached movies?

[sandyrivers]

Thanks Rush,

I'll PM the link post haste!

As for the pngs, they are at work, so I'll have to send one along tomorrow.

I get what you are saying about attachMovie, but the pngs are not dynamically called from the library... they are dragged onto the stage proper.

Anyway, link ahoy!

-Sandy

[Black_phoenix]

can you pm a link to me as well please

bp

[sandyrivers]

BP,

Thanks for giving it a gander. You have a PM.

-Sandy

[Jujumon]

and dont forget to post the solution here as well guys. I also couldnt figure out why. thanks

-juju

[RUSHVision]

Just for the record, my advice was ultimately to optimize it as much as possible, but to pretty much leave it as it is. The look of the effect and purpose of the site justifies the file size. As for why it's not compressing like it should, that has not yet been resolved as far as I know.

[Black_phoenix]

I cant work out a way of making it smaller, I was thinking that maybe you could have smaller graphics imported, or use a movieclip over and over again, but I dont think that would really work. Looks good, and as RUSH says it does justify the size.

[RUSHVision]

That's actually not a bad idea, BP. Couldn't you save those PNG's at like half the size then turn them into a symbol and double it once in Flash? I certainly wouldn't recommend that with most images, but for something like this it might work.

This might have some promise. I would do some tests saving it at even a quarter of the original size and see how it turns out. It could end up not being noticeably different since it's going by so fast and it should result in a significant decrease in the file size.

[Jujumon]

opps, i got info on F5 instead, sorry

trying to search for other options right now..
-juju

[Jujumon]

read the section "controlling bitmap optimization in Flash" (pdf) Those methods may have already been mentioned. But apart from this i dont really have a clue either..

-juju

[sandyrivers]

Wow! The Braintrust works ceaselessly into the night (or, you know, mid-morning for BP) while the unwitting amateur designer sleeps! I was all ready to post up that we couldn't figure it out and I'd just have to live with it. Thanks for the additional effort!

Ok, so I'm on allergy medicine out the yin yang.... you are saying to reduce the dimensions of all the pngs by a quarter and then duplicate the sequence using a mc, right? That makes sense if that is what your are saying... the only issue I need to figure out is how to get the end of the sequence to look right, as it wouldn't so much look like it's being burned away as by flame, but more burned/melted through as by acid (like drops splattering on the page)... does that make sense? I'll play with it this weekend and see what I can come up with. Things have progessed the friend I'm doing this for, and we've decided to go in together and do the whole site. The deadline is in 3 weeks and we have a lot to do, so if I can't come up with a solution that looks as good as what I have now I may have to wait for wave 2 of the rollout.

Thanks again for going the extra mile, gang!

-Sandy

[RUSHVision]

I don't see why it would look any different. No, I'm not talking about duplicating anything or putting anything into a movie clip. The only difference would be that all your PNG's for the burn sequence would start out being exported from Photoshop (I assume that's what you are using to make them) at 50% of their original size.

I did a quick test with one of your PNG's and at 25% the file size was only about 16k, but there was some pretty obvious degredation of the image. At 50% however, the file size was coming up at about 43k, which is just a little over half of what it was at full size.

I don't know how you've got it set up in Flash...in a movie clip or on the main timeline, or what...but you would want to import those new images and turn each of them into a symbol. Then you would scale each one up to 200% and replace each of the old larger images. So everything would be exactly as you have it now, the images would just start out smaller and then be scaled back up to their original size once they have been converted to a symbol.

Now that I think about it though, converting them to a symbol prior to scaling them is mostly a habit of mine from the old days. I don't know if there is any actual benefit to doing so. You might be able to get away with scaling just the raw images.