Share
Vi skal lage en enkel promo ticker for et nettsted. Dette er flott hvis du bruker lite plass på hjemmesiden, eller hvis du bare vil ha de siste nyhetene eller produktene for å fange seerne. La oss komme igang!
Det første trinnet er å kilde filene som trengs. For det første, last ned Tweener fra http://code.google.com/p/tweener/. Se etter den nyeste stabile bygningen under nedlastingsseksjonen. Den jeg bruker er 1_33_74.
Jeg har også fått gratis bilder fra sxc.hu. Bildene du velger vil i stor grad avhenge av deg kategorier, men her er de jeg bruker:
Jeg redigerte bildene og skalerte dem til dimensjoner på 136 x 95 piksler.
Katalogstrukturen er ganske enkel. en Bilder mappe for prepped bilder, an xml mappe for XML-dokumentet og blitsen er i rot.
Trekk ut Tweener-klassen til klassemappen din. Hvis du har brukt AS3 for en stund, bør du ha en klassemappe. Ellers kan du se på dokumentasjonen og lese om hvordan du setter opp det. Klikk på nedlastings- og installasjonslenken på venstre side.
Jeg pleier å gjøre dette først, men tweak det som jeg bygger flashfilen. Jeg gjør heller dette fordi jeg vil legge til mer funksjonalitet, eller jeg tror XML-filstrukturen kan være litt bedre. I alle fall ser den endelige XML-filen ut slik:
Åpne din favoritt tekstredigerer, kopier og lim inn XML-koden. En rask gjennomgang - ee starter XML-filen med en erklæring. Det er da en teaser node (for mangel på et bedre navn). Teaser node har 4 barnnoder kalt "item". Hver varenummer har 4 attributter. De er "overskrift", "label", "bilde" og "link". Varenummerverdien er en CDATA-seksjon. Det er best å ha en CDATA-seksjon når du legger til en blokk med tekst i flash.
Åpne Flash. Opprett en ny Flash-fil (Actionscript 3).
Gå til Endre> Dokument (Ctrl + J), sett filmbredden til 600px og høyden til 200px. Endre bakgrunnsfargen til # 999999.
Lag to lag. Navngi den nederste en "bakgrunn" og den øverste en "handlinger". Lås handlingslaget.
Nå skal vi lage bakgrunnen til vår promo ticker. Pass på at du er på bakgrunnslaget, og bruk deretter rektangulærverktøyet til å lage et nytt rektangel med en størrelse på 548px * 128px, og en hjørne radius på 8.
Gi den en lineær vertikal gradient med følgende verdier: #CCCCCC og #FFFFFF. Strekningsverdien er også satt til # 333333 og en høyde på 0.2. Senter dette objektet til scenen ved å trykke Ctrl + K, og sørg for at "Senter til scene" er valgt. Klikk på "Juster horisontal senter" og "Juster vertikalt senter".
Velg den nyopprettede bakgrunnen og trykk F8 på tastaturet. Pass på at "Filmklipp" er valgt og gi det navnet "bg".
Nå skal vi opprette toppknappene movieclip. Gå til Sett inn> Nytt symbol (Ctrl + F8). Gi det navnet på "knappen" og sørg for at symboltypen er satt til Movieclip.
Gå til Window> Library (Ctrl + L). Finn "knappen" symbolet i biblioteket og dobbeltklikk på det. Dette tar deg til tidslinjen for symbolet. Legg til to nye lag. Navngi de tre lagene "bakgrunn", "tekst" og "handlinger" fra bunn til toppen.
La oss legge til opptilstanden. På bakgrunnslaget lag et rektangel med følgende egenskaper:
Still størrelsen på denne formen til 95px * 31px.
Bruk Polystar-verktøyet til å lage en tresidig polygon (trekant). Plasser dette like under rektangelet. Senter trekant og rektangel.
Legg til en keyframe på bakgrunnslaget ved rammen 2 av "knappen" Movieclip og opprett et annet avrundet rektangel, denne gangen bruker du en lineær gradient med disse verdiene:
Dupliser rektangelet, skjær det i halv og gi det følgende verdier:
Juster toppen av disse to rektanglene, og du har en enkel glanset knapp!
Legg til en dynamisk tekstboks i tekstlaget. Gi det et forekomstnavn på "butLabelTxt". Jeg brukte Century Gothic 13pt som skrift. Jeg har også lagt til en dråpeskygge i tekstboksen med følgende innstillinger:
Resten av innstillingene er igjen som standard.
På handlingslaget legger du til en stopphandling på både ramme 1 og 2. Når du er ferdig, navigerer du tilbake til hovedtidslinjen.
Nå skal vi gi knappen et koblings-ID. Åpne biblioteket ved å navigere til Vindu> Bibliotek eller bruk snarveien Ctrl + L. Du bør bare ha det ene elementet i biblioteket ditt. Høyreklikk på "knappen" Movieclip og velg "Linkage". I feltet Klasse skriver du navnet "Knapp" (merk hovedstaden B). Klikk på OK.
Trykk Ctrl + F8 for å lage en annen filmklipp. Gi det navnet på "infoHolder". Lag tre lag. Gi dem navnet "bilde", "tekst" og "knapp". På bildet laget lag et avrundet rektangel med følgende egenskaper:
Trykk CTRL + F8 for å få frem dialogboksen "Create New Symbol". Gi det navnet "picBG", og legg til en dråpe skygge til dette rektangelet.
Mens du fortsatt er på "bilde" -laget, lager du et rektangel med følgende egenskaper:
Konverter dette rektangelet til en Movieclip ved å trykke F8 på tastaturet. Gi det navnet på "holderClip_mc". Trykk CTRL + K for å åpne justeringspanelet og sentrere disse to rektanglene.
Lag på "tekst" -laget to dynamiske tekstbokser. Gi dem følgende egenskaper:
Topp tekstboks:
Bunntekst:
Gi dem forekomstnavn for henholdsvis "headingTxt" og "summaryTxt".
Til slutt, på knappelaget, opprett en ny filmklipp (Ctrl + F8), og kaller den "merBut". Lag et avrundet rektangel med følgende egenskaper:
Legg til en statisk tekstboks og skriv ordet "mer" inne i det. Du kan også legge til et enkelt rektangel for å fungere som divider og et pluss tegn for litt mer detaljert.
Gi denne Movieclip et forekomstnavn på "moreBut_mc". Naviger tilbake til hoved tidslinjen.
La oss gi filmklippet en koblings-ID. Åpne biblioteket og gi "infoHolder" -klippet et koblings-ID til "InfoHolder".
La oss kaste noen koden inn i blandingen. Gå til handlingslaget og trykk F9 på tastaturet for å åpne handlingspanelet. For det første skal vi importere Tweener og opprette noen variabler. Kopier og lim inn følgende kode i handlingspanelet. Det kan se ut som mye, men jeg har prøvd å kommentere hver linje av kode.
Accentsconagua
// importer Tweener-klassen import caurina.transitions. *; // opprett en vriable for å lagre en forekomst av URLLoader-klassen var xmlLoader: URLLoader = ny URLLoader (); // legge til en hendelseslytter for å lytte etter når lasteren er ferdig med å laste inn. xmlLoader.addEventListener (Event.COMPLETE, doComplete); // last xml-filen xmlLoader.load (ny URLRequest ("xml / teaser.xml")); // disse to variablene lagrer tall som vi vil tildele verdier til senere. var catNum: Number; var newNum: Number; // Disse to arrays vil lagre knappens navn. var butClipMain: Array = []; var butClip: Array = []; // tilordner gjeldende knappummer var currBut: Number = 0; // dette arrayet lagrer lenkverdiene fra xml var linkeneArray: Array = []; // Vi tilordner et variabelt navn til en sprite-forekomst. Denne sprite-forekomsten vil holde infoHolder movieclip var holderSprite: Sprite = new Sprite (); // vi legger det til scenen. addChild (holderSprite); // vi lager en variabel for å lagre forekomsten av timerklassen. Vi stiller også timeren til 5 sekunder. var timer: Timer = Ny Timer (5000); // legge til en hendelseslytter timer.addEventListener (TimerEvent.TIMER, doTimer); // start timeren timer.start (); Vi legger nå til funksjonene. Under siste linje av kode, trykk enter to ganger og lim inn følgende:
// lage en funksjon kalt doComplete-funksjonen doComplete (e: Event): void // opprett en ny variabel for å lagre en forekomst av XML-klassen. Vi sender gjennom dataene fra XML-filen. var xml: XML = ny XML (e.target.data); // vi lager en ny XMLList. Dette lagrer nodene vi vil ha tilgang til i XML-filen. var catList: XMLList = xml.item; // vi oppretter en annen XMLList. Dette lagrer bildeattributtet til noderne. // Så det vil lagre plasseringen av bildet. -image3.jpg etc. var bilder: XMLList = xml.item. @ image; // vi tilordner en verdi til variabelen som er opprettet tidligere. // Avhengig av hvor mange elementer som finnes i XML, vil dette nummeret variere. // for dette eksempelet catNum = 3. catNum = catList.length (); // vi starter en sløyfe for (var jeg: tall = 0; jeg < catNum; i++) //here we create instances of the movieclips in the library and add them to stage. //create a variable to store the instances of the classes created. var but:Button = new Button(); //set the x position of the button instances //the expression adds spacing between the buttons but.x += (95.8*i) + 3*i; //set the y position of the button instances but.y = 18; //we tell the instances to go to their second frame and stop. //This will be their "down" position but.gotoAndStop(2); //we give the dynamic text box inside the button some text. //the text will be the label attribute of each node in the XML. but.butLabelTxt.text = catList[i].@label; //we assign a name to the button instances. //names will be but1,but2,but3 but.name = "but" + i; //we add the instances to the stage addChild(but); //we add the button names to the array created earlier butClip.push(but.name); //we add the button names to the array created earlier butClipMain.push(but.name); //we add the link values to the array created earlier linksArray.push(catList[i].@link); //here we create instances of the movieclips in the library and add them to stage. //create a variable to store the instances of the classes created. var info:InfoHolder = new InfoHolder(); //set the x position of the infoHolder instances //the expression adds spacing between the buttons info.x += (560*i) + 5*i; //set the y position of the infoHolder instances info.y = 50; //we give the dynamic text box inside the button some text. //the text for the headingTxt textbox will be the heading attribute of each node in the XML. info.headingTxt.text = catList[i].@heading; //the text for the summaryTxt textbox will be the CDATA section of each node in the XML. info.summaryTxt.text = catList[i]; //we assign a name to the infoHolder instances. //names will be but1,but2,but3 info.name = "info" + i; //we add an event listener to the more button inside infoHolder info.moreBut_mc.addEventListener(MouseEvent.CLICK, doMore, false, 0, true); //we set buttonMode to true, so that the movieclip will act like a button. info.moreBut_mc.buttonMode = true; //we add the infoHolder instances as children of the sprite we created earlier. holderSprite.addChild(info); //we create a new loader instance var picLoader:Loader = new Loader(); //we request the images var picURLReq:URLRequest = new URLRequest(images[i]); //we load the images picLoader.load(picURLReq); //we add the images to the clip inside infoHolder info.holderClip_mc.addChild(picLoader); //we add an event listener to the button instances. but.addEventListener(MouseEvent.CLICK, doClick, false, 0, true); //this prevents the textbox from being mouse enabled but.mouseChildren = false; //this sets the first button instance on stage to an "up" position by sending it to its first frame. MovieClip(getChildByName("but" + 0)).gotoAndStop(1); //we set the newNum variable to one less than the value of the variable catNum newNum = catNum - 1; //we create a new function called doTimer //this function will be called every 5 seconds. function doTimer(e:TimerEvent):void //we start a conditional if statement //it checks if the current button's value is less than newNum's variable value if(currBut < newNum) //we increment the value of the currBut variable currBut++; //we call the function prevBut and send through the currBut value as a parameter prevBut(currBut); //we call the function switchButtons and send through the currBut value as a parameter switchButtons(currBut); //we call the function tweenSwitch tweenSwitch(); //the else of the conditional //it checks currBut variable is equal to newNum variable else if(currBut == newNum) //we set the currBut variable value back to 0 currBut = 0; //we call the prevBUt function. We send through a parameter prevBut(newNum+1); //we call the switchButtons function. We send through a parameter switchButtons(currBut); //we call the tweenStart function tweenStart(); //we create a function called doCLick. It handles the button events. function doClick(e:MouseEvent):void //we create a variable. The value will be the name of the caller. //if but1 is clicked the value of butString will be but1 var butString:String = String(e.target.name); //we create another variable. The value is the first variable sliced. //if but1 is clicked the value of slicedString will be 1 var slicedString:String = butString.slice(3); //we create a new variable and set its value slicedString which has been type cast to a number. var butNumber:Number = Number(slicedString); //if a button is clicked send that button to frame 1. its "down" state e.target.gotoAndStop(1); //we start another loop for(var j = 0; j < butClip.length; j++) //we loop through the buttons and set them to their "up" state MovieClip(getChildByName(butClip[j])).gotoAndStop(2); //we set the button that was clicked to its "down" state e.target.gotoAndStop(1); //we stop the timer if a button is clicked timer.stop(); //we call the butTween function and send through a parameter //if but1 is clicked the parameter will be 1 butTween(butNumber); //we create a function called doMore //this event handler takes care of the more button in infoHolder function doMore(e:MouseEvent):void //we create a variable. The value will be the name of the caller. var butString:String = String(e.target.parent.name); //we slice the butString value to only the number //so if info1 is pressed slicedString will be 1 var slicedString:String = butString.slice(4); //if info1 is pressed it will go to the first URL in the linksArray //the first element of this array will be equal the link attribute of the first child node in the XML. navigateToURL(new URLRequest(linksArray[Number(slicedString)])); //we create a function called prevBut which expects a parameter //this function handles the previous button as the button moves from on to the next function prevBut(butValue:Number):void //sets the previous button to its "up" state MovieClip(getChildByName("but" + (butValue-1))).gotoAndStop(2); //we create a function called switchButtons function switchButtons(butValue:Number):void //sets the current button to its "down" state MovieClip(getChildByName("but" + butValue)).gotoAndStop(1); //we create a function called tweenSwitch //this function handles the tweening of the sprite object function tweenSwitch():void //the holderSprite is moved -560px every 5 seconds. It moves -560px because that is approximately the width of one infoHolder Tweener.addTween(holderSprite,x:holderSprite.x - 560, time:1, transition:"easeOutQuad"); //we create a function called tweenStart //this function handles the beginning of the animation function tweenStart():void //if the promo ticker starts at the beginning, we set the sprites position to 5. Tweener.addTween(holderSprite,x:5, time:1, transition:"easeOutQuad"); //we create a function called butTween //this function handles the button press. It takes care of how the sprite reacts when a button is pressed. //it expects a parameter. If but1 was pressed, the parameter would be 1 etc. function butTween(moveValue:Number):void //we start an if conditional //checks if the value of the parameter is 0 if(moveValue == 0) //if the parameter is 0, move the sprite to its start position Tweener.addTween(holderSprite,x:5, time:0.5, transition:"easeOutQuad"); //reset the currBut variable value currBut = moveValue; //start the timer again timer.start(); //else of the conditional else //if one of the other buttons are pressed move the sprite to the correct location Tweener.addTween(holderSprite,x:moveValue*-560, time:0.5, transition:"easeOutQuad"); //set the currBut variable value 0,1 etc. Corresponds to the button that was pressed currBut = moveValue; //start the timer. timer.start(); Det er det! Test filmen din. Du bør ha en promo ticker som kan brukes til å markedsføre nyheter, produkter eller noe av interesse på nettstedet ditt. Som nevnt tidligere er det også en god plassbesparende. Håper du likte opplæringen.
