Flash tutorials


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flash tutorials

  1. 1. FLASH ANIMATIONAmanda Ho 11N
  2. 2. Tutorial 1 – MOTION TWEEN The animation I wanted to design was an animation on Terminal Velocity. My idea for the animation required motion and movement a lot of the time, so I thought preparing and practising using a motion tween would be helpful. A ‘Motion Tween’is a the creation of a series of frames showing the gradual movement or change in the scene and then moving through these frames quickly to create the illusion of movement. In Flash, the frames created flow together smoothly, making animating sliding movements of objects more effective. The website tutorial I used was: http://www.republicofcode.com/tutorials/flash/motion_tweening/
  3. 3. Process of Motion Tween Tutorial Firstly, I made a shape: a circle, and converted it into a ‘symbol in order to start using it effectively in Flash to create an animation. Then, I clicked further along the ‘Timeline to frame 20. I right-clicked and chose the button ‘Insert Keyframe’.Next, whilst still based on Frame 20, I moved my shape toanother spot on the ‘stage’(as it is called).After, right in the middle of the blue highlighted Timeline, Iright-clicked and selected the button ‘Create ClassicTween’. As a result, my shape should move smoothly from its first position as shown above to the next position which is near the right corner as shown in the picture on the right.
  4. 4. Process of Motion Tween Tutorial (Continued)  Additionally, by following the same process as mentioned in the previous slide involving inserting a key frame on a later frame, such as frame 45, and moving the shape, I also tried to change it up by making the circle turn into another shape.  I did this by following the previous steps, up to the point where I moved the circle to the top of the stage. I then deleted the circle, and used the shape tool to draw a rectangle. Then, within the highlighted blue timeline, I right-clicked and pressed the ‘Create Class Tween’ button.
  5. 5. Tutorial 2 – SHAPE TWEEN Besides having motion tweens, I thought that I could use ‘Shape Tweens’ in my animation. This was because Shape Tweens usually create morphing animations, and I thought by using a shape tween on text or pictures might give a funky, creative twist to the animation. The tutorial I used to practise this tween was: http://www.republicofcode.com/tutorials/flash/morphing_bc/
  6. 6. Process of Shape Tween Tutorial Firstly, I used the idea of making a banner advert to work with when using this tutorial. I started with the drawing of an apple and text. Then, on the layer of the text, I went to the ‘Modify’ tab and clicked ‘Break Apart’. This first separated the text into separate text boxes. I then did this for a second time, and this showed the text to be in one single text box, meaning I was able to use the shape tween effect.
  7. 7. Process of Shape Tween Tutorial (Continued)Next, I selected frame 25 and inserted a ‘key-frame’. I then moved the text box to the right-side of the stage, but I deleted the text box, and typed in another text box.Then in between the highlighted timeline (from frame 1 to frame 25) I right-clicked and selected the ‘Create Shape Tween’ effect.The result of this effect was that the text moved smoothly from one message to the next, but with swirling morph transition as seen below.
  8. 8. ANIMATION Since my topic was Forces, I thought it would be good to make an animation based on an aspect of the topic that would really benefit from visual enhancement. Therefore I chose to make an animation explaining the process of ‘TERMINAL VELOCITY’ Terminal Velocity is the gradual balance of two opposite forces acting on a skydiver whilst he/she falls downwards. My animation also described the slow balance of the two opposite forces acting on the parachutist after he/she has opened his/her parachute, and the impact it first has on the forces when it is opened.
  9. 9. ANIMATIONHere is the storyboard of my animation:
  10. 10. ANIMATION PROCESS First of all, I created 2 layers: 1 with a skydiver in it and one with the background. To start it off, I made blue stripes . Then, by using the technique of ‘frame-by-frame’ which involved inserting key frames, I kept pasting the background of the blue stripes onto each key frame and with each time I moved it upwards a little as well as downwards a little so that when the animation played, it showed the downward movement through the sky. After, I used the photo of a skydiver in the beginning of the animation to be the main focus. I started off by placing the skydiver above the stage so that it wasn’t seen and did the same frame-by-frame technique so that each time I moved the skydiver a little lower until he reached the middle of the background. The resulting animation so far showed the skydiver falling smoothly downward with the help of the idealistic effect of the background.
  11. 11. ANIMATION PROCESS (Continued)Next, following the guidelines of my storyboard, I started toadd an arrow to describe the force I wanted to show After, I started to add text which would appear after theviewers that the skydiver was experiencing. As you can arrow’s gradual appearance. This was done by first making asee from the circled bit, I again used frame-by-frame new layer and calling it ‘TEXT 1’(as I planned on having moreediting. I started with the arrow being very faded and with text boxes later). Then, I inserted a key frame from frame 50each consecutive key frame I decreased the opacity to frame 74, with the arrow edit and fade in in between (as(lowering the ‘Alpha scale, so that when the animation seen from the red circle).played, the arrow would appear to be slowly and smoothly I made the text seem to appear gradually by using skills fromappearing rather than just suddenly appearing. This also my MOTION TWEEN tutorial. So, in frame 50, I made the textflowed well with the swift downwards fall of the skydiver. barely visible by increasing its ‘Alpha’ scale (opacity) then in frame 74 I lowered the opacity, and right clicked in between to ‘create motion tween’.
  12. 12. ANIMATION PROCESS (Continued)After, once the text appeared fully, I wanted to add another arrow in another position as well as another text box, so I created two morelayers, one called ‘Accel’to show the arrow (green as shown in the photo above) and ‘TEXT 2’.For the ‘Accel’layer, I had to do frame-by-frame editing just as I did for the brown arrow as I wanted to again create the gradual fade ineffect. The ‘TEXT 2’layer was done exactly the same as ‘TEXT 1’, so key frame 1 was in frame 50 and the second key frame was inframe 74, with the arrow frame-by-frame key frames in-between. So what I did to make it easier was copy the frames from the layer of‘TEXT 1’ and paste it onto the layer of ‘TEXT 2’. Within the ‘TEXT 2’ layer, I again used a motion tween (just like for ‘TEXT 1’) so inframe 50 it was barely visible as the opacity level (Alpha) was increased and in frame 74 it was lowered, so that in between, I right-clicked and selected the button ‘Create Classic Tween’ so it created the effect of text appearing gradually.
  13. 13. ANIMATION PROCESS (Continued)Next, the next arrow needed in the stage was ‘AirResistance’which was made by adding yet anotherlayer ‘Text 3’. The arrow face upwards and started offsmall in size. This would later increase in size and thiswas shown to have a gradual effect on the skydiver asthe acceleration text‘Text 2’layer) was changing: theacceleration figure was getting smaller. This was done As you can see on the leftagain by frame-by-frame editing, by inserting a number picture, the accelerationof consecutive key frames, and changing the number shows 0, and the size andin each one. This is shown in the pictures on the right. proportion of the yellow arrow showing air resistance is equal is force with the weight arrow.
  14. 14. ANIMATION PROCESS (Continued)As shown in the previous slide, once the acceleration was shown to say ‘0m/s2’, and the arrows were both the same length and width,showing that this process has resulted in both forces (upwards AIR RESISTANCE and downwards WEIGHT) has balanced. Theprocess’name is TERMINAL VELOCITY. I therefore made this label known after all the arrows had appeared, including the final sizeof the Air Resistance arrow and so finally made a new layer called ‘Terminal Vel’where on the last key frame of the appearance of allthe arrows I inserted a text box saying ‘Terminal Velocity’. Label of the process. For this text appearance, I chose not to use the effect of frame-by-frame editing, so it did not fade in and fade out like the other arrows as I felt it was the most important part of the concept, so it had to be made clear, and this was done by its immediate appearance. A fade out was unnecessary as the arrows showed the gradual occurrence of the changing forces within the process, so I thought it was more effective when used for the text and arrows than on the label. Frame-by-frame editing key frames for the text layers On ‘Terminal Vel’layer, text is written and appears one key frame after all the other key frames on the separate text layers have appeared. The point of this is to allow this label to be seen with the other text and arrows at the same time, so the whole process is showed clearly.
  15. 15. ANIMATION PROCESS (Continued) For the skydiver, since I did frame-by-frame editing to make it seem as if he was falling gradually, I decided to use the same method but to move him upwards a little in each key frame, so when the animationAfter the appearance of all 3 texts and their arrows, I wanted played it seemed as if he was still falling,a smooth fade out of them all. Therefore, for the text layers but he was no longer seen in the stage.(‘TEXT 1’, ‘TEXT 2’and ‘TEXT 3’) I relied on motion tweeningthem, but this time I did the opposite by allowing them to befully visible in one key frame then lowering their opacity inthe next key frame, and in between right-clicking andcreating a motion tween.
  16. 16. ANIMATION PROCESS (Continued) This allowed for me to move onto the next part of my animation as seen below, when the skydiver initially opens his parachute. After, I kept the background, and since at the beginning frame-by-frame editing was used to move the blue stripes a little to enhance the visual impact resembling the skydiver falling downwards, I double-clicked on the background later: ‘Sky’so that it took me to its own movie timeline. Here, I inputted key frame required for the frame-by-frame editing, but in between each key frame I inserted a frame. This decreased the speed of the background passing the skydiver, which was essential in visually delivering the idea that once the parachute opens, the speed at which the parachutist falls slows down. Also, I added the image of the parachutist falling by using frame-by-frame editing by moving him lower in the stage with each key frame, as seen in the circled area to the left.Once I was happy with the position of the parachutist in thestage, I decided to copy the frames used before of all 3 textlayers and arrow layers that were used before when they werefirst fading in. I inserted a frame right after the ‘Parachute’layerand inserted the copied layers in between there. This enabledme to use the same effects of fading in as I did in previousframes, saving me time and effort, and these effects occurredright after the parachutist was set in the right position. However,I then decided that I did not need to use the ‘Accel’layer alongwith its text, I simply deleted it, so that the main idea waspresented using just the two arrows: ‘Air Resist’and ‘Gravity’aswell as their texts: ‘TEXT 1’and ‘TEXT 2’.
  17. 17. ANIMATION PROCESS (Continued)After deleting the later ‘TEXT 3’which showed the green arrow for acceleration and its text, I copied the ‘Terminal Vel’layer,deleted the original frames, put in a key frame after the frame-by-frame appearance of the other text and arrow layers,and changed the text. The text had previously said ‘Terminal Velocity’, acting as a label for the process, but this time Ichanged it to ‘New slower Terminal Velocity’to show the difference after the progression of the animation and the forcesacting on the parachutist. By using the same layer as before, I was able to use the same effects, so the label layer wouldnot fade in and fade out, but appear immediately.This was the end of my animation, as it showed the overall conclusion of the process if this event were to occur in real life(e.g. skydiving then opening the parachute: the real forces that would act upon your body).
  18. 18. CONCLUSION & EVALUATION By spending time practising using the program Adobe Flash, I feel I gained valuable experience and learned many new skills such as the use and effect of tools, and the importance of separating symbols and text into layers By following website tutorials, I think it helped me get started, but soon, I started to get the hang of it and was able to develop and use tricks of my own. Additionally, the tutorials I used were key and extremely useful elements of my animation, so I think practising them really helped. My animation is now available on my revision website: www.physicsforfanatics.weebly.com