SlideShare a Scribd company logo
1 of 18
FLASH ANIMATION
Amanda Ho 11N
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/
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 to
another spot on the ‘stage’(as it is called).
After, right in the middle of the blue highlighted Timeline, I
right-clicked and selected the button ‘Create Classic
Tween’.
 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.
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.
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/
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.
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.
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.
ANIMATION
Here is the storyboard of my animation:
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.
ANIMATION PROCESS
     (Continued)




Next, following the guidelines of my storyboard, I started to
add an arrow to describe the force I wanted to show             After, I started to add text which would appear after the
viewers that the skydiver was experiencing. As you can          arrow’s gradual appearance. This was done by first making a
see from the circled bit, I again used frame-by-frame           new layer and calling it ‘TEXT 1’(as I planned on having more
editing. I started with the arrow being very faded and with     text boxes later). Then, I inserted a key frame from frame 50
each 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 from
appearing rather than just suddenly appearing. This also        my MOTION TWEEN tutorial. So, in frame 50, I made the text
flowed 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’.
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 more
layers, 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 in
effect. 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 in
frame 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 in
frame 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.
ANIMATION PROCESS
    (Continued)




Next, the next arrow needed in the stage was ‘Air
Resistance’which was made by adding yet another
layer ‘Text 3’. The arrow face upwards and started off
small in size. This would later increase in size and this
was shown to have a gradual effect on the skydiver as
the acceleration text‘Text 2’layer) was changing: the
acceleration figure was getting smaller. This was done      As you can see on the left
again by frame-by-frame editing, by inserting a number      picture, the acceleration
of consecutive key frames, and changing the number          shows 0, and the size and
in 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.
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. The
process’name is TERMINAL VELOCITY. I therefore made this label known after all the arrows had appeared, including the final size
of the Air Resistance arrow and so finally made a new layer called ‘Terminal Vel’where on the last key frame of the appearance of all
the 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.
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 animation
After 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 tweening
them, but this time I did the opposite by allowing them to be
fully visible in one key frame then lowering their opacity in
the next key frame, and in between right-clicking and
creating a motion tween.
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 the
stage, I decided to copy the frames used before of all 3 text
layers and arrow layers that were used before when they were
first fading in. I inserted a frame right after the ‘Parachute’layer
and inserted the copied layers in between there. This enabled
me to use the same effects of fading in as I did in previous
frames, saving me time and effort, and these effects occurred
right after the parachutist was set in the right position. However,
I then decided that I did not need to use the ‘Accel’layer along
with its text, I simply deleted it, so that the main idea was
presented using just the two arrows: ‘Air Resist’and ‘Gravity’as
well as their texts: ‘TEXT 1’and ‘TEXT 2’.
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 I
changed it to ‘New slower Terminal Velocity’to show the difference after the progression of the animation and the forces
acting on the parachutist. By using the same layer as before, I was able to use the same effects, so the label layer would
not 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).
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

More Related Content

Similar to Flash tutorials

Maze tutorial
Maze tutorialMaze tutorial
Maze tutorialJWhiteley
 
M5 - Graphic Animation - Buttons
M5 - Graphic Animation - ButtonsM5 - Graphic Animation - Buttons
M5 - Graphic Animation - ButtonsJamie Hutt
 
Photoshop step by step powerpoint presentation - hayley ip 10 f
Photoshop step by step   powerpoint presentation - hayley ip 10 fPhotoshop step by step   powerpoint presentation - hayley ip 10 f
Photoshop step by step powerpoint presentation - hayley ip 10 fHayley Ip
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01momayabhavana
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01bhavanalm
 
M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2Jamie Hutt
 
Experiment pro forma
Experiment pro formaExperiment pro forma
Experiment pro formaAlfieJones3
 
Production Experiments
Production ExperimentsProduction Experiments
Production ExperimentsShaniceYates
 
Diary for unit 65 assignment 2 creating the website
Diary for unit 65 assignment 2 creating the websiteDiary for unit 65 assignment 2 creating the website
Diary for unit 65 assignment 2 creating the websitebenhendersoncmedia
 
M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2Jamie Hutt
 
M5 - Graphic Animation - Motion Guide
M5 - Graphic Animation - Motion GuideM5 - Graphic Animation - Motion Guide
M5 - Graphic Animation - Motion GuideJamie Hutt
 
Mirrored images Photoshop CS5 Tutorial
Mirrored images Photoshop CS5 TutorialMirrored images Photoshop CS5 Tutorial
Mirrored images Photoshop CS5 TutorialMia Hodgson
 
Fanzine evaluation
Fanzine evaluationFanzine evaluation
Fanzine evaluationBen Harris
 
How to create a simple image gallery in flash cs5
How to create a simple image gallery in flash cs5How to create a simple image gallery in flash cs5
How to create a simple image gallery in flash cs5Boy Jeorge
 
Quick Step by Step Flash Tutorial
Quick Step by Step Flash TutorialQuick Step by Step Flash Tutorial
Quick Step by Step Flash TutorialSu Yuen Chin
 
Skills Development
Skills DevelopmentSkills Development
Skills DevelopmentTaylaWebber
 

Similar to Flash tutorials (20)

Maze tutorial
Maze tutorialMaze tutorial
Maze tutorial
 
Work flow
Work flowWork flow
Work flow
 
M5 - Graphic Animation - Buttons
M5 - Graphic Animation - ButtonsM5 - Graphic Animation - Buttons
M5 - Graphic Animation - Buttons
 
Photoshop step by step powerpoint presentation - hayley ip 10 f
Photoshop step by step   powerpoint presentation - hayley ip 10 fPhotoshop step by step   powerpoint presentation - hayley ip 10 f
Photoshop step by step powerpoint presentation - hayley ip 10 f
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01
 
Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01Flashworkshop 090317231102-phpapp01
Flashworkshop 090317231102-phpapp01
 
M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2
 
Experiment pro forma
Experiment pro formaExperiment pro forma
Experiment pro forma
 
Unit 14 LO3
Unit 14 LO3Unit 14 LO3
Unit 14 LO3
 
Production Experiments
Production ExperimentsProduction Experiments
Production Experiments
 
Diary for unit 65 assignment 2 creating the website
Diary for unit 65 assignment 2 creating the websiteDiary for unit 65 assignment 2 creating the website
Diary for unit 65 assignment 2 creating the website
 
M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2M5 - Graphical Animation - Lesson 2
M5 - Graphical Animation - Lesson 2
 
Unit 14 LO3
Unit 14  LO3Unit 14  LO3
Unit 14 LO3
 
M5 - Graphic Animation - Motion Guide
M5 - Graphic Animation - Motion GuideM5 - Graphic Animation - Motion Guide
M5 - Graphic Animation - Motion Guide
 
Flash
FlashFlash
Flash
 
Mirrored images Photoshop CS5 Tutorial
Mirrored images Photoshop CS5 TutorialMirrored images Photoshop CS5 Tutorial
Mirrored images Photoshop CS5 Tutorial
 
Fanzine evaluation
Fanzine evaluationFanzine evaluation
Fanzine evaluation
 
How to create a simple image gallery in flash cs5
How to create a simple image gallery in flash cs5How to create a simple image gallery in flash cs5
How to create a simple image gallery in flash cs5
 
Quick Step by Step Flash Tutorial
Quick Step by Step Flash TutorialQuick Step by Step Flash Tutorial
Quick Step by Step Flash Tutorial
 
Skills Development
Skills DevelopmentSkills Development
Skills Development
 

Recently uploaded

Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 

Recently uploaded (20)

Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 

Flash tutorials

  • 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. 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 to another spot on the ‘stage’(as it is called). After, right in the middle of the blue highlighted Timeline, I right-clicked and selected the button ‘Create Classic Tween’. 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. 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. 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. 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. 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. 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. ANIMATION Here is the storyboard of my animation:
  • 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. ANIMATION PROCESS (Continued) Next, following the guidelines of my storyboard, I started to add an arrow to describe the force I wanted to show After, I started to add text which would appear after the viewers that the skydiver was experiencing. As you can arrow’s gradual appearance. This was done by first making a see from the circled bit, I again used frame-by-frame new layer and calling it ‘TEXT 1’(as I planned on having more editing. I started with the arrow being very faded and with text boxes later). Then, I inserted a key frame from frame 50 each 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 from appearing rather than just suddenly appearing. This also my MOTION TWEEN tutorial. So, in frame 50, I made the text flowed 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. 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 more layers, 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 in effect. 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 in frame 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 in frame 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. ANIMATION PROCESS (Continued) Next, the next arrow needed in the stage was ‘Air Resistance’which was made by adding yet another layer ‘Text 3’. The arrow face upwards and started off small in size. This would later increase in size and this was shown to have a gradual effect on the skydiver as the acceleration text‘Text 2’layer) was changing: the acceleration figure was getting smaller. This was done As you can see on the left again by frame-by-frame editing, by inserting a number picture, the acceleration of consecutive key frames, and changing the number shows 0, and the size and in 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. 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. The process’name is TERMINAL VELOCITY. I therefore made this label known after all the arrows had appeared, including the final size of the Air Resistance arrow and so finally made a new layer called ‘Terminal Vel’where on the last key frame of the appearance of all the 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. 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 animation After 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 tweening them, but this time I did the opposite by allowing them to be fully visible in one key frame then lowering their opacity in the next key frame, and in between right-clicking and creating a motion tween.
  • 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 the stage, I decided to copy the frames used before of all 3 text layers and arrow layers that were used before when they were first fading in. I inserted a frame right after the ‘Parachute’layer and inserted the copied layers in between there. This enabled me to use the same effects of fading in as I did in previous frames, saving me time and effort, and these effects occurred right after the parachutist was set in the right position. However, I then decided that I did not need to use the ‘Accel’layer along with its text, I simply deleted it, so that the main idea was presented using just the two arrows: ‘Air Resist’and ‘Gravity’as well as their texts: ‘TEXT 1’and ‘TEXT 2’.
  • 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 I changed it to ‘New slower Terminal Velocity’to show the difference after the progression of the animation and the forces acting on the parachutist. By using the same layer as before, I was able to use the same effects, so the label layer would not 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. 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