Share
Wir werden einen einfachen Promo-Ticker für eine Website erstellen. Dies ist großartig, wenn auf der Homepage der Platz knapp wird oder wenn Sie möchten, dass die neuesten Nachrichten oder Produkte die Aufmerksamkeit der Zuschauer auf sich ziehen. Lasst uns anfangen!
Der erste Schritt besteht darin, die benötigten Dateien zu finden. Laden Sie zunächst Tweener von http://code.google.com/p/tweener/ herunter. Suchen Sie im Downloadbereich nach dem neuesten stabilen Build. Die, die ich verwende, ist 1_33_74.
Ich habe auch ein paar kostenlose Fotos von sxc.hu bekommen. Die Fotos, die Sie auswählen, hängen weitgehend von Ihren Kategorien ab, aber hier sind diejenigen, die ich verwende:
Ich habe die Bilder bearbeitet und auf 136 x 95 Pixel skaliert.
Die Verzeichnisstruktur ist recht einfach. Ein Bilder Ordner für die vorgefertigten Bilder xml Ordner für das XML-Dokument und das Flash befindet sich im Wurzel.
Extrahieren Sie die Tweener-Klasse in Ihren Klassenordner. Wenn Sie AS3 schon länger verwenden, sollten Sie einen Klassenordner haben. Ansonsten schauen Sie sich die Dokumentation an und erfahren Sie, wie Sie sie einrichten. Klicken Sie auf den Link zum Herunterladen und Installieren auf der linken Seite.
Normalerweise mache ich das zuerst, aber ich verbessere es, während ich die Flash-Datei baue. Ich mache das entweder, weil ich mehr Funktionalität hinzufügen möchte oder ich denke, die XML-Dateistruktur könnte etwas besser sein. In jedem Fall sieht die endgültige XML-Datei folgendermaßen aus:
Öffnen Sie Ihren bevorzugten Texteditor, kopieren Sie den XML-Code und fügen Sie ihn ein. Ein kurzer Überblick - Sie starten die XML-Datei mit einer Deklaration. Es gibt dann einen Teaser-Knoten (mangels eines besseren Namens). Der Teaser-Knoten hat 4 untergeordnete Knoten mit dem Namen "item". Jeder Elementknoten hat 4 Attribute. Sie sind "Überschrift", "Beschriftung", "Bild" und "Verknüpfung". Der Elementknotenwert ist ein CDATA-Abschnitt. Es ist am besten, einen CDATA-Abschnitt zu haben, wenn Sie einen Textblock in Flash hinzufügen.
Flash öffnen. Eine neue Flash-Datei erstellen (Actionscript 3).
Gehen Sie zu Modifizieren> Dokument (Strg + J), legen Sie die Filmbreite auf 600 Pixel und die Höhe auf 200 Pixel fest. Ändern Sie die Hintergrundfarbe in # 999999.
Erstellen Sie zwei Ebenen. Nennen Sie den unteren "Hintergrund" und den oberen "Aktionen". Sperren Sie die Aktionsebene.
Jetzt erstellen wir den Hintergrund für unsere Promo-Ticker. Stellen Sie sicher, dass Sie sich auf der Hintergrundebene befinden. Erstellen Sie dann mit dem Rechteckwerkzeug ein neues Rechteck mit der Größe von 548px * 128px, und einen Eckenradius von 8.
Geben Sie einen linearen vertikalen Gradienten mit den folgenden Werten an: #CCCCCC und #FFFFFF. Der Hubwert wird ebenfalls auf gesetzt # 333333 und eine Höhe von 0,2. Richten Sie das Objekt auf die Bühne aus, indem Sie die Tastenkombination Strg + K drücken. Stellen Sie sicher, dass "Auf Bühne zentrieren" ausgewählt ist. Klicken Sie auf "Horizontale Mitte ausrichten" und "Vertikale Mitte ausrichten"..
Wählen Sie den neu erstellten Hintergrund und drücken Sie F8 auf Ihrer Tastatur. Stellen Sie sicher, dass "Movieclip" ausgewählt ist, und geben Sie ihm den Namen "bg"..
Jetzt erstellen wir den Movieclip der oberen Schaltflächen. Gehen Sie zu Einfügen> Neues Symbol (Strg + F8). Vergeben Sie den Namen "button" und stellen Sie sicher, dass der Symboltyp auf MovieClip eingestellt ist.
Gehen Sie zu Fenster> Bibliothek (Strg + L). Suchen Sie das "Button" -Symbol in der Bibliothek und doppelklicken Sie darauf. Dadurch gelangen Sie zur Timeline des Symbols. Fügen Sie zwei neue Ebenen hinzu. Benennen Sie die drei Ebenen "Hintergrund", "Text" und "Aktionen" von unten nach oben.
Lassen Sie uns den Up-Status hinzufügen. Erstellen Sie auf der Hintergrundebene ein Rechteck mit den folgenden Eigenschaften:
Stellen Sie die Größe dieser Form auf 95px * 31px.
Verwenden Sie das Polystar-Werkzeug, um ein dreiseitiges Polygon (Dreieck) zu erstellen. Platzieren Sie diese direkt unter dem Rechteck. Dreieck und Rechteck zentrieren.
Fügen Sie auf der Hintergrundebene in Bild 2 des Movieclips "button" ein Keyframe hinzu und erstellen Sie ein weiteres abgerundetes Rechteck. Verwenden Sie diesmal einen linearen Verlauf mit diesen Werten:
Dupliziere das Rechteck, schneide es in zwei Hälften und gib ihm folgende Werte:
Richten Sie die Oberseiten dieser beiden Rechtecke aus, und Sie haben eine einfache glänzende Schaltfläche!
Fügen Sie auf der Textebene ein dynamisches Textfeld hinzu. Geben Sie einen Instanznamen von "butLabelTxt". Ich habe Century Gothic 13pt als Schriftart verwendet. Ich habe auch einen Schlagschatten mit folgenden Einstellungen in das Textfeld eingefügt:
Die übrigen Einstellungen bleiben standardmäßig erhalten.
Fügen Sie auf der Aktionsebene eine Stop-Aktion für Bild 1 und Bild 2 hinzu. Navigieren Sie anschließend zur Hauptzeitleiste.
Jetzt geben wir dem Button eine Linkage-ID. Öffnen Sie die Bibliothek, indem Sie zu Fenster> Bibliothek navigieren, oder verwenden Sie die Tastenkombination Strg + L. Sie sollten nur ein Element in Ihrer Bibliothek haben. Klicken Sie mit der rechten Maustaste auf den Movieclip "button" und wählen Sie "Linkage". Geben Sie im Feld Klasse den Namen "Button" ein (beachten Sie die Großbuchstabe B). OK klicken.
Drücken Sie Strg + F8, um einen weiteren Movieclip zu erstellen. Benennen Sie es mit "infoHolder". Erstellen Sie drei Ebenen. Nennen Sie sie "Bild", "Text" und "Schaltfläche". Erstellen Sie auf der Bildebene ein abgerundetes Rechteck mit den folgenden Eigenschaften:
Drücken Sie STRG + F8, um das Dialogfeld "Neues Symbol erstellen" aufzurufen. Nennen Sie es "picBG" und fügen Sie diesem Rechteck einen Schlagschatten hinzu.
Erstellen Sie ein Rechteck mit den folgenden Eigenschaften, während Sie sich noch auf der Ebene "Bild" befinden:
Wandeln Sie dieses Rechteck in einen Movieclip um, indem Sie auf Ihrer Tastatur die Taste F8 drücken. Nennen Sie es "holderClip" und geben Sie einen Instanznamen "holderClip_mc". Drücken Sie STRG + K, um das Ausrichtungsfenster zu öffnen und diese beiden Rechtecke mittig auszurichten.
Erstellen Sie auf der Ebene "Text" zwei dynamische Textfelder. Gib ihnen die folgenden Eigenschaften:
Oberste Textbox:
Unteres Textfeld:
Geben Sie ihnen jeweils Instanznamen "headingTxt" und "summaryTxt".
Erstellen Sie schließlich auf der Schaltflächenebene einen neuen Movieclip (Strg + F8), und nennen Sie ihn "moreBut". Erstellen Sie ein abgerundetes Rechteck mit den folgenden Eigenschaften:
Fügen Sie ein statisches Textfeld hinzu und geben Sie das Wort "more" ein. Sie können auch ein einfaches Rechteck als Trenner und ein Pluszeichen für ein bisschen mehr Detail hinzufügen.
Geben Sie diesem MovieClip einen Instanznamen "moreBut_mc". Navigieren Sie zurück zur Hauptzeitleiste.
Geben Sie dem MovieClip eine Linkage-ID. Öffnen Sie die Bibliothek und geben Sie dem Clip "infoHolder" eine Linkage-ID von "InfoHolder"..
Lassen Sie uns etwas Code in den Mix geben. Gehen Sie zur Aktionsebene und drücken Sie F9 auf der Tastatur, um das Aktionsfeld zu öffnen. Zunächst importieren wir Tweener und erstellen einige Variablen. Kopieren Sie den folgenden Code, und fügen Sie ihn in das Aktionsfeld ein. Es mag viel aussehen, aber ich habe versucht, jede Codezeile zu kommentieren.
Accentsconagua
// importiere die Tweener-Klasse import caurina.transitions. *; // ein vriable erstellen, um eine Instanz der URLLoader-Klasse zu speichern var xmlLoader: URLLoader = new URLLoader (); // Einen Ereignis-Listener hinzufügen, um darauf zu warten, wenn der Lader das Laden beendet hat. xmlLoader.addEventListener (Event.COMPLETE, doComplete); // Lade die XML-Datei xmlLoader.load (neue URLRequest ("xml / teaser.xml")); // Diese beiden Variablen speichern Zahlen, denen wir später Werte zuweisen. var catNum: Anzahl; var newNum: Anzahl; // Diese beiden Arrays speichern Schaltflächennamen. var butClipMain: Array = []; var butClip: Array = []; // weist die aktuelle Tastennummer zu var varBut: Anzahl = 0; // Dieses Array speichert die Link-Werte aus der XML-Variable var linksArray: Array = []; // Wir weisen einer Sprite-Instanz einen Variablennamen zu. Diese Sprite-Instanz enthält den infoHolder-Movieclip var holderSprite: Sprite = new Sprite (); // wir fügen es der Bühne hinzu. addChild (holderSprite); // Wir erstellen eine Variable, um die Instanz der Timerklasse zu speichern. Wir stellen den Timer auch auf 5 Sekunden ein. Var Timer: Timer = neuer Timer (5000); // Einen Eventlistener hinzufügen timer.addEventListener (TimerEvent.TIMER, doTimer); // den Timer starten timer.start (); Wir werden jetzt die Funktionen hinzufügen. Drücken Sie zweimal die Eingabetaste unter der letzten Codezeile und fügen Sie Folgendes ein:
// Eine Funktion namens doComplete erstellen. Funktion doComplete (e: Event): void // Eine neue Variable erstellen, um eine Instanz der XML-Klasse zu speichern. Wir übergeben die Daten aus der XML-Datei. var xml: XML = neues XML (e.target.data); // Wir erstellen eine neue XMLList. Dies speichert die Knoten, auf die wir zugreifen möchten, in der XML-Datei. var catList: XMLList = xml.item; // Wir erstellen eine andere XMLList. Dies speichert das Bildattribut der Knoten. // So wird der Ort des Bildes gespeichert. -image3.jpg usw. var images: XMLList = xml.item. @ image; // Wir weisen der zuvor erstellten Variable einen Wert zu. // Abhängig von der Anzahl der Elemente in der XML unterscheidet sich diese Anzahl. // für dieses Beispiel catNum = 3. catNum = catList.length (); // wir starten eine Schleife für (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(); Das ist es! Testen Sie Ihren Film. Sie sollten über einen Promo-Ticker verfügen, mit dem Sie Nachrichten, Produkte oder andere interessante Informationen auf Ihrer Website bewerben können. Wie bereits erwähnt, ist es auch ein großer Platzsparer. Ich hoffe, dir hat das Tutorial gefallen.
