Share
Stiamo creando un semplice tick promo per un sito web. Questo è ottimo se stai esaurendo lo spazio sulla home page, o se vuoi solo le ultime notizie o prodotti per catturare l'attenzione degli spettatori. Muoviamoci!
Il primo passo sarà quello di trovare i file necessari. Innanzitutto, scarica Tweener da http://code.google.com/p/tweener/. Cerca l'ultima versione stabile sotto la sezione download. Quello che sto usando è 1_33_74.
Ho anche ricevuto alcune foto gratis da sxc.hu. Le foto che scegli dipenderanno in gran parte dalle tue categorie, ma qui sono quelle che sto usando:
Ho modificato le immagini e le ho ridimensionate a dimensioni di 136 x 95 pixel.
La struttura della directory è abbastanza semplice. Un immagini cartella per le immagini preparate, a xml cartella per il documento XML e il flash è nel radice.
Estrarre la classe Tweener nella cartella della classe. Se hai utilizzato AS3 per un po 'di tempo, dovresti avere una cartella di classe. Altrimenti, dai un'occhiata alla documentazione e leggi come configurarlo. Fare clic sul collegamento download e installazione sul lato sinistro.
Solitamente lo faccio prima, ma lo aggiusto mentre costruisco il file flash. Lo faccio perché voglio aggiungere più funzionalità o penso che la struttura dei file XML potrebbe essere un po 'migliore. In ogni caso, il file XML finale ha il seguente aspetto:
Apri il tuo editor di testo preferito, copia e incolla il codice XML. Una rapida carrellata - ee avvia il file XML con una dichiarazione. C'è quindi un nodo teaser (per mancanza di un nome migliore). Il nodo teaser ha 4 nodi figli chiamati "item". Ogni nodo dell'articolo ha 4 attributi. Sono "heading", "label", "image" e "link". Il valore del nodo dell'articolo è una sezione CDATA. È meglio avere una sezione CDATA quando si aggiunge un blocco di testo in flash.
Apri Flash. Crea un nuovo file Flash (Actionscript 3).
Vai a Modifica> Documento (Ctrl + J), imposta la larghezza del filmato a 600px e l'altezza a 200px. Cambia il colore di sfondo in # 999999.
Crea due livelli. Assegna un nome a "fondo" in basso e "azioni" in alto. Blocca il livello delle azioni.
Ora creeremo lo sfondo del nostro ticker promozionale. Assicurati di essere sul livello di sfondo, quindi utilizza lo strumento rettangolo per creare un nuovo rettangolo con una dimensione di 548px * 128px, e un raggio d'angolo di 8.
Dagli un gradiente verticale lineare con i seguenti valori: #CCCCCC e #FFFFFF. Anche il valore della corsa è impostato su # 333333 e un'altezza di 0.2. Centra questo oggetto sullo stage premendo Ctrl + K, assicurandosi che sia selezionato "Center to stage". Fai clic su "Allinea centro orizzontale" e "Allinea centro verticale".
Seleziona lo sfondo appena creato e premi F8 sulla tastiera. Assicurati che "Movie clip" sia selezionato e assegna un nome "bg".
Ora creeremo i pulsanti in alto Movie Clip. Vai a Inserisci> Nuovo simbolo (Ctrl + F8). Dagli un nome di "pulsante" e assicurati che il tipo di simbolo sia impostato su Movieclip.
Vai a Finestra> Libreria (Ctrl + L). Trova il simbolo "pulsante" nella libreria e fai doppio clic su di esso. Questo ti porterà alla timeline del simbolo. Aggiungi due nuovi livelli. Dai tre strati "sfondo", "testo" e "azioni" dal basso verso l'alto.
Aggiungiamo lo stato su. Sul livello di sfondo crea un rettangolo con le seguenti proprietà:
Imposta la dimensione di questa forma a 95 px * 31 px.
Usa lo strumento Polystar per creare un poligono a tre lati (triangolo). Metti questo appena sotto il rettangolo. Centra il triangolo e il rettangolo.
Aggiungi un fotogramma chiave sul livello di sfondo al fotogramma 2 del "pulsante" Movieclip e crea un altro rettangolo arrotondato, questa volta usa un gradiente lineare con questi valori:
Duplicare il rettangolo, tagliarlo a metà e dargli i seguenti valori:
Allinea le parti superiori di questi due rettangoli e hai un semplice pulsante lucido!
Sul livello testo aggiungi una casella di testo dinamica. Dagli un nome istanza di "butLabelTxt". Ho usato Century Gothic 13pt come font. Ho anche aggiunto un'ombra esterna alla casella di testo con le seguenti impostazioni:
Il resto delle impostazioni è lasciato come predefinito.
Sul livello azioni, aggiungi un'azione di arresto su entrambi i frame 1 e 2. Una volta terminato, torna alla timeline principale.
Ora forniremo al pulsante un ID di collegamento. Apri la libreria navigando in Finestra> Libreria o usa la scorciatoia Ctrl + L. Dovresti avere solo l'elemento nella tua libreria. Fai clic con il tasto destro del mouse sul pulsante "Movie" e seleziona "Linkage". Nel campo Classe digitare il nome "Button" (notare la B maiuscola). Clicca OK.
Premi Ctrl + F8 per creare un altro Movie Clip. Dagli un nome di "infoHolder". Crea tre livelli. Chiamali "immagine", "testo" e "pulsante". Sul livello dell'immagine creare un rettangolo arrotondato con le seguenti proprietà:
Premi CTRL + F8 per visualizzare la finestra di dialogo "Crea nuovo simbolo". Dagli un nome di "picBG" e aggiungi un'ombra esterna a questo rettangolo.
Mentre sei ancora sul livello "immagine", crea un rettangolo con le seguenti proprietà:
Converti questo rettangolo in un Movieclip premendo F8 sulla tastiera. Chiamalo "holderClip" e assegnagli un nome di istanza di "holderClip_mc". Premi CTRL + K per aprire il pannello di allineamento e allinea i due rettangoli al centro.
Sul livello "testo" crea due caselle di testo dinamiche. Dare loro le seguenti proprietà:
Casella di testo principale:
Casella di testo inferiore:
Assegna loro rispettivamente i nomi di istanza di "headingTxt" e "summaryTxt".
Infine, sul livello del pulsante, crea un nuovo Movie Clip (Ctrl + F8) e chiamalo "moreBut". Crea un rettangolo arrotondato con le seguenti proprietà:
Aggiungi una casella di testo statico e digita la parola "altro" al suo interno. Puoi anche aggiungere un semplice rettangolo che funga da divisore e un segno più per un po 'più di dettaglio.
Dai a questo Movieclip il nome di un'istanza di "moreBut_mc". Torna alla timeline principale.
Diamo al Movie Clip un ID di collegamento. Aprire la libreria e dare alla clip "infoHolder" un ID di collegamento di "InfoHolder".
Buttiamo un po 'di codice nel mix. Vai al livello azioni e premi F9 sulla tastiera per aprire il pannello delle azioni. In primo luogo importeremo Tweener e creeremo alcune variabili. Copia e incolla il seguente codice nel pannello delle azioni. Può sembrare molto, ma ho provato a commentare ogni riga di codice.
Accentsconagua
// importa la classe Tweener import caurina.transitions. *; // crea una variabile per memorizzare un'istanza della classe URLLoader var xmlLoader: URLLoader = new URLLoader (); // aggiungi un listener di eventi da ascoltare al termine del caricamento del caricatore. xmlLoader.addEventListener (Event.COMPLETE, doComplete); // carica il file xml xmlLoader.load (new URLRequest ("xml / teaser.xml")); // queste due variabili memorizzano i numeri che assegneremo i valori a più tardi. var catNum: Number; var newNum: Number; // questi due array memorizzeranno i nomi dei pulsanti. var butClipMain: Array = []; var butClip: Array = []; // assegna il numero corrente del pulsante var currBut: Number = 0; // questa matrice memorizzerà i valori di collegamento dal xml var linksArray: Array = []; // assegniamo un nome di variabile a un'istanza di sprite. Questa istanza dello sprite manterrà il clip mobile infoHold var holderSprite: Sprite = new Sprite (); // lo aggiungiamo al palco. addChild (holderSprite); // creiamo una variabile per memorizzare l'istanza della classe timer. Impostiamo anche il timer su 5 secondi. var timer: Timer = new Timer (5000); // aggiungi un listener di eventi timer.addEventListener (TimerEvent.TIMER, doTimer); // avvia il timer timer.start (); Ora aggiungeremo le funzioni. Sotto l'ultima riga di codice, premi invio due volte e incolla quanto segue:
// crea una funzione chiamata funzione doComplete doComplete (e: Event): void // crea una nuova variabile per memorizzare un'istanza della classe XML. Passiamo attraverso i dati dal file XML. var xml: XML = new XML (e.target.data); // creiamo un nuovo XMLList. Questo memorizza i nodi a cui vogliamo accedere nel file XML. var catList: XMLList = xml.item; // creiamo un altro XMLList. Questo memorizza l'attributo dell'immagine dei nodi. // Quindi memorizzerà la posizione dell'immagine. -image3.jpg ecc. var images: XMLList = xml.item. @ image; // assegniamo un valore alla variabile creata in precedenza. // A seconda del numero di elementi presenti nell'XML, questo numero sarà diverso. // per questo esempio catNum = 3. catNum = catList.length (); // iniziamo un ciclo per (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(); Questo è tutto! Metti alla prova il tuo film. Dovresti avere un ticker promozionale che può essere utilizzato per promuovere notizie, prodotti o qualsiasi cosa di interesse sul tuo sito. Come accennato in precedenza, è anche un grande risparmio di spazio. Spero ti sia piaciuto il tutorial.
