Button Image... formate type?

[bebeard]

good day all,

i'm trying to formate an image to use for a small round button for a navigation menu...

I have looked through the help file, but cannot find any suggested formats for the image? I have used photoshop to make a "small" 1.25" x 1.25" image, but when I import it into my file as a button image, it "overtakes" the button?

Any ideas?

Hope this is clear..

Brook

[Bob Hartzell]

I don't know what you mean by overtakes. 1.25 x 1.25 inches is fairly large. If KoolMoves imports it, the format is OK.

[bebeard]

1.25 x 1.25 is big? What size should it be... and what I mean by overtakes the pages is that the image that I import is fills my "working area". My image is a .jpg, does it need to be another format? What size should my image be? Any suggestions?

Thanks...

[blanius]

Are you talking about a transparent part of the image shows white or something? Jpeg doesn't support transparency try using a PNG

[thesween]

I think I know what you mean.. keep reducing the size of the image in photoshop or something, then check it out by importing it. I think thats all you can do. doesnt matter what format the pic is, the size is what counts. You can reduce its size in kool moves by selecting the image and click - transforms - scale. You might get a clearer image if you have it as .bmp but dont quote me on that

[pherbrick]

Also check your image resolution setting in Photoshop; it should be 72 dpi for web/PC applications (someone correct me if I'm wrong ).

[bebeard]

Hello all,

Thanks for the post, i'm going to try reducing the dpi and see what that does. I will post a response..

Brook

[jimventola]

When I tried to import a bitmap as background in a rectangle object, I quickly learned that it could see only a portion of the picture. KM gives us options to resize the pic or to pan it, but this is a trial and error method and tedious.

For matchng the pic and the target KM shape exactly as desired, is there :

a formula to follow? (I gather Use 72 dp1 is a part of the procedure to follow?)

A utility program to match them?

Or could an actionscript wizard make an interactive movie for this purpose, with a nice GUI, please?

[wozbk]

You may or may not have Fireworks - it makes some of the best web graphics easily - if you have it - use it.

You will want to use pixels/px as your unit of measurement (not inches).

Both Photoshop and Fireworks have a "Save for Web" (Photoshop) or "Export Wizard" then choose the Web option (Fireworks). This will help you keep your image file size down and get the DPI right.

EDIT:
Per Doc's info in a later post 200 DPI will be nearly lossless (vs. typical web graphics which are at 72-80 DPI). Richer is better if you can get away with the increased file size overhead.

--------------------

As far as sizing, start with a reasonable size (say 30x30 pixels) or something like that. I have historically used transparent GIF's not PNG's (poor IE support with PNG's in HTML got me in the habit) and I just apply a matte color around the image edge that matches the color of my Koolmoves background (or a close color that is in the gradient background - if using a gradient in KM).

Use the whole image as your button instead of using it as a background.

I will add an example in a little bit.

[blanius]

Best practice is to use KM to draw it so it's vector and will yield smallest file. For everthing else vector based I use RealDraw from mediachance . Great program and very inexpensive and great support.

[wozbk]

Best practice is to use KM to draw it so it's vector and will yield smallest file. For everthing else vector based I use RealDraw from mediachance . Great program and very inexpensive and great support.

Indeed - since the poster was asking specifically about trouble she was having importing rasters my suggestion was in keeping with that. Vectors are of course more desirable as they are smoother, scalable and smaller for the most part - however there are raster based effects in Photoshop that cannot be created with vectors.

I have used a number of MediaChance tools and liked them I didn't know thay made a program to produce vector images - I have been spoiled using Illustrator but I am open.

[wozbk]

Brook, here is an example with a button made in Fireworks (could have been made in Photoshop just as easily) placed in a KoolMoves movie and button functionality added to the image.

I totally agree with Brett that using KoolMoves native drawing tools or importing vector based artwork is the best way to go - that being said if you need to use some special filter or technique only available to you in Photoshop just be sure to:

1. Either match the background (your KoolMoves background color) of whatever you will be placing your image/button on or make the image background transparent (usually Alpha Transparency - with a "matte" that matches the background color you need) and export it as a .gif (you can use a .png also - which is preferable - as long as you add a little padding as I describe below).
2. Be sure to add at least 6 pixels "padding" around the image as for some reason (EDIT - per Doc's later post: a small bug from Flash that affects KoolMoves) Koolmoves cuts the edges off a bit, which if you have your image cropped tightly enough will make it look fugly. So if your button is 20x20, make it 26x26 (the Canvas size) while keeping your circle the same size and in the center - that way if KoolMoves trims the edges a bit your button will still look right.

Hope that helps clear things up a bit.

[docree]

Well, well, well... What do we have here?
A 1.2" x 1.2" image is 1,024 x 1,024 pixels...
Whereas, a typical Kool Moves / Flash is around 600 px wide by 400 px tall...
Yes, your image is big... Almost two or three times larger than your KM project.

Here is where things get tricky:
Flash [vector] uses fips not pixels... [Roughly 4 to 6 squared for every pixel.]
Sure, we talk pixels when we edit and what is displayed...
But Flash rounds to the nearest fip. That usualy means around a pixel or two less...
Incidently that's why rastor images are like that in Flash.
[It's a flash "bug", not a KoolMoves bug.
Resizing the image shape is one of the best work-arounds for now.]

Also, KM / Flash does not use the dpi info. That's a printer setting...
However, if you set a low dpi it will look "bad" online.
72 is ok 100 is better 200 is almost loss-less but hefty file size.
DocRee

[bebeard]

hello all...

Thanks for everyones suggestions, i'm going to work on this for a day or so to try to figure out the best way for me... I will post a response..

Brook

[wozbk]

Well, well, well... What do we have here?
A 1.2" x 1.2" image is 1,024 x 1,024 pixels...
Whereas, a typical Kool Moves / Flash is around 600 px wide by 400 px tall...
Yes, your image is big... Almost two or three times larger than your KM project.

Here is where things get tricky:
Flash [vector] uses fips not pixels... [Roughly 4 to 6 squared for every pixel.]
Sure, we talk pixels when we edit and what is displayed...
But Flash rounds to the nearest fip. That usualy means around a pixel or two less...
Incidently that's why rastor images are like that in Flash.
[It's a flash "bug", not a KoolMoves bug.
Resizing the image shape is one of the best work-arounds for now.]

Also, KM / Flash does not use the dpi info. That's a printer setting...
However, if you set a low dpi it will look "bad" online.
72 is ok 100 is better 200 is almost loss-less but hefty file size.
DocRee

Great, helpful info Doc - makes creating external "artwork" for Flash or KoolMoves a lot less of a guess.

Good to know why we see some of these "quirks".

Much obliged,
John Woz