For this assignment (Adobe Gen Pro Animation course, May 2015, Class 2), we were to create a simple non-interactive HTML motion graphics sequence, using Edge Animate, to market our “school, subject, year, class, or club.”
 
Choirs are a type of club, so I chose to market a Christmas concert for the Glen Ellyn-Wheaton Chorale, in which I sing. This project embeds a flyer for our previous (2014) concert, but a simple file change will update the project to accommodate any year.
 
The skinny: Enter a dark blue background, hinting of winter at night. Unseen snowflakes melt onto the camera lens as a scene fades in, showing a Christmas tree, made of snowflakes, under a night sky. The tree’s “star” twinkles; other tree snowflakes follow suit. Letters fly in from the upper-right corner of the sky and form the name of the chorale. Once complete, the name flashes and introduces the chorale’s mission statement; the flash leaves both name and mission statement glowing*. The tree continues to twinkle while the concert flyer fades in, accompanied by music eighth notes that fall as snowflakes. The tree’s “star” twinkles one last time and all is still. The entire sequence lasts around 22s.
 
*The “glow” is static, not animated.
 
Here is my Google Drive link to this project, where you can see it in action: https://googledrive.com/host/0BwIBFbaAk4bufkYyVmtGdGplYXlBT216WkNhNWFBc05hYzJ4X1JtUnZnc1MtOVFhT01jZnc
 
Below are a few screen shots, with explanations of how I created this project.
The first image above is the original background image (Pixabay, CC0 by geralt). The second is my edited version. I like this image and wanted to use it, but to do so, I had to overcome a pair of issues:
 
Black borders
I had planned from this project’s inception to drop music notes from the sky as snowflakes, but I could not do that from outer space (the black border). I needed more sky.
 
Solution: In Photoshop, I extended the original image’s striated “sky” into the upper black border, by selecting the border and running Edit / Fill / Content-Aware. I had to do this one small area at a time, however, using Ellipse, Rectangle, and Polygonal marquee tools, or the Content-Aware fill process would pull in unwanted artifacts, such as the top of the tree. Even after all of that, I had to additionally Spot-Heal several areas. I then attempted similar techniques on the bottom black border, but in the end decided just to crop it off.
 
Circles to the left of the tree
I wanted a clean background on which to place my own objects. I also could not justify, in the context of my project, why these odd little circles, which are clearly neither snowflakes nor ornaments on a tree, were there in the first place. I also did not want the viewer to have similar thoughts.

 
Solution: I tried to Spot-Heal the circles out of the image, but the results were not clean. In the end, I decided to build them into the animation...
I “fixed” the circle issue in Edge Animate, by creating the illusion of snowflakes melting on a camera lens. I built this illusion on three concepts:
 
Opening Rectangle hides the obvious
I set the sequence to open with a dark blue Rectangle object that covers the entire stage, hiding the scene and all of its question-raising circles.
 
Scene fades in slowly
I set the scene image to fade in over two seconds, with an EaseInQuad easing to slow its entrance even further. These characteristics give plenty of time to set up the illusion before the viewer is any the wiser.
 
(Side note: Nearly all of the transitions in this project use Quad-related easings, i.e., EaseInQuad, EaseOutQuad, or EaseInOutQuad. A small number use EaseOutCirc; only one uses Linear.)
 
Ellipses change the obvious
I created seven small Ellipse layers and placed them directly over the brightest circles. I gave each Ellipse a shade of blue to match that of its corresponding circle. I set them all to enter after the Rectangle, but before the tree becomes visible, and fade in and out over different durations. As these are the first visible objects, the viewer accepts them as important. Since the remaining circles are less bright, and since the oncoming scene draws the viewer’s eyes to other parts of the background, the viewer assumes that these remaining circles somehow entered the sequence in the same manner as the first seven.
 
The viewer safely surmises that unseen snowflakes landed on the camera lens and melted. The circles are justified; the viewer believes they “should” be there.
 
The image above shows the timeline for the seven Ellipses. Additionally, the top of the image shows the initial positions of the music-note snowflakes that fall later in the sequence, as well as the initial positions of the letters (bunched together in the upper-right corner) that eventually fly in to form the name of the chorale.
Shortly after the background fades in completely, the tree’s snowflakes begin to twinkle. I create this illusion by placing copies of an ice crystal image (Pixabay, CC0 by geralt) over particular snowflakes on the tree and quickly fading them in and out.
 
I could have used Ellipses (again) to create the twinkle effect, but I wanted something more realistic. Specifically, I wanted an image that looked similar to the tree’s “star” snowflake, which the author replicated in seven well-distributed locations across the tree.
 
I found such an image by the same author, but it came only with a black background. I deleted (via numerous Photoshop Magic Wand selections) as much of this black background as practical, from both without and within the crystal, while retaining enough black coloring to maintain the crystal appearance.
 
I layered a small copy of the transparent-background crystal over each of the eight chosen snowflakes, including the “star,” and set each to fade in and out very quickly and at seemingly random times.
I wanted the “star” to twinkle more than the other snowflakes, so to it I added a second, larger copy of the image and set it to fire just before the smaller version finishes and at only 25% Opacity. (100% Opacity makes it distracting; at 25% Opacity, the viewer barely registers it.)
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:
 
Fonts
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.
 
Name fly-in
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.
 
Flash
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.
 
Tree twinkles
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.
 
Delay
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.
During the last part of the sequence, the concert ad appears, several music notes fall from the sky as snowflakes (partial timeline shown above), and the tree snowflakes finish their twinkling.
 
Specifically:
 
The concert ad fades in slowly, complete with a white Outer Glow to help it stand out and match the effect of the already-glowing text.
 
The music note “snowflakes” each draw on a single PNG file of the eighth-note character from Finale’s Maestro font. Spread across five columns, eight such notes start above the stage, gently fall straight down (i.e., transition their Top/Y positions) at seemingly random yet overlapping intervals, and disappear below the stage.
 
While the music snowflakes fall, the tree snowflakes continue to twinkle. However, since the text is fully in place and the scene is generally quiet, the twinkling returns to the same rate as at the beginning. Finally, the star twinkles one last time and all is still.
GEWC Web Ad
4
59
0
Published:

GEWC Web Ad

This simple, non-interactive, HTML5 motion graphics sequence uses Edge Animate to market a Christmas concert for the Glen Ellyn-Wheaton Chorale, Read More
4
59
0
Published:

Tools

Creative Fields