Tuesday, September 15, 2009

Another reason to not use flash for ANYTHING except animation

PARAGRAPH SPACING: Essential for typography. Unless you just want you letters to fly around, but if you want you letters to actually be read, you'll want to lay them out with good typography, which requires control over things like the space after a paragraph.

I cant find it anywhere in Flash CS3, maybe its in CS4. Not anywhere is the textformat coding options, oh and dont bother linking to an external CSS file so you get get 'margin-bottom:5px' on yours if you even have them, that isn't supported ethier. MADNESS. Flash seems so light on supporting the most basic and common things people would need to do, and especially designers would need to do. Actually it has improved alot with the aliasing, and its still great for having custom fonts and so on... but... it keeps getting me into a tangle over things that should be easy and standard.

Over an hour trying to find a way to do it, here is a hack that will work great if you are bringing in external text HTML or XML, you make the break space a separate paragraph, and format that paragraph class a small font size, eg4px, or whatever space your after.

The problem is, I want this space on a form field input text, so it would have to have a script that says when user enters carriage return, convert it to a new tag, with class 'paragraphspacing'. I'm not familiar with form fields and how to process and convert their input text on the fly, if that is possible even, because it has to happen as they are typing, not after or before. Or maybe there is a way to say "all carriage returns are new

tags with special class applied... but there was some conflict or reason with the text formatting I'm using that couldn't have a CSS file formatting available, something about the fields and focussing. Or some actioscript that says when user press return, insert invisible PNG 5px high.... anyway, over it.

AND weird bugs in text and images via external HTML file dynamic text boxes (Flash CS3-AS2-OSX 10.4.11 FP 8 or 9 (SAFP8 for making a projector on the mac) Building for a CD-ROM, so not browser specific solutions.

(Using dynamic text fields, in 'properties' panel, it's set to multiline, left justified, HTML enabled, embed font with embed button and uppercase, lowercase, punctuation and basic latin, hyperlinks styled via external css file, text and some images come in via HTML external text file. And each text field on the stage has a bold and italic character typed into it.)

FLASH TEXT WRAPPING BUGS: In this project I wanted text never to wrap around images, but start on new lines under each image. Even when I made the image the exact width of the text field, I found images that were linked to in html text pages had to have this hack around them, to stop text wrapping down the side of the image and strange things like that. Its also important to set the hspace and vspace to what you want because it defaults to 3px or something.

Google textformat leading img it if your having text wrapping problems, actually I tried to find my original ref and couldn't so heres the solution. I cant type code on this blog havn't set it up yet, ob means open bracket and cb means close bracket eg. obpcb is a p tag

(adjust this code before using and delete unnessessary blank spaces of course).

obpcb obtextformat leading="197"cb obimg src="yourimgurl" width="400" height="197" hspace="0" vspace="0" /cb ob/textformatcb ob/pcb

basically, use textformat leading to give the image paragraph a height (same height as your image), and this stops the weird text wrapping down the side of the image one letter per line. UPDATE: I read somewhere that it might have something to do with the images being resized by the textfield, although you don't want them to be. They shrink slightly. I might have had something to do with the hspace and vspace not being set, they default to something like 3px. Not sure though because a letter is certainly alot wider than 3px. Anyway the above fixes the problem well enough for me not to want to know any more.

ASSOCIATED VOODOO: If when you roll over a hyperlink in a dynamic text field with external HTML file content containing images and text, and the text jumps, picture disappears, text wraps one letter per line down the side of the text field or something weird happens, you need to go into your HTML source file, and add SOMETHING after your image link.

Make sure the image link is not the last thing in the source. I simply (in code view in dreamweaver) put my cursor after the last p tag which wraps around the image link, and press return, so the cursor is now on a new blank line. THAT FIXES THE BUGGYNESS. What it does is add an invisible carriage return after it which fixes the problem. (NOTE: this means you have to be extra careful when updating your files not to forget and just haphazardly delete blank lines thinking your cleaning up the code. Perhaps you could add a html comment for future authors and yourself in there to say 'dont delete this line flash needs it) but, i don't want to test if comments cause more problems so ill not do this now). This may even apply to text content without images I cant remember, but try adding a blank character to the end of your HTML source anything is jumping around in your SWF.

IMAGE HEIGHT BUG: Another bug - i cant remember the symptoms now exactly, but in this project the images strictly could not be over 241px high, or they triggered a bug. (Probably jumping around when moused over or disappearing or weird rendering artifacts or text wrapping problems or something.) This bug really limits the use of images via external HTML in your project. If your having trouble with images via HTML dynamic text boxes in Flash CS3, try making the images have a small height, see if this fixes the problem. Use in combination with above fixes.

Yes I narrowed this down the hard way, one pixel at a time to find the 'magic number' of 241px high. Although, this magic number may in some way be related to the proportions elsewhere in my project, such as stage height, or text field height or something, so if the number dosn't work for you jut test with a very small image height to begin with.

ALSO HELPFUL FOR TEXT FIELD JUMPING WHEN TEXT SELECTED BY USER: Another 'buggy' thing I noticed was that the dynamic text field was set to 'selectable', so that when the users mouse is over the text box, the mouse icon changes into a... that bar thingy that you use when typing... anyway, to a user it indicates either you can type, or you can select and copy paste the text. I didn't need this functionality. Also I found it did a buggy thing when there is a extra blank line in your HTML text file (which there was to correct other bugs above) OR your text file dosn't quite fit all its content in the available vertical space of the text field (but it looks like it does visually there is no text missing) when the user selects the text, and drags down to highlight it right to the end of the text field's content, the text field 'jumps' or 'scrolls up' (it is NOT a scrollable text field!) to select the out of sight extra blank line or extra content. This makes my heading at the top of the text field 'scroll' out of sight, not pretty. This problem could be solved by making the text field bigger, but design constraints made this not possible (fixed height design). And I wasn't about to go into adding a scrollable text field with that ugly scrollbar and more unknown bugs to squash.

So the solution for this weird behaviour that looks like a bug is to make your text field 'not selectable'. You can do it either in actionscript if you create your text field that way, or from the 'properties panel' if your text field are made on the stage. Select your text field on the stage and click to toggle on off 'selectable' button, it's the square button, with and Ab on it where the b is highlighted in black.

With these solutions your dynamic text fields with images and text from a external HTML file should not have anymore jumpyness! (note not tested on PC/Win as yet)

My conclusion is that dynamic text fields with HTML images are very buggy in CS3 and best avoided. I had far less problems with just text no images... Maybe its all fixed in CS4 (have fun with the new bones tool...) or CS5... I don't care Flash is not my friend anymore.

HTML AND JQUERY FOREVER.