dcsimg
A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: How do people get clean bitmaps in flash?!?!?!?!

  1. #1
    Member
    Join Date
    Aug 2000
    Posts
    57
    I am going insane here!!!!
    almost every flash site I look at that has images in it, has no flash smoothing effect destroying the image!
    I have posted a few times and noone that replies seems to know what I am talking about!
    If you look here:
    http://www.jolt.cc/flashimages/
    You can see the effect that is happening. Flash is smoothing the bitmaps that I import into flash.
    I have changed the property on the bitmap to not allow smoothing, which fixes the problem within Flash, but after published it is still smoothed.
    This is at set pixel width/height movies and non-stretched images. yet when I zoom in on the image it is smoothed, and even zoomed to 100% it looks horrible.
    I have tried tracing the bitmap, Which DOES work, but it makes the movie VERY slow and choppy, especially when I have larger images.
    If you go to:
    http://www.nettmedia.com/site/index.html
    And zoom all the way in on the image, you will notice that it is perfectly clear.
    I have taken a screen shot and placed this image in a flash that I created here:
    http://www.jolt.cc/flashjunk/
    If you right click and zoom all the way in, it is all blurred!
    I have even included a source file and the image that I used for you to download and examine if you like.

    If anyone has ANY idea on why this is happening PLEASE PLEASE PLEASE tell me how it is done, or point me to a tutorial on how this is fixed.
    Thanks.

  2. #2
    Senior Member mg33's Avatar
    Join Date
    Jun 2000
    Location
    Chicago, IL
    Posts
    1,539
    I think I have an answer for you

    Two key words: Bitmap and Vector. I would think you know what these are.

    When you import a bitmap into flash, it remains in bitmap form. When you create graphics in flash, they are seen as vector form.

    When you publish the site and view it from your computer, or view it on the Internet, the bitmaps are still .bmp's and the vector graphics are still vector in Flash. This means that when you zoom in, the bitmaps will get ugly, but the flash created vector graphics will be fine.

    This is where a little thing in Flash steps in. Bitmap trace, which is in the Modify menu. Doing this converts the bitmap into a vector format, but not always with the desired results. Take a look at my site (link in footer) and look at the background image in the flash section. That is a good example of what cannot be bitmap traced no matter how hard I try, and what keeps the load time a little high. But I love that image, and I don't want to get rid of it

    There are also different settings for the bitmap trace function, make sure you write down the defaults, and then experiment with it.

    Now for a question to you? The link you have at the top, is that the bitmap you are trying to put into Flash?
    Two things: 1) That would be incredibly easy to run Bitmap trace on. 2)That would be incredably easy to create in flash, would take around 10 minutes.

    I say make it in flash, but don't forget about tracing bitmaps that are not too complicated, then if the look okay save them as a symbol, and I think you can throw away the original image. I think it will work like that, but I'm not sure, never done that before.

    Hope this helps out!

    mg33

  3. #3
    Senior Member mg33's Avatar
    Join Date
    Jun 2000
    Location
    Chicago, IL
    Posts
    1,539
    Okay man, I read your post again.

    Here is the problem you are having with viewing that netmedia site, and viewing an image from there on your flash page.

    First off, the image of the girl on their site gets choppy if you look at the edge around the hair. the main part looks okay though.

    To show the pic of the girl, I assume you did a print screen, cropped it down, saved as bitmap, imported to flash, published the page, put it online. Am I correct in assuming this? I am pretty sure that is what you did.

    Well, when it is on your site, the image is not vector anymore, it's bitmap. It's taken from a screen shot, vector format does not transfer over between file formats, especially when doing print screens.

    I'd be willing to bet that the image on the netmedia site is bitmap in the first place with no tracing function.

    Hope this helps as well, it's easy to overlook and not understand the vector vs. bitmap format.
    Basically, the ability to view an image in vector format-that you can zoom to 2000% and it is still crystal clear-
    is not something that carries over when saving as bitmaps or any image file type.
    Flash is a vector creation program for the web. Flash player allows you to view it over the web. Take it out of flash, turn it into something else, and goodbye vector viewing

    Take Care,

    mg33

  4. #4
    Member
    Join Date
    Aug 2000
    Posts
    57

    ok! You sound like you know what you are talking about!

    everyone else is giving me ideas to try to get "around" it..
    That is not a solution I am looking for.

    I know the difference between vector and bitmap.
    That is as big of a differenct from photoshop and illustrator.
    please bare in mind that I have been in graphic design for almost 5 years and I do know stuff.

    I am not expecting to zoom in and have fine lines when I zoom in (like vector graphics), but I want to see the pixels (blown up pixels).. if you go to:
    http://www.jolt.cc/flashjunk/

    And zoom all the way in, you can see the smoothing effect, however, if you right click and change the quality of the movie to "low" you will notice how pizelated it is, nice and smooth pixels compared to nasty fluffy looking pixels.

    And you are completely right on the method that I used as my example..

    But if you say that nettmedias images are bitmaps with no tracing function, why are theirs so crisp when you zoom in, but mine are so fuzzy?

    Another good example is http://www.webagent007.com

    If you notice his entire background is HUGE! very long.. I cannot even begin to imagine that he traced that entire thing, BUT his images look good. No smoothing. And his movie is playing at high quality.

    I am going insane trying to figure out WHY I get this "fuzz" effect on my images no matter what I try, but to other people they are publishing without this happening and are completely oblivious to my problem!

  5. #5
    Senior Member mg33's Avatar
    Join Date
    Jun 2000
    Location
    Chicago, IL
    Posts
    1,539
    Man, I don't know what to say, sorry you are having this problem. cool that you know your stuff too.
    Keep in mind that the detailed description I was giving was not in thinking that you don't know what you are talking about, rather that other people reading this post may not, and the descriptive information will help them learn something new

    Anyhow, that 007 site is very cool, I was quite impressed by 100% of it. That image is not traced, and you can see the pixelation of zooming only two times below:


    I hope we can figure this problem out, I feel bad that you are getting frustrated with it.

    The best thing I can say relating to your first post, is if what you want is as simple as that image on the link you provide, why not make that in flash?

    Also, maybe explain that page a little better: What zoom percent is the top image?
    The bottom image that you say you are viewing in flash, is that it zoomed in, or at normal, 100% viewing? If that is what it looks like at 100%, that's too bad, and I cant imagine what the problem may be.

    Frustrating thing is that it could be one of a million things! Computer stuff has a way of doing that, the solution is as simple as changing one setting, but we just don't know what that one setting is.

    mg33

  6. #6
    Member
    Join Date
    Aug 2000
    Posts
    57

    yeah.. think we are getting somewhere.

    As you can see you can see the pixelation when you only zoom a little. One interesting thing I noticed however, if you keep zooming in on the 007 site, the bg image actually dissapears and you see a blue BG. now THAT is weird to me. I actually emailed the guy and asked him how he did it, but no reply.

    The http://www.jolt.cc/flashimages/ link

    The image on the top is actually a screen shot taken from photoshop before I put it in flash, to display what it "should" look like when zoomed all the way in (in flash)
    The bottom image is what it "does" look like when zoomed all the way in.

    one annoying thing I have noticed is that when I import an image into flash, view the properties from the library and uncheck "Allow Smoothing" it actually removes this effect "In" flash however, once I have actually published it, the smoothing still takes place. I have tried 100% jpeg quality, gif and png settings anything I could, but nothing works. no matter how I publish it or import the images, they are ALWAYS blurred when I publish.

    I have had this problem in flash 3, 4 and 5 on windows 95, 98 and NT 4.0 Workstation. No matter what I get the same result. And it is driving me insane mainly because I know it has to be something SO damn simple, yet noone has an answer for me. It seems as though noone has ever encountered this problem and thus has no clue "why" I am!

    But.. As you can see on 007 when you only zoom in 2 times, you can see the pixelation. zoom in 2 times on http://www.jolt.cc/flashjunk/ and you see the blur. ARGH!

    some people have even suggested creating 2 layers one with the image, and one with tiled transparent squares (vector based) on top of that.. I am like "ARE YOU INSANE?!!" heh as I said, I am not looking for a way around my problem. I am looking for a clean cut answer..

    even a "hey stupid all you have to do is click this button!" would do just fine heh as long as it works..

    The idea here is I want to be able to create a concept similar to 007's scrolling background, without it looking like $hit. The only problem I am having is not matter what I do with my images in flash, they are ALWAYS blurry...

    *sigh*

    will I EVER figure this out?!!?!!?!?!

  7. #7
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127

    Take a look at my tests

    Hi Sintwar and all,
    I took a good long look at this problem, and the sites mentioned. My conclusion is probably the one you dont want to hear, I believe they have used trace bitmap. Nothing I did could get the results you are looking for, always the same fuzzy pixels you refer to when zoomed.

    I made a sreengrab from webagent.com and used trace bitmap in flash then published it and got exactly the look of those sites when zoomed.

    I have placed a page of my swf and several printscreens of zoomed sections at

    http://www.visi.com/~mgason/kid.html

    I hope people will take a look, sorry it is a fairly large page as I used high quality jpeg settings, I didnt want jpeg artifacting to confuse the issue.

    If I am wrong I would love to see someone show us, meanwhile sorry this is not what you want to hear Sintwar.

    Mark Gason
    gase@visi.com

  8. #8
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127

    maybe another way?

    Hi again,
    I have been looking at some other sites and podering your question some more. I had an idea which i just tested.
    I took the screen grab of the face from webagent007.com which I mentioned in my previous post (woops called it webagent.com there) I then scaled it up 500 percent in photoshop but in the "image size" dialog box I set the resample image method to nearest neighbour. This gives a more big pixels look.

    I then imported this big bitmap into flash, made it a symbol and dropped it on stage scaling it down to 10 percent. It looks fine and when you zoom in the image still looks good as I think flash has the full size symbol to refer to. It looks "pixellated" because thats how the real image is, you are only zooming it to its real size.
    The resultant swf file was about 40k which is less than half the trace bitmap one. It doesnt look quite as good but I suspect that is because i was working from the screen grab. It looks a lot more like you want than your example and a lot more like the webaget007 site. If you started from the original image it would probably look lots better. Also some sort of pixellating filter may work better than resizing. It was made with 50% jpeg quality set in flash.

    This brings up a question what is the maximum zoom that flash allows? is there one? You could make all images bigger by this percentage and scale them down in your movie. with some careful image quality management I think you could get the file smaller still.

    Will post the swf at
    http://www.visi.com/~mgason/kid2.html

    hope this is of interest, let me know if it helps
    mark gason
    gase@visi.com


  9. #9
    Member
    Join Date
    Aug 2000
    Posts
    57

    I FIGURED IT OUT!!!! WOOHOOO!!!!!!!!!!!!

    OK.. Tell me this is not MESSED UP!!

    Here I am pulling my hair out.. 200 replies telling me about ways to get around this dumb problem and I figured it out myself.

    What I did was:
    1: create a symbole (graphic)
    2: In in the symbol, import the image
    3: as soon as the image appears on the stage, hit CTRL+B to break the image
    4: open the library, right click on the bitmap <b>in the library</b> and un-check "allow smoothing" (I don't think this matters really)
    5: return to the main stage, and drag the symbol on the stage..
    6: publish.. wala! a perfectly beautiful pixelated bitmap with no FUZZ!

    One interesting discovery I made was that when you drag only the bitmap from the library onto the stage, into a symbol or anything, wether you break it or not, it still smooths.

    The ONLY image you can use is the ORIGINAL imported image, broken. Which is why you should import it INTO an existing symbol, so that you can make multiple instances of it if you need.

    OH MY GOD!! What a weight lifted off of my chest..


    only 3 words can express the emotional bliss I am in right now..

    I AM GOD.. lol

    Thanks for all the input guys.. I hope this lesson is spread out and put to some good use now..

  10. #10
    Senior Member
    Join Date
    Apr 2000
    Location
    Minneapolis
    Posts
    2,127

    well done

    Well done,
    after looking at it myself I can see how this was driving you mad. This seems a very important little piece of information that lots of people probably dont know. Hope it gets spread around.
    Again congratulatins on your perseverance.
    Mark

  11. #11
    Junior Member
    Join Date
    Sep 2000
    Posts
    14

    well done!!

    Wow!!

    Thank you! I have had this problem as well. I am so glad that you have found a solution. Now to test it...

  12. #12
    Junior Member
    Join Date
    Sep 2000
    Posts
    2
    Maybe that can help you.
    1- Import the bmp
    2- Insert the bmp in a layer (alpha 40%)
    3- Create in a new object graphic a vectorial grid (a lot of orizontal and vertical linees- note if the bgcolor is green the grid should be light-green)
    4- Insert in a new layer (over the layer containing the bmp) the grid (alpha 40%)
    try to publish...



  13. #13
    Member
    Join Date
    Aug 2000
    Posts
    57

    I already figured it out man..

    Thanks for trying, but that is just another way around the problem. heh
    Check my last post here, and you can see my instructions on what I figured out.
    People have suggested that I import the image and place a seperate layer on top making transparent tiled squares or lines. Not the answer I was looking at. Again look at my last post, and you will see that I figured it out.

  14. #14
    Senior Member
    Join Date
    Sep 2000
    Posts
    148
    just for curiosity's sake, what was your jpg compression set at in your publish settings? i've never had the problem you were describing and I'm wordering if it's because i keep that setting high.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center