Jump to content


Photo

Text Rendering via API in Fireworks CS4


  • Please log in to reply
9 replies to this topic

#1 videoninja

videoninja

    Fireworker

  • Members
  • PipPipPip
  • 38 posts

Posted 04 March 2009 - 11:39 AM

Hi All,

Well, I have finally gotten back into the Extending Fireworks game, and am quite excited about the opportunities that the CS4 release of Fireworks represents, but I digress. Let's talk text.

I am referencing the CS4 API documentation and am looking to simply add text to a blank document using just the API.

I grab the text tool, click onto a blank canvas, see my cursor, type "B" and then click the pointer tool to finish up. I highlight the text tool entry in the history panel, copy the commands, and paste them into Dreamweaver CS4 to start optimizing them for re-use. It looks like this code:

fw.getDocumentDOM().addNewText({left:283, top:186, right:0, bottom:0}, true);
fw.getDocumentDOM().setFillEdgeMode("antialias", 0);
fw.getDocumentDOM().setTextCustomAntiAliasSharpness(192);
fw.getDocumentDOM().setTextCustomAntiAliasStrength(64);
fw.getDocumentDOM().setTextCustomAntiAliasOverSample(8);
fw.getDocumentDOM().setTextAutoKern(false);
fw.getDocumentDOM().setTextAntiAliasing("smooth");
fw.getDocumentDOM().setTextOrientation("horizontal left to right");
fw.getDocumentDOM().setTextStream("IC8wIDw8IC8xIDw8IC8wIFsgPDwgLzAgPDwgLzk5IC9Db29sVHlwZUZvbnQgLzAgPDwgLzAg\u000DKP7/AEEAcgBpAGEAbABNAFQpIC8yIDEgPj4gPj4gPj4gPDwgLzAgPDwgLzk5IC9Db29sVHlw\u000DZUZvbnQgLzAgPDwgLzAgKP7/AE0AeQByAGkAYQBkAC0AUgBvAG0AYQBuKSAvMiAwID4+ID4+\u000DID4+IF0gPj4gLzIgPDwgLzAgWyA8PCAvMCA8PCAvMCAo/v8pID4+ID4+IF0gLzEgWyA8PCAv\u000DMCAwID4+IF0gPj4gLzMgPDwgLzAgWyA8PCAvMCA8PCAvMCAo/v8AWQBhAGsAdQBtAG8AbgBv\u000DAEgAYQBuAGsAYQBrAHUpIC81IDw8IC8wIDAgLzMgMSA+PiA+PiA+PiA8PCAvMCA8PCAvMC
Ao\u000D/v8ARwB5AG8AbQBhAHQAcwB1AFkAYQBrAHUAbQBvAG4AbwBIAGEAbgBrAGEAawB1KSAvNSA8\u000DPCAvMCAwIC8zIDMgPj4gPj4gPj4gPDwgLzAgPDwgLzAgKP7/AEcAeQBvAG0AYQB0AHMAdQBZ\u000DAGEAawB1AG0AbwBuAG8AWgBlAG4AawBhAGsAdSkgLzUgPDwgLzAgMCAvMyA0ID4+ID4+ID
4+\u000DIDw8IC8wIDw8IC8wICj+/wBZAGEAawB1AG0AbwBuAG8AWgBlAG4AawBhAGsAdSkgLzUgPDwg\u000DLzAgMCAvMyAyID4+ID4+ID4+IF0gLzEgWyA8PCAvMCAwID4+IDw8IC8wIDEgPj4gPDwgLz
Ag\u000DMiA+PiA8PCAvMCAzID4+IF0gPj4gLzQgPDwgLzAgWyA8PCAvMCA8PCAvMCAo/v8ASABhAHIA\u000DZCkgLzUgPDwgLzAgKP7/ACEAXCkALAAuADoAOwA/AF0AfQCiIBQgGSAdIDAhAyEJMAEwAjAF\u000DMAkwCzANMA8wETAVMEEwQzBFMEcwSTBjMIMwhTCHMI4wmzCcMJ0wnjChMKMwpTCnMKkwwz
Dj\u000DMOUw5zDuMPUw9jD7MPww/TD+/wH/Bf8J/wz/Dv8a/xv/H/89/10pIC8xICj+/wBcKABbAHsA\u000DowCnIBggHDAIMAowDDAOMBAwEjAU/wP/BP8I/yD/O/9b/+UpIC8yICj+/yAUICUgJikgLzMg\u000DKP7/MAEwAv8M/w4pIC80IDEgPj4gPj4gPj4gPDwgLzAgPDwgLzAgKP7/AFMAbwBmAHQpIC81\u000DIDw8IC8wICj+/yAZIB0wATACMAUwCTALMA0wDzARMBUwnTCeMPsw/TD+/wH/Cf8M/w7/Gv8b\u000D/x//Pf9dKSAvMSAo/v8gGCAcMAgwCjAMMA4wEDAU/wj/O/9bKSAvMiAo/v8gFCAlICYpIC8z\u000DICj+/zABMAL/DP8OKSAvNCAyID4+ID4+ID4+IF0gLzEgWyA8PCAvMCAwID4+IDw8IC8wIDEg\u000DPj4gXSA+PiAvNSA8PCAvMCBbIDw8IC8wIDw8IC8wICj+/wBOAG8AcgBtAGEAbCkgLzYgPDwg\u000DLzAgMSAvMSAxMi4wIC8yIGZhbHNlIC8zIGZhbHNlIC80IHRydWUgLzUgMjcuMCAvNiAxLj
Ag\u000DLzcgMS4wIC84IDAgLzkgMC4wIC8xMCAwLjAgLzExIDEgLzEyIDAgLzEzIDAgLzE0IDAgLz
E1\u000DIDAgLzE2IDAgLzE3IDAuMCAvMTggdHJ1ZSAvMTkgZmFsc2UgLzIwIGZhbHNlIC8yMSBmYW
xz\u000DZSAvMjIgZmFsc2UgLzIzIGZhbHNlIC8yNCBmYWxzZSAvMjUgZmFsc2UgLzI2IGZhbHNlIC
8y\u000DNyBmYWxzZSAvMjggZmFsc2UgLzI5IGZhbHNlIC8zMCAwIC8zMSBmYWxzZSAvMzIgZmFsc2
Ug\u000DLzMzIGZhbHNlIC8zNCBmYWxzZSAvMzUgMSAvMzYgMC4wIC8zNyAyIC8zOCAwIC8zOSAwIC
80\u000DMCBmYWxzZSAvNDEgMiAvNDIgMCAvNDMgPDwgLzAgLjUgPj4gLzQ0IDIgLzQ1IDIgLzQ2ID
cg\u000DLzQ3IDAgLzQ4IDAgLzQ5IC0xLjAgLzUwIC0xLjAgLzUxIDAgLzUyIGZhbHNlIC81MyA8PC
Av\u000DOTkgL1NpbXBsZVBhaW50IC8wIDw8IC8wIDEgLzEgWyAxLjAgMC4wIDAuMCAwLjAgXSA+Pi
A+\u000DPiAvNTQgPDwgLzk5IC9TaW1wbGVQYWludCAvMCA8PCAvMCAxIC8xIFsgMS4wIDAuMCAwLj
Ag\u000DMC4wIF0gPj4gPj4gLzU1IDw8IC85OSAvU2ltcGxlQmxlbmRlciA+PiAvNTYgdHJ1ZSAvNT
cg\u000DZmFsc2UgLzU4IHRydWUgLzU5IGZhbHNlIC82MCBmYWxzZSAvNjEgMCAvNjIgMCAvNjMgMS
4w\u000DIC82NCA0LjAgLzY1IDAuMCAvNjYgWyBdIC82NyBbIF0gL0thc2hpZGFzIDAgL0Rpck92ZX
Jy\u000DaWRlIDAgL0RpZ2l0U2V0IDAgL0RpYWNWUG9zIDQgL0RpYWNYT2Zmc2V0IDAuMCAvRGlhY1
lP\u000DZmZzZXQgMC4wIC9PdmVybGFwU3dhc2ggZmFsc2UgL0p1c3RpZmljYXRpb25BbHRlcm5hdG
Vz\u000DIGZhbHNlIC9TdHJldGNoZWRBbHRlcm5hdGVzIGZhbHNlIC9GaWxsVmlzaWJsZUZsYWcgdH
J1\u000DZSAvU3Ryb2tlVmlzaWJsZUZsYWcgdHJ1ZSA+PiA+PiA+PiBdIC8xIFsgPDwgLzAgMCA+Pi
Bd\u000DID4+IC82IDw8IC8wIFsgPDwgLzAgPDwgLzAgKP7/AE4AbwByAG0AYQBsKSAvNSA8PCAvMCAw\u000DIC8xIDAuMCAvMiAwLjAgLzMgMC4wIC80IDAuMCAvNSAwLjAgLzYgMSAvNyAxLjIgLzggMC
Av\u000DOSB0cnVlIC8xMCA2IC8xMSAyIC8xMiAyIC8xMyAwIC8xNCAzNi4wIC8xNSB0cnVlIC8xNi
Au\u000DNSAvMTcgWyAuOCAxLjAgMS4zMyBdIC8xOCBbIDAuMCAwLjAgMC4wIF0gLzE5IFsgMS4wID
Eu\u000DMCAxLjAgXSAvMjAgNiAvMjEgZmFsc2UgLzIyIDAgLzIzIHRydWUgLzI0IDAgLzI1IDAgLz
I3\u000DIC9uaWwgLzI2IGZhbHNlIC8yOCAvbmlsIC8yOSBmYWxzZSAvMzAgPDwgPj4gLzMxIDM2Lj
Ag\u000DLzMyIDw8ID4+IC9QYXJhZ3JhcGhEaXJlY3Rpb24gMCAvSnVzdGlmaWNhdGlvbk1ldGhvZC
Aw\u000DIC9Db21wb3NlckVuZ2luZSAwID4+ID4+ID4+IF0gLzEgWyA8PCAvMCAwID4+IF0gPj4gLz
gg\u000DPDwgPj4gPj4gLzEgPDwgLzAgKP7/AEIpIC8xIDw8IC8wIFsgPDwgLzAgPDwgLzAgKP7/KSAv\u000DNSA8PCAvMCAwIC8xIDAuMCAvNCAwLjAgLzUgMC4wIC85IGZhbHNlIC8yNyAwIC9QYXJhZ3
Jh\u000DcGhEaXJlY3Rpb24gMCA+PiAvNiAwID4+ID4+IF0gLzEgWyAxIF0gPj4gLzIgPDwgLzAgWy
A8\u000DPCAvMCA8PCAvMCAo/v8pIC81IDAgLzYgPDwgLzAgMCAvMSAxOC4wIC8yIGZhbHNlIC8zIGZh\u000DbHNlIC80IGZhbHNlIC81IDE4LjAgLzYgMS4wIC84IDAgLzkgMC4wIC8xNiAwIC8xOCBmYW
xz\u000DZSAvMTkgZmFsc2UgLzIwIGZhbHNlIC8yMSBmYWxzZSAvNTMgPDwgLzk5IC9TaW1wbGVQYW
lu\u000DdCAvMCA8PCAvMCAxIC8xIFsgMS4wIDAuMCAwLjAgMC4wIF0gPj4gPj4gLzU2IHRydWUgPj
4g\u000DPj4gPj4gXSAvMSBbIDEgXSA+PiAvMyA8PCAvMCBbIDw8ID4+IF0gLzEgWyAyIF0gPj4gLz
Qg\u000DPDwgLzAgWyA8PCA+PiBdIC8xIFsgMSBdID4+ID4+", 2946, false);
fw.getDocumentDOM().setTextRectangle({left:283, top:186, right:0, bottom:0});fw.getDocumentDOM().moveSelectionTo({x:281, y:168.55624389648437}, false, false);fw.getDocumentDOM().setTextAutoExpand(true);

For the most part this seems pretty standard, except for the setTextStream(); method. So I looked to the API documentation for the entry for setTextStream(); method. There isn't an entry though. So...

Is there any documentation for this method? I know that many of the older methods for adding and manipulating text will still work, but I am curious. Also, if you copy and paste this code into the Command Prompt panel and execute it, you should get an uppercase "B" in the Arial font with a point size of 18, in black...

Thanks!
~videoninja

#2 bomberstudios

bomberstudios

    FireworksFreak

  • Members
  • PipPip
  • 18 posts
  • Location:Spain

Posted 04 March 2009 - 03:36 PM

If you take the first parameter of setTextStream, replace \u000D by a newline and Base64-decode it, you'll find what looks like a binary stream defining a font/image.

A quick Google search reveals the same strings are contained in PSD and PSB files.

Quick question: what happens if you use a (non system) font for the text, disable the font and then run the code? Does the text appear with the "old" font face?

This looks interesting (in a hackery sort of way : )

#3 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 06 March 2009 - 10:42 AM

Goodness, that's gnarly! I've never seen setTextStream before. I'm 99 percent sure that you don't have to worry about it, though... all my FW8 Text commands (which include creating text on the canvas) omit this method and still run fine all the way through CS4.

#4 videoninja

videoninja

    Fireworker

  • Members
  • PipPipPip
  • 38 posts

Posted 09 March 2009 - 01:33 AM

Bomberstudios and Aaron,

Thanks for the replies. I was not looking forward to deconstructing that text stream, but, it does look both gnarly and hackable!

Mostly I am trying to solve an issue with text rendering that was introduced with the changes to the text engine in CS4. I have a command panel that, in part, makes a bunch of canned button symbols for me and loads them into the document library. One of these buttons has 2 lines of text on it, the first line has a large point size, the second a small point size. (see attached image) Running my panel in CS3 yields the desired result, however in CS4, there is a significant amount of space between the two lines of text. There are also issues where the text formatting isn't working quite the way I would like, hence the renewed exploration of the API. I'll have to keep hammering on my code to build that button and try other means of formatting.

I'll also look into your text commands Aaron. I haven't used them personally, but I have heard good things.

Thanks Again,
~videoninja

Attached Images

  • ac_num_7.png


#5 videoninja

videoninja

    Fireworker

  • Members
  • PipPipPip
  • 38 posts

Posted 16 March 2009 - 11:35 AM

Hi All,

Earlier in this thread I indicated that there were a few issues I was trying to address via the API, but I didn't mention what I am hoping to accomplish.

I am making a panel that will create a series of button symbols and stash them in the document library. When I need a specific layout of buttons, I request the required buttons from the document library and lay them out based on some pre-existing rules. All of this happens via the command panel I am updating to CS4.

The button that is giving me so much trouble is one that has a T9 text input label on it; like a phone. Presumably, I can make 1 T9 button, add it to the library, and then deal them out into the common telephone layout (using: dom.insertSymbolAt(t9_button,{x:10,y:10});). All I would need to do is change the text on each instance of the T9 button to make the dialpad. Changing the text is handled programatically when the buttons are placed (using dom.replaceButtonTextStringsInInstances(someText, false);).

The digit on the T9 button needs to be 2x as large as the characters beneath it.

If I manually drag an instance of my T9 button to the canvas, it appears perfectly fine. If I attempt to change the text manually (or via the API for that matter) the font size and formatting for the characters beneath the digit is lost/overriden. Please see the attached .PNG. It has the button symbol in it, so you can fool around and see the formatting being lost if you choose.

Any thoughts out there on ways that I can maintain the formatting? If I go and re-format the string inside the button instance, I get a new setTextStream() javascript snippet that hasn't been documented/deconstructed as yet.

I just don't want to resign myself to the inefficient "solution" of making 12 T9 buttons with different text values in my document library just because I can't programatically change their text values after they have been created.

Also, the method for setting the text formatting is included in the code-box if you wanted to run that, turn the result into a button, then deal that to your canvas...

Thanks again in Advance,
~videoninja

[codebox]var stored_selection = new Array();
stored_selection.push(fw.selection[0]);
fw.getDocumentDOM().addNewText({left:10, top:10, right: 60, bottom: 60}, false);
var tr = fw.selection[0].textRuns;
tr.textRuns = [{changedAttrs: {fillColor:"#000000", face: "Arial", size: "24pt", alignment: "center"}, characters: "7"}];
fw.selection[0].textRuns = tr;
stored_selection.push(fw.selection[0]);
fw.selection = stored_selection;
fw.getDocumentDOM().setTextRuns({ initialAttrs:{ alignment:"center", antiAliasSharpness:192, antiAliasStrength:64, baselineShift:0, bold:false, face:"Arial", fillColor:"#000000", horizontalScale:1, italic:false, leading:.5, leadingMode:"percentage", overSample:8, paragraphIndent:0, paragraphSpacingAfter:0, paragraphSpacingBefore:0, rangeKerning:0, size:"24pt", underline:false }, textRuns:[ { changedAttrs:{ }, characters:"7"+"\u000D" }, { changedAttrs:{ size:"12pt" }, characters:"pqrs" } ] });
fw.getDocumentDOM().setTextRectangle({left:0, top:8, right:50, bottom:41.600002288818359});
fw.getDocumentDOM().moveSelectionTo({x:-2, y:6}, false, false);
fw.getDocumentDOM().setTextAutoExpand(false);[/codebox]

#6 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 16 March 2009 - 01:16 PM

Hm, that's unfortunate, it definitely broke in CS4 and got missed. Definitely submit it on the wishform.

Do you get the same behavior if you omit the linebreak, as if the "uniformAttrs" param of dom.replaceButtonTextStrings() just isn't working at all? Or is the linebreak throwing it off?

I don't have much experience with using Button symbols and the text property it supports (honestly I didn't even know of the text feature related to buttons until fairly recently) so my only suggest is a different route: have you looked into Rich Symbols (aka Widgets/Components) at all? I'm certain you could get it to behave, though I'm not sure it would fit into the rest of your panel's workflow as is, but it might be a place to start.

You could then just make two text properties set them separately, or possibly use Text.textChars which will maintain styles in my experience.

#7 videoninja

videoninja

    Fireworker

  • Members
  • PipPipPip
  • 38 posts

Posted 17 March 2009 - 03:19 AM

Aaron,

I submitted the bug to the wishform this morning. I hope that this is a re-submittal of the bug and the Fireworks Team is already working on the fix in the Updater. If not, at least it is now on record. I also posted the script so they can see what is happening based on my example.

Best,
~videoninja

Attached Images

  • fwg_t9.png


#8 videoninja

videoninja

    Fireworker

  • Members
  • PipPipPip
  • 38 posts

Posted 17 March 2009 - 03:20 AM

Aaron,

I submitted the bug to the wishform this morning. I hope that this is a re-submittal of the bug and the Fireworks Team is already working on the fix in the Updater. If not, at least it is now on record. I also posted the script so they can see what is happening based on my example.

Best,
~videoninja


I wonder why the attachment moved...

#9 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 17 March 2009 - 11:05 PM

I'm not sure I entirely understand the issue, but if the goal is to have a button background as a symbol, so you can change it once and have it update everywhere, an alternative approach would be to separate the text and background. Put the background into the library as a symbol. Insert it programmatically 12 times to layout the keypad. Then add the text separately, again specifying the size and characters of the text blocks programmatically. That way, you can use the regular text manipulation API instead of messing with button symbols, which might be less buggy.

Changing the symbol would then just update the button backgrounds. You might be able to use styles in CS4 to update the text everywhere, or else just use a script to update the styling on the text blocks.

#10 Adamshefard

Adamshefard

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 22 April 2010 - 02:32 AM

Valuable information which you have discussed in this thread.I enjoyed very well while reading.I will let my friends to know about this for sure.Thanks for providing this for us.