Haxe Forum > Issues w textfields & embedded font

Vlatiha Aug 27 at 15:28

Hi,

I just made a little flash app with haxe, but not with NME to keep it small and simple. I want to display a text field with a embedded font and to play around with the alpha value (in fact I need that for a slightly bigger project).
So I selected a nice font called "AenigmaScrawl" (the same I want to use in my project) and made an example program. The problem is, that inside the browser only the bottom 15 or so pixel of the textfield are displayed correctly fading in and fading out. The upper part is not displayed at all. But if I put another window over the flash than the rest is displayed too. But it doensn't change its transparency. Only the bottom 15 pixel are fading.

This is my example: A made a fonts swf library with this command:

swfmill simple fonts.swfml fonts.swf

My fonts.swfml:

<?xml version="1.0" encoding="utf-8"?>
<movie version="9">
   <frame>
    <library>
       <font id="AenigmaScrawl" import="aescrawl.ttf" name="AenigmaScrawl"/>
    </library>
   </frame>
</movie>

With xsltproc I created a small class with looks this way:

class AenigmaScrawl extends Font
     { public function new() { super(); } }

My program looks like this:

import flash.text.TextField;
import flash.text.TextFormat;

class FontsTutorial {   
  private static var myText:TextField;

  static function main()
  {
    myText = new TextField();
    myText.x = 10;
    myText.y = 200;
    var format:TextFormat = new TextFormat();
    format.font = "AenigmaScrawl";
    format.bold = true;
    format.color = 0x808080;
    format.size = 72;
    myText.defaultTextFormat = format;
    myText.text = "Hello world.";
    myText.width = 640;
    myText.height = 200;
    myText.embedFonts = true;
    flash.Lib.current.addChild(myText);   
    flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) FontsTutorial.onEnterFrame());
  }

  private static var fadingUp:Bool = true;

    static function onEnterFrame()
    {
    if (fadingUp)
      {
        myText.alpha += 0.01;
        if (myText.alpha >= 1)
          {
            myText.alpha = 1;
            fadingUp = false;
          }
      }
    else
      {
        myText.alpha -= 0.01;
        if (myText.alpha <= 0)
          {
            myText.alpha = 0;
            fadingUp = true;
          }
      }
    }
}

and my compile.hxml looks this way:

-main FontsTutorial
-swf-version 9
-swf-header 320:240:10
-swf-lib fonts.swf
-swf fontstutorial.swf

I have absolutely no clue why only the bottom 15 pixels of the text fields are display correctly. Can anyone help me?

Thanks in advance
Vlatiha

jan Aug 27 at 21:23

 format.font = "AenigmaScrawl";

Better or more safe is:

var f = new AenigmaScrawl();
format.font = f.fontName;

Also:

 format.bold = true;

You need to embed the bold version of the font.

 have absolutely no clue why only the bottom 15 pixels of the text fields are display correctly.

myText.y = 200;

-swf-header 320:240:10

You make the swf 240px high and you put the text field at y=200. I would expect you to see only the top 40 pixels of the textfield. You cannot even see the bottom 15 px. :s

flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) FontsTutorial.onEnterFrame());

FontsTutorial.onEnterFrame() should be a reference to a function. You should not execute the function (unless it return another function there), so:

flash.Lib.current.addEventListener(flash.events.Event.ENTER_FRAME,function(_) FontsTutorial.onEnterFrame);

Or more properly (without all those statics and other stuff that might make it fail):

import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.Sprite;
import flash.events.Event;

class AenigmaScrawl extends Font 
{
    public function new() 
    { 
        super();
     }
}

class FontsTutorial extends Sprite
{   
    private var myText:TextField;
    private var fadingUp:Bool;

    public function new()
    {
        super();

        fadingUp = true;
        
        var f = new AenigmaScrawl();
        
        var format:TextFormat = new TextFormat();
        format.font = f.fontName;
        //format.bold = true;
        format.color = 0x808080;
        format.size = 72;
        
        myText = new TextField();
        myText.embedFonts = true;
        myText.defaultTextFormat = format;
        myText.text = "Hello world.";
        //myText.x = 10;
        //myText.y = 200;
        //myText.width = 640;
        //myText.height = 200;
        
        addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
    function onEnterFrame(event:Event):Void
    {
        if (fadingUp)
        {
            myText.alpha += 0.01;
            if (myText.alpha >= 1)
            {
                myText.alpha = 1;
                fadingUp = false;
            }
        }
        else
        {
            myText.alpha -= 0.01;
            if (myText.alpha <= 0)
            {
                myText.alpha = 0;
                fadingUp = true;
            }
        }
    }
    static function main()
    {
        flash.Lib.current.addChild(new FontsTutorial ());
    }
}

Jan

Vlatiha Aug 28 at 11:24

Hello Jan,

thanks for your quick reply. Thanks for the tip with the name of the font. That makes the assignment fool proof. But as far as the coordinates are concerned you're wrong. The position x/y is not the upper left point of the text-area, but the lower(!) left point. So if I specify y=200 in a box 240 pixels high, everything is okay.
By the way: You forgot to attach the textfield itself to anything, so you can't see anything in your example.
I edited your example, so that the textfield is attached to the currentMovie as well and yes, I had to specify a high y value and as well a width. If I don't specify a width wide enough to contain all the characters, the text is not drawn at all.
Okay, now where are we? I changed your example in the following way: 1) Attach the myText var to the currentMovie, 2) Specify a myText.y and 3) a myText.width.

Result? Same again: The lower 15 pixel rows are fading in and out, the upper rest is steady text. And yes: All visible.

Strange... Maybe I should test some other fonts too.

Many thanks so far
Vlatiha
Vlatiha Aug 30 at 11:56

Okay, now I've tried a lot of other fonts I found on my drive as well as some fonts I downloaded from the web.
The result is always the same: The lower 15 pixels of the TextField are fading in and out, but the upper rest is steady in its current alpha state.
I noticed, that when I force the browser to refresh the flash (by moving another window over the flash), the upper rest is refreshed also. And it gets the same alpha state, as the lower part of the TextField. Maybe its just a refresh problem? Is it possible to force a refresh by command?

Thanks
Vlatiha
Justin L Mills Aug 30 at 18:21

Do you have a project I can download and check? Cheers Justin
Vlatiha Aug 31 at 12:14

Sure,

here it is:

EmbeddedFonts.zip

Thanks
Vlatiha
jan Aug 31 at 16:25
Swfmill did not embed the font correctly and characters were partially placed outside the textfield area.
I tried embedding the font with hxswfml but it could not automatically handle the font name because of the first character in Ænigma.
I added a name attribute to hxswfml's xml syntax so you can set the font name yourself and avoid issues with that 'Æ' character:
```
<lib>
    <font file="aescrawl.ttf" class="Anything" name="AenigmaScrawl"/>
</lib>
```
After that I could compile your example and the text shows up correctly.

But as said previously:

You make the swf 240px high and you put the text field at y=200. I would expect you to see only the top 40 pixels of the textfield. You cannot even see the bottom 15 px. :s

So you have to change
```
-swf-header 320:240:10
//to
-swf-header 320:300:10
```
or change
```
myText.y = 200;
//to
myText.y = 100;
```
Vlatiha said:
But as far as the coordinates are concerned you're wrong. The position x/y is not the upper left point of the text-area, but the lower(!) left point.

I was not. ;) It is always the top left corner.

Vlatiha said:
By the way: You forgot to attach the textfield itself to anything, so you can't see anything in your example.
Hehe, correct, my mistake, sorry.

I uploaded a working version of your example. (I included a compiled version of hxswfml because I haven't committed that 'name attribute addition' to the trunk yet):
http://www.haxer.be/guests/Vlatiha/EmbeddedFonts.zip

Cheers,

Jan
Justin L Mills Aug 31 at 17:57

Well done Jan. :)
Vlatiha Sep 03 at 10:45

Hi Jan,

many many thanks for your job. I never would have guessed, it's a faulty swfmill.
So I only have one more point to check. I downloaded and unpacked your example and opened it in the browser.
The text is almost invisible because the y value is far too high. Only a tiny stripe of the upper part of the textfield is shown at the bottom border of the flash area.
I had to change the ypos back to the old value. And that's very weird.

Since I used your compilation, the reason for this behaviour must be anywhere in the browser area.
I'm using "Chromium Version 20.0.1132.57 Debian" (kind of google chrome for debian), Shockwave Flash 11.2 r202, Debian GNU Linux (64 Bit).
... [some minutes later]...
Just tried some other machines here in the office, some Windows XP, some Vista... All the same behaviour. The y value in your version is too high.
Strange....

Very puzzled
Vlatiha

< Prev | Page 1 / 1 | Next >

One language, everywhere.

Haxe Forum > Issues w textfields & embedded font

Menu

Options