Step By Step For The Welcome Page In Adobe Edge Animate

To make the welcome page for my website I had to use a program called Adobe Edge Animate. I first placed the images onto the canvas. I learnt the technique from this video. https://www.youtube.com/watch?v=PpvmKRb1rSQ

Using File > Import I added in all the images that I would need.
20

The way this works will be that each image will fade from 0% opacity to 100% opacity one after another. This should give the effect of the page having a video background.

I created a black box using the rectangle tool that would fade in and out as the transition was taking place. This made the background black between fades.
21

So first I clicked on the Toggle Pin button and dragged the pin across the timeline.
22
23

Once the pin has been dragged along the timeline I could change the Opacity in the top left corner.
24

I did the same for the black layer.
25

I realised I could just copy and paste these transitions and invert them if needed. So now it was just a matter of getting them into the correct order.

Here you can see a step by step of the correct order. This is about half way through the animation. The purple layer you can see fades out while the black layer (in pink) fades in. After that the black will fade out while the next image fades in from 0 opacity.
1
l
Now 4 seconds further along the timeline I copied a transition and pasted it. I inverted the transition so it was now 100% to 0%.
565

Now you can see it is 100% to 0%.
2
l
I did the same for the black box except this was 0% to 100% so it would fade in.
3
ll
Using copy and paste I set the black to go back to 0% and set the next image to fade in.
4
l
Moving along 4 more seconds I have added in the transition to fade the black in again.
5
l
I copied another transition and pasted it onto the correct image, setting it to fade 100% to 0%
6
l
This is now the end of the animation. I needed it to loop on the page so I had to search Google on how to do this.
7

I found a usefull article here on the subject. http://www.cyprich.com/2012/09/05/how-to-create-a-loop-in-adobe-edge-animate/
10

Following the instructions on the link, I clicked on TimeLine and navigated to Insert Trigger.
8
l
This box appears and this is where I typed in this.play (0);
9

Now I just closed this window and when previewed the Timeline loops.
11

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