Tutorial

Digitaal animaties maken

Tutorial voor www.doink.com

Leerlingen versie 1.0
Inhoudsopgave

1. Wat is www.doink.com? ..................................................................................................................... 4

2.1 De website opzoeken en inschrijven ................................................................................................ 5
2. 2 Openen van een leeg vel .................................................................................................................. 6
2.3 Het maken van een drawing.............................................................................................................. 8
2.3 Het maken van een drawing.............................................................................................................. 8
2.4 Snelheid instellen ........................................................................................................................... 10
2.5 Een composition maken ................................................................................................................. 11
2.6 Publiceren........................................................................................................................................ 15
3. Beoordeling ...................................................................................................................................... 17
3. Beoordeling ...................................................................................................................................... 17

2
Inleiding

Voor vele is het internet een middel waar men vaak elke dag gebruik van maakt. Er is heel veel
informatie te vinden op websites van kranten, databases van scholen en bedrijven. Daarnaast
bestaan er educatiefilmpjes, filmpjes om te ontspannen, E-books, spelletjes en educatieve spelletjes.
Kortom: er is heel veel te vinden op het internet.

Animaties maken van eigen gemaakte tekeningen is erg moeilijk. JE moet al een opleiding gedaan
hebben om mooie animaties te maken. Met deze tutorial komt daar een einde aan. Ik leer jou via de
tutorial animaties maken van jouw tekeningen.

Bekijk de volgende website eens: http://www.doink.com/clips/cornelis/1186199/tutorial-1

Daar zie je het filmpje wat we tijdens deze tutorial gaan maken!

Heel veel succes!

Niels van der Horn

3
1. Wat is www.doink.com?

Op de website www.doink.com kun je met weinig voorkennis animaties maken. Animaties zijn
bewegende beelden. Die beelden kunnen vormen zijn. Met deze tutorial wordt je een simpele
animatie geleerd.

Tutorial: Een handleiding of gebruiksaanwijzing is een schriftelijke instructie die met een product
meegeleverd wordt

Instapeisen voor het maken van een animatie is het volgende benodigd:

1. Redelijke computerkennis
2. Basiskennis computervaardigheden
3. Redelijk bekend zijn met youtube, twitter, myspace
4. In redelijke mate met paint tekeningen kunnen maken

Jouw werkwijze

In de tutorial staat met veel afbeeldingen weergegeven wat je moet doen. Natuurlijk moet jij zelf ook
meedenken. Stel dus niet direct een vraag maar lees de tekst goed die bij de afbeeldingen staan.
Jouw klasgenoten kun jij natuurlijk ook vragen.

4
2.1 De website opzoeken en inschrijven

Voor je aan de slag kan gaan moet jij je inschrijven. Je hebt een eigen e-mail adres nodig.

1. Ga naar www.doink.com
2. Ga naar Sign Up (inschrijven)

3. Vul de velden in
(wel een eigen
naam, email en
wachtwoord
4. Vink the Terms of
Service aan
(voorwaarden)

5. Klik op

6. Via jouw email kun

jij je inschrijving
bevestigen; je bent
nu officieel lid van
www.doink.com

5
2. 2 Openen van een leeg vel

1. Het venster na het inschrijven staat nog open; je kunt via CREATE een nieuw vel openen:

2. Als je CREATE hebt aangeklikt dan opent er een nieuw scherm

LET OP: er is JAVA vereist. Heb je dat niet op je pc dan krijg je een melding. Je kunt via de
melding JAVA installeren.

3. Heb je al JAVA, of heb je dat net geïnstalleerd dan kun je verder.

6
 3. Het nieuwe scherm ziet er zo uit:

De volgende stap is het maken van een tekening. De uitleg over een tekening maken staat op de
volgende pagina.

Je hebt deze paragraaf geleerd:

• Hoe je moet inschrijven bij doink.com

• Hoe je (eventueel) java installeerd
• Hoe je een nieuwe tekenvel opent

7
2.3 Het maken van een drawing

5. Je kunt een drawing maken. Bovenin kun je kiezen met de knoppen. Kies de tool “Brush”

6. Teken een streep in het midden van de witte vlak:

8
7. Druk op de
gele pijl
“clone”

8. Er verschijnt
een kloon van je
bestaande
tekening

9. Selecteer de verticale streep door eenmaal met de muis er op te

drukken. De komt een blauwe rand om de streep. De rondjes die
verschijnen kun je gebruiken om de streep groter/breder te maken.

10. We willen de streep een kwartslag draaien. Dat kun je doen door de
streep te draaien. Als je met de muis op de bovenste en middelste rondje
gaat staan dan ontstaat er een ronde pijl. Je pijl van de muis wordt rond.

11. Draai de streep (de wazig streep is de streep van een handeling eerder).

9
 12. Je kunt nu van de twee tekeningen een animatie maken. Druk maar eens op de play
knop. De tekening gaat bewegen.

De play knop is ook de pauze knop,

als je het eenmaal hebt aangeklikt.

2.4 Snelheid instellen

13. Gaat de animatie te snel? De kun je de snelheid in stellen met:

Je kan kiezen uit fast, normal of slow.

Eenmaal de tekening en de snelheid ingesteld? Op naar het maken van de compositie!

10
2.5 Een composition maken

14. Goed, we hebben een simpele animatie. Tijd om het in de

“composition”te zetten. Klik daarom op “new composition”:

15. Het volgend scherm is te zien:

16. In dit scherm kunnen we een compositie maken. Verschillende tekeningen kunnen worden
samengevoegd. Zoals wordt aangegeven op het scherm moet je de tekening slepen naar het
witte vak.

11
Je krijgt dan een samengevoegde tekening te zien. De twee strepen zien er nu uit als een kruis.

17. Als je op drukt zie je dat het gaat bewegen.

18. Als je de animatie sneller of langzamer wilt laten zien dan kun je de tijdbalk langer of korter
maken. Probeer dit maar eens uit met:

En :

Maak de animatie minimaal 4 seconden lang

12
18. Goed, eenmaal de tijd ingesteld kunnen we de getekende strepen door het scherm laten
bewegen. Daarvoor gebruiken we de volgende tool (linksbovenin):

Ik wil de tekening laten zigzaggen

- Zet de tekening linksboven in de hoek met behulp van

- Druk op

- Sleep het vierkantje met daarin het kruis naar beneden. Klik nu eenmaal.
- Ga dan naar rechts. Klik nu eenmaal.
- Dan omhoog. Klik nu eenmaal.
- Dan naar rechts. Klik nu eenmaal.
- Dan naar beneden.

Dubbelklik als je rechts onder bent. De beweging is nu ingesteld.

13
Tip 1 : Met de potlood kun je zelf een richting aanwijzen. Met het symbool naast de potlood maak
je rechte bewegingen. De meest rechts symbool is er voor om gemaakte bewegingen te
verwijderen. Probeer dat maar eens!

Tip 2 : met een dubbelklik van de muis bevestig je de beweging.

Je hebt deze paragraaf geleerd:

• Hoe je van een drawing naar een composition gaat

• Hoe je de beweging kan afspelen
• Hoe je de tijd kan instellen
• Hoe je de tekening kan laten bewegen door het scherm

Nu wil jij natuurlijk dat iedereen jouw animatie kan zien. Dit wordt uitgelegd in de volgende
paragraaf!

14
2.6 Publiceren

19. De animatie is klaar. We kunnen de animatie bijvoorbeeld op youtube zetten. Met de

knop “Publish” kan dat gedaan worden:

20. Je krijgt dit scherm:

Links zie je de animatie. Rechts gegevens over jou en de animatie.

21. Als je klaar met punt 20 bent, druk je op “Finish publishing”.

15
 21. Nu kun je het verspreiden op het internet. Let op dat je voor de betreffende site wel bent
aangemeld.

22. Dit was tutorial 1. Ik hoop dat je de smaak een beetje te pakken hebt gekregen. Je kunt
de oefening herhalen, dan zie je dat het vlotter gaat.

Je hebt deze paragraaf geleerd:

• Hoe jij jouw animatie moet publiceren

16
3. Beoordeling

In te vullen door de docent:

Onderdeel/voldoende/onvoldoende Voldoende Onvoldoende

Netheid
De animatie staat in het midden van
de scherm
De animatie is opgeslagen
De animatie duurt minimaal 4
seconden

17