Hvordan laves et Flash banner

…

Og hvordan sættes det ind i en Joomla site

ForberedelserBestem på forhånd størrelse på flash objekt. Eksemplet laver et 800x200 banner, men der kan laves hvad som helst

ALLE grafiske stumper gøres klar på forhånd, herunder LOGO, andre tekster lavet i Photoshop, små billeder, baggrund til banneret, etc. Eksempel fra Bridge screenshot

Eksemplet her viser 4 små 111 x 140 portætter og 2 PNG med transparent baggrund, et ”logo-træ” og græs, der skal anvendes til baggrund

12

34

5

67

Start Adobe Flash

Start NY flash – Actionscript 3

Sæt størrelse til 800 x 200 – bevar HVID som baggrund

8

9

10

11

12

13

14

Rght-click Layer-1 og rename til background via Properties

Lav nyt layer – rename til Logo Text (I dette tilfælde bruger vi bare tekst til logo – det kunne selvfølgelig godt have været et image af en slags

Vælg Text Tool

Vælg en grøn farve i Properties for Text Tool – vær sikker på at Alpha er 100%

15

16

17

18

1920

21

22

23

24

Vælg Size=25 og font Showcard Gothic

Click et sted på den hvide baggrund og skriv ”Festival for Planet Earth” (vi kan flytte den senere)

Marker ”Earth” og vælg ny size for det = 58

Vælg Tool Move (V = den sorte pil)

Lav nyt layer – rename til Logo tree

25

26

27

28

29

30

31

32

33

34

35

Import to Library – globetree_logo.png

Åbn Library – vælg globetree_logo.png

Træk billedet ind på laget logo tree og placer som vist

Juster text layer så det er fri af træet og placer som vist (click på en del af teksten som er helt fri fra træet og træk-og-slip – tekst laget skulle automatisk blive valgt)

36

37

38

39

40

41

42

4344

Vælg igen logo tree layer – lav nyt lag – rename til images

Import to Library – vælg brad-pitt.jpg – og click Open

Åbn Library – vælg brad-pitt.jpg og placer som vist på images layer

Lav image til symbol – F8 og kald symbol images – husk at tjekke at Type = movie clip

Billedet har nu en ”bolle” i midten som viser at det er et symbol

45

46

47

48

49

50

51

52

53

54

55

Double-click billedet

Vælg billedet igen – F8 og kald det nye symbol brad

Vi er nu ”inde i symbol images og har nu et underliggende symbol kaldet brad – rename Layer 1 til samme navn – altså brad

Lav nyt layer – kald det temp

Import to library – vælg de 3 andre portrætter på én gang – depp, bush, monk – click Open og alle 3 kommer ind

Åbn library og vælg alle 3 nye portrætter og placer dem som vist – oven på hinanden

56

57

58

5960

61

62

63

6465

66

67

UDEN at klikke på noget som helst andet – højreclick og vælg distribute to layers

Tjek at layer listen nu ser således ud

Click temp layer og slet det

click på monk layer – tryk F8 og kald symbol monk

Uden at gøre andet vælg johnny_depp layer – F8 og kald det depp (det er okay at aben stadig er øverst)

Vælg gbush layer – F8 og kald det bush (stadig okay at aben er øverst)

Vælg nu brad layer – vi kan se at ”bollen” er markeret i billedet

I een samlet click-drag operation marker nu frame 120 for alle layers

68

69

70

71

72

73

74

75

7677

78

79

80

Tryk nu F5 (fyld ud funktion) og det skulle nu se således ud

Vælg monk layer – og med piletasterne flyt billedet så det er fri af de andre billeder

Vælg johnny_depp layer og flyt igen billedet til et andet sted med piletaster

Og endelig flyt gbush layer på samme måde

Igen med én samlet click-drag operation – vælg frame 40 for alle layers

Tryk F6 – altså indsæt keyframes for alle lag – og split dermed lagene i 2 dele

81

82

83

84

85

86

87

88

89

90

91

92

93

Gør nu det samme i frame 80 for alle layers

Alle lag har nu 3 dele – svarende til at vi går efter en ENTRY, en statisk del og en EXIT for alle billederne

Vælg layer brad – frame 1

Højre-click frame 1 og vælg Create Motion Tween

Click nu på selve billedet i stage

I Properties til venstre – vælg Color Effect – vælg Alpha og sæt denne til 0%

Tilbage i stage er nu kun en blå ramme omkring billedet

94

95

96

9798

99

100

101

102

103

104

105

106

107

108

Vælg nu frame 39 for layer brad

Click igen selve billedet (dvs den blå ramme) og sæt Alpha til 100% og billedet bliver igen tydeligt

Layer for brad ser nu sådan ud – altså med en ”diamond” i frame 39

ENTRY effekten er altså en slags fade-in – fra helt usynlig til fuldt synlig

Vælg fra 80 – højreclick og vælg Create Motion Tween

Her skal vi sætte start værdi til 100% (i frame 80) - og slutværdi (i frame 120) til 0%. Igen husk at vælge selve billedet for at få adgang til Properties på billedet (symbolet)

Efter dette ser det således ud

Vælg frame 1 i layer brad – højreclick og vælg Save Motion Preset – navngiv til image_fade_in

109

110

111

112

113

114

115

116

117

118

119120

121

122

123

124

Vælg frame 80, højreclick og Save Preset på samme måde og navngiv til image_fade_out

Vælg nu frame 1 for de 3 andre lag – husk én samlet click-drag operation

Åben Motion Preset panelet til højre og find Custom presets – vælg image_fade_in – click Apply

Vælg frame 80 for de 3 lag – igen én samlet click-drag operation

Igen i Motion Preset panelet vælg Custom Presets og vælg nu image_fade_out

125

126

127

128

129

130

131

132

133

134

Og det hele ser nu således ud

Det eneste vi nu mangler er at forskubbe effekterne i forhold til hinanden så vi fader in på første billede – bliver lidt og så fader ud på billedet SAMTIDIGT med at vi fader ind på det næste billede

Click gbush layer – det ser således ud

Alt i laget er nu valgt og DET HELE kan nu trækkes mod højre – og ”slippes” hvor vi vil. Drag/drop så det ser således ud

Altså at gbush layer starter sin sekvens ca midt i EXIT animationen for brad layer

Vælg de andre lag – og drag/drop dem på samme måde – begynd alle animationer ca halvvejs i EXIT for forrige billede. Når musen kommer langt til højre ”scroller” Timeline automatisk sidelæns.

Vi har nu fyldt ud til frame 410-415 eller deromkring – sidste del ser nu således ud

Click nu på Scene for at forlade images delen vende tilbage til stage

135

136

137

138139

140

141

142143

144

145

146147

148

149

150

Vi mangler et enkelt lag – nemlig græsset allerøverst

Lav nyt layer – kald det grass

Import to layer – vælg grass_footer

Åbn Library – og drag/drop grass_footer ind på layer grass

I dette tilfælde lader vi bare græsset gå ud over i begge sider – det kan selvfølgelig resizes hvis det ønskes.

Tryk nu CTRL-ENTER for at teste den færdige SWF (=flash animation)

151

152

153

154

155

156

157

158

159160

161

Flash’en er nu færdig og SWF delen ligger samme sted som FLA kilde-filen er gemt. Intet andet er nødvendigt for at kunne benytte SWF’en i en Joomla site.

162

163164

Indsæt en Flash fil (SWF) på en Joomla website (én metode)

Til dette anvendes et module downloadet fra http://extensions.joomla.org/

Download ovenstående og læg filen (zip) et veldefineret sted (ex. C:\downloads)

Åben Joomla site og gå til Extensions - install/uninstall

Click Choose file og vælg mod_flashmod_v3.0.2.zip

165

166

167

168

169

170

171

172