07/01/2019 - ______ (Week 1 - Week 7)
Liam Yue Wei (0327686)
Interactive Animation
Lecture and Tutorial
Mr.Razif and Mr.Jeffrey
Mr.Razif gave us a tutorial on using Adobe Animate CC, it is best to use HTML 5 when we create a new file, the default size for the canvas is w550 h400 but we can always change the size according to the size of the website.
FPS = Frame Per Second
Therefore, higher FPS = smoother (because more frames)
Usually people would use 25 - 30 fps...
For game = 60 fps.
For film = 30 fps.
He then added that for the project in this semester should have 30 fps too, plus, it is easy to count.
Shape cannot do tweening.
Create the shape > Right-click > Convert to symbol > Type: Movie Clip (most powerful)
To make it into a navigation button, need to select Type: Button.
Everything else is either movie clip or graphic, but it is best to use movie clip if we are not sure which one to use.
ps: If the shape has outline, need to double click it to select the whole thing.
Right-click on the timeline> Insert keyframe> Click anywhere in between the 2 keyframes > Create classic tween.
On the right side under properties > Tweening > Classic tween (drag to change the number).
Ease out = getting slower
Ease in = getting faster
Exercise 1 (1 second for each movement)
1. Make the circle move from top left to top right.
2. Move the circle from top left to bottom right.
3. Move from bottom right to bottom left.
4. Move from bottom left to top left.
5. Move from top left to center and pause for 1 second.
6. Scale up and explode.
7. Come back scale down and fades in as a triangle.
8. Rotate in place 3 times.
9. Morph to a rabbit.
10. Make the rabbit bounce and go out of the screen.
Liam Yue Wei (0327686)
Interactive Animation
Lecture and Tutorial
Mr.Razif and Mr.Jeffrey
Week 1
Lecture
Mr.Razif has given us a brief on the module, in this duration of 7 weeks, we need to complete one assignment.He gave us the freedom to choose between 2 assignments, which is either interactive website or interactive storytelling. If we choose to do interactive website, we can do it in Adobe Animate CC. However, when it comes to interactive storytelling, we can choose to do it with Unity or Adobe Animate. He also suggested us to visit the website https://www.awwwards.com/ to get some inspiration for our website.Tutorial
-No tutorial as both lecturers have instructed us to do research on interactive websites to get inspirations for assignments-Week 2
Lecture
-No lecture-Tutorial
14/01/2018Mr.Razif gave us a tutorial on using Adobe Animate CC, it is best to use HTML 5 when we create a new file, the default size for the canvas is w550 h400 but we can always change the size according to the size of the website.
FPS = Frame Per Second
Therefore, higher FPS = smoother (because more frames)
Usually people would use 25 - 30 fps...
For game = 60 fps.
For film = 30 fps.
He then added that for the project in this semester should have 30 fps too, plus, it is easy to count.
Shape cannot do tweening.
Create the shape > Right-click > Convert to symbol > Type: Movie Clip (most powerful)
To make it into a navigation button, need to select Type: Button.
Everything else is either movie clip or graphic, but it is best to use movie clip if we are not sure which one to use.
ps: If the shape has outline, need to double click it to select the whole thing.
Right-click on the timeline> Insert keyframe> Click anywhere in between the 2 keyframes > Create classic tween.
On the right side under properties > Tweening > Classic tween (drag to change the number).
Ease out = getting slower
Ease in = getting faster
Exercise 1 (1 second for each movement)
1. Make the circle move from top left to top right.
2. Move the circle from top left to bottom right.
3. Move from bottom right to bottom left.
4. Move from bottom left to top left.
5. Move from top left to center and pause for 1 second.
6. Scale up and explode.
7. Come back scale down and fades in as a triangle.
8. Rotate in place 3 times.
9. Morph to a rabbit.
10. Make the rabbit bounce and go out of the screen.
In order to make the object fades out, click on the symbol > color effect > change to Alpha.
Shape Tween
We cannot do shape tween for movie clip. So, make a copy > go to next frame > insert blank keyframe > paste > right-click > break apart (go back to a symbol) > go to the next frame > create blank keyframes > make more shape > create shape tween in between the keyframes.
15/01/2018
Mr.Razif gave us another tutorial class. We started by doing a bouncing ball in Adobe Animate CC. I did it with 30 seconds (3 keyframes), the ball starts from the top and get to the bottom in the middle key and top again in the last one.
I made the 1st half 'Classic Ease: -100', whereas the 2nd half 'Classic Ease: 100'.
Mr.Razif then taught us to make one new keyframe at the 16th sec, then shift + drag the keyframe to the right to extend the keyframes. Then, make sure that there are 3 keyframes (grey color), the ball should be squeezed in the middle keyframe. To make the squeeze and squash look more obvious, we can extend the keyframes even more.
Insert > New Symbol (Shift + F8 ) > Copy the frames from 1st scene > Go to the bouncingball and paste it > Delete the layer in 1st scene > create new layer > From the library, drag mc_bouncingBall to the 1st scene > In the 1st scene, make a 90 second interval keyframe, then drag from the left to the right.
Lastly, press ctrl + Enter to preview, because the effect can't be seen in the Adobe Animate but only in the preview.
Button:
- Create a new layer > Make a square/ rectangular> Convert to symbol Button 'btn_....'
- Double click the shape, and there will be UP, OVER, DOWN, HIT
- Can't do animation in here, but can change the visual of the button...
- Over is when the mouse hover ...
- Down is when you click on it.
- Hit doesn't show any visuals, it only helps decide the hit area around the button.
- After that, At the frame of Over Animation, convert the shape to Movie Clip > Double click > Make keyframes for every frame, and delete the keyframes in bewteen so you have 1 0 1 0 1 0 1 0.. preview and you can see the animation.
Mask Layer:
Find an image (one layer), put one more layer above, make one shape, then right click > mask
Homework:
Do your button animation effects for mouse over and mouse down... up to me for the effect.
Week 3
- Create a new layer > Make a square/ rectangular> Convert to symbol Button 'btn_....'
- Double click the shape, and there will be UP, OVER, DOWN, HIT
- Can't do animation in here, but can change the visual of the button...
- Over is when the mouse hover ...
- Down is when you click on it.
- Hit doesn't show any visuals, it only helps decide the hit area around the button.
- After that, At the frame of Over Animation, convert the shape to Movie Clip > Double click > Make keyframes for every frame, and delete the keyframes in bewteen so you have 1 0 1 0 1 0 1 0.. preview and you can see the animation.
Mask Layer:
Find an image (one layer), put one more layer above, make one shape, then right click > mask
Homework:
Do your button animation effects for mouse over and mouse down... up to me for the effect.
Week 3
Comments
Post a Comment