Sprockets

A fine Flash artist asks:

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()">