Next in the sequence comes the chorale name fly-in, followed by the “flash” which introduces the chorale’s mission statement and makes the two phrases “glow.”
This section of the sequence presented several issues:
I wanted both phrases (the name and the mission statement) to appear as they do on the chorale’s official Web site banner (www.gewchorale.org), both in font type and size and in relative position. Both phrases use fonts that browsers may or may not natively display. (The name uses Georgia Bold and the mission statement uses Verdana Bold.) The mission statement uses very wide character tracking. In addition, the correct paragraph spacing between the two phrases helps create a text-based logo.
Solution: Rather than trying to tweak Edge Animate text objects to enforce all of these characteristics via loads of CSS, I created all of the text elements (both distinct characters and full phrases) in Photoshop as PNG files. This makes the project larger, but much more consistent as it allows me to place all text elements exactly where I want them.
I wanted to fly the chorale name in from the sky, character by character, but with a professional feel that does not go overboard with effects.
Solution: I set each character to fly in along a subtly stimulating yet consistent Motion Path and with a slight rotation. Specifically, each fly-in character gets its own layer; starts just outside the top-right corner of the stage; follows a Motion Path that initially curves and then flattens out; uses a Quad Easing to decrease speed as it arrives in place; and starts at a minus-10-degree tilt, which flattens out as it arrives in place.
Each character therefore appears as though landing on a runway. The effect is mild and consistent, with only one necessary exception: Each successive fly-in transition overlaps and is slightly shorter than the previous transition, accelerating the fly-ins to accommodate shorter distances as the name completes.
I envisioned the mission statement entering with a dramatic flash (“ta-da”) after the last fly-in. I also wanted the chorale name and mission statement to “glow” afterwards. I also needed a surreptitious way to fix any problems with fly-in letter alignment.
Solution: I set a light blue rounded rectangle to cover the entire text area and to fade in and out while elements change behind it (similar to an actor changing costumes behind the curtain). Specifically, while the rectangle “flashes,” I fade out all individual letters, fade in the complete name (a single PNG file with all letters properly aligned), and fade in the mission statement. I gave each full-text element a high-opacity light blue Outer Glow (Photoshop) effect; the “flash” timing completes the illusion.
It would be distracting if during all of the above the tree suddenly stopped twinkling. It would also be distracting if the tree continued to twinkle at the same rate as before.
Solution: While the various text elements are flying in and/or fading in and out, I set the tree snowflakes to continue to twinkle but less frequently.
Once the name and mission statement are fully in, the viewer needs a short delay to read and digest these before moving on. The delay cannot be too long, however, or the viewer will move on.
Solution: A half-second delay before the next animation seems just right.