ANIMATE OEFENING 1 TOT 6

In deze opdracht laten een cirkel bewegen.

1. Open Adobe Animate

2. Maak een nieuw document: 450 px breed bij 350 px hoog, 24 FPS (frames per seconde) en van het type HTML5 Canvas

3. Bestand opslaan als An_oef1_[voornaam].fla

4. Verander de kleur van het werkgebied naar #006666

5. Selecteer laag 1 in de tijdlijn en teken een cirkel op het werkgebied

6. Klik met de rechtermuisknop op frame 24 in de tijdslijn en kies Frame invoegen

7. Klik op frame 1 in de tijdlijn en op Enter om je tijdlijn af te spelen. Er gebeurt nog niets op je werkgebied, toch? Je animatie is 24 frames groot, maar er gebeurd nog niks.

8. Klik met de rechtermuisknop op frame 1 en kies Bewegings-tween maken (Klik op OK bij de melding over het omzetten in een symbool)

9. Klik in frame 24 op de tijdlijn

10. Selecteer de zwarte pijl en verplaats de cirkel

11. Klik op Enter om de animatie af te spelen. Zie je nu de cirkel bewegen?

12. Sla het bestand op

In deze opdracht ga je een uitgebreidere bewegings-tween maken.

1. Maak een nieuw document 600 px breed bij 200 px hoog, 24 FPS en van het type HTML5 Canvas

2. Bestand opslaan als An_oef2_[voornaam].fla

3. Kies de kleur van het werkgebied

4. Teken een vorm (cirkel/vierkant/veelhoek) met kleur naar keuze op het werkgebied

5. Maak een bewegings-tween tot en met frame 72

6. Ga naar frame 7

7. Verplaats je vorm op het werkgebied

8. Ga naar frame 14

9. Verplaats je vorm op het werkgebied

10. Ga zo door tot je ongeveer hetelfde pad als hiernaast hebt

11. Speel de animatie af

12. Sla het bestand op

Meer uitleg?

Uitleg over bewegings-tween: Adobe CC Handboek

In deze oefening maak je de bewegingen iets vloeiender door het pad aan te passen.

1. Ga verder met het document uit oefening 2.

2. Bestand opslaan als An_oef3_[voornaam].fla

3. Selecteer het zwarte pijltje

4. Ga naar het pad van de bewegings-tween in het werkgebied

5. Verander de rechte lijnen in gebogen lijnen zoals in de afbeelding hiernaast

6. Speel je animatie af

7. Sla het bestand op

In deze opdracht ga je oefenen met inzoomen en uitzoomen van een vorm.

1. Maak een nieuw document, 300 px bij 300 px en van het type HTML5 Canvas

2. Bestand opslaan als An_oef4_[voornaam].fla

3. Stel het formaat van het werkgebied in op 300 px x 300 px met een kleur naar keuze

4. Teken een kleine vorm (cirkel/vierkant/veelhoek) met kleur naar keuze in het midden van het werk-gebied

5. Maak een bewegings-tween tot en met frame 50

6. Ga naar frame 25

7. Vergroot de vorm tot je het werkgebied niet meer ziet met het vrije-transformatie pijltje

8. Ga naar frame 50

9. Verklein de vorm tot je weer het werkgebied ziet

10. Speel je animatie af om te testen

11. Sla het bestand op

In deze opdracht ga je oefenen met importeren van afbeeldingen en deze animeren.

1. Maak een nieuw document 400 px breed bij 400 px hoog en van het type HTML5 Canvas

2. Bestand opslaan als An_oef5_[voornaam].fla

3. Stel het formaat van het werkgebied in op 400 px x 400 px met een kleur naar keuze

4. Download een van de vlieg.png bestande uit deze map naar je bureaublad

5. Ga naar Bestand > Importeren > Importeren in bibliotheek om de vlieg in je bibliotheek te importeren

6. Klik op Open

7. Ga naar het venster Bibliotheek

8. Sleep de vlieg op het werkgebied

9. Verklein en roteer de vlieg zoals hiernaast

10. Maak een bewegings-tween van 120 frames

11. Laat de vlieg kriskras over het werkgebied lopen

12. Klik op het pad van de bewegings-tween in het werkgebied

13. Ga naar Eigenschappen

14. Klik op Plaatsen volgens pad

15. Test de animatie

16. Sla het bestand op

In deze oefening ga je tekst animeren.

1. Maak een nieuw document 550 px breed bij 100 px hoog en van het type HTML5 Canvas

2. Bestand opslaan als An_oef6_[voornaam].fla

3. Typ je naam in een font en kleur naar keuze

4. Maak het voorbeeld hiernaast ongeveer na

5. Ga naar Bestand > Exporteren > Geanimeerde Gif exporteren.

6. Geef het bestand de naam An_oef6SWF_[Voornaam].gif

7. Sla je bestand op