Creating Color Fade Animations

If you have ever wanted to fade the color of an Altia vector object from one color to another, you might have noticed that it is not natively supported in the Animation pane (as of the time of this article -- referring to Altia Design 11.1 and earlier).

However, while color fading is not a native feature of Altia Design, you can still achieve it in a few different ways:

First, the simple work-arounds...


Below these two quick work-arounds are detailed methods to achieve "real" animated color fades. Please continue reading if you need more options than the work-arounds will provide.

1) Cross-fading 2 or more images can occasionally achieve the desired color fade effect.

2) Do the color fade animation in Adobe After Effects, Photoshop, or any other graphics tool, then export a sequence of images to play back using a Deck object.


How to do it "for real"...


Method 1: Use a script or formula to generate XML that describes a color fade animation:

This method describes the use of an Excel formula to create XML that describes an animation which changes the RGB value of an object over many states.
To use the attached Excel sheet's color fade animation generator, please follow these steps:

1) Open the attached Excel sheet called template_create_gradient_animation_v3.xlsx, then enter the desired values into the excel sheet near the top left (start color RGB, end color RGB, number of steps, every Nth step):

2) Copy and paste the generated result (the green cells) of the spreadsheet into the "state" portion of the start.xml file. I've added a comment within the start.xml code to show you were to paste the Excel output into the XML.

3) Save the modified XML as mycolofade.xml or whatever file name you wish.

4) Load the modified XML into Altia Design (Insert ribbon - > XML...), and notice you now have a shape with color fade animation on it, as shown in the attached colorfade.dsn file.


Method 2: Use custom C code to do the color fading, and output the changes per step to Altia using the API:

This method describes changing the RGB color algorithmically in case you wanted to create your own solution using Statemate or custom C code.

The principal is very similar/identical to this application example found on an arduino site.

Where that logic is doing the actual assignment statements per loop cycle during the cross fade, you would have to inject API commands into your solution to do the following per cycle:

AtSendEvent(connectId, "altiaSetObj", idOfCircleShape);
AtSendText(connectId, "altiaColorFgObj", "redVal greenVal blueVal");

Here are the synopses of the built-in animations are relevant:

Send the object ID of the object whose color is to be modified to this animation - must be called first!

===FG vs. BG depends on if you are changing fill or outline, and outline is used for Text I/Os.

Send a string to this animation containing an RGB value (such as “46 20 00”) or the name of a color (such as “red”) to change the foreground color of the object set by the altiaSetObj built-in animation.

Send a string to this animation containing an RGB value (such as “046 200 0”) or the name of a color (such as “red”) to change the background color of the object set by the altiaSetObj built-in animation.

===If you want to pulse its opacity during the cycle steps, here is that function, too:

Send a value from 0 to 100 to this animation to change the opacity of the object set by the altiaSetObj built-in animation. Sending 0 will make the object completely invisible and sending 100 will make the object completely solid.


Method 3: Use the attached dsn file that uses Control code to achieve color fading.

This method uses Altia Control code to do much of the same thing the C logic above does. To use this method, please do the following:

1) Open the attached color_interpolate.dsn file

2) Select object ID 3 named "change my properties" in Navigator.

3) Using the Propeties pane, change the the initial and final RGB colors.

4) Put Altia Design into Run Mode, and use the slider to see the change, or make logic to drive the "color_input" animation value from 0 to 100 to complete the color fade.


Have more questions? Submit a request


Please sign in to leave a comment.