Share
We gaan een eenvoudige promo-ticker maken voor een website. Dit is geweldig als u weinig ruimte op de startpagina heeft, of als u alleen het laatste nieuws of producten wilt zien die de aandacht van de kijker trekken. Laten we gaan!
De eerste stap zal zijn om de benodigde bestanden te vinden. Download ten eerste Tweener van http://code.google.com/p/tweener/. Zoek naar de laatste stabiele build onder de downloadsectie. Degene die ik gebruik is 1_33_74.
Ik kreeg ook een aantal gratis foto's van sxc.hu. De foto's die u kiest, zijn grotendeels afhankelijk van uw categorieën, maar hier zijn de foto's die ik gebruik:
Ik bewerkte de afbeeldingen en schaalde ze naar afmetingen van 136 x 95 pixels.
De mappenstructuur is vrij eenvoudig. Een afbeeldingen map voor de geprepareerde afbeeldingen, een xml map voor het XML-document en de flitser bevindt zich in de wortel.
Extraheer de Tweener-klasse naar uw klassemap. Als u AS3 al een tijdje gebruikt, moet u een klassenmap hebben. Bekijk anders de documentatie en lees hoe u het systeem instelt. Klik op de downloads en installatie link aan de linkerkant.
Ik doe dit meestal eerst, maar pas het aan terwijl ik het flash-bestand samenstel. Ik doe dit omdat ik meer functionaliteit wil toevoegen, of ik denk dat de XML-bestandsstructuur een beetje beter zou kunnen zijn. In elk geval ziet het uiteindelijke XML-bestand er als volgt uit:
Open uw favoriete teksteditor, kopieer en plak de XML-code. Een snel overzicht - begin het XML-bestand met een aangifte. Er is dan een teaserknoop (bij gebrek aan een betere naam). Het teaser-knooppunt heeft 4 onderliggende knooppunten met de naam "item". Elk itemknooppunt heeft 4 attributen. Ze zijn "heading", "label", "image" en "link". De itemknooppuntwaarde is een CDATA-sectie. Het is het beste om een CDATA-sectie te hebben bij het toevoegen van een tekstblok in flash.
Open Flash. Maak een nieuw Flash-bestand aan (Actionscript 3).
Ga naar Modify> Document (Ctrl + J), stel de filmbreedte in op 600px en de hoogte op 200px. Verander de achtergrondkleur in # 999999.
Maak twee lagen. Noem de onderste "achtergrond" en de bovenste "acties". Vergrendel de actieslaag.
Nu maken we de achtergrond van onze promo ticker. Zorg dat u op de achtergrondlaag staat en maak vervolgens met behulp van het gereedschap Rechthoek een nieuwe rechthoek met een grootte van 548 px * 128 px, en een hoekradius van 8.
Geef het een lineair verticaal verloop met de volgende waarden: #CCCCCC en #FFFFFF. De slagwaarde is ook ingesteld op # 333333 en een hoogte van 0.2. Centreer dit object naar het werkgebied door op Ctrl + K te drukken en zorg ervoor dat "Midden naar etappe" is geselecteerd. Klik op "Horizontaal midden uitlijnen" en "Horizontaal midden uitlijnen".
Selecteer de nieuw gemaakte achtergrond en druk op F8 op je toetsenbord. Zorg ervoor dat "Filmclip" is geselecteerd en geef het een naam "bg".
Nu maken we de filmclip met de bovenste knoppen. Ga naar Invoegen> Nieuw symbool (Ctrl + F8). Geef het een naam van "knop" en zorg ervoor dat het symbooltype is ingesteld op Movieclip.
Ga naar Venster> Bibliotheek (Ctrl + L). Zoek het "knop" -symbool in de bibliotheek en dubbelklik erop. Hiermee gaat u naar de tijdlijn van het symbool. Voeg twee nieuwe lagen toe. Noem de drie lagen "achtergrond", "tekst" en "acties" van onder naar boven.
Laten we de status omhoog toevoegen. Maak op de achtergrondlaag een rechthoek met de volgende eigenschappen:
Stel de grootte van deze vorm in 95px * 31px.
Gebruik het Polystar-gereedschap om een driezijdige veelhoek (driehoek) te maken. Plaats dit net onder de rechthoek. Centreer de driehoek en rechthoek.
Voeg een keyframe toe aan de achtergrondlaag bij frame 2 van de "knop" Movieclip en maak een nieuwe afgeronde rechthoek, gebruik deze keer een lineair verloop met deze waarden:
Dupliceer de rechthoek, snijd hem doormidden en geef hem de volgende waarden:
Lijn de toppen van deze twee rechthoeken uit en je hebt een eenvoudige glanzende knop!
Voeg op de tekstlaag een dynamisch tekstvak toe. Geef het een instantienaam van "butLabelTxt". Ik gebruikte Century Gothic 13pt als het lettertype. Ik heb ook een slagschaduw toegevoegd aan het tekstvak met de volgende instellingen:
De rest van de instellingen blijven als standaard over.
Voeg op de actielaag een stopactie toe voor frame 1 en 2. Eens gedaan, navigeert u terug naar de hoofdtijdlijn.
Nu geven we de knop een linkage-ID. Open de bibliotheek door te navigeren naar Venster> Bibliotheek of gebruik de sneltoets Ctrl + L. U zou slechts het ene item in uw bibliotheek moeten hebben. Klik met de rechtermuisknop op de "knop" Movieclip en selecteer "Koppeling". Typ in het veld Klasse de naam "Knop" (let op hoofdletter B). Klik OK.
Raak Ctrl + F8 aan om nog een filmclip te maken. Geef het een naam van "infoHolder". Maak drie lagen. Noem ze "foto", "tekst" en "knop". Maak op de afbeeldingslaag een afgeronde rechthoek met de volgende eigenschappen:
Druk op CTRL + F8 om het dialoogvenster "Nieuw symbool maken" te openen. Geef het een naam van "picBG" en voeg een slagschaduw toe aan deze rechthoek.
Maak, terwijl je nog steeds op de "afbeelding" -laag staat, een rechthoek met de volgende eigenschappen:
Converteer deze rechthoek naar een Movieclip door op F8 op je toetsenbord te drukken. Noem het "holderClip" en geef het een instantienaam van "holderClip_mc". Raak CTRL + K aan om het uitlijningspaneel te openen en lijn deze twee rechthoeken in het midden uit.
Maak op de laag "tekst" twee dynamische tekstvakken. Geef ze de volgende eigenschappen:
Tekstvak bovenaan:
Tekstvak onder:
Geef ze respectievelijk namen van "headingTxt" en "summaryTxt".
Ten slotte maakt u op de knoppenlaag een nieuwe filmclip (Ctrl + F8) en noemt u deze "moreBut". Maak een afgeronde rechthoek met de volgende eigenschappen:
Voeg een statisch tekstvak toe en typ daarbinnen het woord "meer". U kunt ook een eenvoudige rechthoek toevoegen om op te treden als een scheidingslijn en een plusteken voor een beetje meer detail.
Geef deze Movieclip een instantienaam van "moreBut_mc". Navigeer terug naar de hoofdtijdlijn.
Laten we de filmclip een koppelings-ID geven. Open de bibliotheek en geef de clip "infoHolder" een koppelings-id van "InfoHolder".
Laten we wat code in de mix gooien. Ga naar de actielaag en druk op F9 op het toetsenbord om het actiescherm te openen. Eerst importeren we Tweener en maken we enkele variabelen. Kopieer en plak de volgende code in het actiescherm. Het lijkt misschien veel, maar ik heb geprobeerd elke regel code te becommentariëren.
Accentsconagua
// importeer de Tweener-klasse import caurina.transitions. *; // maak een vriable aan om een instantie van de klasse URLLoader op te slaan var xmlLoader: URLLoader = new URLLoader (); // voeg een gebeurtenislistener toe om te luisteren wanneer de loader is geladen. xmlLoader.addEventListener (Event.COMPLETE, doComplete); // laad het XML-bestand xmlLoader.load (nieuwe URLRequest ("xml / teaser.xml")); // deze twee variabelen slaan nummers op waaraan we later waarden zullen toewijzen. var catNum: Number; var newNum: Number; // deze twee arrays zullen knopnamen opslaan. var butClipMain: Array = []; var butClip: Array = []; // wijst het huidige knopnummer toe var currBut: Number = 0; // deze array slaat de koppelingswaarden op van de xml var linksArray: Array = []; // we wijzen een variabelenaam toe aan een sprite-instantie. Deze sprite-instantie bevat de infoHolder-filmclip-var-houderSprite: Sprite = new Sprite (); // we voegen het toe aan het podium. addChild (holderSprite); // we maken een variabele om het exemplaar van de timer-klasse op te slaan. We stellen ook de timer in op 5 seconden. var timer: Timer = nieuwe Timer (5000); // voeg een gebeurtenislistener toe timer.addEventListener (TimerEvent.TIMER, doTimer); // start de timer timer.start (); We voegen nu de functies toe. Onder de laatste regel code, druk tweemaal op enter en plak het volgende:
// maak een functie genaamd doComplete-functie doComplete (e: Event): void // maak een nieuwe variabele om een exemplaar van de XML-klasse op te slaan. We passeren de gegevens uit het XML-bestand. var xml: XML = nieuwe XML (e.target.data); // we maken een nieuwe XMLList. Hiermee worden de knooppunten opgeslagen die we willen openen in het XML-bestand. var catList: XMLList = xml.item; // we maken een andere XMLList. Hiermee wordt het afbeeldingskenmerk van de knooppunten opgeslagen. // Dus het zal de locatie van de afbeelding opslaan. -image3.jpg etc. var images: XMLList = xml.item. @ image; // we kennen een waarde toe aan de eerder gemaakte variabele. // Afhankelijk van het aantal items in de XML, zal dit aantal verschillen. // voor dit voorbeeld catNum = 3. catNum = catList.length (); // we starten een lus voor (var i: Number = 0; i < 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(); Dat is het! Test je film. U moet een promo-ticker hebben die kan worden gebruikt om nieuwsverhalen, producten of iets van belang op uw site te promoten. Zoals eerder vermeld, is het ook een geweldige ruimtebesparing. Ik hoop dat je de tutorial leuk vond.
