Problems with text fields embedded in SWF files

Help
#1

I am converting Animate/Flash projects to OpenFL based HTML5 projects. Most of the display objects are stored in the SWF file.

When I embed a static text field that has multiple lines of text, the width property is ignored and the text is displayed as one line. If I insert line breaks to ensure multiple lines, formatting such as bold, etc. is lost.

If the text field is a dynamic text field with multiline option on, the width of the text field is preserved so I get the multiple lines but again some of the text formatting is lost.

So when I do need dynamic text fields, I have to code those. But using the auto-size options sometimes results in the text field being shifted horizontally when text is placed in the field. I’ve had to make my own subclass of text field so that I can specify the text and x coord of the field and it mimics the behavior of the auto-size options.

For labels and other text that does not change, I have to resort to making individual static fields for each line of text.

Anyone have better solutions for these problems?

Thanks in advance!

#2

How could I easily reproduce the static text multi-line issue you are having? What text formatting are you losing in your dynamic fields?

#3

In Adobe Animate or Flash:

  • Create a symbol with a static text field in it with text
  • Name it and select Export for Actionscript so it’s treated as a class
  • Export to a swf file (Flash movie)
  • Create an OpenFl project that uses that swf file as an asset
  • Create an instance of that class
  • Build and HTML5 project and observe

The only formatting that I’ve used is bold and font size

#4

I have the same problem so I’ll try to make a sample fla when I’ll get back from holidays.

It’s strange but I’m able to keep my formatted text when I use the htmlText returned in as3.
My process :
-extract htmlText from all textfields and export it in xml (use as3 or jsfl for that).
-use the htmlText stored in your xml in your project
-everything seems fine now :slight_smile:

Other bug:

When I use ALIGN RIGHT in Adobe Animate, some texts (or maybe all) appear left aligned.

#5

Hey guys,

I just created a new project:

  1. Opened a command prompt and ran “openfl create project StaticTextTest”
  2. Opened Adobe Animate 2017.2 and created a new AS3 project
  3. Created a TextField, wrote some text, and changed it to a static field
  4. Selected the field and turned it into a symbol named “HelloWorld”
  5. Set the new symbol to “Export for ActionScript”
  6. Saved the FLA as “Assets/library.fla” in my project, then published to SWF
  7. Opened “project.xml” and replaced the <assets /> tag with `
  8. Opened “Main.hx” and added some code
addChild (openfl.utils.Assets.getMovieClip ("library:HelloWorld"));

It looks correct in both native and HTML5 in WebGL, DOM and canvas.

It’s also properly multi-line

#6

Oh, and in AS3, you can’t set the text on a dynamic TextField or it loses the formatting. You need to textField.defaultTextFormat = textField.getTextFormat () first (which seems a little silly, but that’s how I always had to do it) ¯_(ツ)_/¯

#7

Yes, it’s very strange, some of my projects work pretty well, other don’t.

There are some differences in those projects : they don’t have the same font, the project that doesn’t work properly has been made in Mac first from Illustrator import and then compiled in Windows, while the project that works has been made 100% in Animate/Windows. Maybe there is a strange Animate bug here that affects the openfl swf importer or the htmlparser?

I’ll make a sample in 2 weeks.

I remember having an other problem in my projects that use Animate. If you scale a little a textfield (99%) that has a text that takes all the width, you will see the text correctly in Animate and the swf but not in openfl (it’s like the textfield is still at 100%, so you don’t see the last character). I’ll also try to add this in the sample.

#8

A sample would be great – there are a lot of SWF tags, so there’s a possibility that different operating systems or versions could write different SWF tags, which could behave slightly differently.

As for dynamic TextField width, when we render, the text measurement might be slightly different for HTML5 especially. Different font rendering engines can behave a little differently, and measure a half pixel wider or smaller.

Static TextField content should be written as shape drawing information, so we can render the text out like any other vector

#9

I made a test project that illustrates what happens to textfields stored in a Animate/Flash swf file. The first image shows how several different fields are formatted in Animate and displayed by Flash Player and the second how Firefox displayed the HTML5 version created with a lime build html5 (openfl 7.0.0 & lime 6.0.1) using Visual Studio Code.

This show what I said before, static fields preserve the text format but only displays one line. Dynamic fields can display multiple lines but while font size, font color are preserved, the font setting of Open Sans is not which makes no sense to me. With code I can change the font to Open Sans but I don’t understand why I should have to.

The last image is simply the code that grabs the one symbol that holds everything and adds it to the stage. I made a zip file with all the code files, resources and build results which you can access at https://www.dropbox.com/s/rsh27q9zppbva0s/TextFieldTest.zip?dl=0

screenshot_70
screenshot_70.jpg1200×844 117 KB

screenshot_69
screenshot_69.jpg1196×958 108 KB

screenshot_71
screenshot_71.jpg761×435 54.1 KB

#10

Have you tried adding your font (Open Sans, right?) to your project’s “Assets” directory, so OpenFL can generate a webfont?

#11

No I haven’t and don’t know how to access it after I put it in Assets. But the fact that sometimes the font I want is used and sometimes not says that the name itself is not being preserved and having a font file with that name wouldn’t change anything.

#12

Currently, our SWF support remembers the name used in Adobe Animate, then looks for that name at runtime. Adding a font to your assets on build will allow us to build a webfont, using the detected name from that font. Usually that matches, but if it does not, you can change the name in Animate sometimes, or even use custom CSS to match the exact name

#13

Added the font file to the assets folder and it worked. So I’m assuming that during the build, it automatically looks for the associated font file.

Still don’t understand why multiline static fields only display the first line. Can get around that now by always using dynamic fields.

Thanks.

#14

Thanks for the sample project, I’ll try and look into the static fields :slight_smile:

#15

Thanks so much for the test! Fixed :sunglasses:

(if you apply to your own install, you need to openfl rebuild tools in order for the change to take effect)

2 Likes
#16

Did the openfl rebuild tools, rebuilt my test project and the multiline static text field still only shows the first line.

#17

Did you pull the latest source, or did you patch your release copy of OpenFL?

#18

I updated to openfl (7.1.2), lime (6.2.0) and Haxe std (3.4.7). Still have a problem with static textfields showing just the first line.

Using Terminal I did “openfl rebuild tools” which gave me "Library format is not installed : run ‘haxelib install format’

So I did “haxelib install format” which downloaded format-3,4,1.zip, installed it and then said Current version is now 3.4.1

I did “openfl rebuild tools” again and there was a pause for a couple of seconds and then no message, just the prompt returned.

Rebuilt the test projects and static textfields still showing just the first line.

What do I need to do and please if I have to type something in Terminal, tell me exactly what to type. I had no idea how to “pull the latest source” or “patch my release copy of OpenFL.”

Thanks in advance.

#19

Could you please try the latest OpenFL 8 release? Thank you :slight_smile:

#20

Multi line text in Static textfield coming from SWF is fixed in the 8 release , i just tested it in HTML5 , and it is working as expected.

1 Like