CSS Support in Flash MX 2004

Todd, this is a bit off topic, but is there any word on kerning improvements in flash? It kills me that I have to outline headers and such in illustrator and import them as shapes to get decent kerning. This simple flaw really increases document size and development time.

todd, did you notice a big slowdown in the actionscript editor? any tips or tricks to speed it up? or keep it from anti-aliasing the fonts? i'm on os x. thanks!

Until Macromedia implements margin-top and margin-bottom, it *is* a shame that paragraphs don't have the default separation they carry in most (all?) web browsers. Once implemented, though, it will be ideal. Given CSS, there should be no default formatting for any (X)HTML tags. Users should have to define stylesin their user-style sheet, or they should come pre-defined in a default browser stylesheet such that they can be entirely removed. XHTML is semantic, not presentational. (heck, you could even make the case that display:block/inline should not be pre-determined. Is that going too far?)

Thanks for the review, Todd. So in-depth! A very nice service you've provided to the community…

RE: brianp

MX 2004 is noticeably faster on OS X than the last version (not that the last one was all that slow). The ActionScript editor "feels" great, as does the rest of the UI. Alias-text is now an option (thank God) in the application, and can be invoked two ways. One - when physically adding a text field to the stage, and selecting the Alias text option in the property bar. Two - by adding a font to your library, and selecting Alias text in the import window. This way you can create dynamic text fields, create a TextFormat object based on your library font, and apply the style to your text field.

Todd, I think brian p's question might pertain to application-level font anti-aliasing (in the AS pane), thinking that it might be slowing it down. Brian, if that's what you're talking about, I think there's some resources at www.macosxhints.com.

I should be getting the free Studio upgrade soon, I'll post some thoughts on my site if time allows. Peace!

Thanks Todd. There's still lots of documentation in the pipeline, for things such as CSS handling, JavaScript communication, the various new components, more. These will appear in the Flash Support Center and Developer Center as the come online.

Right now the only mention of specifics is the skimpy section in the Release Notes: "The Text Style Sheets feature is an implementation of a small subset of CSS much like Flash's HTML text fields support a small subset of HTML. Cascading Style Sheets (CSS) is a simple mechanism for adding style information (e.g. fonts, colors, spacing) to Web documents." This does obviously need to be beefed up.... ;-)

Thanks for your work on this... I'll blog it and use it to dog the other folks on the team.... ;-)

Regards,
John Dowdell
Macromedia Support

thanks for the input guys, i was specifically thinking about the as editor pane within the application, as i usually edit code with Geneva 9 and it draws anti-aliased in the editor with some odd spacing issues. i tried setting the font to a fixed width font ( Monaco 9 ) which cleared up the spacing, but i couldn't disable the anti-aliasing in the code editor without changing it on a system level, which then fiddles with all the other apps. i did manage to use some of the miniml fonts and they drew "aliased" which i suspect is because of the tight outlines, but basically the code was just much harder to read and slower to scroll through. its the only app i've noticed those speed issues with.

Why do i feel like we are reliving the "wow, listen to this keyboard sound like a guitar" scenario?

Maybe it's obvious, but I thought it worth noting you can style any tag, even if it's not part of the small subset of HTML that Flash supports. So you can add a font-family (or whatever) for body and it'll be inherited, as long as the HTML you put in the text field is wrapped in a body tag. You can even make up a new tag and style it!

Maybe a bigger barrier to sharing CSS files between HTML docs and Flash is that comments within a style declaration block and/or empty rules will cause the stylesheet to be completely ignored.

“wow, listen to this keyboard sound like a guitar”

if that quote means what I think it means, then it is exactly how I feel.

The level of css support is nothing less than I truly expected, though I had hoped for more. Just like their html support, it's not really html at all. Just html tags used to get rich text formatting. Now it's another (css) interface to get the same limited text formatting.

I couldn't care less (I think) about this level of support, and wish macromedia had spent their precious flash player bytes on something else, or not at all. Waste of space.

if you want true CSS2/3 support, a more decent XHTML implementation and neat stuff like SVG or XForms to name a few, in Flash 6, feel free to check out DENG:
http://mozquito.com
http://mozquito.com/features.html
http://claus.packts.net/deng/examples

The thing I like most about CSS support is the way that you can define styles for any tags, including non-html tags. That means, for example, you can just stick a raw XML feed into a field and use a stylesheet to determine how it will be displayed.

Well, that is useful. Thanks Peter.

I seem to be having problems setting the Font from within my CSS to be a font that is embedded within my .swf. Is it possible to set the font as one that is embedded within my .swf file?

Also, is it possible to capture the a href that is used within the HTML Textfield?

Any ideas are appreciated.

Thanks in advance-
Yuki

Just in case anyone is still frustrated with not having a gutter between

tags, I've built this solution:

xhtml = new XML();
xhtml.ignoreWhite = true;
xhtml.load("someSource.html");
xhtml.onLoad = function () {

massage(this);
target_txt.htmlText = this;

};

massage = function(xml,node) {

if ( !node ) { var node = xml; }

for ( var pnode = node.firstChild; pnode; pnode = pnode.nextSibling ) {

if ( pnode.nodeName.toLowerCase() == "p" ) {
pnode.appendChild(xml.createElement("br"));
}

// recursively search through deeper nodes
if ( pnode.hasChildNodes ) { massage(xml,pnode); }
}
};

There are several very important things that I would love to see improved on the textField object. My interest in Flash, fonts and text fields is not so much in display, but in editing. Some key things that need to be addressed to make Flash a platform for a better CMS editor:

- Currently, applying a stylesheet to a textfield will result in the textfield becoming read-only. It would make life much easier if this were not the case.

- There is no way to reference where the "cursor" is inside of the HTML based on the user's selection in the textfield (which only references the .text property). It would be nice if the textField (or Selection object) had a currentNode() function, which would return an XMLNode which represents the node that the user's cursor is sitting in. With this small addition, it would be possible to add CSS styling to Flash-based HTML content editors.

- Another key problem is handling of linked text. In a flash editor, once you link text, it becomes nearly impossible to unlink it. This is because the link remains active in editing mode, and when the user selects the text to unlink, the onMouseUp event that generates opens the link. It would be very beneficial if the behaviour of linked text could change while the text field is editable (maybe similar to MS office applications where you need to hold CTRL to follow the link?)

- List markup and numbered lists. Currently the Flash rendition of HTML does not wrap a series of <li> blocks with the <ul> tag, like it should for good form. It can be a challenge to add after the fact. Also, numbered lists would be nice.

Those are some of the major obstacles that I've faced trying to develop a flash-based HTML content editor. With these few things resolved, you could take Flash CMS use to a whole new level and open a huge market for Flash in this area. There is a LOT of interest by many developers to use Flash for CMS solutions, because of obvious reasons.

Your community calls out to you, Macromedia!

i m an immeture flash animator. i request all the flash animators and web designers to suggest me a way to implement Style Sheet like technique in my presentation.
-Vamsi krishna.

If you save the world too often, it begins to expect it.

Arrrrgggghhhhhh... I've got a nice dynamic text box that reads it's content from a set of external files. Simple... however, the client now wants the test justified. Infact, they're insisting on it.

I *stupidly* thought the new css support in mx2004 may allow me to format the text in this way, but i'm once again disapointed by macromedia's half arsed attempt to include a feature that would be dead good if they hadn't gone off and done something else half way through.

Thanks for this review by the way, it saved me hours of code writing... :p

Specifying the leading / line-height through a CSS is indeed not possible but if you set it (using actionscript) in the _styles part of the of the Textfield.StyleSheet object it will work. So anyone any experience in overruling the default CSSParser?

It's even easier, agd these lines of code to your styleSheet.onLoad section and the leading/line-height will work!

for (stijl in this._css) {
if (this._css[stijl].lineHeight != undefined) {
this._styles[stijl].leading =
Number(this._css[stijl].lineHeight.slice(0, this._css[stijl].lineHeight.indexOf("p")));
}
}