Share
Denne opplæringen vil vise deg hvordan du kan integrere Piecemaker 3D Flash-bilderotatoren i WordPress-temaet ditt. Vi diskuterer også å sette opp et egendefinert administrasjonspanel som gjør det enkelt for brukerne å gjøre tilpasninger til rotatoren.
Piecemaker er en nydelig, åpen kildekode, 3D Flash image rotator laget av Björn Crüger fra Modularweb. Du kan forhåndsvise piecemakeren i handling på Sansation, det første premium WordPress-temaet på ThemeForest for å innlemme Piecemaker.
Alle filene som er inkludert i ZIP-filen er allerede modifisert for deg. Vi har også inkludert en mappe som har alle standard uendrede Piecemaker-filer. Jeg anbefaler at du går og sjekker ut Piecemaker-nettstedet og gjør deg kjent med det før du fortsetter med opplæringen.
Det første trinnet er å modifisere ActionScript slik at det kan leke pent med WordPress. ActionScript som følger med Piecemaker, definerer tre verdier som Piecemaker trenger for å fungere riktig:
XML-kilden definerer Picemakerens ulike innstillinger, og lar deg definere bilder og beskrivelser. CSS-filen utformer Piecemaker-beskrivelsespanelene, og bildekatalogen forteller Piecemaker hvor du kan trekke bildene fra.
Åpne FLA-filen med navnet "piecemakerNoShadow.fla" og åpne Handlinger-vinduet. I ramme 1 vil du se handlingene nedenfor. Vær oppmerksom på at du trenger Flash CS4 for å åpne kildefilen.
For at Piecemaker skal fungere skikkelig innenfor vårt WordPress-tema, må vi dynamisk sette disse variablene. For å oppnå dette, bruker vi FlashVars. FlashVars er variabler som vi skal sette inn i vår WordPress-sidemal som vil bli sendt til flashfilmen når siden lastes. Gå videre og slett standardhandlingene i ramme 1 i flashfilen, og erstatt dem med følgende kode:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Trekk i Flashvars var var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Sett de nødvendige variablene for piecemaker piecemaker.xmlSource = String (allFlashVars.xmlSource); piecemaker.cssSource = String (allFlashVars.cssSource); piecemaker.imageSource = String (allFlashVars.imageSource); piecemaker.dispatchEvent (ny hendelse ("egenskaper")); Ovennevnte ActionScript førstlast i FlashVars, og erstatter deretter standard Piecemaker-verdiene med disse nye variablene. Vår Flash-fil er nå klar til å gå. Publiser SWF og last inn din FTP-klient.
Det neste trinnet er å laste opp de nødvendige filene og mappene i WordPress-temaets katalog. Denne opplæringen antar at du vil laste opp alt direkte inn i temaets hovedkatalog. Her er en liste over de nødvendige elementene:
Det neste trinnet er å legge inn SWF-filmen i WordPress-sidenmalen. Vi bruker SWFObject 2 til å legge inn filmen, og vi vil også definere de tre FlashVars som vi refererte i trinn ett.
Du må først referere til swfobject i hodet på siden din. For å gjøre dette, åpne temaet ditt "header.php" -filen i valgfri kodeditor (minens BBEdit), og legg til følgende kode i hodet på siden din:
Deretter åpner du WordPress-sidenmalen der du vil at Piecemaker 3D Rotator skal vises, og lim inn følgende kode:
Du må oppgradere Flash Player til versjon 10 eller nyere.
Hoveddelen av koden er bare din standard swfobject-kode som brukes til å legge inn en flash-film på en hvilken som helst nettside. De viktige tingene vi trenger å være opptatt av, er FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/piecemakerCSS.css "; flashvars.imageSource ="/Bilder";
Legg merke til at vi har kalt våre FlashVars akkurat som vi definerte dem i ActionScript i trinn on4. Vi bruker også WordPress 'innebygde bloginfo () -funksjon for å referere til de nøyaktige plasseringene til de tre nødvendige filene.
Ovennevnte trinn vil gjøre det mulig å distribuere Piecemaker 3D Image Rotator til WordPress-temaet, men vi skal ta det et skritt videre. I de følgende trinnene diskuterer vi hvordan du oppretter et egendefinert administrasjonspanel som lar deg tilpasse Piecemaker-innstillinger rett fra WordPress-back-end.
Hvis du ikke er interessert i å konfigurere administrasjonspanelet, kan du gå over til Piecemaker-nettstedet for å lese dokumentasjonen og begynne å lage noen virkelig spennende animasjoner.
Vi vil ikke dekke hvordan du lager hele administrasjonspanelet fra grunnen av. I stedet vil vi utvide på en allerede grundig opplæring her på Nettuts: Hvordan lage et bedre WordPress Panel.
Når du har fulgt den opplæringen, og du har konfigurasjonen av adminpanelet, kan du fortsette til neste trinn.
Vi må nå legge til flere alternativer i administrasjonspanelet du nettopp opprettet i opplæringen. Åpne temaet ditt "functions.php" -filen, og erstatt den første delen av koden med følgende:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Velg en kategori"); $ tween_types = array ("lineup", "easeInSine", "easeOutSine", "easeInOutSine", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint", "easeOutQuint", "easeInOutQuint" EasyOutBack "," EasyOutBack "," easyOutInBack "," easyInQuad "," easeOutQuad "," easeInOutQuad "," easeOutInQuad "," easeOutInQuad "," easyOutInQuad "," easeOutCirc "," easyOutInCirc " , "easyOutExpo", "easyOutInExpo", "easyInElastic", "easyOutElastic", "easyInOutElastic", "easyOutInElastic", "easyOutExpo", "easyOutExpo", "easyOutExpo", " easeInBounce "," easeOutBounce "," easeInOutBounce "," easeOutInBounce "); Hoveddelen av koden ovenfor er identisk med opplæringen, men vi har lagt til en ny gruppe som heter $ tween_types. Denne arrayen inneholder alle de forskjellige animasjonseffekter som er tilgjengelige med PieceMaker. Vi vil bruke dette oppsettet til å generere en dropdown-liste over de ulike animasjonseffektene i vårt tilpassede valgpanel. Du kan sjekke ut Tweener-dokumentasjonen for å se en visuell fremstilling av de ulike Piecemaker-animasjonseffekter.
Dette vil skape et nytt skyvealternativer panel som ligner de du opprettet i opplæringen. Det er en lang kode, men det følger den samme nøyaktige logikken som opplæringen. Vi lager ganske enkelt variabler for alle de forskjellige innstillingene som vi må definere i Piecemakers XML-fil. En viktig ting å merke seg er at vi sørget for å definere standardverdier for hvert alternativ (verdiene i 'std' er standardverdiene). Det er en anstendig mengde innstillinger for Piecemaker, og vi vil ikke tvinge brukerne til å sette opp alle disse alternativene hvis de ikke vil.
array ("type" => "åpen"), array ("name" => "Segments", "desc" = " > "Antall segmenter hvor bildet skal skives.", "Id" => $ kortnavn. "_ Segmenter", "type" => "tekst", "std" => "9"), array "=" "Tween Time", "desc" => "Antall sekunder for hvert element som skal veksle.", "Id" => $ kortnavn. "_ Tween_time", "type" => "tekst", "std" => "3"), array ("navn" => "Tween Delay", "desc" => "Antall sekunder fra ett element som begynner å slå til neste element som starter.", "Id" => $ kortnavn. "type" = "" type "=" "tekst", "std" => "0.1"), array ("navn" => "Tween Type", "desc" => "Type animasjonsovergang." "=> $ kortnavn." _ tween_type "," type "=>" velg "," options "=> $ tween_types," std "=>" Velg en kategori "), array , "desc" => "i hvilken utstrekning er kubene flyttet på z-aksen når de blir tweened. Negative verdier bringer kuben nærmere kameraet, positive verdier tar det lenger unna. En god løp Ge er omtrent mellom -200 og 700. "," id "=> $ kortnavn." _ z_distance "," type "=>" tekst "," std "=>" 25 " Utvid "," desc "=>" Til hvilket emne er kubene flyttet vekk fra hverandre når tweening. "," Id "=> $ kallenavn." _ Expand "," type "=>" tekst "," std "=" > "9"), array ("name" => "Inner farge", "desc" => "Farge på sidene av elementene i hex-verdier (f.eks. 0x000000 for svart) "," id "=> $ kortnavn." _ Inner_farge "," type "=>" tekst "," std "=>" 0x000000 "), array (" navn "=>" Tekstbakgrunnsfarge " "desc" => "Farge på beskrivelsen tekstbakgrunn i hex-verdier (f.eks 0xFF0000 for rød)", "id" => $ kortnavn. "_ text_background", "type" => "text", "std" => " 0x666666 "), array (" navn "=>" Tekstavstand "," desc "=>" Avstanden til info-teksten til grensen til bakgrunnen. "," Id "=> $ kortnavn." _ Tekst_distance " "=" "Skygge Mørke", "Desc" => "I hvilken utstrekning er sidene skygget, når elementene er tweening og de 100 er svart, 0 er ingen mørkere. "," id "=> $ kortnavn." _ shadow_darkness "," type "=>" tekst "," std "=>" 25 "), array "navn" => "Auto Play", "desc" => "Antall sekunder til neste bilde når autoplay er på. Sett 0, hvis du ikke vil autoplay.", "id" => $ kortnavn. " _autoplay "," type "=>" tekst "," std "=>" 2 "), array (" type "=>" close "), I dette trinnet må vi endre vår WordPress-sidemal fra trinn tre. I stedet for å peke xmlSource til en XML-fil, må vi peke den til en PHP-fil. Ved å bruke en PHP-fil i stedet for en XML-fil, kan vi trekke inn alle verdiene som ble satt av brukeren i vårt tilpassede valgpanel. Det er bare den ene linjen med kode som må byttes ut:
flashvars.xmlSource = "/piecemakerXML.php ";
Vi er nesten der! I dette trinnet lager vi PHP-filen som vi bare refererte til i koden ovenfor. Denne PHP-filen vil bli brukt til å trekke inn alle verdiene fra vårt tilpassede valgpanel og generere XML-filen som Piecemaker trenger for å fungere riktig. Koden er litt lang, så jeg prøver å bryte den opp i mer fordøyelige biter.
Opprett en tom PHP-fil, kaller den "piecemakerXML.php", og lim inn følgende kode i begynnelsen av filen:
Deretter må vi sette innholdstypeoverskriften slik at nettleseren vet at vi skal sende ut XML-innhold i stedet for standardteksten / html. Vi vil også inkludere noen innledende Piecemaker-innstillinger.
830 360 ';
Vi skal nå utgive variablene vi lagret i deres riktige XML-koder, og lukk Piecemaker-innstillinger-taggen.
ekko ''. $ segmenter. ' '; ekko ''. $ tweetime. ' '; ekko ''. $ tweendelay. ' '; ekko ''. $ tweentype. ' '; ekko ''. $ zdistance. ' '; ekko ''. $ utvide. ' '; ekko ''. $ innercolor. ' '; ekko ''. $ textbackground. ' '; ekko ''. $ tekstdistance. ' '; ekko ''. $ skygge. ' '; ekko ''. $ autoplay. ' '; ekko '
Det siste trinnet er å skrive ut bildene som vi vil inkludere i rotatoren sammen med beskrivelsene deres, og vi vil også lukke Piecemaker XML-taggen.
Beskrivelse Tekst Ӂ Her kan du legge til en beskrivelsestekst for hvert enkelt lysbilde. Ӂ Kjæresten er dum og sitter, og er en avgjørende forfatter. Alquam eu quam dolor, en venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. ӁhyperlinksBeskrivelse Tekst Ӂ Her kan du legge til en beskrivelsestekst for hvert enkelt lysbilde. Ӂ Kjæresten er dum og sitter, og er en avgjørende forfatter. Alquam eu quam dolor, en venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. ӁhyperlinksBeskrivelse Tekst Ӂ Her kan du legge til en beskrivelsestekst for hvert enkelt lysbilde. Ӂ Kjæresten er dum og sitter, og er en avgjørende forfatter. Alquam eu quam dolor, en venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. Ӂhyperlinks'; ?> Beskrivelse Tekst Ӂ Her kan du legge til en beskrivelsestekst for hvert enkelt lysbilde. Ӂ Kjæresten er dum og sitter, og er en avgjørende forfatter. Alquam eu quam dolor, en venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. Ӂhyperlinks
Jeg håper du har lært noe nyttig i denne opplæringen. Ved å kombinere ulike teknologier, kan vi legge til kraftig funksjonalitet til våre WordPress-temaer. Enda viktigere, vi gjorde det enkelt for den gjennomsnittlige brukeren å gjøre tilpasninger til temaet vårt.
