Animáció.

Az előadások a következő témára: "Animáció."— Előadás másolata:

1 Animáció

2 Az animáció elve Különálló képekből tevődik össze
Rögzített képekből álló sorozat A látás folytonossága miatt nem vesszük észre a filmkockák közötti váltásokat, ha azok elég gyorsan történnek.

3 Képkockák és kockaszám
Az egyes képeket kockáknak nevezzük A Flash képkockái az időszalagon lévő kis téglalap alakú mezők Alaphelyzetben egyszerre csak egy kocka tartalmát tekinthetjük meg A képkockákba vagy az időszalagra nem rajzolunk, csak a színpadra Az időszalag alaphelyzetben egy képkocka hosszú.

4 Képkockára ugrás

5 Megtekintés Pásztázás: Vonszolás a képkockaszámok fölött
Lejátszás: Control > Play (vagy Enter) Leállítás: Control > Stop (vagy Enter)

6 Időszalag Képkocka sorszáma, Képkockaszám, Aktuális idő

7 Képkockaszám A képkockaváltás sebessége Képkocka / másodperc
A lejátszás sebessége a felhasználó gépétől is függhet. Beállítása: Modify > Document

8 Állítsuk át a képkockaszámot
Legyen 120 Láthatjuk, hogy a képkockaszám folyamatosan változik, el akarja érni a beállított sebességet, de nem tudja.

9 A képkockaszám és a képkockák száma
Ki kell választani egy képkockaszámot és ragaszkodni kell hozzá Az egyes részek felgyorsítását ne a képkockaszám módosításával oldjuk meg, mert az az összes többi rész sebességét meg fogja változtatni A mozifilmeken 24 fps A televízióban 25, illetve 30 fps A Flashben az alapértelmezett 12 fps

10 Határok 12 fps alatt észrevehető az ugrás
36 fps fölött nem minden gép képes a kivitelezésre Nagyobb képkockaszám esetén nagyobb lesz a fájlméret ugyanakkora lejátszási idő esetén

11 Kulcskocka Olyan képkocka, amelyben pontosan meghatározzuk, hogy mi történjen az adott pillanatban a színpadon Az üres kulcskockában semmi nem történik a színpadon Azt kell megadnunk, hogy mikor jelenjen meg a színpadon, és mit tartalmazzon

12

13 Átmenetkészítés A kulcskockákba azt teszünk, amit akarunk.
A két kulcskocka közötti rész megtartja a kulcskocka tartalmát Az átmenetkészítés kiszámítja, hogy hogyan kell az egyik kulcskockát átvinni a másikba.

14

15

16

17

18

19

20 A nyers animációs eljárás
Képkockáról képkockára Minden kép egy kicsit eltér a következőtől

21

22

23

24

25 Folytatás Készítsünk az előbbi módszerrel még 8 új kulcskockát, mindegyiken apró változtatásokkal!

26 Az animáció előnézete

27 Frame View

28

29 A hártyák használata Eredetileg a hagyományos animációknál használták
Kis változás esetén egy átlátszó lapot helyezünk az eredetire, és ott rajzoljuk meg a változást

30 hártya kezdete hártya vége Ezek mozgathatók

31 Modify Onion Markers

32 Modify Onion Markers Always Show Markers : A jelzők halványan mindig láthatók az időszalagon, még a hártyák kikapcsolásakor is Anchor Onion : Rögzíti a jelzőket Onion 2 : A jelző két kockával előre, illetve hátra van állítva Onion 5 : A jelző öt kockával előre, illetve hátra van állítva Onion All : A jelző az animáció elején és végén van.

33 Szünetek beépítése Egy hagyományos kocka behelyezésével oldható meg
A kulcskocka határozza meg, hogy mit lehessen látni közben. Egy másodperces mozdulatlanság esetén 12 fps-nél elhelyezhetünk 12 hagyományos kockát

34

35

36 Mozgás érzékeltetése

37

38

39

40 Pislákoló hatás

41

42

43

44

45 Tegyük ezt minden páros sorszámú kockával
A páratlan kockák időtartamát pedig növeljük meg.

46 Mozgásátmenet létrehozása

47

48

49

50

51

52 A mozgásátmenet szabályai
A kulcskockákban nem lehet több objektum Az egyetlen meglévő objektumnak szimbólumnak kell lennie

53

54 Megszegtük a mozgásátmenet szabályait

55 Tulajdonságok átmenete

56

57

58

59

60

61

62

63 Alapszabályok A mozgásátmenet csak egy objektumot használ, amely egy szimbólum Az objektumot mindig alakítsuk szimbólummá A kezdő és a befejező kulcskockán beállíthatjuk az objektum tulajdonságait Mindig figyeljük az időszalagot, hogy tényleg azt a kulcskockát szerkesszük, amelyiket szerettük volna.

64 Animáció befejezése kezdőpontban

65

66

67

68

69

70

71

72 Erősítés és csillapítás alkalmazása
Az előbbi animációban végig ugyanakkora sebességgel halad a labda. Erősítés: A mozgás lassan kezdődik és egyre gyorsabb Csillapítás: A mozgás gyorsan indul, majd egyre lassabb.

73

74

75 Animáció erősítéssel és csillapítással

76

77

78

79

80

81

82

83

84 Forgatás mozgásátmenetekben

85

86

87 Házi feladat Rajzoljunk olyan labdát, amely kicsit összenyomódik, amikor a földre ér, és utána visszapattan!

88 Átváltozás Olyan animáció, amely az egyik alakzatot természetes módon átviszi a másokba! A mozgással szemben minden jellemző átalakul.

89

90

91

92

93

94

95

96 Az alakzatátmenet szabályai
Nincsenek csoportok A szövegeket előbb fel kell bontani: Modify > Break Apart Az átmenetkészítés előtt minden csoportot fel kell bontani Kevésbé hatékony, mint a mozgásátmenet, lassabban játszódik le, nagyobb a fájlméret

97 Alakzattippek Megadható, hogy egy alakzat egyik pontja hogyan képeződjön le egy másik alakzat egy pontjára. Akkor érdemes használni, ha a Flash nem olyan átmenetet készít, mint amire számítunk.

98

99

100

101

102

103

104

105

106

107

108 !!! Játsszuk le! Az eredmény nem pont az, amire számítottunk!

109

110 Az első kulcskockán

111

112

113 Az első kulcskockán

114

115

116 Szabályok Nem adhatunk hozzá alakzattippeket, ha nem vagyunk egy olyan szakasz első kulcskockáján, amely már rendelkezik egy alakzatátmenettel A View > Show Shape Hints menüponttal megoldható, hogy ne lássuk az alakzattippeket Az alakzattippek csak akkor érvényesek, ha leképeződtek Az alakzattipp eltávolítása: Jobb gomb > Remove Hint Az alakzattippek csak két kulcskocka között alkalmazhatók.

117 Időszalaghatások használata

118

119

120

121 Az elmosás hatás alkalmazása

122

123

124

125 Időszalaghatások módosítása és szerkesztése
Újraszerkesztéssel megváltoztathatjuk a hatás jellegét, vagy viselkedését Megváltoztathatjuk az animált objektum tartalmát Lebonthatjuk az animációt az összetevőkig, így az összes tulajdonsága szerkeszthetővé válik.

126

127

128

129

130

131

132

133 Ezt ismételjük minden rétegre
Esetleg más más színeket állíthatunk be. Mindig csak egy réteg legyen látható.

134 Parancsok Egyszerű szövegfájlok, amelyek JSFL kódot tartalmaznak
Parancsok a JSFL megtanulása nélkül is létrehozhatók Mások által fejlesztett parancsok is letölthetők Commands > Get More Commands

135 Parancs mentése A következő lépéssort szeretnénk rögzíteni:
Rajzolunk egy téglalapot, amelynek a kitöltését eltávolítjuk A téglalap belsejébe beírunk egy szöveget Finomítjuk a kinézetet

136

137

138

139 Jelöljünk ki mindent!

140

141

142

143

144

145 Megjegyzés Vannak műveletek, amelyek parancsban nem menthetők
Ezeket a History ablak piros x jellel jelöli.

146

147

148

149

150 Dinamikus parancs készítése
Egy olyan parancsot szeretnénk készíteni, amely 20 képponttal jobbra helyezi az objektum másolatát!

151

152

153 Az alakzatot jelöljük ki, majd

154 ALT+SHIFT+VONSZOLÁS

155

156

157

158

159

160

161

162 Parancs a színpadon kívüli terület letakarásához

163 Jó nagy téglalapot rajzoljunk!

164

165

166

167

168

169

170

171

172

173

174 Hangok betöltése Nincs beépített lehetőség hangok felvételére, vagy létrehozására Külső fájlból tölthetünk be hangokat A hang betöltése részben hasonló a bitképek betöltéséhez

175 Támogatott hangformátumok
MP3 WAV AIF AU

176 Az MP3 előnye Az egyetlen forrás egy MP3 fájl
Már optimálisan tömörített

177

178

179

180

181 Összehangolási beállítások (sync)
Event : Akkor szólal meg, ha elérjük a kulcskockát, és addig szól, amíg a kulcskocka véget nem ér. (Több szólamú is lehet) Start : Ugyanannak a hangnak csak egy példánya lehet Stop : A háttérzenét leállítja Stream : A képváltás és a hang tökéletes összhangját biztosítja. (Lassabb gépeken kihagy képkockákat)

182 Hatásbeállítások (Effect)
Fade In : Fokozatos erősítés Fade Out : Fokozatos halkítás Fade from Left to Right : Fokozás balról jobbra Fade from Right to Left : Fokozás jobbról balra

183 Edit (Szerkesztés)

184

185

186

187

188

189

190

191 Közzétételi beállítások

192

193

194 Egyedi kiviteli beállítások

195

196 Rétegek Párhuzamos időszalagok
Más rétegek alatt, vagy fölött tárolódnak Külön-külön lehet rajtuk vezérelni az animációkat

197 Két kör animációja

198

199

200 A réteget átnevezhetjük a réteg nevére való dupla kattintással is

201

202

203

204

205

206

207

208

209

210 Réteg neve Rétegek megjelenítése, elrejtése Rétegek lezárása, lezárás megszüntetése Rétegek megjelenítése körvonalként

211 Rétegtípusok

212 Rétegtípusok Normal: Egyszerű lap, alapértelmezett
Guide: Segédalakzatokat, üzeneteket helyezünk el benne, a végső swf-ben nem jelenik meg a tartalma Motion Guide: Szintén vezetőréteg, de a mozgás görbéjét tartalmazza Mask: Meghatározza az alatta lévő réteg látható és láthatatlan részeit.

213 Rétegtípusok Masked: Azok a részei láthatóak, amit a maszkréteg láttatni enged Folder: Más rétegek ágyazhatók bele.

214 Tiltott területek meghatározása vezetőréteg segítségével

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229 Pattogó labda animációja mozgásvezető réteggel

230

231

232

233

234

235

236

237

238

239

240

241

242 Gyorsabb megoldás

243

244

245

246

247

248

249

250

251

252 Fényszóróhatás készítése a maszkolás segítségével

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267 A Halvány rétegen

268

269

270

271 A maszkok és vezetők korlátai
A maszkrétegen nem lehet egynél több szimbólum A maszkrétegeket és a vezetőrétegeket nem lehet ötvözni

272 Feladat Készítsünk olyan animációt, ahol felhők haladnak el egy ablak előtt!

273 Feladat Készítsünk animációt, ahol egy bolygó ellipszis pályán kering a Nap körül!

274 Forgó kerék készítése filmklip alkalmazásával

275 Fényszóróhatás készítése a maszkolás segítségével

276

277

278

279 A ForgoKerek szimbólumon belül

280

281 Ellenőrzés Menjünk vissza a jelenethez! (Scene1)
Ellenőrizzük a forgást!

282

283

284

285

286

287 Feladatok Készítsük el egy pöfékelő gőzmozdony animációját!
Készítsük el egy óriáskerék animációját!

288 VÉGE