Sunday 22 September 2013

Adobe Edge Animation CC : Tutorial

In order to make the interactive web, I tried to learn about Adobe Edge Animation. Because it's already week 5 so I need to speed up. I learn basic skill and try to make simple interactive website. Adobe Edge Animation give me a tutorial to animate things, text, and many more.


On this tutorial, I'm using 800px x 400px size resolution. I'm using Lamborghini as my trial. For the first, I put Lamborghini Logo and put the keyframe to arrange the timing. On the timeline, I put action script to make the Logo can be click and go to the next session.


I put sym.play on the action script, so that if we click on the Logo, the Logo will be disappeared (Opacity from 100% to 0%). 


After I click the logo, the the second session is I write "Introduction", so I tried to animated it like a moving text animation. So I set up the keyframe for Location and also Opacity. I put keyframe from left to right from the location followed by the opacity, from 0%-100%-0%.


After put the moving text, now I tried to put the model. I set up the keyframe by using opacity.


In this session, I learn how to animate using motion path. I tried to make the word "Explore" using Easing. So, arrange first location and location. After that, arrange the line by using easing. 


At last I tried to put the sliding picture which means the next session. So I put the action script on the "Explore". The picture will be slliding from right to left.



In here, I got the problem to stop the animation, after the picture come out, then it automatically go back to the previous screen. I still search how to solve that, I tried to put stop at the last keyframe by using action script, but still got error. 





I tried to Preview into my google chrome and this is the result.





What I learn so far are I learn about the Action Script to animate, learn the timing, and using Motion Path..
I tried to speed up because I realized that I was too relax. So I tried to catch all and learn as much as I can. 


No comments:

Post a Comment