Interaktivitás hozzáadása és haladó animáció. Gombok Az interaktivitás legegyszerűbben gombok segítségével valósítható meg Ha a felhasználónak kedve támad,

Az előadások a következő témára: "Interaktivitás hozzáadása és haladó animáció. Gombok Az interaktivitás legegyszerűbben gombok segítségével valósítható meg Ha a felhasználónak kedve támad,"— Előadás másolata:

1 Interaktivitás hozzáadása és haladó animáció

2 Gombok Az interaktivitás legegyszerűbben gombok segítségével valósítható meg Ha a felhasználónak kedve támad, akkor egyszerűen rákattint a gombra, amivel beavatkozhat.

3 Egy gomb elkészítése

4

5

6

7 A gomb fölött az egérkurzor alakja megváltozik

8 Egy egyszerű gomb állapotainak elkészítése

9 Felengedett Érintési Lenyomott Találati

10

11

12

13

14

15 A gomb találati területének (hit) megadása Egy összetett alakzat esetén a gombhoz tartozó érzékelési területet tudjuk helyettesíteni egy egyszerűbb alakzattal.

16 Gomb készítése különösen nagy találati területtel

17

18

19

20

21

22

23 Többállapotú gomb ismételt elkészítése, minden állapotban szimbólummal

24

25

26

27

28

29

30

31

32

33

34

35 Animált gombok

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55 Gombok nyomkövetési módjai Gombként viselkedik Menüként viselkedik

56 Az érintési állapotban hangot adó gomb elkészítése

57

58

59

60

61

62

63

64

65 Folyamatos hangot adó gomb készítése

66

67

68

69 Láthatatlan gomb készítése

70

71

72 Edit > Cut, Edit > Paste in Center

73

74

75 Az ActionScript használata A Flash saját programnyelve Olyan utasításokat adunk meg, amelyeket a filmünk követni fog Ebben a leckében csak az alapokkal ismerkedünk meg, a részletes ismertetés jóval később fog megtörténni. Window > Action

76 Eszköztár Keresés és csere Kódtipp mutatása Hibakeresés beállításai Beállítások Utasítás hozzáadása Nyelvtan ellenőrzése Elérési út beszúrása Automatikus formázás Kódnavigátor Aktuális kód Kódrészlet kitűzése

77 Toolbox (Eszköztár) : –Az összes telepített műveletet megtaláljuk, mappákba rendezve Script (Kód) : –A műveletek a végrehajtási sorrendjükben jelennek meg. Navigator (Navigátor) : –A filmünk összes kódját megtaláljuk Current script (Aktuális kód) : –Megmutatja, hogy éppen melyik kódrészletet szerkesztjük

78 Pin Script (Kódrészlet kitűzése) : –Saját lapot hozhatunk létre egy adott kódrészlethez, hogy ne kelljen mindig kiválasztani az adott objektumot, vagy réteget Options (Beállítások) : –További lehetőségek, például betűtípus beállítása Reference (Kézikönyv) : –A kiválasztott kóddal kapcsolatban kaphatunk segítséget

79 Options Add Statement (Utasítás hozzáadása) : –"plusz gomb". Ugyanazokat a kódelemeket tartalmazza, mint az eszköztár Find and Find and Replace (Keresés, Keresés és Csere) : –Ezekkel a gombokkal kereshetünk ki kódrészleteket, éppen úgy mint egy szövegszerkesztőben

80 Options Insert Target Path (Elérési út beszúrása) : –Egy adott objektumot címezhetünk meg Check Syntax (Nyelvtan ellenőrzése) : –Megnézhetjük, hogy a kódunk szintaktikailag hibátlen-e. Auto Format (Automatikus formázás) : –A kódot áttekinthetőbbé teszi

81 Options Show Code Hint (Kódtipp mutatása) : –A kódkiegészítő segéd bekapcsolása Debug Options (Hibakeresés beállításai) : –Töréspontok adhatók meg azokon a helyeken, ahol meg szeretnénk állítani a kód futását View Options (Nézetbeállítások) : –szabályozhatjuk a kód megjelenítését

82 Filmrészlet folyamatos ismétlését végző művelet elkészítése

83

84 Edit > Cut, Edit > Paste in Center

85

86

87

88

89

90

91

92

93

94

95

96 A képkocka címkéjének átadása a gotoAndPlay műveletnek

97

98

99 Gombok hozzáadása egy animációhoz, amelyekkel a lejátszás megállítható és folytatható

100

101

102

103

104

105

106

107

108 A Lejátszás gomb utasításai on(press){ play(); }

109

110 Művelet hozzáadása egy filmklip példányához

111

112

113

114 A Filmklip parancsai onClipEvent (load) { stop(); } onClipEvent (mouseDown) { play(); } onClipEvent (mouseUp) { stop(); }

115

116 Viselkedések használata Window > Behaviors Viselkedés beszúrása Viselkedés törlése Objektum neve Eseménylista Beállítások Előrébb visz / hátrébb visz Művelet / viselkedés neve

117 Add Behavior (Viselkedés beszúrása) : –A viselkedés kiválasztására szolgál Delete Behavior (Viselkedés törlése) : –Eltávolítja a kijelölt viselkedést Event (Esemény) : –A viselkedést kiváltó esemény kiválasztása Action (Művelet) : –A viselkedés nevére duplán kattintva, azt újra beállíthatjuk

118 Weblaphoz kapcsolódó gomb készítése

119

120

121

122

123

124

125

126 Automatikusan legenerálódott a következő kód on (release) { //Goto Webpage Behavior getURL("http://szerver2.lacszki.sulinet.hu","_self "); //End Behavior }

127 Beágyazott példányok megcímzése

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146 A Leallitas gomb scriptje on (press) { stop(); }

147 Játsszuk le A kocsi leáll, de a kerekek tovább forognak.

148 A kód kiegészítése on (press) { stop(); this.kocsi1.elsokerek.stop(); this.kocsi1.hatsokerek.stop(); }

149 A Lejatszas gomb scriptje on (press) { play(); this.kocsi1.elsokerek.play(); this.kocsi1.hatsokerek.play(); }

150 Egyszerű húzható objektum elkészítése

151

152

153

154 A Doboz scriptje on (press) { startDrag(this); } on (release) { stopDrag(); }

155 A húzás területének behatárolása A téglalapot ne lehessen lehúzni a színpadról.

156 A téglalap scriptje on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550-this._width/2, 400- this._height/2); } on (release) { stopDrag(); }

157 Ellenőrizzük, hogy hová esik az objektum Hozzunk létre egy másik, nagyobb objektumot, a téglalapot csak ebben lehessen elengedni.

158

159

160

161 A Doboz scriptje on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550-this._width/2, 400-this._height/2); } on (release) { stopDrag(); if (this.hitTest(_parent.Keret1)) { trace("Rendben"); } else { trace("Hiba!"); }

162 Módosítás Mivel a szöveg a weblapon nem íródik ki, a téglalapot rossz pozíció esetén ugrasszuk vissza a bal felső sarokba, jó pozíció esetén a keret közepébe.

163 A Doboz scriptje on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550- this._width/2, 400-this._height/2); } on (release) { stopDrag(); if (this.hitTest(_parent.Keret1)) { this._x = _parent.Keret1._x; this._y = _parent.Keret1._y; } else { this._x = this._width/2; this._y = this._height/2; }

164 A felhasználó nevének beolvasása változó segítségével

165

166 NE LEGYEN KIPIPÁLVA!!!

167

168 A Gomb scriptje on (press) { nextFrame(); } on (keyPress " ") { nextFrame(); }

169 A Layer 1:1 scriptje stop();

170

171

172 A Layer 1:2 scriptje uzenet.text = "Szia "+fhnev;

173 Változó értékének növelése

174

175

176 A Gomb scriptje on (press) { szamlalo++; }

177 A változó anélkül is változhat, hogy látnánk a színpadon Távolítsuk el a számláló mezőt a színpadról! Helyezzünk el egy másik, üzenet nevű mezőt!

178

179 A Gomb scriptje on (press) { szamlalo++; uzenet.text = "A kattintások száma: "+szamlalo; }

180 Filmklip áttetszőségének módosítása

181

182

183

184 A Gomb scriptje on (press) { klip._alpha = 50; }

185 Egy klip áttetszőségének értékét növelő és csökkentő gombok elkészítése

186

187 Csökkentő gomb on(press){ klip._alpha = klip._alpha-10 }

188 Növelő gomb on(press){ klip._alpha = klip._alpha+10 }

189 Egyedi tulajdonságok létrehozása és módosítása egy filmklipben

190

191

192

193 A Labda scriptje onClipEvent (enterFrame) { this._x += this.speed; }

194 Az előre gomb scriptje on(press){ labda1.speed = 5; }

195 A hátra gomb scriptje on (press) { labda1.speed = -5; }

196 A leállító gomb scriptje on (press) { labda1.speed = 0; }

197 A ComboBox összetevő kézi feltöltése adatokkal

198 Window > Components

199

200

201

202 A ComboBox összetevő adatainak megadása ActionScript segítségével A Layer 1:1 scriptje Lista.removeAll(); Lista.addItem("Iskola", "http://szerver2.lacszki.sulinet.hu"); Lista.addItem("Linux", "http://www.distrowatch.com"); Lista.addItem("GMail", "http://www.gmail.com");

203

204 ActionScript kód futtatása a ComboBox összetevő segítségével A Lista scriptje on (change) { getURL(this.selectedItem.data, "_self"); }

205

206 A RadioButton összetevő használata

207

208

209

210

211

212

213 A Layer 1:1 scriptje stop(); Tovabb.onPress = function() { szoveg = "A továbbított adat: "+radioGroup.selectedData; nextFrame(); }

214 A Layer 1:2 scriptje uzenet.text = szoveg;

215 VÉGE