Trial and error is right for an artist. Picture Renoir dabbing at his picture and stepping back to squint at it, over and over.

Drawing That worked for drawing and painting, for years.

Scripts That even worked for scripts, when those were ten-line scripts in ActionScript 2, and she could find an example to start from.

XML But now she buys components for the price of dinner and wine, and configures them with XML. XML is unforgiving. A little off, and you’re left with nothing, a wild nonsense. Dab and squint rarely works.

Yes, she could validate and test her work, step by step, as programmers do. But that leaves behind the dab-and-squint she loves. She makes a clockwork of colors that coil and cog and turn. Could she work with angle brackets and descriptive words instead? Sure. Without joy, though, for her or us.

ActionScript 3 is traumatic to her. Flash was whimsical until lately, and she would dash together her own ten-line script now and then, copying an example she found somewhere, and altering it by trial and error. Trial and error is right for an artist. Picture Renoir dabbing at his picture and stepping back to squint at it, over and over. That worked for her ActionScript as well, until now.

Now she has hundreds and sometimes thousands of lines of ActionScript inside her pages, automating her effects so she can vary them faster.

Vary more, not less? Wouldn’t ActionScript and its components make her pages more uniform, more alike?

Not necessarily. Much of her work has always been repetitious, a set up she does on every page before she calls in her artistry. Now script does the tedious routine and she jumps directly to the artistry unique to each.

She has mixed feelings. I don’t recognize myself lately, she tells me. I used to sing and dance while I worked.

Right, we can’t lose that. Only the artist knows (if anyone knows) what makes or breaks her kind of work.

For example, she recently had three ambitious components on a single page, and somehow they were fighting one another. I told her she would need two hats now. In her artist hat, she wants to lay out everything at once, to see everything together. In her scripting hat, she wants to add components one at a time, making sure of each combination before adding more.

But some days she just wants to shut down the computer and doodle on the wall instead. I know the feeling. That’s when I stop help my fourth-grader build a balsa villa like the one Michelle Pfeiffer built in One Fine Day; or she comes with me to trim tree branches around our Internet wires.

Two things I remembered this week, while the wife is away two weeks on a business trip, leaving Dad in charge of homework and eating and activities and injuries and whatever else might come up…

I will remember this next time I pick a project manager. First do the job you ask others to do, so you know what you’re asking of them, and how to measure their effort and result. And how to help them do it.

Each kid brings home a planner now. Each different. Gotta size up the spec. What did the teacher mean here? You copied this from the board? Your friend wrote this in your planner while you were in the bathroom? The teacher didn’t write it, just said it? What does he usually mean when he says that?

Like that project to automate the settlement of derivatives at JPMorgan.

Gotta plan the evening for the worst case. What has to get done by bedtime? What could wait till morning? What could kill us Thursday night if not done same day, at the start of the week?

Your teacher could not have meant that, you say.

No, no, that’s what she meant! I’ll get in trouble!

Like writing that spec at Morgan.

Here’s a trick, you say, to make this faster for you.

Oh no! We’re never gonna be done. Can’t we just put the answer?

Like building from that spec at Morgan.

Or this, the worst.

No, Dad, this is easy, I have this trick. Watch.

Your eyes light up. That’s the spirit! That’s my girl! No one said this had to be hard.

You watch. Your heart sinks.

No, not so fast, you say. This problem is harder than it looks. No way around that.

Her trick? A trick on you. Or is she honestly tricking herself? (Honestly tricking? What’s that?)

She wants so badly to be done, can’t believe how much we have left, wants to find a magic wand, a trick, like the tricks you’ve been pushing all evening, but for once a trick that takes less time, not more.

Good job, you tell her at the end, past her bedtime, as you pack up papers and folders, getting everything in its place. Good job when you quit crying. Good job when you got off the floor and looked at me again. Good job when you found all the papers you threw behind the table.

Like when we went for drinks after twelve hours at Morgan, and watched the clock again for the last train home…

The second thing? That I knew but had forgotten?

The people.

However hard the trigonometry, however hard the long division or logarithms, however hard the DC circuit, however hard the derivative settlement, it’s nothing next to the people, and how hard the people are to figure out.

Beginning with me, figuring out and catching all the ways I don’t want to see how long and hard this job will be, done right.

Harder yet? Remembering Yes, sometimes there actually is a trick, a shortcut you’re missing, an easy way. Remembering as you cross the desert like Laurence of Arabia on his camel, thinking nothing can kill you, or stop you, or pull you off course… Looking up from the sand and remembering Butch Cassidy and The Sundance Kid, leaping a cliff and riding a swift stream away from sure death, back to the joys of life.

Flash CMS. How is it done? How can it be done? How make a Flash site that extends to more and more of the same over time? As your client-list grows, say, and you have more of your best work to showcase, as does your client.

My artist shows me a beautiful Flash website done in NYC. She and I lived and worked in Manhattan for years, but she has gone to the far side of the International Dateline now, and I have gone to the baby farms outside the city for my young family.

The stain may never leave those gnarled fingers:

I am thinking of angels and aurochs, the secret of durable pigments, prophetic sonnets, the refuge of art…

Two decades of Smalltalk and Assembler and C++ have left no such trace on my fingers, unless maybe this tremor….

Actually, I have never seen her fingers, not even by webcam.

Why can’t we do what they do, she asks. With my work…

She sends me beautiful Flash sites of her own, each with a long dizzying timeline in two or three dozen layers (neatly grouped layers), a library of beautiful drawings, and a few dabbles of older ActionScript 2 scattered throughout it all.

My first attempt sounds like e e cummings:

Suppose Flash is mostly menus…

Even the Flash page that has its own menu…

The page itself is a menu…

A large beautiful menu…

A menu does not carry your information, only points at it…

As a menu does not contain Red Snapper Stew, but points at it…

Suppose Flash does not carry your information, only points at it…

How do you fit more Associates onto your Flash page, as they come and go over time…

Or fit more press releases…

Or fit more clients in your showcase…

Or let your clients showcase more clients…

Your Flash page can point to a limitless mix of items, because you only point to the limitless mix, you don’t carry it…

Videos, PDFs, other pages, other sites, Red Snapper Stew…

To a component guy, this is an old and comfortable and well-worn distinction, and a life-saver. You script something called “myAge” and it contains a two-digit number. You script something called “myPicture” and no, it does not contain your picture, just the place to find your picture, a separate picture somewhere, a jpg file in its own image folder. “myPicture” only points to it, but that’s good enough.

You want Flash like “myPicture” not like “myAge”.

Then, specifically, the web sites she brought me, good and bad:

Scrolling:

The HotSizzle Studio (this is not actually their name) site, for example.

On their Press page (a swf):

• each link launches full item into its own new window, not into same Press page (swf)
• the links scroll with a custom-drawn scroller
• the links “float” (no box, scroll on page background within invisible boundaries)

You could go on forever this way, link after link, whistling like a Hobbit.

Not like that other site, which shall remain nameless:

• link not a link: contains entire item, not a link to a larger item
• standard issue scroller on white box
• white box with boundaries matching nothing

Sorry, starts bad, gets worse. Has a short life. Not short enough though, this sad life.

Thumbnail Menu (Toolbar)

The HotSizzle Client page has “toolbar” (or thumbnail menu) that races onstage like the Rockettes.

Each thumbnail brings up the same image at a larger size, and a caption, some text, and a link to full example at another site.

As with Press page, the links take us elsewhere for the full item. Here we get a tiny fixed-format text, no scrolling:

• picture caption, a dozen plain-fact words
• client:
• produced by…
• photography by…
• launch link
• alternate launch link

Credits…

Actually, that larger image is just the first of an image sequence. Image sequence does not scroll, however, but uses Paging Links.

Come to think of it, the Thumbnail Menu itself is just another variation on Paging Links…

You could go on forever this way, sauntering happily along.

In Short

From your HotSizzle example, I tell her, we might derive a HotSizzle Law for the Control and Confinement of IWVLS, where IWVLS (pronounced “oovals” or “ewvals” or maybe even “evils”) are Items of Widely Varying Length or Size.

HotSizzle Law for the Control and Confinement of IWVLS

Or:

How to Include All Those IWVLS Without Trashing Your Beautiful Flash Design

• no texts or other items of widely varying length or size within the Flash page
• instead link to such items (IWVLS) elsewhere
• list of links, however, may expand to any length
• but each link itself is strictly fixed in length and size, not an IWVLS
• links scroll discreetly across the page background, within invisible boundaries
• links scroll with cool little custom scroller
• Confine IWVLS:
• outside the Flash page
• each on its own page,
• usually html, that page…
• smaller, that page…
• floats, that page, over the main page
• (how many words does it take to sidestep “pop-up” ?)

Yes, I tell my artist friend, we could do what HotSizzle does, and more, and for less.

How? Components. aka Gadgets.

Like those gadgets you buy now, I tell her, except that we make our own.

Two kinds of Page Linking gadget, for example. An OutOfTheBoxScroller gadget.

You would start your work with our gadgets. Put your work into them (as you do now, when you buy these somewhere).

We make slow going for ourselves when we draw directly onto the main timeline, and then retrofit for a gadget effect.

By gadget effect, I mean: Easy to place any number of them, as needed. As needed over time.

HotSizzle has a big gadget for their Studio page. Their artists start with that gadget, and put their work into it. The gadget is made with ActionScript. The timeline for this page might be entirely empty. At runtime an ActionScript looks at the latest XML to see how many copies of that gadget to make.

As we did with our FaceCards.

In Short In Short (at the risk of oversimplification):

To catch HotSizzle and pass them, we need:

• no timeline: an empty single-frame timeline
• gadgets from first to last: all artistry put inside of ActionScript gadgets
• gadgets: my invisible ActionScript (to your specs)
• visuals: your skins, your content…

Component is my middle name, though I sometimes skip it:

John Hicks
Cerium Component Software Inc

No code today. Do you get paid for making a difference, or paid for code? Because unless you arrange to be paid for making a difference, you could write the wrong code year after year, the more the wronger, the wronger the more.

Until one day you pause for a no-code what-are-we-actually-doing-here day.

Can I script her site so that clients can make minor adjustments without her?

Well, how minor?

Like the changes they want again and again during development. One pic in place of another. Different wording in a blurb. Like that.

Yes, I say. The answer is always Yes. Yes, software can tie your shoe, if you invest enough. Then the question shifts. What would the client pay for that?

Make or break, says the Flash artist. They might never use this. But they might not want my site if I’m the only one who can fix every little thing.

I see. I know the feeling. I don’t want in until I know a way out. Don’t want to feel trapped.

The client may never use this, but won’t proceed without it. Won’t use, and won’t skip.

Ok, I get that. Understanding the tech tools is always the least of our challenges. We think people make no sense whenever they make more sense than we can keep up with.

So I research Flash CMS. Am I wrong, or are these just Easy-Flash-Substitutes by another name? If you start with this or that Easy, then changes are, well, Easy. What starts Easy stays Easy. Start there, stay there, trapped in Easy.

No use to my Flash artist.

She shows me a Fla with three dozen layers on the timeline, and three dozen symbols in the library. For every symbol in the library, another few texts or whatever play along the timeline without showing in the library. Static Text, many of them.

How script her work without breaking it? Then, how get each runtime text or picture to the right place inside the whirling shooting gallery of Flash?

First, promote Static Text to Dynamic Text. Script can do nothing with Static Text.

Ah, Dynamic Text can render HTML, I see. Including the <img> tag. Great then, we promote bitmaps to Dynamic Text as well, and set their htmlText to <img…>. One trick to replace both pictures and texts.

Now, how get new HTML to those text fields, from outside Flash at runtime?

For the moment I won’t detail all my false starts. XML, to begin with. Easy enough to get XML into Flash at runtime, including HTML wrapped in a cheerful and welcoming <![CDATA[ and ]]>.

But Flash is a shooting gallery inside. Your target comes and goes, on top of (inside of) something else that comes and goes, like ducks in a shooting gallery, on a tiny ferris wheel that jogs into view from one side and vanishes at the other. The eye of your duck opens and closes as he rises and falls on the ferris wheel. You have a blue eye for the red-eyed duck, thanks to XML, but first you must catch him.

My XML told me how to find him. I felt like a bicycle messenger in Manhattan. What room, what building, what street. And what hours? No use to find the place when your guy is out. Where then? Find the container of the container of the container. The Over state of a SimpleButton, for instance, with another busy container inside, and our duck among the jumble there. And what hours? I needed earliest frame and latest frame for that button.

Yes, at last I learned to run down that duck and deliver his new blue eye. But what if he moved to another address? If my Flash artist edited the Fla much, I had to rewrite the directions to my duck.

Meanwhile I found a good demo of HTML in Flash. My Flash artist was impressed. Hmmm, I thought, he is delivering new HTML to Flash from JavaScript.

Flash supplies an ExternalInterface for talking to JavaScript in the browser that runs Flash.

Suppose instead of chasing down that duck to deliver a new blue eye, I taught the duck to come get it?

So I wrote a TextFieldJS class. It contains my TextField (the Dynamic Text promoted from Static Text) and the ExternalInterface. TextFieldJS looks to the JavaScript in the browser for its runtime value.

That JavaScript looks like this:

1. <script type="text/javascript">
2. var jsReady = false;
3. var arrHtml = new Array();
4. arrHtml["FrontPic"] = "<img src=’istockphoto_4383679_petri_dishes_for_medical_research.jpg’ width=’380′ height=’253′>";
5. arrHtml["FrontBlurb"] = "A multi-media presentation incorporating 14 Cultural Trends including:<li>Trends behaviors and attitudes</li><p><li>Underlying psychological need states</li><p><li>Emphasis on why? vs. what?</li><p><li>Evolving cultural examples from food, fashion, music, tech and retail arenas</li><p><li>Customized concepts using trends for your brand</li><p><li>Group dynamic Trend Exercises</li>";
6. function isReady() {
7. return jsReady;
8. }
9. function pageInit() {
10. jsReady = true;
11. }
12. function getValue(aID) {
13. return arrHtml[aID];
14. }
15. </script>

And to tell Flash it’s ready:

<body onload=”pageInit()”>

Each TextFieldJS calls getValue() with its own unique name, “FrontPic” or “FrontBlurb” in this example.

From the browser, JavaScript responds with new HTML for the TextField. In the case of “FrontPic” that’s

<img src=’istockphoto_4383679_petri_dishes_for_medical_research.jpg’ width=’380′ height=’253′>

Now we’re updating text and pictures inside Flash at runtime.

Here’s TextFieldJS

1. package cerium {
2. import flash.display.*;
3. import flash.text.*;
4. import flash.external.ExternalInterface;
5. import flash.utils.Timer;
6. import flash.events.*;
7. //sprite contains our TextField; convert TextField to symbol (MovieClip);
8. //whether TextField shows bitmap or html text;
9. public class TextFieldJS extends Sprite {
10. //m_TextField.htmlText = ExternalInterface.call(kJavaScriptFunction,m_ID);
11. //calls JavaScript getValue(aID) in HTML shared by entire Flash movie and every TextFieldJS therein;
12. //therefore need string ID
13. private const kJavaScriptFunction:String = "getValue";//no parens
14. public var m_ID:String;//as known to JavaScript
15. //TextField we converted to symbol:
16. public var m_TextField:TextField;//unless Automatically Declared Stage Instances
17. private var m_TickCount:int;
18. public function TextFieldJS() {
19. m_TextField.border = false;
20. m_TextField.background = false;
21. m_TextField.alpha = 1;
22. m_TextField.multiline = true;
23. m_TextField.wordWrap = true;
24. if(ExternalInterface.available) {
25. try {
26. //ask browser if JavaScript ready:
27. var isJavaScriptReady:Boolean = isJavaScriptReady();
28. if (isJavaScriptReady) {
29. getValue();
30. }
31. else {
32. m_TextField.text = "JavaScript not ready. Starting timer.";
33. //timer calls browser at 100ms intervals;
34. //once the browser replies ready, stop timer;
35. m_TickCount = 0;
36. var aTimer:Timer = new Timer(100);
37. aTimer.addEventListener(TimerEvent.TIMER,onTimerTick);
38. aTimer.start();
39. }
40. }
41. catch(aError:SecurityError) {
42. m_TextField.text = "Security error: " + aError.message;
43. }
44. catch(aError:Error) {
45. m_TextField.text = "Error: " + aError.message;
46. }
47. }
48. else {
49. m_TextField.text = "No external interface available.";
50. }//end available
51. }
52. private function getValue():void {
53. m_TextField.text = "";
54. m_TextField.htmlText = "";
55. m_TextField.htmlText = ExternalInterface.call(kJavaScriptFunction,getID());
56. }
57. private function isJavaScriptReady():Boolean {
58. var isReady:Boolean = ExternalInterface.call("isReady");
59. return isReady;
60. }
61. private function onTimerTick(aEvent:TimerEvent):void {
62. m_TickCount++;
63. m_TextField.text = m_TickCount.toString(10);
64. var isReady:Boolean = isJavaScriptReady();
65. if (isReady) {
66. //done with Timer
67. Timer(aEvent.target).stop();
68. }
69. }
70. protected function getID():String {
71. return "no override";
72. }
73. //method
74. }//class
75. }//package
76. //
77. // Copyright 2008 John Hicks, Cerium Component Software Inc.
78. //
79. // Available under the terms of the Creative Commons Attribution-Share Alike 3.0 Unported license:
80. // http://creativecommons.org/licenses/by-sa/3.0/
81. //
82. // need not find TextField by traversing Display List containers with our runtime value;
83. // instead teach TextField, however deeply hidden, to reach out for its own runtime value;
84. //
85. // JavaScript in Html:
86. //
87. // <script type="text/javascript">
88. // var jsReady = false;
89. // var arrValues = new Array();
90. // arrValues['Pic_Taste'] = "<img src=’TextField_Pic.jpg’ width=’95′ height=’69′>";
91. // arrValues['Text_Taste'] = "<br><p align=’right’>\"<i>So what?</i>\" you say?</p>"’
92. // function isReady() {
93. // return jsReady;
94. // }
95. // function pageInit() {
96. // jsReady = true;
97. // }
98. // function getValue(aID) {
99. // return arrValues[aID];
100. // }
101. // </script>
102. // </head>
103. // <body bgcolor="#000000" onload="pageInit()">

My Kind of Linkage Box

The art people hand you a Fla with a dozen symbols that you want to manage with a single ActionScript class.  Now what was that trick Moock described?

The symbols are Frump1, Frump2, Frump3 and so on.  They do complex things.  Lots of ActionScript.

Frump1 could never be mistaken for Frump2 by the art people.  But to your ActionScript they do the same things.

You don’t want to repeat the ActionScript each time, copy and paste, copy and paste, Frump1, Frump2….   Later if you get something wrong you have to fix it again in every Frump.

No, you want Frump1 extends Frump.  The family resemblances go into Frump, the Frump ActionScript class.  That leaves Frump1 and Frump2 looking bare, just the skeleton of an ActionScript class.  Fine, if they only differ outwardly, as drawn by the art people.

So you click Linkage for Frump1 in the library. Linkage links sketches to scripts, art work to ActionScript.  Puts the motors inside the dolls for Tim Burton’s Corpse Bride.

Frump1, the box says up top, the symbol name from the library.  Movie Clip,  you say, not Button or Graphic.  Export for Actionscript, check.  Export in frame one, check.

Now the empty box for Class.   You want to type:

Class: Frump1
Base Class: Frump

But the box below already says:

Base Class: flash.display.MovieClip

There’s a way.  You’ve done it many times.  But you can also get this wrong, and go around and around for the next hour.  You’ve done that too, many times.

What was the trick Moock showed us?  The little rain dance you do.  Give Flash one of these and let Flash generate the other.  But which?

Flush that, Flash.

So I wrote my own Linkage Box.

Now, after I write the ActionScripts for Frump and Frump1 (which extends Frump), I pull up my Linkage Box.

I select Frump1 in the library and select SetClass from the Command menu.

A box asks me to confirm

Symbol: Frump1

Then in my own Linkage Box I write:

Class: Frump1
Base Class: Frump

“Done!”

So here’s the Command.  SetClass, a JavaScript inside Flash.

To put this on your Command list, put SetClass.jsfl in a Flash folder.  Mine is

c:\Users\John\AppData\Local\Adobe\Flash CS3\en\Configuration\Commands

Two files actually.  One is SetClass.xml, which makes the box you see:

1. <dialog title="Options" buttons="accept,cancel">
2. <grid>
3. <columns>
4. <column />
5. <column />
6. </columns>
7. <rows>
8. <row>
9. <br />
10. </row>
11. <row>
12. <label value="class:" />
13. <textbox id="aClassName" value="" />
14. </row>
15. <row>
16. <label value="base class:" />
17. <textbox id="aBaseClassName" value="" />
18. </row>
19. </rows>
20. </grid>
21. </dialog>
22. <!-- Copyright 2008 John Hicks, Cerium Component Software Inc. Available under the terms of the Creative Commons Attribution-Share Alike 3.0 Unported license: http://creativecommons.org/licenses/by-sa/3.0/ -->

Then SetClass.jsfl

1. function setClass() {
2.  
3. var aDoc = fl.getDocumentDOM();
4. var aLib = aDoc.library;
5.  
6. if(aLib.getSelectedItems().length == 0) {
7. alert("Select library symbol!");
8. return;
9. }
10. var aLibraryItemName = aLib.getSelectedItems()[0].name;
11. alert("symbol: " + aLibraryItemName);
12. var aInput = flash.getDocumentDOM().xmlPanel(fl.configURI + "Commands/SetClass.xml");
13. if(aInput.dismiss != "accept") {
14. alert("Ok, cancel.");
15. return;
16. }
17. aLib.selectItem(aLibraryItemName);
18. aLib.setItemProperty("linkageExportForAS", true);
19. aLib.setItemProperty("linkageExportInFirstFrame", true);
20. aLib.setItemProperty("linkageClassName", aInput.aClassName);
21. aLib.setItemProperty("linkageBaseClass", aInput.aBaseClassName);
22. alert("Done!");
23. }
24. setClass();
25. <!-- Copyright 2008 John Hicks, Cerium Component Software Inc. Available under the terms of the Creative Commons Attribution-Share Alike 3.0 Unported license: http://creativecommons.org/licenses/by-sa/3.0/ -->