News, Inspiration & Stories about our Multimedia Software

Website animations – transform your website for Valentine’s Day

Website animations – transform your website for Valentine’s Day

St. Valentine’s Day is on the way, and pink hearts are everywhere. So if you want to shower the world with love, now’s the time. Learn how to create a magical rain shower of hearts on your website.

 

If you’re not interested in Valentine’s Day, you can exchange the hearts with snowflakes in winter or colorful leaves in fall. You can also use our basic guide below for inspiration for your own creative design ideas.

Create an animation:

Since an animation is composed of several single images, first you need to create the individual frames. For example, if you want to make a circle move from the bottom left to the top right of the screen, the first frame will be the circle at the bottom left and the second the circle at the top right.

When you export the animation as a Flash file or open the Flash preview, the program automatically calculates the keyframes to create a fluid movement.

 

Use the following options to animate an object:

→ Movement: Make an object move from one position to another

Scale: For enlarging or shrinking objects

Distort: For squashing or skewing objects

Rotate: For rotating objects

Transparency: To adjust transparency evenly in objects

Color change: Make objects turn a different color

 

Create the first frame:

→ To create an animation document go to “File” → “New” → “Animation”.

→ Draw objects on the white workspace for your starting point (we’ll use a row of hearts to create our rain shower of hearts)

Screen 1

→ Give each individual object a name using the (ICON) symbol so that the software can easily assign this to the respective position in the second frame.

Screen 2

Then create the second frame:

The second frame is for applying the effects you want to display during the animation. We want to make the color darker and change the position of objects in order to simulate a shower of rain.

→ In the “Animation Frame Gallery”, click on “Copy”.

The second frame now looks exactly the same as the first. Now you can move, rotate, color in or distort objects.

We’ll change the color of the hearts to a darker shade and move the row to the bottom edge of the screen.

Screen 3

To check the end result, we’ll use the preview in the “Animation Frame Gallery”.

The color gradient and movement of the hearts is all calculated automatically and displayed by the program. Determine the frame display time by right-clicking and clicking on “Frame properties”.

Our shower of hearts is now finished, so all we have to do is save it as a Flash file. If you’d like to try out more, you can add more frames or create other cool animations.

 

Adding the animation to your website:

To integrate your newly-created animation in your website, you need to create a placeholder over the object where you want to display the animation.

Because we want our rain shower of hearts to trickle over the entire page, we’ll draw a rectangle that covers it all.

Screen 4

And now all you have to do is:

→ Select the object

→ Go to “Placeholder” under “Extras” > “Web Properties”

→ Go to “Replace with Flash” and open your saved Flash file

→ Click “Apply” and then “OK”

Screen 5

Now it’s your turn! Pimp your website with cool Valentine’s Day animation. Don’t have a website yet? No problem. Download the free trial version and try it out yourself with one of our website templates.

Author

This part time member of the MAGIX team is originally from Berlin and has been with us since August 2014. In her free time she attempts, among other things, to photograph the various apects of the people around her which have been characterized by the big city.

Leave a Reply

Your email address will not be published. Required fields are marked *