Step By Step For Animating Icons In Adobe Edge

Here is where I got the vectors from for my social media icons. The ones you don’t see links to were already on my computer from a previous project.
pin
http://business.pinterest.com/en/brand-guidelines

last fm
http://www.psdicons.net/2013/06/20/last-fm-icon-psd-png/

spot
http://vector4u.com/logo/spotify-logo-vector-download/

I created a new file in Edge and made the size 24 x 24.
1 new file

Next I went to File > Import, selected the Grey image and Colour image and clicked open.
2

After I had resized them to fit the canvas I made a spacer that was 13 pixels high. This will ensure all my animations are uniform.
3

To make the animation smooth I highlighted both images and made them into a symbol, this allowed both images to move together.
4_

I made sure to untick ‘Autoplay Timeline’.
5_

I then dragged the pin across the timeline to 0.078 seconds. This would be the length of time that the movement would take.
6

Now I could select the image and press the down arrow key until the coloured image was in the grey images previous position.
7

I then inverted the transition by right clicking and selecting ‘Invert Transition’. This means that at 0 seconds, the grey image is visible.
8

To stop the animation from autoplaying once the page was loaded I had to untick autoplay on the stage layer.
9

To make the animation interactive I clicked on the ‘Open Actions’ button in the timeline. This brought up a menu with different trigger options.
10

I clicked on mouseenter and clicked on the play button in the menu on the right. This meant that once the user’s mouse hovered over the animation it would play.
11

The next one was mouseleave. I selected playreverse, meaning that once the user’s mouse left the animation it would play backwards.
12

13

The last one was click. This was so I could link to the correct social media website.
15

I had to Google how to do this and found a useful website that had the solution, shown below.
14
http://stackoverflow.com/questions/17173379/how-do-you-open-a-link-in-a-popup-window-in-edge-animate

To make sure people knew it was a link that could be clicked I changed the cursor to ‘pointer’.
15_5

Edge allowed me to preview in a browser so I could test it before exporting.
16

I had to change the publish settings as the default is set to ‘Web’, I required it to be ‘Animate Deployment Package’.
17

I simply clicked the correct option.
18

Once I had exported the animation, I could place it into Muse.
19

I navigated to the animation file and clicked open.
20

I then placed it into its correct position.
21

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s