Text in object handles

32 views
Skip to first unread message

Ashi

unread,
Nov 24, 2009, 2:01:16 AM11/24/09
to Flex ObjectHandles
Hi,

I have created an object handle with text in it. I have used embedded
fonts for it. When I rotate the handle it works just fine, but as soon
as I change its style to bold or italic, the text on rotation
disappears.

Anybody ?

Thanks
Ashi :)

abid reha

unread,
Nov 24, 2009, 2:24:28 AM11/24/09
to object...@googlegroups.com
u use

lable.rotation = objCnv.localClickRotation;

but first localClickRotation variable convert to public ;


--

You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To post to this group, send email to object...@googlegroups.com.
To unsubscribe from this group, send email to objecthandle...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/objecthandles?hl=en.



abid reha

unread,
Nov 24, 2009, 2:24:50 AM11/24/09
to object...@googlegroups.com

var objCnv:ObjectHandles = new ObjectHandles();
                objCnv.addEventListener(ObjectHandleEvent.OBJECT_SELECTED,OnObjectHandlesSelected);
                objCnv.addEventListener(ObjectHandleEvent.OBJECT_RESIZED_EVENT,getNewWidthHeight);
                objCnv.addEventListener(MouseEvent.CLICK,hits);
                objCnv.x=20;
                objCnv.y=20;
                objCnv.height=50;
                objCnv.width=200;
                objCnv.allowHMove=true;
                objCnv.allowHResize=true;
                objCnv.allowVMove=true;
                objCnv.allowVResize=true;
                objCnv.allowRotate=false;
                objCnv.mouseChildren=false;
                objCnv.allowBottom=true;
                objCnv.alwaysMaintainAspectRatio=false;
                var lable:Label= new Label();
                lable.text= String(returnedName.text);
                lable.percentWidth=100;
                lable.percentHeight=100;
                lable.setStyle("fontSize", "30");
                lable.setStyle("textAlign", "center");
                lable.setStyle("borderColor", "#000000");
                lable.setStyle("borderStyle", "Solid");
               
                //lable.rotation = objCnv.localClickRotation;
               
                /* var lable:Text= new Text();
                lable.text= String(returnedName.text);
                lable.setStyle("textAlign", "center");
                lable.setStyle("fontSize", "30"); */
                objCnv.addChild(lable);
                genericBS4L.addChild(objCnv);
                returnedName.text = '';

Ashi

unread,
Nov 24, 2009, 2:38:44 AM11/24/09
to Flex ObjectHandles
Hey I am sorry, but I am not using label, instead I am using text
component ! Will it work for the text component too ?
> On Tue, Nov 24, 2009 at 12:54 PM, abid reha <abidr...@gmail.com> wrote:
> > u use
>
> > lable.rotation = objCnv.localClickRotation;
>
> > but first localClickRotation variable convert to public ;
>
> > On Tue, Nov 24, 2009 at 12:31 PM, Ashi <asmita.sikar...@gmail.com> wrote:
>
> >> Hi,
>
> >> I have created an object handle with text in it. I have used embedded
> >> fonts for it. When I rotate the handle it works just fine, but as soon
> >> as I change its style to bold or italic, the text on rotation
> >> disappears.
>
> >> Anybody ?
>
> >> Thanks
> >> Ashi :)
>
> >> --
>
> >> You received this message because you are subscribed to the Google Groups
> >> "Flex ObjectHandles" group.
> >> To post to this group, send email to object...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> objecthandle...@googlegroups.com<objecthandles%2Bunsu...@googlegroups.com>
> >> .

Tami Wright

unread,
Nov 24, 2009, 3:22:21 AM11/24/09
to object...@googlegroups.com
For text* components (Text and TextArea) your fonts must be embedded in your CSS.

To unsubscribe from this group, send email to objecthandle...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/objecthandles?hl=en.





--
>>>>>>>>><<<<<<<<<
Tami Thompson Wright
tami....@excentrixweb.com
tamit...@thompson-technical.com
tami....@computer.org
(801) 709-4401 (Cell)
(801) 615-5298 (Land line)
(801) 515-8818 (Fax)
*Chief Executive Officer and Owner
Thompson Technical Services, Inc. & Excentrix Web, Inc.

"If devotion to the truth is the hallmark of morality, then there is no greater, nobler, more heroic form of devotion than the act of a man who assumes the responsibility of thinking. "
~Ayn Rand (my hero)

Ashi

unread,
Nov 24, 2009, 3:42:21 AM11/24/09
to Flex ObjectHandles
Yes I am using embedded fonts only. But the problem is that it doesnt
work if I apply fontWeight or fontStyle to it.
> > <objecthandles%2Bunsu...@googlegroups.com<objecthandles%252Buns...@googlegroups.com>
>
> > > >> .
> > > >> For more options, visit this group at
> > > >>http://groups.google.com/group/objecthandles?hl=en.
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "Flex ObjectHandles" group.
> > To post to this group, send email to object...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > objecthandle...@googlegroups.com<objecthandles%2Bunsu...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/objecthandles?hl=en.
>
> -->>>>>>>>><<<<<<<<<
>
> Tami Thompson Wright
> tami.wri...@excentrixweb.com
> tamitwri...@thompson-technical.com
> tami.wri...@computer.org

Tami Wright

unread,
Nov 24, 2009, 3:43:47 AM11/24/09
to object...@googlegroups.com
Get the Text* controls textfield and modify accordingly.  (Sniff the source of the RichTextEditor control to know how to do this.)

To unsubscribe from this group, send email to objecthandle...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/objecthandles?hl=en.





--
>>>>>>>>><<<<<<<<<
Tami Thompson Wright
tami....@excentrixweb.com
tamit...@thompson-technical.com
tami....@computer.org

Ashi

unread,
Nov 24, 2009, 3:47:18 AM11/24/09
to Flex ObjectHandles
Sorry guys, its not helping :(
> > > > <objecthandles%2Bunsu...@googlegroups.com<objecthandles%252Buns...@googlegroups.com>
> > <objecthandles%252Buns...@googlegroups.com<objecthandles%25252Bun...@googlegroups.com>
>
> > > > > >> .
> > > > > >> For more options, visit this group at
> > > > > >>http://groups.google.com/group/objecthandles?hl=en.
>
> > > > --
>
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "Flex ObjectHandles" group.
> > > > To post to this group, send email to object...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > objecthandle...@googlegroups.com<objecthandles%2Bunsu...@googlegroups.com>
> > <objecthandles%2Bunsu...@googlegroups.com<objecthandles%252Buns...@googlegroups.com>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/objecthandles?hl=en.
>
> > > -->>>>>>>>><<<<<<<<<
>

Ashi

unread,
Nov 24, 2009, 3:48:10 AM11/24/09
to Flex ObjectHandles
Not helping
> > > > <objecthandles%2Bunsu...@googlegroups.com<objecthandles%252Buns...@googlegroups.com>
> > <objecthandles%252Buns...@googlegroups.com<objecthandles%25252Bun...@googlegroups.com>
>
> > > > > >> .
> > > > > >> For more options, visit this group at
> > > > > >>http://groups.google.com/group/objecthandles?hl=en.
>
> > > > --
>
> > > > You received this message because you are subscribed to the Google
> > Groups
> > > > "Flex ObjectHandles" group.
> > > > To post to this group, send email to object...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > objecthandle...@googlegroups.com<objecthandles%2Bunsu...@googlegroups.com>
> > <objecthandles%2Bunsu...@googlegroups.com<objecthandles%252Buns...@googlegroups.com>
>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/objecthandles?hl=en.
>
> > > -->>>>>>>>><<<<<<<<<
>

Marc Hughes

unread,
Nov 24, 2009, 8:53:37 AM11/24/09
to object...@googlegroups.com
You need to embed the bold, italic, and bold/italic font as well. 

Here's the css for one of my projects:

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana.ttf");
    font-weight: regular;
    font-style: normal;  
}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Italic.ttf");
    font-weight: regular;
    font-style: italic; 
}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Bold.ttf");
    font-weight: bold;
    font-style: normal; 
}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Bold Italic.ttf");
    font-weight: bold;
    font-style: italic; 
}



Notice that we "rename" the font to MainFont.  You'll want to do that to avoid conflicts.  Then in your component use a font face of "MainFont" not "Verdana" (in this example)

-Marc


To unsubscribe from this group, send email to objecthandle...@googlegroups.com.

Steven Rubenstein

unread,
Nov 24, 2009, 10:17:54 AM11/24/09
to object...@googlegroups.com
I have successfully embedded fonts, though I agree it was a pain in the butt. It was not intuitive at all. Fortunately, a Flex genius I know helped me figure this out. Here is how I did it:

1. I created an individual SWF for each TTF file where the font file is embedded. You can download a zip file of them here:


fyi, I created each file by writing a script that generates a simple mxml file that embeds each font, and then right-clicked on each one to have FlexBuilder compile it for me. Very painstaking, but it was a one-time effort. I can post the original mxml files as well if anyone is interested, but the swf is all you need.

2. In my Flex code, I created an array that stores which fonts I have already embedded so I don't try to embed a font a second time. This is optional, but it was necessary for me. For the record, I am using the Flex-Ajax bridge to communicate to my Flex code. But that shouldn't matter.

private var thisFontArray:Array = new Array();

3. I have a function that adds the text box. Basically, I send in the font name, the SWF file that embeds that font, and the font style, i.e,. bold, italic or bold+italic. I send it the font info as an argument because I do the pre-processing via Ajax. But you could just as easily do this work in Flex.

You will notice in my code "/library/fontSwf/". This is just the directory to where I store my SWFs with the embedded fonts. My fontSwf variables stores the file name without the ".swf" extension.

My function is below. I hope this helps. If you have any questions, just let me know.


public function addCanvasText (text:String, font:String, fontSwf:String, fontStyle:String) : void
{

  var tempText:TextArea = new TextArea();

  if (font != "")
  {
if (thisFontArray.indexOf(fontSwf, 0) == -1 && fontSwf != "")
{
StyleManager.loadStyleDeclarations("/library/fontSwf/" + fontSwf + ".swf", true, true);
thisFontArray.push(font);
}

if (fontStyle == "")
{
tempText.setStyle("fontFamily", font);
}
else
{
tempText.setStyle("fontFamily", font + "_" + fontStyle);
switch (fontStyle)
{
case "bold":
tempText.setStyle("fontWeight", "bold");
break; 
case "italic":
tempText.setStyle("fontStyle", "italic");
break;
case "boldItalic":
tempText.setStyle("fontWeight", "bold");
tempText.setStyle("fontStyle", "italic");
break;
}
}
  }

jagbir

unread,
Dec 14, 2009, 6:45:04 AM12/14/09
to Flex ObjectHandles
Well i have the same problem..i downloaded your swf folder..but how to
use it..

i am applying style by user selection..like user selects font family
from a combobox, bold button italic button and underline button...on
rotation if i prss bold and italic the text becomes invisble..

I embeded the fonts in css..and added the names i had given to the the
fonts to array and binded it to the combo box..here are few of the
fonts i embedd in the css..
take for example the following


/*--------------Tahoma---------------*/
@font-face{
font-family: "Tahoma";
src: url("assets/fonts/TAHOMA.TTF");


}
@font-face{
font-family: "Tahoma";
src: url("assets/fonts/tahomab.TTF");




}

on rotation if i click bold or italic the text becomes invisible,..for
underline it works..(textdecoration)

Marc Hughes

unread,
Dec 14, 2009, 6:55:24 AM12/14/09
to object...@googlegroups.com
Have you tried something like this?  You need to have embeds for all the combinations.  You can specify the same font file for all the types if it contains font information for them all.


@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana.ttf");
    font-weight: regular;
    font-style: normal;  

}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Italic.ttf");
    font-weight: regular;
    font-style: italic; 

}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Bold.ttf");
    font-weight: bold;
    font-style: normal; 

}

@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Bold Italic.ttf");
    font-weight: bold;
    font-style: italic; 

}


jagbir

unread,
Dec 14, 2009, 7:26:20 AM12/14/09
to Flex ObjectHandles
Well March

i have done .check the above tahoma code..but if you saying giving a
different name..like tahoma to be in built font name..if i give..some
name like TahomaB...it would be fine but problem is i am also listing
the fonts in a combo box..so i cant show user the name as tahomaB..he
would definately point on this..is the code written by me for tahome
wrong..?

Marc Hughes

unread,
Dec 14, 2009, 7:43:23 AM12/14/09
to object...@googlegroups.com
The name shouldn't matter, but your code differs from mine in another way.


@font-face{
    font-family: "MainFont";
    src: url("assets/common/fonts/Verdana Bold.ttf");
    font-weight: bold;
    font-style: normal; 

}


-Marc

Steven Rubenstein

unread,
Dec 14, 2009, 7:49:11 AM12/14/09
to object...@googlegroups.com
Alas, Flash is really stupid about embedded fonts. I posted last week about another way to embed fonts by using a swf that already has the ttf embedded. I can re-post that if necessary. But Marc is correct that you must not only specify the correct ttf, but also tell Flash that the font is bold and/or italic even though the ttf specifies that.

  Steven

jagbir

unread,
Dec 14, 2009, 8:23:29 AM12/14/09
to Flex ObjectHandles
Ok marc i think this is what you were saying like if i have
tahomabd.TTF

then i have to mention :--

font-weight:bold;
font-style: normal;

but as there is no italic for tahoma..it disappears when rotate,, rest
working fine..



/*--------------Times New Roman---------------*/
@font-face{
font-family: "Times New Roman";
src: url("assets/fonts/TIMES.TTF");
font-weight: normal;
font-style: normal;

}
@font-face{
font-family: "Times New Roman";
src: url("assets/fonts/TIMESBD.TTF");
font-weight: bold;
font-style: normal;

}
@font-face{
font-family: "Times New Roman";
src: url("assets/fonts/TIMESBI.TTF");
font-weight: bold;
font-style: italic;

}
@font-face{
font-family: "Times New Roman";
src: url("assets/fonts/TIMESI.TTF");

font-style: italic;
}
/*--------------Tahoma---------------*/
@font-face{
font-family: "Tahoma";
src: url("assets/fonts/TAHOMA.TTF");
font-weight: normal;
font-style: normal;

}
@font-face{
font-family: "Tahoma";
src: url("assets/fonts/tahomabd.TTF");
font-weight:bold;
font-style: normal;





}

Marc Hughes

unread,
Dec 14, 2009, 8:25:38 AM12/14/09
to object...@googlegroups.com
Try using the regular font file for regular/italic and the bold font file for bold/italic.  I think that should work for you.

-Marc

jagbir

unread,
Dec 14, 2009, 8:56:42 AM12/14/09
to Flex ObjectHandles

following error comes during compilation
exception during transcoding: Font for alias 'Tahoma' with italic
style was not found


/*--------------Tahoma---------------*/
@font-face{
font-family: "Tahoma"; ///here
src: url("assets/fonts/TAHOMA.TTF");
font-weight: regular;
font-style: italic;

}
@font-face{
font-family: "Tahoma";
src: url("assets/fonts/tahomabd.TTF");
font-weight:bold;
font-style: italic;

}

Marc Hughes

unread,
Dec 14, 2009, 9:02:37 AM12/14/09
to object...@googlegroups.com
That's the extent of my font-embedding knowledge.  Good luck figuring it out.  Perhaps try using Steven's embedded swf method.

-Marc


}

jagbir

unread,
Dec 14, 2009, 9:08:35 AM12/14/09
to Flex ObjectHandles

Never mind..thanks for your help Marc.
tc

Steven Rubenstein

unread,
Dec 14, 2009, 9:14:49 AM12/14/09
to object...@googlegroups.com
If there is not an embedded version of the font with italic, then sometimes the font will still disappear when you rotate. You can try using htmltext with <i> tags. But it's not a perfect world and some combinations simply don't work no matter what you do.

jagbir

unread,
Dec 16, 2009, 9:37:02 AM12/16/09
to Flex ObjectHandles
Hi again guys,

After embedding the fonts the compilation process has become to
slow..what can we do in this case
please help
Thanks


rubenste...@gmail.com

unread,
Dec 16, 2009, 9:44:47 AM12/16/09
to object...@googlegroups.com
Do you mean compiling via flex is slow? Is that a major concern?

How many fonts are you embedding? Do you need all of them?

The font-embedding method I posted earlier does not actually embed the font when compiling, but rather loads them dynamically as necessary during runtime. So if you do that, it will help your compiling time because you no longer will be embedding when compiling.

One other option is to only include the characters you need instead of the entire font TTF file. That will reduce the file size and presumably reduce compiling time as well.

Steven
--

You received this message because you are subscribed to the Google Groups "Flex ObjectHandles" group.
To post to this group, send email to object...@googlegroups.com.
To unsubscribe from this group, send email to objecthandle...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/objecthandles?hl=en.




Sent on the Sprint® Now Network from my BlackBerry®

jagbir

unread,
Dec 16, 2009, 9:48:07 AM12/16/09
to Flex ObjectHandles


Well Rebenstein i have embedded the font in a css and declared the
css as

<mx:Style source="Assets/CSS/FontCSS.css"/>

below the application tag..

Now each time i compile it take lot of time for comilplation..

i am embedding near about 17 18 fonts..

rubenste...@gmail.com

unread,
Dec 16, 2009, 10:04:08 AM12/16/09
to object...@googlegroups.com
Do you need 17 fonts embedded at compilation? Can you load them dynamically at run-time instead? This will also reduce your swf file size.
------Original Message------
From: jagbir
Sender: object...@googlegroups.com
To: Flex ObjectHandles
ReplyTo: object...@googlegroups.com
Subject: [ObjectHandles] Re: Text in object handles

jagbir impinge

unread,
Dec 16, 2009, 12:00:27 PM12/16/09
to object...@googlegroups.com
How to do that..Can u give an example..?

Thanks

Steven Rubenstein

unread,
Dec 16, 2009, 12:09:08 PM12/16/09
to object...@googlegroups.com
Here is a link to a message I posted on November 24 at 7:17 am about how to dynamically embed fonts. The idea is that you load a  swf that already has the font ttf file embedded. I also included a link to download a zip file of a swf for each ttf. 

http://groups.google.com/group/objecthandles/browse_thread/thread/5036bae8f7baa213/adbda842c07eb54b?hl=en&lnk=gst&q=font#adbda842c07eb54b

Let me know if you need help understanding the code I posted. The code was actually build as a function that adds a text field to objecthandles.

cheers,
 Steven

jagbir

unread,
Dec 16, 2009, 12:40:17 PM12/16/09
to Flex ObjectHandles
well i was the next person to ask you about how to use these
swf's :)
.I have already downloaded your zip folder. but was confused how to
use these swf,s.And so i am here.


using swf instead of ttf..does this can solve the issue..take the
below example

@font-face {
src:url("../assets/MyriadWebProEmbed.swf");
fontFamily: "Myriad Web Pro";
}

or
is this the way of embedding them at runtime

check link
http://www.flexafterdark.com/docs/Flex-Fonts





Steven Rubenstein

unread,
Dec 16, 2009, 12:54:30 PM12/16/09
to object...@googlegroups.com
Fair enough. I admit the whole thing is confusing and pain in the butt.

You can embed the swf's dynamically at runtime. Based on the link you sent, you can also choose to load the ttf's at run-time as well. I am not sure whether you can load a ttf dynamically, except perhaps by calling an external style sheet that loads that ttf, which is basically what I do with my compiled swf's that embed the ttf.

The reason I did dynamically embed the swf's in my code is because I do not know ahead of time which fonts I will need. I only load the fonts as my customers choose which font to use. (This was also the method suggested to me by a flex guru.)

But if you know you will need all those 17-18 fonts, i.e., all of the fonts will be used AND rotated (or changed alpha), you can certainly load them this way. I cannot give you any feedback on performance though since it might be really slow for a user to load all of the fonts dynamically vs. your embedding them in the swf (which I realize increases compiling time, but reduces the ttf file size). And if you limit which characters are embedded, that will help too.



jagbir

unread,
Dec 16, 2009, 12:57:33 PM12/16/09
to Flex ObjectHandles
I will give it a try..and will update you.thanks

On Dec 16, 10:54 pm, Steven Rubenstein <rubenstein.ste...@gmail.com>
wrote:
> > objecthandle...@googlegroups.com<objecthandles%2Bunsubscribe@goog legroups.com>
> > .

flexgirl

unread,
Dec 16, 2009, 8:45:46 PM12/16/09
to Flex ObjectHandles
I have implemented Rubenstein's approach of loading the font swf's at
run time and it works very well--load up time is hardly affected.
Only a few TTF are loaded at run time and then other fonts are loaded
later during run time. We don't use CSS for this either. I wish I
could share how we do it but the code was done for a client and we
don't own the source.

jagbir

unread,
Dec 17, 2009, 1:25:32 AM12/17/09
to Flex ObjectHandles
let me explain more briefly what i really want..

i m providing user to enter text in a text area..and on the textarea
change event, i am creating a text area dynamically and adding it to
the objecthandle object simultaneously .as the user keep on entering
text the.text is being further added to that dynamic text area on n
on. Now as this work of entering text is complete now user has the
option to set the style of text by pressing bold,italic,underline
button respectively.further is the combobox provided for fontstyle..i
bind an array of filled fonts to the combobox dataprovider..

<mx:Application creationComplete="init()"

the following function is called in the init function that is further
called in on creationComplete as above:-
which fills the arrFontFamily and i have assigned this array to
dataprovider

private function InitializeFonts():void
{
var _arrFonts:Array=Font.enumerateFonts(true);

for each(var fontobj:Font in _arrFonts)
{
_arrFontFamily.push(fontobj.fontName);
}
_arrFontFamily.sort();
}

Now as the user after selecting font and bold or italic etc, rotate
the object handler to rotate the text box in it.the font disappears..

Then i followed the approach u guys told me of embedding the fonts..so
i selected those fonts only which have all these
style available ..consider the following example of verdana that i am
embedding in the fontcss file and declared the css under application
tag

@font-face{
font-family: "test";
src: url("Assets/fonts/verdana.ttf");
font-weight: normal;
font-style: normal;

}

@font-face{
font-family: "test";
src: url("Assets/fonts/verdanab.ttf");
font-weight: bold;
font-style: normal;

}

@font-face{
font-family: "test";
src: url("Assets/fonts/verdanai.ttf");
font-weight: normal;
font-style: italic;

}
@font-face{
font-family: "test";
src: url("Assets/fonts/verdanaz.ttf");
font-weight: bold;
font-style: italic;

}

Now four fonts are added to the arrFontFamily of name test..

then i started the second approach:--

As four fonts of same name" test" were coming in the combobox so,Then
i hardcoded the array with names of the fonts i am embedding smthing
lik this ,

private var _arrFontFamily:Array=new Array("Verdana",etc);

i put all the ttf files that supports bold/normal ,bold/
italic ,normal/italic ,normal/normal in a folder name fonts under
assets
src: url("Assets/fonts/verdanaz.ttf");


like verdana arial and Rockwell etc. not tahoma as it create problem
when user rotates the textbox..as we dont have italic for tahoma.

After this approach the problem of disappearing text was solved,but,
the compilation time got increased ..then..i used the swf...from the
fontSwf folder and added the folder under assets and used it in the
css..

@font-face{
font-family: "Verdana";
src: url("Assets/fontSwf/verdana.swf");
font-weight: normal;
font-style: normal;

}

@font-face{
font-family: "Verdana";
src: url("Assets/fontSwf/verdanab.swf");
font-weight: bold;
font-style: normal;

}

but it gives error:-

font 'Verdana' with bold weight and regular style not found

Unable to transcode Assets/fontSwf/verdanab.swf.

So can u please put a light on it..or there is something other then
this via which this issue can be solved


Steven Rubenstein

unread,
Dec 17, 2009, 10:18:46 AM12/17/09
to object...@googlegroups.com
I am going to try to do a better job explaining how I dynamically embed font swf's with the embedded ttf's as necessary. I am using an html-based text editor, and then communicating to my OH-based canvas via the Flex-Ajax bridge. So I am not creating the textarea as they type, but only after they are done. But that should not make a major difference in the core code.

I am creating a Textarea object and populating it with htmlText, not plain text that is styled. So I don't know whether my instructions work for plain text. But this means that not only am I potentially loading a font swf that is for Verdana Bold, but the htmlText itself has a font tag with Verdana specified and even bold tags. I know this seems redundant, but I found it necessary.

One other note -- I am pre-processing my textarea via ColdFusion before sending it to Flex. I will try to describe what I do in case you need to replicate it in ActionScript.

Before we begin, here are some core things I do at the top of my application:

import flash.display.Loader;  
import flash.display.Sprite;  
import flash.events.Event;  
import flash.net.URLRequest;  
import flash.text.*;  

private var thisFontArray:Array = new Array();

The variable "thisFontArray" simply maintain a list of the fonts I have already loaded (via the swf) so I do not re-load a font, which would be silly.

After my customer is done entering and styling their text in the html textarea, they click submit. A Javascript event tells my OH-based canvas to reload all of the objects. (Yes, I could just add the new text instead, but don't for a variety of reasons that are un-related to this issue.) To add my text, I call a function addCanvasText().

I am happy to send you the full code, but in the interests of keeping this short, I am only posting the relevant parts. Here is a description of the non-obvious arguments:

text = The html-formatted text I want to display
font = The simple name of the font, e.g., "Verdana" or "Arial"
fontSwf = Name of the SWF file that has embedded that font / fontStyle combination
fontStyle = blank, bold, italic or boldItalic
  This is pre-processed via ColdFusion, but you can do this via AS since they are hitting your style buttons.
  It tells me which aspects matter in terms of embedding the font. You only need to embed a font
  if you are rotating or changing alpha. But not all fonts or styles combinations will work.


public function addCanvasText (text:String, font:String, fontSwf:String, fontStyle:String,
 width:Number, height:Number, x:Number, y:Number, rotate:Number, alpha:Number) : void
{
// 1. Create my Textarea object
var tempText:TextArea = new TextArea();
// 2. I send in escaped html text via XML, so I un-escape it
tempText.htmlText = unescape(text);

// 3. Create my OH object
var tempObject:ObjectHandles = new ObjectHandles();
tempObject.width = width;
tempObject.height = height;
tempObject.x = x;
tempObject.y = y;

// 4. If a font is specified, we dig in
if (font != "")
 {
  // 5. If I have not yet loaded this particular font, I load the appropriate swf and add it to my array so I don't reload it later
  if (thisFontArray.indexOf(fontSwf, 0) == -1 && fontSwf != "")
  {
   StyleManager.loadStyleDeclarations("/library/fontSwf/" + fontSwf + ".swf", true, true);
   thisFontArray.push(font);
  }

  // 6. if not bold, italic or bold+italic, simply sent the font style for the textarea object
  if (fontStyle == "")
  {
   tempText.setStyle("fontFamily", font);
  }
  else // 7. if bold and/or italic ...
  {
  // 8. set the font style using the font name and fontStyle value
   tempText.setStyle("fontFamily", font + "_" + fontStyle);
  // 9. Set bold and/or italic styles as necessary
   switch (fontStyle)
   {
    case "bold":
 tempText.setStyle("fontWeight", "bold");
      break;
    case "italic":
 tempText.setStyle("fontStyle", "italic");
      break;
    case "boldItalic":
 tempText.setStyle("fontWeight", "bold");
 tempText.setStyle("fontStyle", "italic");
 break;
    }
  }
 }

// 10. Basic OH stuff
tempObject.addChild(tempText);
tempObject.rotation = rotate;
tempObject.alpha = alpha / 100;

// 11. Add the OH object to my canvas
emazeFrameCanvas.addChild(tempObject);
}

***
The real key is the fontStyle argument that is either blank, bold, italic or boldItalic and then determining the proper fontSwf file. I have a ColdFusion function that determines which fontSwf file to use based on the font and bold/italic settings. I don't want to copy that into this email since it's fairly long, and I am hesitant to attach it. So if you email me at rubenste...@gmail.com, I will email it to you directly. It is 250 lines, but it's just a huge list of every font TTF file.

But here is a short, short version of it for Arial and Verdana. It is ColdFusion code, but should be easy enough to understand.

<cfset var fontStruct = StructNew()>

<cfset fontStruct["Arial"] = "ARIAL.TTF">
<cfset fontStruct["Arial_bold"] = "ARIALBD.TTF">
<cfset fontStruct["Arial_boldItalic"] = "ARIALBI.TTF">
<cfset fontStruct["Arial_italic"] = "ARIALI.TTF">
<cfset fontStruct["Verdana"] = "verdana.ttf">
<cfset fontStruct["Verdana_bold"] = "verdanab.ttf">
<cfset fontStruct["Verdana_boldItalic"] = "verdanaz.ttf">
<cfset fontStruct["Verdana_italic"] = "verdanai.ttf">

For Arial and Verdana, there happens to be a version for each bold/italic combo, but that is not true of most fonts.

***
And finally, here is my basic statement that determines which fontSwf file to use. It's ColdFusion code, but I am posting it in semi-AS. Here is a quick key:

"fontStruct" = Array of each TTF file. Technically, it's a ColdFusion "structure" since it's indexed by names, not numbers. StructKeyExists = ColdFusion function that indicates whether that index exists in the structure
font = The font name, e.g., Verdana.
fontTTF = Name of the TTF file

// Determine if a TTF exists for that font/bold/italic combination
if (isBold && isItalic && and StructKeyExists(fontStruct, font + "_boldItalic"))
  fontTTF = fontStruct[font + "_boldItalic"];
  fontStyle = "boldItalic";
else if (isBold && StructKeyExists(fontStruct, font + "_bold"))
  fontTTF = fontStruct[font + "_bold"];
  fontStyle = "bold";
else if (isItalic && StructKeyExists(fontStruct, font + "_italic"))
  fontTTF = fontStruct[font + "_italic"];
  fontStyle = "italic";
else
  fontTTF = fontStruct[font];
  fontStyle = "";

// Now I set my fontSwf file to my TTF filename, but without the ".TTF" extension
if (fontTTF != "")
  fontSwf = ListFirst(fontTTF, ".");


I hope this was helpful and not ridiculously confusing. As I said, I am happy to email you some files, but I do not want to attach files to a general posting. Other than my full fontStruct for every TTF, I have included all of the relevant code in here.

 Steven

Ashi

unread,
Dec 18, 2009, 12:22:24 AM12/18/09
to Flex ObjectHandles
Hey ya.. I am facing the same problem. The compilation process gets
darn slow if I embed the fonts.

Steven Rubenstein

unread,
Dec 18, 2009, 12:42:03 AM12/18/09
to object...@googlegroups.com
Not sure what to tell you except don't embed the fonts. :)

My method loads the fonts dynamically as they are needed. You can also use the CSS method which loads the fonts when the swf is loaded, but does not compile them. I can't tell you whether this is more or less efficient though than compiling them into the swf. In general, I would suggest only compiling a font directly into the swf if you know it will be used, and if you only need to embed 1 or 2 fonts. Even then, don't forget you can choose to embed only the necessary characters.

 Steven

jagbir

unread,
Dec 22, 2009, 5:07:56 AM12/22/09
to Flex ObjectHandles

@Ashi

Well i found the solution for the slow compilation time ..check out
the video on this link..

http://www.axelscript.com/2008/10/03/improving-compile-times-with-runtime-css/


my compilation problem is solved

Reply all
Reply to author
Forward
0 new messages