by Elaine Chao
For those of you who don’t know me, I am one of the quality engineers on Edge Animate and work directly on the product itself. As a part of every release, our team releases a couple of sample files in our Edge Animate Showcase to get users started. My contribution for the Animate CC was Floral Match Maker, which is a game rolled into an advertisement. Several users have asked how the project was built, so I thought I would break down the project into its component parts and talk about how I made each part of the scenario work.
The first topic I’d like to introduce is that of dynamic colors. This is a technique that Sarah first introduced in the “Catch Cracidae” game, which had a number of pastel birds fluttering across the screen for you to click. I liked it so much that I brought it into this sample file, which featured a number of flower ornaments that moved like a hanging wind chime.
This article is intended for novice users of Animate who may not have a deep coding background.
Topics covered in this article:
- leveraging transparency in an asset
- getting a reference to an object in a nested symbol
- assigning colors to a managed object
The screen shots and project files from this post are based on Edge Animate CC, which is available for a free 30 day trial via the Adobe Creative Cloud and is included in any paid subscription to the Adobe Creative Cloud.
The Only Image Asset
Since this file was supposed to be an advertisement, I wanted to ensure that the smallest number of assets were used. Since I had seen the Catch Cracidae sample, I wanted to recreate something like it. Using Adobe Fireworks, I created a PNG32 file that relied on transparency and opacity.
As you can see from the screenshot, I created an ellipse that had a black background with some level of opacity set, a solid yellow ellipse for the center of the flower, and two five point stars, one of which had an erase filter and the second of which had a lighter opacity setting (about 30%). After exporting into PNG32 to give me the flattened file, I was ready to work in Animate.
My exported asset ended up being 2k, which meant that the download overhead would be very small for this project.
A Single Flower
If you look at the finished project file and double click on the “simpleFlower” symbol, you will see the setup for the flowers I used all over this project. As you can see, it’s the image with an ellipse behind it. In order for me to see it, I set the ellipse to red (#ff0000) as a temporary placeholder within my project. By placing the ellipse (which I renamed “background”) lower in the Elements Panel, the color displays through the transparency of the PNG. As you can see, the darker segment automatically provides a darker shade of the background color.
I’ve skipped over the creation of the intermediary symbol (“flower”), which adds the thread upon which the ornament hangs and handles some of the movement, as I plan to cover the movement in another post. In the “cascadingFlowers” symbol, I have seven flowers that now statically hang on the stage. Move the playhead to about 4 seconds on the symbol’s timeline to see all of them.
Open up the code panel and select the “creationComplete” event under cascadingFlowers, or simply select the Open Actions button next to the cascadingFlowers line in the elements panel.
The second chunk has a for loop, which will step through each one of the objects in the flowerNames array and assigns a hue.
The magic of dynamic colorization happens in the next two lines, which I’ll explain in detail:
The first line creates an RGB string, which looks something like this: “rgb(XXX, YYY, ZZZ)”. This is a string that can be passed as a parameter to jQuery’s css assignment method in the second line, therefore setting the background-color to a particular RGB hue. There are three segments in the string, which I’ve denoted as XXX, YYY, and ZZZ. Each one of these numbers is created in the same method.
Let’s start from the inside out.
Math.random() will return a random fractional number between 0 and 1. 256 is the max value for each one of the RGB parameters, so you’ll get a value somewhere between 0 and 256 when it’s multiplied against the random number we just created. Then, since it’ll probably be a fractional number (like 100.5206234) and the CSS value has to be an integer, we wrap this number with
Math.floor() to round down to the nearest whole number. Finally, we want to shift all of it into the pastel range by adding 50 to each value. We then call this code three times, one to get the red value, one to get the green value, and one to get the blue value, and join them all together using the + operator into the hue variable.
Now that we have the RGB value, we can assign the current flower in the loop to the color. We’ll do this in a series of
getSymbol() calls to drill down to the current flower’s “background” element. In order to do this, we have to look up the current flower name, the flower inside of the instance, the simpleFlower within that instance, and finally, get the DOM handle of the “background” element. We then can call the .css() assignment operator and assign this new value to the “background-color” CSS property.
With an asset with some transparency and some fancy coding, you can put together a colorful, randomized set of assets that doesn’t require you to create separate images for each color. Have questions on this technique? Edge Animate engineering staff and great community members answer questions in the Animate user forum.