A Flash Developer Resource Site

Page 1 of 5 12345 LastLast
Results 1 to 20 of 87

Thread: how to make crisp pixel fonts

Hybrid View

  1. #1
    Under the influence bvgroote's Avatar
    Join Date
    Nov 2000
    Location
    Perth, Australia
    Posts
    1,408

    how to make crisp pixel fonts

    This is for anyone that wants to know how to use crisp pixel fonts. Firstly you need some, I suggest Fonts For Flash Click here. They have a free trial for some really nice fonts (namely Atlantis and Harmony IMO).

    Ok, you have installed your font (I hope) and you have opened up flash. Now create a textfield and start typing with your selected pixel font, when you have all the text you need, change the properties of the text so that your text is "Dynamic" and "Multiline" and make sure that the size of your text is in multiples of 8 (8,16,24 etc):


    Ok next we are gonna make sure that the top left corner of the text is on a whole number, to make sure this is right just change any decimal at the end of the y and x to 0, so for example, the left picture has been changed to the right:


    OK, we are almost done, now the thing to never forget is to embed the characters, to do this click on the "Character" box and choose "All characters" (your text should still be selected):

    By the way, it's up to you if you want to leave it selectable.
    [update] nice some stuff:

    -if your textbox is contained by a movieclip. The movieclip has to be position on integeres (so instead of 0.23 put 0)

    -if you use pìxel fonts in dynamic textfield, and the text formated as html, usually the <b> tag won't work.

    -u usually think pixel fonts are two small. Or sometimes you'll need a font you know isn't available as pixel font. This software is quite handy, not free though: http://www.kgroup.ru/ converts normal fonts to pixel fonts.

    -Warning: not ALL pixel fonts must be set to 8 or multiples. There are some pixel fonts that should be set to 10 or some other value for optimal viewing. Those are rare, but you still have to know that.

    Any comments or suggestions welcome.
    Last edited by bvgroote; 08-17-2003 at 01:55 AM.

  2. #2
    poet and narcisist argonauta's Avatar
    Join Date
    Nov 2001
    Location
    Under the bed
    Posts
    2,080
    nice some stuff:

    -if your textbox is contained by a movieclip. The movieclip has to be position on integeres (so instead of 0.23 put 0)

    -if you use pìxel fonts in dynamic textfield, and the text formated as html, usually the <b> tag won't work.

    -u usually think pixel fonts are two small. Or sometimes you'll need a font you know isn't available as pixel font. This software is quite handy, not free though: http://www.kgroup.ru/ converts normal fonts to pixel fonts.

    -Warning: not ALL pixel fonts must be set to 8 or multiples. There are some pixel fonts that should be set to 10 or some other value for optimal viewing. Those are rare, but you still have to know that.
    my blog: blog.innocuo
    Sponsored by your mom.

  3. #3
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    Bvgroote mentioned that you must embed the charaters. Please note that it is very important because if the viewer viewing your site does not have the pixel font installed in his/her machine it will display the "times new roman" which you would not want.

  4. #4
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    Also Remember do not you can only align the text left and right and DO NOT ALIGN IT IN THE MIDDLE!. Do not format pixel fonts (bold italic).

    When you download pixel fonts they will fill in. This will happen only in flash. See that you download flash enabled fonts.
    www.fontsforflash.com
    http://www.orgdot.com/aliasfonts/
    The above two sites contain fonts which do not fill in flash.


    Using pixel fonts in Photoshop
    Pixel fonts do not fill in Photoshop. But to get that crisp effect, you have to turn the anti aliasing off. That means it should Not be "strong" "smooth", you have 2 see that "None" is selected.

    As mentioned above the default size for pixel fonts is "8" but some fonts use size "10"

  5. #5

  6. #6
    Harmony & Justice Veniogenesis's Avatar
    Join Date
    Jul 2002
    Location
    Washington D.C.
    Posts
    4,434
    Wonderful information. I wonder if
    this thread will impress Frets enough
    to get a sticky.
    Flash Kit Moderator . Duke University
    Thomas Jefferson High School for Science and Technology

  7. #7
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    Ive seen frets a few times here but never seen squink.

  8. #8
    Senior Member
    Join Date
    Feb 2006
    Posts
    198
    Quote Originally Posted by mxkidz
    Ive seen frets a few times here but never seen squink.
    What does 'squink' mean, my dictionary doesn't know.

    Also,
    i heard font manager, fontfolio and adobe fontographer enable you to create fonts on your own, true?
    Well, the latter 2 don't work on my winXP, dunno why :-s

    Anyone knows another font creator software application?
    Can it be done with Photoshop/ ImageReady as well?, if so, should i just rename the psd extension to .ttf or so?, or how?

    Also, i heard there is crisp pixel fonts? what is that and what is the oposite/ alternative version? (http://www.flashkit.com/links/Fonts/Tools/ which is the most complex?)

    Also, i used to use .ttf files, but Flash 8 can handle all other font extensions as well?

    Actually what i think is not that awsome, is that i always summarize important programming language/ and adobe and macromedia suite information, but no one else does, actually, was searching for a font summarizing. D'yaHaveIt?
    Last edited by johnwhello; 07-16-2006 at 11:29 AM.
    http://www.michaellobry.com specialized by and for Web Media Designers. Herein shown should be summarizings about Web Media Design (eg. all CSS rules, SHTML tags, How to PHP, Macromedia/ Adobe app how-tos, etc. Please e-mail yours to webmaster@michaellobry.com so that everybody learns)

  9. #9
    Under the influence bvgroote's Avatar
    Join Date
    Nov 2000
    Location
    Perth, Australia
    Posts
    1,408
    do you like my trendy screenies?

    I just see quite a few posts asking how to do it so it seems logical

    it has alot of views - almost as the other stickies

  10. #10
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    true.

  11. #11
    Linux + BeOS = ? ? ? ? ? ? connect2nikhil's Avatar
    Join Date
    Aug 2003
    Location
    file://d:/desai/nikhil
    Posts
    391
    Crisper and Sharper fonts are fine. But how can we make the existing fonts looks crisper and sharper?
    To design is Human. To Flash is Divine.- Nikhil "NicK" Desai
    Anyone, who stops learning is old, whether at twenty or eighty.
    Anyone, who continues learning stays young.
    The greatest thing in life is to keep learning and stay young. - Henry Ford

  12. #12
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    Originally posted by connect2nikhil
    Crisper and Sharper fonts are fine. But how can we make the existing fonts looks crisper and sharper?
    Like verdana and arial?
    You can't unless you dont emmbe the font.

  13. #13
    Linux + BeOS = ? ? ? ? ? ? connect2nikhil's Avatar
    Join Date
    Aug 2003
    Location
    file://d:/desai/nikhil
    Posts
    391
    So, can I embed any font I wish?

    I have a font by name prakata.

    I wish to use it in my flash SWF, so I embed it and upload the SWF.

    Will my font be displayed?
    To design is Human. To Flash is Divine.- Nikhil "NicK" Desai
    Anyone, who stops learning is old, whether at twenty or eighty.
    Anyone, who continues learning stays young.
    The greatest thing in life is to keep learning and stay young. - Henry Ford

  14. #14
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    Many pcs wont have Prakata on their machines. So If you do not emmbed it it will Not display. Fonts like arial and verdana do not need to be emmbed coz its available on almost all PCs. If prakata is a pixel font it will need the pixel font rules to be applied to work.

    Most important thing to remember is that If you do not emmbed a font in a dynamic or Input text field machines without that font installed will display as Times new roman.

  15. #15
    Linux + BeOS = ? ? ? ? ? ? connect2nikhil's Avatar
    Join Date
    Aug 2003
    Location
    file://d:/desai/nikhil
    Posts
    391
    Hey!

    This is an indianized style of font man.

    How do i distinguish a font? means pixel font or a bitmap font.

    I think, the font displaying images like "Devil Inside" have images associated with each letter. These are called as Bitmap Fonts, am I right?

    Then how can I differentiate this font? How do I put it like, if this is Pixel or Bitmap?
    To design is Human. To Flash is Divine.- Nikhil "NicK" Desai
    Anyone, who stops learning is old, whether at twenty or eighty.
    Anyone, who continues learning stays young.
    The greatest thing in life is to keep learning and stay young. - Henry Ford

  16. #16
    ...? mxkidz's Avatar
    Join Date
    Jul 2003
    Location
    India
    Posts
    419
    It should be mentioned.
    Not all sites offer them here is a few

    http://www.dafont.com/en/bitmap.php (some fonts will fill in flash)
    http://www.orgdot.com/aliasfonts/
    http://www.fontsforflash.com

  17. #17
    Senior Member
    Join Date
    Feb 2006
    Posts
    198
    Quote Originally Posted by mxkidz
    It should be mentioned.
    Not all sites offer them here is a few

    http://www.dafont.com/en/bitmap.php (some fonts will fill in flash)
    http://www.orgdot.com/aliasfonts/
    http://www.fontsforflash.com
    Pardon me?, fill in Flash?, you mean that even after embedding the font in Flash, there is a possibility the font won't be displayed? If so, how come?
    http://www.michaellobry.com specialized by and for Web Media Designers. Herein shown should be summarizings about Web Media Design (eg. all CSS rules, SHTML tags, How to PHP, Macromedia/ Adobe app how-tos, etc. Please e-mail yours to webmaster@michaellobry.com so that everybody learns)

  18. #18
    Senior Member
    Join Date
    Feb 2006
    Posts
    198
    font creating:

    Use the tools:
    - fontfolio
    - fontcreator
    - font manager
    - fontgrapher
    - pixfont

    Font displaying tips:
    Is it minimal at the minimum size of the font? (mostly 8px or 10px)
    Did you stretch, skew, tween, align, scroll, etc the characters?
    By defaut the anchor point in Flash 8 should always be upper left.
    When you exported the swf was the object embed an exact fit?
    Set character size to an integer number.
    Use pixels instead of cm.
    Use anti-aliasing text, thus do not use crisp, sharpening and bold when the character is bigger than 24 pixels. The reason to use pixel fonts is it uses aliasing (using crisp)
    Publishing from Flash 8 to MX might solve the font to be displayed or set to 'Low quality'.
    Another way to prevent fill ins is to remove overlaps. This is a bug in flash when it detects overlaps it fills the counters of that object.
    Aliasing are effects produced when visual information is presented at a lower than optimal resolution.

    Font types:
    - vector font
    - bitmap font (aka pixel fonts): remain crisp at low resolution
    = true type font
    = open type font
    - Super Pixel Fonts are high definition pixel fonts which combine the crispness and clarity of pixel fonts with the smoothness of regular fonts. The results give you the best of both worlds, optimized for screen resolution. With these use of these fonts, your text can now look almost as clear on screen as it is on printed text.





    Flash font sites:
    - http://www.flashloaded.com/
    -




    Source:
    - http://www.wpdfd.com/wpdtypo3.htm
    everything 'bout aliasing characters
    Last edited by johnwhello; 07-16-2006 at 03:19 PM.
    http://www.michaellobry.com specialized by and for Web Media Designers. Herein shown should be summarizings about Web Media Design (eg. all CSS rules, SHTML tags, How to PHP, Macromedia/ Adobe app how-tos, etc. Please e-mail yours to webmaster@michaellobry.com so that everybody learns)

  19. #19
    Senior Member
    Join Date
    Feb 2006
    Posts
    198
    i am doing font Creator 5 full version: http://www.high-logic.com/fcp.html

    It seems i can create a font by adding an image :-s.
    Creating straight lines from points for creating a character, similar to drawing a font using Macromedia fontoGrapher would be done by the point tool in the 'standard' bar/ panel. How to create curved lines from point to point?

    Also, i want vector characters. Is the right method then to draw a 10 px character using the path pen tool (and other path vector tools) in Illustrator, then export to .png format 8-bits, highest quality, 300 dpi?
    Cuz am running scared the .ttf file gets humongous, since each character would exist of one .png file with high quality. 24x2 alpha characters + like 30 interpunction characters.

    Please help, i want to create a font with curved lines but dunno how to.
    (this is the help panel: http://www.high-logic.com/fontcreator/manual/index.html and it doesn't tell me how to draw curved lines, on that site go to: editing fonts, editing glyphs. They're talking about points)
    Last edited by johnwhello; 07-16-2006 at 03:22 PM.
    http://www.michaellobry.com specialized by and for Web Media Designers. Herein shown should be summarizings about Web Media Design (eg. all CSS rules, SHTML tags, How to PHP, Macromedia/ Adobe app how-tos, etc. Please e-mail yours to webmaster@michaellobry.com so that everybody learns)

  20. #20
    Senior Member
    Join Date
    Mar 2003
    Posts
    316
    actually since I switched to flash 8 I haven't had problems .. fonts work well ... they take up a lot of space but still ... no blur problems .. nice and crisp pixel fonts ... try it ...

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