Last week I had the need to animate a mask over a dynamic text field. Having loaded the content successfully, and setting the dynamic text field to the value of the XML, I then initiated a mask transition that affected the display of the dynamic text. (Ive mocked up a set of simple examples to demonstrate).
A. Not working
[kml_flashembed movie="/blog/swf/notworking.swf" width="400" height="160" fversion="7" /]
Now, Ive used Flash for a very long time, and have never had this problem, so I was (and still am to be honest) baffled as to why, after the transition was complete, my dynamic text field lost its content, because it seemed like such a simple thing to do.
Let me point out a few things.
- The dynamic text field was inside a Movie Clip
- There was NO keyframes in the movie clip. IE, there was only one instance of it on the stage
- The font was embedded
- The mask was a keyframed shape animation and NOT set at runtime
I did some research to see if others had the problem, and found out that masking dynamic text has been a battle ground between designers and Adobe for many a year. I’m posting my solution to the problem here for you to use, or comment on, or improve. Is it a bug? Is it known behavior? Im not sure, but here’s how to reproduce both the problem, AND 2 solutions :
1. Reproduce the problem
After finding a solution, I set out to reproduce the problem in a simple movie… but initially I couldn’t. This made me question whether there was, in fact, a problem after all.
B. Working, but not solving the problem
[kml_flashembed movie="/blog/swf/working_nomc.swf" width="400" height="160" fversion="7" /]
Turns out, in the example above, the reason it works is because the mask was applied DIRECTLY to the dynamic text field – whereas in my project at work I had applied the mask to a Moive Clip that inside it had a dynamic text field. So, there’s a solution right there… however this DOES NOT answer the question, and is a very limiting solution -imagine you wanted to fade the dynamic text out or move it’s location… it would need to be INSIDE a Movie Clip.
2. Understand the problem
So, in step 1 I was able to narrow in on what the issue actually was – which turns out to be specific to masking a dynamic text field that is in a movie clip. The next thing I did was to try and find out why it was going wrong. To do this, I tried a few things :
- change the location of where I set the dynamic text
- change the way I mask the movie clip
- try remaking the text field
- try viewing in a browser as opposed to the IDE
- searching the web for answers
Of the above, the only thing that began to work was changing where I set the dynamic text. This sounds crazy, but it appeared that Flash was equating a keyframe in the mask animation to a new instance of the movie clip!! Which meant that each time there was a keyframe, I had to reset the dynamic text – because in this “new instance” no properties had been set. I know (at least I hope) this isn’t what’s actually happening, but anyway, it got me closer.
3. The solution
Where did that leave me? Well, initally, quite annoyed. Because my animation was quite involved, it would mean that i’d have to have actionscript on each keyframe setting the value of the dynamic text… which is a COMPLETE WASTE OF TIME and space.
So, trying one last thing, I decided that I would set the value of the text field in an onEnterFrame handler instead.
onEnterFrame = function(){
textMC._data = "Lorem Ipsum Dolor Sit Amet";
}
This I know is a messy solution, but it was the cleanest I could come up with, and more importantly… it works! See for yourself :
C. Working!!
[kml_flashembed movie="/blog/swf/working.swf" width="400" height="160" fversion="7" /]
4. Gotchas
Now this is wierd… if the onEnterFrame handler occurs OUTSIDE the scope of the mask and Movie Clip, when you delete it (the onEnterFrame that is), the dynamic text will disappear. The below example is the same as the working example, the only difference is that the onEnterFrame belongs to the _root timeline.
D. Not working again, because of scoping problem
[kml_flashembed movie="/blog/swf/notworking_scope.swf" width="400" height="160" fversion="7" /]
I told you it was wierd!!!
5. Links
If you have any suggested improvements id love to hear them. Below is a list of the FLAs used in this post ( Flash 8 ).