how to make crisp pixel fonts

[Frets]

Can't say about photoshop

One more curiosity.

When you exported the swf
was the object embed an exact fit?

[knave_t]

erm, not really sure what you mean, but it sure looks okay. Everything is supposed to be what they are except for the fonts.

[mxkidz]

Is the font inside a Movie Clip or button?
If so See that the button and Movie Clips is set to a Rounded Number (4.2 should be 4.0)

In Photoshop see that you set your resolution to 72 pixels also see that anti alias is off.

[baseline]

Hi,

I have a scrolling movie clip that is using pixel fonts and it all works perfectly. However the problem is that when the user scrolls the thing, there is no guarantee that the movie will stop on an exact pixel and sometimes this renders the text blurry as if it wasn't rounded to a .0

This may be an actionscript question but, is there a way of make my dragable scroller jump pixel by pixel rather than completely smoothly?

Its a niggling little problem but one that would make a big difference to the final swf.

Cheers

Steven

[mxkidz]

Use ultra scroller available at www.flashloaded.com Its not Free.

[Chopsticks]

The quick fix is to publish the movie at LOW Quality. Alternatively......

In our previous attempts, the text appeared perfect for static text, but not for dynamic text boxes( in particular with embedded pixel fonts ).

I didn't know if we could solve the problem because my dynamic text field was burried deep within nested movieclips, and I wasn't sure whether local or global positioning of the text field needed to sit on exact pixel coordinates( whole numbers ), or if the local and global positioning of all nested movieclips needed to sit on exact pixel coords( also ).

Also, I had set the autoSize property of the text field to "center", which would probably result in the _x value of the text field becoming a floating-point number.

On top of this, I was scaling some of the holding movieclips, and I know blurred text and graphics can result from the use of tweens.

It would appear that the local positioning( or when you edit the text field 'through' the library ) of the text field needs to be exact pixels. A holding movieclip that is a direct parent of the text field, also needs it's local position placed on exact pixels. When trimming some of the coords at design time( I did this by just deleting the floating-point part of the _x and _y properties, in the 'Properties' panel ), I noticed that Flash automagically would sometimes add 0.3% to the horiztontal scale( even though I had the horizontal and verticle scale 'Constrained' ). I then removed the extra 0.3%.

Aswell as making these tweaks at design time in the development environment, it was also necessary to tweak the positioning using code that would be run at run-time ( as the User Interface was being built ).

After any point that I altered the text field, or a parent movieclip, I rounded it's position, e.g.:
mcMainMenu_Title.title.autoSize = "center";
mcMainMenu_Title.title._x = Math.round( mcMainMenu_Title.title._x );

NOTE: use of Math.round() may not work properly if you try to pass an experssion

I would be interested to know if others have come across this problem, and if they can use our solution to solve it.

Credit : kode.co.uk

[N_R_D]

If the movie is embedded in the html file does the pixel font still need to be embedded in the movie it self??

[Chopsticks]

Worked it out recently - PCs handle fonts differently to MACs - if you have a MAC available, just publish your movie on that and your pixel fonts will be crisp!!!

chops


p.s. If you're using dynamic text - yes the font needs to be embedded in the movie.

[N_R_D]

ok so only for dynamic.............

if it say is in a scrolling text box......does it scroll pixel by pixel or an estimated smooth..

[insibit]

Hi bvGroote! I need to know how to make screenshots? I'm using WinXP, where's my PrtScr go?

[mxkidz]

hit printscreen then go to paint or photoshop and press ctrl+v.

[insibit]

Thank You MXKIDZ!

[muldoon_smooth]

Something to remember when using dynamic text boxes is that if you use them to label a button they 'block' the button function inside the area they take up. Static text boxes work just as well visually and you won't have this problem.
Bit late to the party but thought this worth mentioning.

[roger_onslow]

that is only the case when the dynamic text is selectable ... if you make it so it is NOT selectable, then the mouse should not be intercepted by the text.

[Trippin13]

Hi,

This post has been very useful but I still have some issues and this is due to the fact that most clips that have content and use fonts are external movie files which get loaded. You have to make sure your empty movie clip loading those external swf is also aligned to .0 .0 for X, Y positions ... I am still having some difficulties which means probably each movie clip outside my font (_parent down) needs to be aligned to x = x.0 y = y.0 ... what a pain ... I still get some slight blurs in my about when viewed in main.swf while about.swf on its on looks just fine and crisp.

Another issue is how would you solve this problem for INPUT fields ????

Cheers

[ViRGo_RK]

*deserves to be sticky*

[Ridick]

Riddle me this...

I create a button in photoshop with a pixel font for the text (with anti-aliasing off of course). I then save it as a jpg and import into flash.

On the stage the button looks perfect! But when I export the movie its like the button squashes itself by a pixel or 2 and the text cuts off at the top.

Anyone experience this?

[mxkidz]

could you post a screen shot of your problem?

[Chopsticks]

Ridick, I can only comment for Flash MX, but it goes something like this...

Flash doesn't handle bitmap graphics very well. If you want crisp, your best bet is to save the bitmap as a file type that perserves transparency (GIF, PNG), and create a 1 pixel border around your image before you save/export from Photoshop.

Next bit is tricky to explain - if you create a new symbol then import your bitmap into it, Flash normally aligns the image centrally, i.e. the hotspot/central spot of your imported image will be at coordinate 0,0 (note: this is the local coordinate for your symbol). What you really want, is to move the image so that it resides completely within the negative coordinates (I should really post an image here to demonstrate, but am rushed for time). If you imagine your X and Y axis creating a cross on the screen, the right half of the x-axis is positive and the bottom half of the y-axis is positive(because Flash's y-axis are upsidedown!?!?). To reiterate, your imported image needs to reside in the negative region, i.e. upper-left corner.

Hope I haven't confused the issue even more

Chops

[Frets]

In mc's center is always 0,0

Clarity has to do with making an image
or text anchor to an integer at the upper left. and not trying to rescale the object internally.
You should be able to reset your anchor point for upper left then adjust it to an integer.