Build en Promotional Ticker for nettstedet ditt med AS3 og Flash IDE
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Vi kommer til å være å skape en enkel promo ticker for et nettsted. Dette er flott hvis du har lite plass på hjemmesiden, eller hvis du bare vil ha de siste nyhetene eller produkter for å fange seere øyet. La oss komme i gang
Trinn 1: Last ned Tweener
Det første skritt vil være å kilden filene som trengs. For det første, laste Tweener fra http://code.google.com/p/tweener/. Se etter den siste stabile build under nedlastinger delen. Den jeg bruker er 1_33_74
Trinn 2:. Kilde Bilder fra
Jeg har også fått noen gratis bilder fra sxc.hu. Bildene du velger vil i stor grad avhenge av deg kategorier, men her er de jeg er using:
http://www.sxc.hu/photo/756577
http://www.sxc.hu/photo/1111567
http://www.sxc.hu/photo/1123775
http://www.sxc.hu/photo/1187878
I redigert bildene og skalert dem til dimensjoner på 136 x 95 piksler
Trinn 3:. Den Kataloger
katalogstrukturen er ganske enkel. En bildemappe for de preparerte bilder, en xml mappe for XML-dokumentet og blitsen er i roten
Trinn 4:. Installer Tweener
Pakk Tweener klasse til klasse mappe. Hvis du har brukt AS3 i noen tid, bør du ha en klasse mappe. Ellers ta en titt på dokumentasjon og les deg opp på hvordan du setter det opp. Klikk på nedlasting og installasjon linken på venstre side
Trinn 5:. Lag ditt XML
Jeg pleier å gjøre dette først, men finpusse det som jeg bygge flash-fil. Jeg gjør heller dette fordi jeg ønsker å legge til mer funksjonalitet, eller jeg tror XML filstrukturen kan være litt bedre. I alle fall ser det endelige XML-fil som dette:
< teaser > < element overskriften = "Awesome nye videoer." label = "video" image = "- bilde1.jpg" link = "http://www.videohive.net" > <! [CDATA [Vi elsker videoer. Og vi har noen nye her]] >.; < /element > < element overskriften = "Audio looper din bestemor ville elske." label = "audio" image = "- bilde2.jpg" link = "http://www.audiojungle.net" > <! [CDATA [Våre lydlooper hamrer].] > < /element > < element overskriften = "Flott grafikk gjør at verden går rundt." label = "grafikk" image = "- image3.jpg" link = "http://www.graphicriver.net" > <! [CDATA [live uten grafikk, neida, er bare altfor fryktelig at tanken].] > < /element > < element overskriften = "Dont slutte å lære." label = "tutorials" image = "- image4.jpg" link = "http://tutsplus.com" > <! [CDATA [Kunnskap er makt. . Ferdig]] > < /element > < /teaser >
Åpne opp din favoritt teksteditor, kopiere og lime inn XML-kode. En rask oversikt - EE starte XML-fil med en erklæring. Det er da en teaser node (i mangel av et bedre navn). Teaseren node har 4 barn noder som heter "element". Hvert element node har 4 attributter. De er "overskriften", "label", "image" og "link". Elementet node verdien er en CDATA delen. Det er best å ha en CDATA seksjon når du legger til en blokk med tekst i flash
Trinn 6:.. Lag Flash File
Åpne opp Flash. . Opprett en ny Flash-fil (Actionscript 3)
Gå til Endre > Dokument (Ctrl + J), sett film bredden til 600px og høyden til 200px. Endre th bakgrunnsfarge til # 999999 Lag to lag. Nevne den nederste "bakgrunn" og den øverste "tiltak". Lås handlinger lag Nå skal vi lage bakgrunn av vår promo ticker Velg den nyopprettede bakgrunnen og trykke F8 på tastaturet. Sørg for at "filmklipp" er valgt og gi den et navn på "bg" Nå skal vi skape de øverste knappene MovieClip. Gå til Sett > New Symbol (Ctrl + F8). Gi den et navn på "knappen" og sørg for at symbolet typen er satt til MovieClip Gå til Vindu >. Library (Ctrl + L). Finn "knappen" symbol i biblioteket, og dobbeltklikk på den. Dette vil ta deg til tidslinjen for symbolet. Legg til to nye lag. Nevn de tre lagene "bakgrunn", "text" og "tiltak" fra bunn til topp La oss legge det opp tilstand. På bakgrunn lag lage et rektangel med følgende egenskaper: Angi størrelsen på denne formen til 95px * 31px Bruk Polystar Tool for å lage en tre kantet polygon (trekant). Plasser denne like under rektangelet. Sentrere trekant og firkant Legg til en keyframe på bakgrunnslaget på ramme 2 av "knappen" MovieClip og skape en annen avrundet rektangel, bruke denne tiden en lineær gradient med disse verdiene: Duplicate rektangelet, klippe den i to og gi den følgende verdier: Juster toppen av disse to rektangler, og du har en enkel blank knapp På tekstlag legge et dynamisk tekstboks. Gi den en forekomst navnet "butLabelTxt". Jeg brukte Century Gothic 13pt som skriften. Jeg har også lagt en skygge til tekstboksen med følgende innstillinger: Resten av innstillingene er igjen som standard. På handlinger lag, legge en stop action på både ramme 1 og 2. Når dette er gjort, navigere tilbake til hovedtidslinjen. Nå vil vi gi knappen en kobling id. Åpne opp biblioteket ved å navigere til Vindu > Biblioteket eller bruke hurtigtasten Ctrl + L. Du bør ha kun ett element i biblioteket. Høyreklikk på "knappen" MovieClip og velg "Kobling". I Class-feltet skriver du navnet "Button" (merk hovedstaden B). Klikk OK Hit Ctrl + F8 for å opprette en ny MovieClip. Gi den et navn på "infoHolder". Lag tre lag. Navngi dem "bilde", "tekst" og "knappen". På bildet lag skape et avrundet rektangel med følgende egenskaper: Hit CTRL + F8 for å få opp "Create New Symbol" dialogboksen. Gi den et navn på "picBG", og legge til en skygge til dette rektangelet Mens han fortsatt på "bilde" lag, opprette et rektangel med følgende egenskaper: Convert dette rektangelet til en MovieClip ved å trykke F8 på tastaturet. Name it "holderClip" og gi den en forekomst navnet "holderClip_mc". Hit CTRL + K for å åpne opp sluttar panelet og midt justere disse to rektangler. På "teksten" lag opprette to dynamiske tekstbokser. Gi dem følgende egenskaper: Top tekstboks: Bottom tekstboks: Gi dem instans navnene "headingTxt" og "summaryTxt" henholdsvis Til slutt, på knappen lag, skape en ny MovieClip (Ctrl + F8), og kaller det "moreBut". Lag et avrundet rektangel med følgende egenskaper: Legg til en statisk tekstboks og skriv inn ordet "mer" inni den. Du kan også legge til et enkelt rektangel til å fungere som en romdeler og et plusstegn for en litt mer detaljert. Gi denne MovieClip en forekomst navnet "moreBut_mc". Navigere tilbake til hovedtidslinjen La oss gi den MovieClip en kobling ID. Åpne opp biblioteket og gi "infoHolder" klipp en kobling id av "InfoHolder" La oss kaste noen kode inn i blandingen. Gå til handlinger lag og traff F9 på tastaturet for å åpne opp handlinger panel. For det første vil vi importere Tweener og skape noen variabler. Kopier og lim inn følgende kode i handlinger panel. Det kan se ut som mye, men jeg har prøvd å kommentere hver eneste linje med kode Vi vil nå legge funksjonene. Under den siste linjen med kode, trykk enter to ganger og lim inn følgende: Det er det! Test din film. Du bør ha en promo ticker som kan brukes til å fremme nyheter, produkter eller noe av interesse på nettstedet ditt. Som nevnt tidligere, er det også en stor plass saver. Håper du likte den opplæringen.
Trinn 7:. Sett opp Layers
Trinn 8:. Lag bakgrunnen
. Sørg for at du er på bakgrunnslaget, deretter bruke rektangel verktøyet opprette et nytt rektangel med en størrelse på 548px * 128px
, og et hjørne radius på 8.
Gi det en lineær vertikal gradient med følgende verdier: #CCCCCC og #FFFFFF
. Slaget verdi er også satt til # 333333
og en høyde på 0,2
. Sentrere dette objektet til scenen ved å trykke Ctrl + K, noe som gjør at "Center for å iscenesette" er valgt. Klikk på "Juster horisontal sentrum" og "Juster vertikal center"
Trinn 9:.. Lag en MovieClip
Trinn 10:. Knapper Moveiclip
Trinn 11: Redigere Knapper
Trinn 12:. Up State
Ingen slag
Corner radius på 5
Lineær gradient fra # 2E3224 og # 48463A
.
Trinn 13:. The Down State
# 6BA2AA og # 82B8C0
#FFFFFF
Alpha: 10
Trinn 14: fullbyrde Button
Styrke: 80
Kvalitet: Høy
Avstand: 2
Trinn 15: Heis
Trinn 16:. Start Info Clip
148px * 104px
# 7AB1B9
Trinn 17:. Picture Holder Clip
136px * 95px
#FFFFFF
350 piksler * 50 piksler
350 piksler * 71px
Trinn 18:. Legg en knapp
100px * 25px
Liner Gradient egenskaper: #CCCCCC til #FFFFFF
Hjørneradius: 8
Trinn 19:. Heis
Trinn 20:.. Variablene
//importere tweener classimport caurina.transitions *; //oppretter et vriable å lagre en forekomst av URLLoader classvar xmlLoader:.. URLLoader = new URLLoader (); //legge til en hendelse lytteren til å lytte etter når lasteren er ferdig loading.xmlLoader.addEventListener (Event.COMPLETE, doComplete); //laste xml filexmlLoader.load (ny URLRequest ("xml /teaser. xml ")); //disse to variablene store tall som vi vil tildele verdier til later.var catNum: Number; Var newNum: Number; //disse to matriser vil lagre knappen names.var butClipMain: Array = []; Var butClip : Array = []; //tildeler den aktuelle knappen numbervar currBut: Antall = 0; //denne matrisen vil lagre lenke verdier fra xmlvar linksArray: Array = []; //vi tildele en variabel navn til en sprite eksempel. Dette sprite eksempel vil holde infoHolder movieclipvar holderSprite: Sprite = new Sprite (); //vi legge det til stage.addChild (holderSprite); //skaper vi en variabel til å lagre forekomsten av timeren klassen. Vi har også satt inn timeren til fem seconds.var timer: Timer = new Timer (5000); //legge til en hendelse listenertimer.addEventListener (TimerEvent.TIMER, doTimer); //starte timertimer.start ();
Trinn 21: Funksjonene
//opprette en funksjon som heter doCompletefunction doComplete (e: Hendelses): void {//oppretter en ny variabel til å lagre en forekomst av XML-klassen. Vi passerer gjennom data fra XML-filen. Var xml: XML = new XML (e.target.data); //vi lage en ny XMLList. Dette lagrer nodene vi ønsker å få tilgang i XML-filen. Var Katliste: XMLList = xml.item; //vi opprette en annen XMLList. Dette lagrer bildet egenskap av nodene. //Så vil den lagre plasseringen av bildet. -image3.jpg etc. Var bilder. XMLList = xml.item @ image; //vi tilordne en verdi til variabelen opprettet tidligere. //Avhengig av hvor mange elementer er i XML, vil dette tallet være forskjellig. //for eksempel catNum = 3. catNum = catList.length (); //starter vi en løkke for (var i: Antall = 0; i < catNum; i ++) {//her skaper vi forekomster av movieclips i biblioteket og legge dem til scenen. //oppretter en variabel til å lagre forekomster av klassene opprettet. Var men: Button = new Button (); //sette x plasseringen av knappen tilfeller //uttrykket legger avstanden mellom knappene but.x + = (95,8 * i) + 3 * i; //setter y posisjon på knappen tilfeller but.y = 18; //vi fortelle tilfeller å gå til deres andre ramme og stopp. //Dette blir deres "ned" -stilling but.gotoAndStop (2); //vi gir den dynamiske tekstboksen inne knappen litt tekst. //teksten vil være etiketten egenskap av hver node i XML. but.butLabelTxt.text = Katliste [i] @ label.; //vi tildele et navn til knappe tilfeller. //navn vil bli but1, but2, but3 but.name = "men" + i; //vi legger forekomstene til scenen addChild (men); //vi legger navnene på knappene til array opprettet tidligere butClip.push (but.name); //vi legger navnene på knappene til array opprettet tidligere butClipMain.push (but.name); //vi legge til linken verdiene til matrisen opprettet tidligere linksArray.push (Katliste [i] @ link.); //her skaper vi forekomster av movieclips i biblioteket og legge dem til scenen. //oppretter en variabel til å lagre forekomster av klassene opprettet. Var info: InfoHolder = new InfoHolder (); //setter x posisjonen til infoHolder tilfeller //uttrykket legger avstanden mellom knappene info.x = + (560 * i) + 5 * i; //angi y posisjonen til infoHolder tilfeller info.y = 50; //vi gir den dynamiske tekstboksen inne knappen litt tekst. //teksten for headingTxt tekstboksen vil være overskriften egenskap av hver node i XML. info.headingTxt.text = Katliste [i] @ overskriften.; //teksten for summaryTxt tekstboksen vil være CDATA delen av hver node i XML. info.summaryTxt.text = Katliste [i]; //vi tildele et navn til infoHolder tilfeller. //navn vil bli but1, but2, but3 info.name = "info" + i; //vi legge til en hendelse lytteren til mer knappen inne infoHolder info.moreBut_mc.addEventListener (MouseEvent.CLICK, doMore, falsk, 0, true); //vi satt buttonMode å true, slik at MovieClip vil fungere som en knapp. info.moreBut_mc.buttonMode = true; //vi legge til infoHolder tilfeller som barn av spriten vi opprettet tidligere. holderSprite.addChild (info); //vi lage en ny loader eksempel Var picLoader: Loader = new Loader (); //vi be om bilder Var picURLReq: URLRequest = nye URLRequest (bilder [i]); //vi laste bildene picLoader.load (picURLReq); //vi legger bildene til klippet inne infoHolder info.holderClip_mc.addChild (picLoader); //vi legge til en hendelse lytteren til knappen tilfeller. but.addEventListener (MouseEvent.CLICK, doClick, falsk, 0, true); //dette hindrer tekstboksen fra å være muse aktivert but.mouseChildren = false; } //Dette setter den første knappen eksempel på scenen til en "opp" posisjon ved å sende den til sin første rammen. MovieClip (getChildByName ("men" + 0)) gotoAndStop (1).; //vi setter newNum variabelen til én mindre enn verdien av variabelen catNum newNum = catNum - 1;} //skaper vi en ny funksjon kalt doTimer //denne funksjonen vil bli kalt hver 5 seconds.function doTimer (e: Timerevent ): void {//vi starte en betinget hvis setningen //sjekker den om den aktuelle knappen verdi er mindre enn newNum variable verdi hvis (currBut < newNum) {//vi øke verdien av currBut variable currBut ++; //vi kaller funksjonen prevBut og sende gjennom currBut verdi som et parameter prevBut (currBut); //vi kaller funksjons switchButtons og sende gjennom currBut verdi som en parameter switchButtons (currBut); //vi kaller funksjonen tweenSwitch tweenSwitch (); } //Else av den betingede //sjekker den currBut variabelen er lik newNum variabel else if (currBut == newNum) {//vi setter currBut variabel verdi tilbake til 0 currBut = 0; //vi kaller prevBUt funksjonen. Vi sender gjennom en parameter prevBut (newNum + 1); //vi kaller switchButtons funksjonen. Vi sender gjennom en parameter switchButtons (currBut); //vi kaller tweenStart funksjon tweenStart (); }} //Vi lage en funksjon som heter doCLick. Det håndterer knappen events.function doClick (e: MouseEvent): void {//vi oppretter en variabel. Verdien vil være navnet på den som ringer. //hvis but1 klikkes verdien av butString vil bli but1 Var butString: String = String (e.target.name); //vi opprette en annen variabel. Verdien er den første variable skiver. //hvis but1 klikkes verdien av slicedString vil være en Var slicedString: String = butString.slice (3); //vi lage en ny variabel og sette verdien slicedString som er type kastet til et tall. Var butNumber: Number = Number (slicedString); //hvis en knapp klikkes send den knappen for å ramme 1. sin "down" state e.target.gotoAndStop (1); //vi starte en annen sløyfe for (var j = 0; j < butClip.length; j ++) {//vi sløyfe gjennom knappene og sette dem til deres "opp" state MovieClip (getChildByName (butClip [j])). gotoAndStop (2); //vi satt på knappen som ble klikket til sin "down" state e.target.gotoAndStop (1); } //Vi stoppe timeren hvis en knapp klikkes timer.stop (); //vi kaller butTween funksjon og sender gjennom en parameter //hvis but1 klikkes parameteren vil være en butTween (butNumber);} //vi lage en funksjon som heter doMore //dette hendelseshåndterer tar vare på mer knappen i infoHolderfunction doMore (e: MouseEvent): void {//vi oppretter en variabel. Verdien vil være navnet på den som ringer. Var butString: String = String (e.target.parent.name); //vi skjære butString verdien til bare antall //så hvis info1 trykkes slicedString vil være en Var slicedString: String = butString.slice (4); //hvis info1 trykkes det vil gå til den første nettadressen i linksArray //det første elementet i denne matrisen vil være lik lenken egenskap av det første barnet node i XML. navigateToURL (ny URLRequest (linksArray [Number (slicedString)]));} //vi lage en funksjon kalt prevBut som forventer en parameter //denne funksjonen håndterer den forrige knappen som knapp beveger seg fra videre til nextfunction prevBut (butValue: Antall ): void {//setter den forrige knappen til sin "opp" state MovieClip (getChildByName ("men" + (butValue-1))) gotoAndStop (2);.} //vi lage en funksjon som heter switchButtonsfunction switchButtons (butValue: Number): void {//setter den aktuelle knappen til sin "down" state MovieClip (getChildByName ("men" + butValue)) gotoAndStop (1);.} //vi lage en funksjon som heter tweenSwitch //denne funksjonen håndterer tweening av sprite objectfunction tweenSwitch (): void {//den holderSprite flyttes -560px hvert 5. sekund. Den beveger seg -560px fordi det er omtrent den bredden av en infoHolder Tweener.addTween (holderSprite, {x: holderSprite.x - 560, tid: 1, overgang: "easeOutQuad"});} //vi lage en funksjon kalt tweenStart //denne funksjonen håndterer begynnelsen av animationfunction tweenStart (): void {//hvis promo ticker starter i begynnelsen, setter vi den sprites stilling til 5. Tweener.addTween (holderSprite, {x: 5, tid: 1, overgang : "easeOutQuad"});} //vi lage en funksjon som heter butTween //denne funksjonen håndterer knappetrykk. Det tar vare på hvordan sprite reagerer når en knapp trykkes .//det forventer en parameter. Hvis but1 ble trykket, ville parameteren være en etc.function butTween (moveValue: Number): void {//vi starte en Hvis betinget //sjekker om verdien av den parameteren er 0 hvis (moveValue == 0) {//hvis parameteren er 0, flytt sprite til sin startposisjon Tweener.addTween (holderSprite, {x: 5, tid: 0,5, overgang: "easeOutQuad"}); //nullstille currBut variabelverdien currBut = moveValue; //starter tidtakeren på nytt timer.start (); } //Annet av den betingede else {//hvis en av de andre knappene trykkes flytte sprite til riktig sted Tweener.addTween (holderSprite, {x: moveValue * -560, tid: 0,5, overgang: "easeOutQuad"} ); //setter currBut variabelverdien 0,1 etc. Tilsvarer knappen som ble trykket currBut = moveValue; //starter tidtakeren. timer.start (); }}
Konklusjon