Share
Questo tutorial ti mostrerà come integrare correttamente il rotatore di immagini Flash 3D Piecemaker nel tuo tema WordPress. Discuteremo anche della configurazione di un pannello di amministrazione personalizzato che renderà estremamente semplice per gli utenti effettuare personalizzazioni al rotatore.
Piecemaker è un fantastico rotatore di immagini Flash 3D open source creato da Björn Crüger di Modularweb. Puoi visualizzare l'anteprima del piecemaker in azione su Sansa, il primo tema WordPress premium su ThemeForest per incorporare Piecemaker.
Tutti i file inclusi nel file ZIP sono già stati modificati per te. Abbiamo anche incluso una cartella che contiene tutti i file Piecemaker di default non modificati. Ti consiglio di andare a visitare il sito di Piecemaker e familiarizzare con esso prima di procedere con il tutorial.
Il primo passaggio consiste nel modificare ActionScript in modo che giochi correttamente con WordPress. ActionScript fornito con Piecemaker definisce tre valori che il Piecemaker necessita per funzionare correttamente:
L'origine XML definisce le varie impostazioni di Picemaker e consente di definire le immagini e le relative descrizioni. Il file CSS disegna i pannelli di descrizione del Piecemaker e la directory delle immagini dice al Piecemaker da cui estrarre le immagini.
Aprire il file FLA denominato "piecemakerNoShadow.fla" e aprire la finestra Azioni. Nel frame 1 vedrai le azioni sotto. Si noti che è necessario Flash CS4 per aprire il file sorgente.
Affinché il Piecemaker funzioni correttamente all'interno del nostro tema WordPress, è necessario impostare dinamicamente queste variabili. Per raggiungere questo obiettivo, utilizzeremo FlashVars. FlashVars sono variabili che verranno impostate all'interno del nostro modello di pagina WordPress che verrà passato al filmato Flash quando la pagina viene caricata. Vai avanti ed elimina le azioni predefinite nel frame 1 del file flash e sostituiscile con il seguente codice:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Estrai Flashvars var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Imposta le variabili richieste per piecemaker piecemaker.xmlSource = String (allFlashVars.xmlSource); piecemaker.cssSource = String (allFlashVars.cssSource); piecemaker.imageSource = String (allFlashVars.imageSource); piecemaker.dispatchEvent (new Event ("proprietà")); Il precedente ActionScript viene caricato prima in FlashVars, quindi sostituisce i valori di Piecemaker predefiniti con queste nuove variabili. Il nostro file Flash ora è tutto pronto per partire. Pubblica il file SWF e carica il tuo client FTP preferito.
Il prossimo passo è caricare i file e le cartelle richiesti nella directory del tema di WordPress. Questo tutorial presume che tu stia caricando tutto direttamente nella directory principale del tuo tema. Ecco un elenco degli elementi richiesti:
Il prossimo passo è incorporare il film SWF nel tuo modello di pagina WordPress. Useremo SWFObject 2 per incorporare il film e definiremo anche i tre FlashVar a cui ci siamo riferiti nel primo passaggio.
Per prima cosa è necessario fare riferimento a swfobject nella parte superiore della pagina. Per farlo, apri il file "header.php" del tuo tema nel tuo editor di codice preferito (il mio BBEdit) e aggiungi il seguente codice nella parte superiore della pagina:
Quindi, apri il modello di pagina WordPress in cui desideri visualizzare il Piecemaker 3D Rotator e incolla il seguente codice:
Devi aggiornare il tuo Flash Player alla versione 10 o successiva.
La maggior parte del codice è solo il codice swfobject standard utilizzato per incorporare un film flash su qualsiasi pagina web. Le cose importanti di cui dobbiamo occuparci sono le FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/piecemakerCSS.css "; flashvars.imageSource ="/immagini";
Si noti che abbiamo chiamato i nostri FlashVar proprio come li abbiamo definiti in ActionScript nel passaggio on4. Stiamo anche utilizzando la funzione integrata di bloginfo () per fare riferimento alle posizioni esatte dei tre file richiesti.
I passaggi sopra ti permetteranno di implementare correttamente il Piecemaker 3D Image Rotator nel tuo tema WordPress, ma faremo un ulteriore passo avanti. Nei passaggi seguenti, discuteremo come creare un pannello di amministrazione personalizzato che ti consentirà di personalizzare le impostazioni di Piecemaker direttamente dal back-end di WordPress.
Se non sei interessato a configurare il pannello di amministrazione, puoi visitare il sito web di Piecemaker per leggere la documentazione e iniziare a creare animazioni davvero fantastiche.
Non tratteremo come creare l'intero pannello di amministrazione da zero. Invece, espanderemo su un tutorial già approfondito qui su Nettuts: Come creare un pannello WordPress migliore.
Dopo aver seguito questo tutorial e aver installato il pannello di amministrazione, procedere al passaggio successivo.
Ora dobbiamo aggiungere ulteriori opzioni al pannello di amministrazione appena creato nel tutorial. Apri il file "functions.php" del tuo tema e sostituisci il primo pezzo di codice con il seguente:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Choose a category"); $ tween_types = array ("linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint", "easeOutQuint", "easeInOutQuint", " easeOutInQuint "," easeInCirc "," easeOutCirc "," easeInOutCirc "," easeOutInCirc "," easeInBack "," easeOutBack "," easeInOutBack "," easeOutInBack "," easeInQuad "," easeOutQuad "," easeInOutQuad "," easeOutInQuad " , "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeOutInQuart", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeOutInExpo", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeOutInElastic", " easeInBounce "," easeOutBounce "," easeInOutBounce "," easeOutInBounce "); La maggior parte del codice sopra è identica al tutorial, ma abbiamo aggiunto un nuovo array chiamato $ tween_types. Questo array contiene tutti i vari effetti di animazione disponibili con PieceMaker. Useremo questo array per generare un elenco a discesa dei vari effetti di animazione nel nostro pannello delle opzioni personalizzate. È possibile consultare la documentazione di Tweener per rivedere una rappresentazione visiva dei vari effetti di animazione di Piecemaker.
Questo creerà un nuovo pannello delle opzioni di scorrimento simile a quelli creati nel tutorial. È un lungo pezzetto di codice, ma segue la stessa logica esatta del tutorial. Stiamo semplicemente creando variabili per tutte le diverse impostazioni che dovremo definire nel file XML di Piecemaker. Una cosa importante da notare è che ci siamo assicurati di definire i valori predefiniti per ogni opzione (i valori in "std" sono i valori predefiniti). Ci sono una discreta quantità di impostazioni per il Piecemaker e non vogliamo forzare i nostri utenti a impostare tutte queste opzioni se non vogliono.
array ("name" => "Opzioni 3D Rotator", "type" => "section"), array ("type" => "open"), array ("name" => "Segments", "desc" = > "Numero di segmenti in cui sarà tagliata l'immagine.", "Id" => $ shortname. "_ Segmenti", "tipo" => "testo", "std" => "9"), array ("nome "=>" Tween Time "," desc "=>" Numero di secondi per ciascun elemento da trasformare. "," Id "=> $ shortname." _ Tween_time "," type "=>" text "," std " => "3"), array ("name" => "Tween Delay", "desc" => "Numero di secondi da un elemento che inizia a girare all'elemento successivo che inizia.", "Id" => $ shortname. "_tween_delay", "type" => "text", "std" => "0.1"), array ("name" => "Tween Type", "desc" => "Tipo di transizione dell'animazione.", "id "=> $ shortname." _ tween_type "," type "=>" select "," options "=> $ tween_types," std "=>" Scegli una categoria "), array (" name "=>" Z Distance " , "desc" => "a cui estendono i cubi spostati sull'asse z durante il tweening. I valori negativi avvicinano il cubo alla telecamera, i valori positivi lo allontanano ulteriormente. ge è all'incirca tra -200 e 700. "," id "=> $ shortname." _ z_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Expand "," desc "=>" A cui etxend sono i cubi spostati l'uno dall'altro quando si esegue il tweening. "," Id "=> $ shortname." _ Expand "," type "=>" text "," std "= > "9"), array ("name" => "Inner Color", "desc" => "Colore dei lati degli elementi in valori esadecimali (ad es. 0x000000 per il nero) "," id "=> $ shortname." _ Inner_color "," type "=>" text "," std "=>" 0x000000 "), array (" nome "=>" Colore sfondo del testo ", "desc" => "Colore dello sfondo del testo descrittivo in valori esadecimali (es. 0xFF0000 per rosso)", "id" => $ shortname. "_ text_background", "type" => "text", "std" => " 0x666666 "), array (" name "=>" Text Distance "," desc "=>" Distanza del testo informativo ai bordi del suo sfondo. "," Id "=> $ shortname." _ Text_distance "," tipo "=>" text "," std "=>" 25 "), array (" name "=>" Shadow Darkness "," desc "=>" A quali estendono i lati ombreggiati, quando gli elementi sono interpolati e il muove verso lo sfondo 100 è nero, 0 non oscura. "," id "=> $ shortname." _ shadow_darkness "," type "=>" text "," std "=>" 25 "), array ( "name" => "Auto Play", "desc" => "Numero di secondi per l'immagine successiva quando la riproduzione automatica è attiva. Imposta 0, se non vuoi riprodurre automaticamente.", "id" => $ shortname. " _autoplay "," type "=>" text "," std "=>" 2 "), array (" type "=>" close "), In questo passaggio, dobbiamo modificare leggermente il nostro modello di pagina WordPress dal passaggio tre. Invece di puntare il nostro xmlSource in un file XML, dobbiamo puntarlo su un file PHP. Utilizzando un file PHP invece di un file XML, possiamo inserire tutti i valori impostati dall'utente nel nostro pannello delle opzioni personalizzate. È solo l'unica riga di codice che deve essere sostituita:
flashvars.xmlSource = "/piecemakerXML.php ";
Ci siamo quasi! In questo passaggio, creeremo il file PHP a cui abbiamo appena fatto riferimento nel codice sopra. Questo file PHP verrà utilizzato per inserire tutti i valori dal nostro pannello delle opzioni personalizzate e generare il file XML di cui il Piecemaker ha bisogno per funzionare correttamente. Il codice è piuttosto lungo, quindi cercherò di suddividerlo in blocchi più digeribili.
Crea un file PHP vuoto, chiamalo "piecemakerXML.php" e incolla il seguente codice all'inizio del file:
Successivamente, abbiamo bisogno di impostare l'intestazione del tipo di contenuto in modo che il browser sappia che emetteremo il contenuto XML anziché il testo / html predefinito. Includeremo anche alcuni tag di impostazioni iniziali di Piecemaker.
830 360 ';
Ora emetteremo le variabili che abbiamo memorizzato nei loro tag XML corretti e chiudiamo il tag delle impostazioni di Piecemaker.
eco ''. $ segmenti. ' '; eco ''. $ tweentime. ' '; eco ''. $ tweendelay. ' '; eco ''. $ tweentype. ' '; eco ''. $ zdistance. ' '; eco ''. $ espandi. ' '; eco ''. $ innercolor. ' '; eco ''. $ textbackground. ' '; eco ''. $ textdistance. ' '; eco ''. $ ombra. ' '; eco ''. $ autoplay. ' '; eco '
Il passo finale è quello di produrre le immagini che vogliamo includere nel rotatore insieme alle loro descrizioni, e chiuderemo anche il tag XML Piecemaker.
Descrizione Testo Ӂ Qui puoi aggiungere un testo descrittivo per ogni singola diapositiva. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Iaculis fringilla pregiato scettico. Sed conge placerat eleifend. ӁhyperlinksDescrizione Testo Ӂ Qui puoi aggiungere un testo descrittivo per ogni singola diapositiva. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Iaculis fringilla pregiato scettico. Sed conge placerat eleifend. ӁhyperlinksDescrizione Testo Ӂ Qui puoi aggiungere un testo descrittivo per ogni singola diapositiva. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Iaculis fringilla pregiato scettico. Sed conge placerat eleifend. Ӂhyperlinks'; ?> Descrizione Testo Ӂ Qui puoi aggiungere un testo descrittivo per ogni singola diapositiva. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Iaculis fringilla pregiato scettico. Sed conge placerat eleifend. Ӂhyperlinks
Spero che tu abbia imparato qualcosa di utile in questo tutorial. Combinando varie tecnologie diverse, siamo in grado di aggiungere potenti funzionalità ai nostri temi WordPress. Ancora più importante, abbiamo reso facile per l'utente medio apportare personalizzazioni al nostro tema.
