Computeranimation

Computeranimation
Arbeitsheft
Computeranimation
Arbeitsheft
Computeranimation
Bewegungsabläufe simulieren
!
%&
#*
+
$
+ 2'*
#
##
+ ,
.* )
!
.
!
5&)
"# $
'
!
(
% /0
1*
'
' ' ,
%&
,
4 '
'*
'
6&)
'%
'
)
#*
'
# . )
$
$
%
3
3
!"
*
$% %
%
!
+
*
'
# '
+
$
$
*
'
9
'
!
9' *
#2 4 '
+% %, 3)
3
&
&
0
578 3
, #* !
*:
'
'
&
*:
$
: '*
+
+
$
"
%&
*:
' 2
'
!
%
2
$
#
'
+
+
%;
+ #2
'
. +
$
!
+% %
'
*
)9 '
+
*
*
!
# $"
1
,3$
' *
#
'
)
#2
%
"#
)
, 3)
&
)
!
3 %&
)
*
%
!
+
)
+
!
%
!
'
-' )
!
#*
"# $
4
3
)
!
!
$
)
4! '
+
+
! )
!
!
4
)
$
4 '
'*
3
)
: '*
+
#
$ 3
%3
)&
3
!
$
)
!
!
%
%!"
6&)
; '#
. #2
'
3
!
#
%
' (
!
,
'%
3
! %
!
+
+
+
'
!
1
+
#!'
## * ! 9 0
!%
+ !
% 6&)
3 )
.
*
!
3' )
!
% " *:
'
2
+
'
,
#2
-
2
*
+
)
. !
)
<
%&
(
"
3
+
='
'
$ +'
'!
'
&
+
* )
)
6&)
!
# 0
'
!
+%
')
Arbeitsheft
Computeranimation
Digitales Daumenkino (animiertes Gif)
&
&
-
*
*
*
&
'
'
9> +
.
+
. -#
## *
*
+ ; +
!
%&
#
3
!
'*
#2
! '*
1*
%
'
%&
Abb. 1: Daumenkino (Bild:Wikipedia)
&
$
3
!
'
.
!'*
+ *
#
$
'
3
)
%
(
'
&
*
, # *#
-
!
! %&
#2 . :##
+!
'
&
&
+
'
*
,#
)
(
!
Abb. 2: Animation Shop - Assistent
3
# %&
, #*
?)
!
%;
-#
$
0
'*
'
!
$
)
578
)
)
$
)
1*)
Arbeitsheft
Computeranimation
+
#!
+
$
: '*
'
&
,#
, #*
+
#
'
+ #2
, 3)3
(
#
!
%&
+ -'
*
'
!
'
)
%
/
/ %&
!.
'
2#
'
)
)
%
Abb. 3: Animation Shop – Vorschau der Bildfolge
3
*
#
:##
#
!
!
# 1!
+
*
!
, #)3
$
%& + !
, 3)
'
%
'
#2
%&
Abb. 4: Ebenen in Artweaver
,
-+ '
+ . #2
'
! *
+
+ +
=@
#2 !
'
, #)3
#
'
'
!
*:
*
!
!
4
/
%
+% % +
B##
, /%
=@
A
)
Arbeitsheft
Computeranimation
#
' 3
!
,#
'
!
#
:
!
%&
+ %
"
'#
%
+
+
CDD
%
)
=@
&
!
2
!2 '
' #
'
(
' /
#
:##
,
/%& + ! )
+ '
'
#
*
+
-
!
+
!
=@
:##
+
*
.
, #)&
'
%
5
Arbeitsheft
Computeranimation
Übung
* ++
#
#
'
!
$
+
# ' +*
: '
' +% %
,
' -*
'
#
: '
# '
'
#2
#2
!
: %&
'*
!
C?
*
+ 2'*+ #2
% +
/
%
&
,
F
6
%& *
- %
+
. !'* %
'* $
#
%
' %5E
* )
#
#
'
+ . #2)
'
Arbeitsheft
Computeranimation
Skizze und Kontur
4 '
@#
)/ 1*
* ++ $ (
"
%&
!
#
!
# * +)
+
'
$
$ %
' (
!
3
)
#
- ' !
"
3 # -'
2
!
%&
)
*:
'
9 '*#
' * 4 '
"
%
!
$
)
' *
!
$
'
+
2
)
%
'
! ' 4
+
G
2'
)
$
!
$
/
*
+$ "
' *
!
%"
#
3
#
*2
'
'!
'* - *
+
#
#2
#!"
'
%;
4 )
' # -'
2
=@
+ /
+
$ 9 '*#
*
*
4
%
!
'*#
-
'
& 3 !
. #2
3
$ .*
'
!
2 +'
3
/ '
* ++
#
4 ' # -'
!
: '
' .*
+
!
%
#*
' 2
.*
#
!
+
#*
!
%
!
/0
)= @
+
@
# * * ++ $ + '
*
'
. $ 4
*)
: ' %& +
4!
'
## *
)
$
'#
4 ')
7
Arbeitsheft
Computeranimation
Übung
* ++
/
'*
2
'
!3+ #
#
Konturzeichnung hier einkleben
8
3
9 ' %
Arbeitsheft
Computeranimation
Die Zeitleiste (Timeline)
&
4
+
)= @
+ -'
'
*+
+
=
!
#
' !
@
'
& ' .
*
$
$
5E
3 #2
:' !
$ '
3
+
'
*
#
$
%
3
.*
%
!
!
@#
)= @
#
! )3
)= @
+ $ !
'
'
*
'
<3
' '
%&
2 '
)
#2
'
3
*
;
+
!'
=@ +
+
/ +
/0
#*
$ 4 '
. * )= @
.*
#*
)
1
+ + F 4
* $ =
% ' = @ *:
+ #2
=@ H) % #
=@
'
+
*
' :'
@ H ) %4
2'*
)9
%
!
)
!
+
%
+
%&
3+ . #2
9
' +% %
$
%
)= @
#
!
!
3
#!
*:
=@
')3
.
!-
+ 4
)
#2
%
' 2
3
%
Arbeitsheft
Computeranimation
Flashanimationen
4
-#
! #
2'*
3
$ !
*
+! '
3
1
0
!
3'
##%& ;
!'*
$ !
'
/
+
'
'
!
%4
/
1
'
+
$ $ -
!
$
#
3
%&
*
G
!
*:
3)3
#
'
!
$ #2
!
#)
+)
)
3
)
3= )3
'
'
'*! $ )3
#
+ . #2)
$
"' *
)
%
.
/0,
"
",
"
' 2
!
%&
$
#
+
&
4
2'*
+
4!
'
!
*
4
: '
## *
'#
!
#
!2
!
'
!
)
+
*
%
0$
&
*
&
'
++
/
: '
+ "# %
. -
-
3
$
!
*:
'
1
!
#2
*
!
3
'
3
%&
-
'
'
$
%
10
/
+
+
#2 4! '
'
4 '
> + !
@#
#
'
)
%
)
)
)
Arbeitsheft
Computeranimation
Beispiel:
In der Zeitleiste werden das Anfangsbild (Objekt Dreieck) im Frame 1, das Objekt
Quadrat in Frame 25, das Objekt Kreis in Frame 50 und eine Kopie des Objekts
Dreieck in Frame 75 platziert. Mithilfe der Methode Formtween wird vom System
automatisch die Veränderung der Attributwerte der jeweiligen Zwischenbilder berechnet, so dass ein kontinuierlicher Übergang von einem Objekt zum nächsten entsteht. Diese interpolierten Bilder können im Gegensatz zu den Schlüsselbildern
nicht verändert werden.
Der Ablauf der Animation kann in einem Aktivitätsdiagramm dargestellt werden.
Schlüsselbild 1 mit Objekt Dreieck füllen
Leeres Schlüsselbild an Position 25 erstellen
2. Schlüsselbild mit Objekt Quadrat füllen
leeres Schlüsselbild an Position 50 einfügen
3. Schlüsselbild mit Objekt Kreis füllen
leeres Schlüsselbild an Position 75 einfügen
4. Schlüsselbild mit Objekt Dreieck (Kopie) füllen
Formtween zwischen Schlüsselbildern aktivieren
Film erstellen
11
Arbeitsheft
Computeranimation
Übung
* ++
"
4! '
&
#
!
%4 '
+'
$
,
' 3
+ -'
* ++
/
F
12
$ (
%I
' (
3
#
'
@#
+
!
+
%
Arbeitsheft
Computeranimation
%0,
J '
3
' 2
4! '
(
!
#
,
!
3
: '*
+
'
%& + !
1!
' 2
#
4! '
!
#2
+
#
+! '
/
4
1*
)
#
#2 %; '
'
'
'
%
B
D
A
&
2
!
' #
'
,
4
*:
'
2
&
!
&
1*
#
2K
C
*:
K !
L
#2
+
* 3CC
#2
K+
!2 '
, :(
)
*
#
%
/
4! '
1*
#2 !
%
2
4! '
#2
!
%
L * $
!
!
L
!
*
%
Beispiel:
In der Zeitleiste Ebene 1 das Anfangsbild (gelber Kreis) im Frame 1 erzeugen und in
die Zwischenablage kopieren. Auf Position 25 ist mit der rechten Maustaste ein leeres Schlüsselbild einzufügen und mit dem Objekt aus der Zwischenablage zu füllen,
das an eine andere Stelle der Bühne zu verschieben ist. Diesen Vorgang mehrfach
wiederholen. Wenn alle gewünschten Schlüsselbilder erstellt sind, aus dem Menü
„Einfügen“ den Befehl „Bewegung erstellen“ wählen und mit „Szene testen“ aus dem
Menü „Steuerung“ den Ablauf erproben. (Vergleiche Camera-Layer im Programm
Pencil)
13
Arbeitsheft
Computeranimation
Übung
* ++
#
"
+'
,
&
#
*
!
,
!
%32
' 2
* ++
+
/
3
F
14
!
#%I
'
@#
4! '
+
%
Arbeitsheft
Computeranimation
Flashanimationen mit anderen Programmen
3
#
#2
& '*#
'*! $ )3
!
#
'
'
+
%J
'
+*
+
#
3)3
#
#*
!
!
+
3
&
$
2
*:
@
3
@
+
/&3
'
%.
+ 0
#
$
#2
/
: )
)
%& 2
3
)
)
3
%
/0'
&
!
'
0
3)3
03
!
)/
/ ' *
#
3
&
' /*
/! /
!
0
%0'
&
3
&
3
%
## '
*:
: '
/-
0
$
3)&
## '
#
:##
%
,
#
#
/-
! *+
' 3
+
0
%
15
/!
$ #2
#
2
3)
+
Arbeitsheft
Computeranimation
3D-Animation (Überblick)
&
1
6&)
+
'
#
!
#2 1
$ +
3
$
. !
/
*
!
'
,
6&)
#2
*
#
#
+
%32
'
! %!"(
"
+%9% #
+
5%
E?*
CD
/
#
$
'
'
'
#
+
!
'
'
4
2
*:
%
'
/
'*#
#
!
!
' ('
%
,
#
!2
=
!
$
: '*
6&)
#
#!/
'!
'
5!
' *
/
: '
' %
/
- '
%
: '
#
*
0
% *
%
16
,
*
6
-
+
'
2
)
#
+
%32
+ . #2)
/
)
+
)
.
'
'
)
*
#$
%&
'
)
!-
Arbeitsheft
Computeranimation
# '
$
#
)
$
#
1*
+ *
#!
#2 6&
+
'
0
6&) +
# '
#
$
#
'
' $
!
.)
'
-#
3
'
-
%&
1*
!-
=
!
'
'
%!"2 !"'
# +'
+ -+ '
'
2
%,
. !
2
%& /
+ . #2
!
*:
!
#
%&
+ !-
0
+
7
!
)
%
'
)
#
2
%
!
%;
"+4
. = < .
6&) +
.)
6&)&
@
)
%
,
6&) &)/
%
' !
%
. )3
0
$ 6&). !
-
(
+
!
(
'
!
!
*:
'
+% %2
6&) +
'
%! $ /
%
17
*
)
)
!
#+ '
'
.
'
3
=2
Arbeitsheft
Computeranimation
Google Sketchup
# '
/
(
3-'
+
6&) 1* *:
!
%& /
'*
#
&
'
%
*
A
: '*
+
$
%
'
$
+ 6&) 1*
' (
$ '
'
4! '
!
! %&
Google Sketchup - Programmoberfläche
Einzelszene der Animation
18
6&) +
'
!
%&
'
!
6&)
+ )
#
)
2)
.)
Arbeitsheft
Computeranimation
Programme
•
'
(
' )
FN
N
!!!%
$ $
&.&
•
•
#
•
'
•
$
•
'
•
,
•
%!"2
•
#
•
2
•
(
F
F
F
FN
N !
FN
N
)
$
F
(
%! . !
$
')
%
'
%
%
'
" # ) & +!%M
O7DO8D5%
)?% #
'% N
N
N
'% N
FN
N* '
F
O
N
)#
FN
N
6 )' $ % #
F
'
O
'% N
FN
N
!!!% !
FN
N
!!!%
F
#$
N
'% N
FN
N
F
F
$ % #
% #
FN
N
!!!%
9
(
F
% N !
%
FN
N
!!!%
'
F
%
'
N
6%
'
FN
N
N N
N
'
% #
'% N
Die Software-Hinweise beziehen sich auf die im Arbeitsheft vorgestellten Programme. Dabei wurde der Schwerpunkt auf Freeware und Open Source-Produkte gelegt,
so dass diese Liste nur eine persönliche Auswahl des Autors darstellt. Die Programme wurden im Unterricht erprobt. Sie ermöglichen es, Schülern einen Einblick in das
breite Spektrum der Animationstechniken zu geben und regen zum selbstständigen
über den Unterricht hinausgehenden Experimenten an.
19