Lav en flot Knap i Flash

Tags:    grafik
Skrevet af Bruger #5289 @ 26.03.2004

Kan bruges til alle versioner af Flash






1. Omdøb den første lag til "knapper". Tryk på "O" tast og tegn en cirkel. Vælg hele cirklen ved at dobbeltklikke den, eller tryk på "V" tast og træk en markeringsområde over hele cirklen. Efter du har valgt cirklen med tilhørende linie tryk "F8" for at lave cirklen til en symbol.



2. Når du har udfyldt "Symbol Proporties" på den måde, som der er vist på tegningen, tryk "OK". Bagefter tryk på "CTRL + L", nu kan du finde symbol "knap" i din bibliotek (Library). Prøv og træk "knap" fra biblioteket op på scenen. (Sådan gører du hvis du skal have flere ens knapper på scenen)



3. Nu skal du dobbeltklikke din "knap" på scenen. Læg mærke til at nu er du i selve symbolet "knap" (rød cirkel). Her skal du starte med at omdøbe "Layer1" til background og bagefter tilføje følgende lag: lys, lys2, effect, skygge. Du tilføjer ved at trykke på "+" (grøn cirkel). Hvis du har flere lag end du skal bruge, så skal du trække de lag i skraldspand (blå cirkel), du kan også bare vælge dem og trykke på skraldspand.



4. På lag "background" vælger du cirklens indhold ved at klikke i midten af cirkel. I "Fill" panelet skal du i sted for "Solid" vælge (rød cirkel) "Radial Gradient". Vælg to toner af samme farve (f.eks mørk grøn og lysegrøn) ved at trykke først et lille farve fane (blå cirkel) og bagefter klik på farve vindue (grøn cirkel).



5. Tryk "K" tast og klik forskellige steder i cirklen, se hvad der sker. Prøv også i "Fill" panelet at skubbe farve fanerne lidt og klik bagefter i cirklen igen. Når du er færdig med at lege skal din opstilling se ca. sådan ud, som er vist på tegningen.



6. Tryk på linien omkring cirklen, dvs. Vælg den. I "Stroke" panelet skal du i sted for "Solid" vælge (rød cirkel) "Hairline". Vælg farven (blå cirkel) til at være den mørke tone af den farve som du har valgt (f.eks mørk grøn).



7. Nu skal du igen vælge hele cirklen og trykke "CTRL + G", på den måde grupperer du cirklens streg og dens indhold, så de hænger sammen. Vælg cirklen igen, men denne gang vil der være en blå firkant rundt om den. Tryk "CTRL + C" for at kopiere cirklen.

Tryk på en lille prik under "øjet" på "background" lag (rød cirkel), for at gøre den lag usynlig. Vælg lag "skygge" skal gerne ligge under "background"



8. Højreklik på scenen og vælg "Paste in Place" ud af menuen. Cirklen skulle gerne ligge på scenen i lag "skygge". Nu skal du i "Modify > Transform" vælge "Edit Center", hvilket tildeler din cirkel gruppering en center.



9. I "Transform" panelet søg for at "Constrain" er valgt (rød cirkel). I sted for 100% skriv 140%. Husk at trykke "Enter" tast efter du har tastet værdien ind.



10. Dobbeltklik cirklen, nu er du inde i en gruppering. Slet stregen rund om cirklen. Vælg cirklens indhold og i "Fill" panelet vælg først "Solid" og bagefter "Radial Gradient" igen for at få gradient centreret. I "Fill" vælg begge farver til at være sorte. Tryk på farve fanen til højre (rød cirkel) og I "Mixer" panelet Alpha: 0% (blå cirkel). (Cirklens indhold skal være valgt under hele forløbet). Nu kan du trykke væk og se hvordan skyggen ser ud.



11. Gør "background" lag synlig og lås den (rød cirkel). Tryk på linket til "knap" (blå cirkel) for at komme ud af grupperingen. Nu kan du se hvordan vores knap ser ud. Vælg skyggens cirkel og tryk "CTRL + B" for at ødelægge grupperingen (nu har du ikke mere brug for det mere alligevel). Hvis du vil vælge skyggecirklen på lag "skygge" kan du ved hjælp af "Mixer" og "Fill" paneler justere udseende af skyggen.



12. Du skal kopiere skyggecirklen til lag "lys" ved hjælp af "Paste in Place". Lås lag "skygge" bagefter. Nu skal du ændre farver i "Fill" panelet begge til hvid. Den til højre, som i trin 10 skal sættes til Alpha: 0%. Skift baggrundsfarve pådin scene til mørk, så du kan se den lyse gradient. Vælg den og tryk "CTRL+G" for at gruppere den. Før du går i gang med at ændre på cirklens form skal du kopiere den til lag "lys2" (Altid med "Paste in Place"). Efter du har gjort det lås og gør lag "lys2" usynlig.



13. I lag "lys" vælg lyscirklen og brug "Rotate" og "Scale" værktøjer (red cirkel) på "Tool" panelet til at lave en slags spotlight på kuglen. Vælg cirklen i denne Lås og gør lag "lys" usynlig.



14. Nu skal lag "lys2" gøres synlig og låses op igen. Du skal kopiere cirklen til samme lag igen, så du har to at arbejde med. Eftersom du har brugt "Paste in Place", så ligger den ene cirkel ovenpå den anden. Vælg den øverste cirkel og ved hjælp af pil taster flyt den højre lidt højre op.



15. Dobbeltklik den cirkel du har flyttet og vælg blå farve. Nu skal du ud af gruppering (tryk link til "knap"). Vælg begge cirkler på lag "lys2" og tryk "CTRL + B" flere gange for at ødelægge grupperinger. Slet blå cirkel.



16. Vælg den nye form og ved hjælp af "Scale" værktøj fra "Tool" panelet og pil taster placer formen sådan, som der ses på tegningen



17. Gør alle lag synlige. Tilføj flere frames, ved at trykke "F5", i alle lag. Lag "skygge" skal have frame i "Hit" area (rød cirkel). I denne tutorial vil vi ikke gennemgå hvordan man laver flotte effekter i lag "effect". Tryk på link "Scene" (blå cirkel). Nu er du på scenen. Skift baggrundsfarve til en mere lys og betragt din færdig knap.



18. Sådan burde den se ud...



Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Kommentarer (8)

User
Bruger #4887 @ 26.03.04 19:33
Shit den er nice :D 5 fra mig :D
User
Bruger #4887 @ 26.03.04 19:53
Kom til at gi 4 sorry ;D
User
Bruger #5394 @ 26.03.04 23:00
Det ser godt ud.
Savner dog en lille måde til at få den til at virke, feks lave en lille mouseover eller animation, det jo det man forbinder med flash og ikke statisk grafik.
Udover det er den flot nok :)
User
Bruger #5289 @ 04.04.04 12:18
Vent til kommende artikler
User
Bruger #9697 @ 17.03.06 22:47
rigtig nice lavet !

kunne godt bruge det ;)
User
Bruger #12431 @ 01.10.07 13:13
Hold da kæst den er flot!
5 fra mig!
User
Bruger #14845 @ 01.04.09 13:08
Nogen som har fået den til at virke i CS3?
User
Bruger #14510 @ 13.07.09 23:33
@Thore

du kan lave noget lign. i illustrator :D

men jeg kan ikke få den til det i CS3 :/
Du skal være logget ind for at skrive en kommentar.
t