Embed font in Textfield

Ariel

Anfänger

Beiträge: 45

Wohnort: Argentina

1

Freitag, 9. Dezember 2011, 02:30

Hi Klaus!

This is what I'm doing but I can't get the embedded font to show in texfield

I opened compile.bat from this folder: examples/as3-interface/plugin-sources/textfield/
with a text editor

then:

1. download the Flex SDK from here: (use the latest production release) http://opensource.adobe.com/flexsdk/ DONE!
2. extract the zip package anywhere DONE!
3. edit the line below and set there the path where you have extracted the Flex SDK package: DONE!
in my case it is:
set FLEXSDKPATH=E:\krpano\flexSDK

save .bat file

ok no I open textfield.as and add this line:

[Embed(source="fonts/Aladin-Regular.ttf", fontFamily="Aladin", mimeType='application/x-font' )] private var AladinFont:Class;

I of course have the font saved in the folder fonts/Aladin-Regular.ttf, relative to textfield.as location.

this is where I add the line:

[SWF(width="400", height="300", backgroundColor="#000000")]
public class textfield extends Sprite
{
[Embed(source="fonts/Aladin-Regular.ttf", fontFamily="Aladin", mimeType='application/x-font' )] private var AladinFont:Class;

// krpano as3 interface

private var krpano:krpano_as3_interface = null;
...

Ok, now I save textfield.as and double click compile.bat
I get a textielf.swf file in the same directory. no errors in cmd window.

now I take my krpano xml.
in CSS properties of my textfield, I change font-family to "Aladin" wich is the name of my font.

now open the tour, and I get the default font, not the one I want to embed.

Can someone help me with this and let me know where am I failing?

thanks a lot! =)

Ariel M.
Build and Customize your virtual tours with Spinattic
www.spinattic.com

My profile in Spinattic

Zum Seitenanfang

Ariel

Anfänger

Beiträge: 45

Wohnort: Argentina

2

Freitag, 9. Dezember 2011, 04:59

RESOLVED

ok! I Found the solution! *smile*

we have to enable the embedded font of the textfield

I did it this way... please, if someone knows better than me, let me know if there's a better place to set this up:

in textfield.as

this is the correct Embed code:

[Embed(source="MyFont.ttf", fontFamily="MyFontFamilyName", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var MyFontClass:Class;

Now scroll down the file. Like around line 360, you will see this function: private function updateHTML():void
a few lines more and you'll see these two settings:

css.parseCSS( cssdata );
txt.styleSheet = css;
right after these, copy and paste the following:

txt.embedFonts = true;
txt.antiAliasType = AntiAliasType.ADVANCED;

txt.embedFonts = true; will enable the embeded fonts so it's able to set the font by CSS data.
txt.antiAliasType = AntiAliasType.ADVANCED; will set the antialiased type to Advanced, so the characters look smooth.

=) that's it... I hope this helps someone save the hours I just lost figuring this out.

Ariel M.
Build and Customize your virtual tours with Spinattic
www.spinattic.com

My profile in Spinattic

Zum Seitenanfang

zadda

Fortgeschrittener

Beiträge: 219

3

Sonntag, 15. April 2012, 16:21

Thanks for sharing,

so, i've compiled my custom textfield.swf with an embbeded font
(by the way source file textfield.as is 1.08.12, i don't know if there a more recent version available ? )

but something not working :
in my modified .as file, there :

Quellcode

[Embed(source="MyriadWebPro.ttf", fontFamily="Myriad", fontWeight="normal", mimeType='application/x-font' )]
and , as mentionned above :
txt.embedFonts = true; // will enable the embeded fonts so it's able to set the font by CSS data.
txt.antiAliasType = AntiAliasType.ADVANCED; // will set the antialiased type to Advanced, so the characters look smooth.
				//

in my xml :
if i add a css line in plugin like this :

	Quellcode
1	css="color:#666666; font-family:Myriad; font-size:12; font-weight:normal; text-align:center; text-decoration:none;

i see nothing,
if i remove this line, then custom textfield display a replacement font , not the embedded one *angry*

any suggestion ?

Thanks

z *smile*

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Montag, 16. April 2012, 18:39

Hi,

Zitat

any suggestion ?

hmm... no, the code itself looks okay...

best regards,
Klaus

Zum Seitenanfang

zadda

Fortgeschrittener

Beiträge: 219

5

Montag, 16. April 2012, 18:45

well,

i just upload a .zip with both the textfield.as modified and the generated custom texfield.swf,
may be somebody can pinpoint the error i've made in xml or .as

Thanks

z

»zadda« hat folgende Datei angehängt:

customtextfield.zip (34,16 kB - 142 mal heruntergeladen - zuletzt: Heute, 05:33)

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

6

Montag, 16. April 2012, 19:02

Hi,

in your source you have embedded only the 'bold' font but in your posted css you were trying to use the 'normal' font,

note - normal, bold, italic and bold-italic are different fonts!

when you only embed the bold one (marked by fontWeight="bold") then you only use that one,
embed all kind of font styles to be able to use all of them (same fontFamily but different fontWeight)

best regards,
Klaus

Zum Seitenanfang

zadda

Fortgeschrittener

Beiträge: 219

7

Montag, 16. April 2012, 20:01

Archive.zip

Hi,

still not working,

Zitat

in your source you have embedded only the 'bold' font but in your posted css you were trying to use the 'normal' font

in fact i've tried with the different font, at different times, and at the time they were matching

Zitat

note - normal, bold, italic and bold-italic are different fonts!

i know, i know

there definetly something with the css line in .xml , in my plugin tag :

	Quellcode
1	css="color:#666666; font-family:Myriad; font-size:12; font-weight:normal; text-align:center; text-decoration:none;"

once i apply this line, no font show up, if i remove, the standard font show up *angry*

may be there a typo somewhere ???
by the way i remind you that i use 1.08.12 version of Textfield.as, i don't have a 1.0.8.14, in case there few changes....

i include in zip file : the texfield.as and the new textfield.swf with both embedded bold and regular MyriadWebPro Font,
if you can make a working example with that, you'll be my hero *squint*

Thanks

z

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

8

Montag, 16. April 2012, 20:11

Hi,

Zitat

there definetly something with the css line in .xml

right, sorry, the included textfield.as is not up-to-date, the last change from build 2012-03-16 which allows using the css without element assignment (p{...}) is not included there,

attached the current textfield.as from build 2012-03-16,

best regards,
Klaus

»klaus.krpano« hat folgende Datei angehängt:

textfield.zip (3,65 kB - 186 mal heruntergeladen - zuletzt: Heute, 05:33)

Zum Seitenanfang

zadda

Fortgeschrittener

Beiträge: 219

9

Montag, 16. April 2012, 20:58

Fixed !

it's working *thumbsup*

it was the outdated textfield.as *smile*

the combobox source file is also outdated in latest krpano package, we can download the latest source in "plugin" section of the website, but an older version is still in package,
you should update it to avoid some thread like here...

Thanks for your time and patience

z *smile*

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

10

Freitag, 4. Mai 2012, 13:59

Hello, I tried to embed a font in textfield plugin, but when I do so I have no text dislpayed anymore... even if I dont set a font-family in the css ?

line 36 : [Embed(source="champagne.ttf", fontFamily="champagne", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var champagneClass:Class;

line 384 : css.parseCSS( cssdata );
txt.styleSheet = css;
txt.embedFonts = true;
txt.antiAliasType = AntiAliasType.ADVANCED;

http://www.360images.fr/textfield.zip

Thanx for looking !

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

11

Donnerstag, 31. Januar 2013, 11:26

Hi Ariel,

Thanks so much for you workflow on how to embed fonts, it's working pretty well !!

If we want to embed more than one font we just have to duplicate that :

Quellcode

1
2

[Embed(source="DroidSans.ttf", fontFamily="droidsans", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var Droidfont:Class;
[Embed(source="DroidSans-Bold.ttf", fontFamily="droidsans", fontWeight="bold", mimeType='application/x-font', embedAsCFF="false" )] private var Droidboldfont:Class;

Or we can make it somehow different ?

thanks in advance

everpano.com step beyond 360

Zum Seitenanfang

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

12

Dienstag, 5. Februar 2013, 10:10

Would it be possible to leave a variable in order not to embed the font and leave it outside, so we just call it, like in the html5 way ?

everpano.com step beyond 360

Zum Seitenanfang

Anoril

Schüler

Beiträge: 69

Wohnort: Paris, France

Beruf: Game Developer and Photographer

13

Freitag, 18. April 2014, 17:22

Hello !

I'm gone into large troubles trying to embed fonts.

I get the embeddedfonts.zip that provides flex-SDK 4.1 and file to compile SWF.

I tried to embed a "Vivaldi Italic" font into a SWF file using this code:

Quellcode

/*
	krpano font embedding
*/
package
{
	import flash.display.Sprite;
	import flash.text.Font;

	[SWF(width="0", height="0", backgroundColor="#000000")]
	public class embeddedfonts extends Sprite
	{
		// embed a font files
		[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;

		public function registerplugin(krpano:Object, pluginfullpath:String, plugin:Object):void
		{
			krpano.trace(1,"registering fonts...");
			Font.registerFont(embeddedfont_VivaldiNormal);
		}
	}
}

But I went into an error:

Quellcode

compile embeddedfonts.swf...
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): Error: exception during transcoding: Unexpected exception encountered while reading font file '/G:/ToDo/ArtEtThe/EmbeddedFont/VIVALDII.TTF'
            	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: unable to build font 'Vivaldi'
            	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;  ^
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: Unable to transcode VIVALDII.TTF.  ^

Looking arround the web, if found that a solution is to declare managers using "-managers=flash.fonts.AFEFontManager" compilation parameter.
But using so, Igot a new error:

Quellcode

G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): Error: exception during transcoding: No FontManager provided. Cannot build font.
            	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: unable to build font 'Vivaldi'
            	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;  ^
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: Unable to transcode VIVALDII.TTF.  ^

Thus, I decided to update Flex-SDK to 4.6, I removed the "managers" param and I compiled again:

Quellcode

compile embeddedfonts.swf...
G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as: Avertissement: Cette unitÚ de compilation ne disposait pas d'entrÚe factory Class indiquÚe dans les mÚtadonnÚes Frame en vue de charger les bibliothÞques d'exÚcution partagÚes configurÚes. Pour compiler sans bibliothÞque d'exÚcution partagÚe, dÚfinissez l'option -static-link-runtime-shared-libraries sur vraie ou dÚsactivez l'option -runtime-shared-libraries.

Appuyez sur une touche pour continuer...

This globally says I'm missing some shared librairies and to make use of another compilation param.

Then it worked: I got a embeddedfonts.swf.

I placed it in a folder close to my pano SWF and modified my XML to look like this:

Quellcode

<plugin url="%SWFPATH%/plugins/embeddedfonts.swf" preload="true" keep="true" devices="flash" />
<layer name="text" embeddedfonts="true" url="%SWFPATH%/plugins/textfield.swf"
  	handcursor="false" children="false" align="lefttop" x="0" y="0" autoheight="true" background="false" html="data:page1"
  	css="font-family:Vivaldi;" handcursor="true" onclick="if(hotspot[menuPage2].flying == 1.0, closeMenu());"/>

But the text is still in arial....

To test the textfield bahaviour, I removed Vivaldi from my system. If I set it back, the text in textfield appears well using Vivaldi. thus from the system and not from the embedded file.

Some help?

I tried also to make embeddedfonts.swf from several other method I discoverred over the web: using SWFMill (nothing happens) and using HaXe extension hxswfml.n ... None of them solved my problem. I can't event try and check my SWF file is correct or not.

(Note: The AS file includes a command "krpano.trace(1,'Registering fonts...')" which appears in my tracelog when I start the viewer.)

Any help?

Regards,

Paul

« Quidquid latine dictum sit, altum sonatur »
Pentax stuff.

Zum Seitenanfang

Anoril

Schüler

Beiträge: 69

Wohnort: Paris, France

Beruf: Game Developer and Photographer

14

Donnerstag, 5. Juni 2014, 11:26

Hello,

Changing my computer seams to have solved the compilation issues.

Using only Textfield package compilation scripts work fine now. EmbeddedFonts.swf compiles.

But when I import this new file into my XML and set "embeddedfonts" to "true", the textfield does not display. The documentation tells me that means the font is not embedded.

Someone went into this weird behaviour?

Details: when I compile the provided files without modifying them (no change to font name or reference), I run into the same trouble : no textfield... :(

Paul

« Quidquid latine dictum sit, altum sonatur »
Pentax stuff.

Zum Seitenanfang

Anoril

Schüler

Beiträge: 69

Wohnort: Paris, France

Beruf: Game Developer and Photographer

15

Donnerstag, 5. Juni 2014, 13:18

I finally get it working.

My CSS description was not compliant.

It failed with: (which works perfectly when no embedded font used)

	Quellcode
1	css="*{font-family: myFont; font-size:14px;} h1{font-size:22px;} a{color:#229922;text-decoration:underline;cursor:pointer;}"

And worked with:

	Quellcode
1	font-family: myFont; font-size: 14px;

My problem is now I cannot format headers and so...

Paul

« Quidquid latine dictum sit, altum sonatur »
Pentax stuff.

Zum Seitenanfang

Anoril

Schüler

Beiträge: 69

Wohnort: Paris, France

Beruf: Game Developer and Photographer

16

Donnerstag, 5. Juni 2014, 13:51

With old Textfield plugin, I can fix the global font issue using

	Quellcode
1	<font face="xxx">blablabla</font>

But with the new texfield (1.17.1), using font-face just hide the text.

If It got it right: we can't use several fonts at a time in the same text... :(

Paul

« Quidquid latine dictum sit, altum sonatur »
Pentax stuff.

Zum Seitenanfang