Share
Denna handledning visar dig hur du framgångsrikt kan integrera Piecemaker 3D Flash-bildrotorn i ditt WordPress-tema. Vi diskuterar också att konfigurera en anpassad adminpanel som gör det super enkelt för dina användare att göra anpassningar till rotatorn.
Piecemaker är en underbar, öppen källkod, 3D Flash-bildrotator skapad av Björn Crüger från Modularweb. Du kan förhandsgranska piecemakern i åtgärd på Sansation, det första premium WordPress-temat på ThemeForest att införliva Piecemaker.
Alla filer som ingår i ZIP-filen är redan modifierade för dig. Vi har också inkluderat en mapp som har alla standardmodifierade Piecemaker-filer. Jag rekommenderar att du går ut på Piecemaker-webbplatsen och bekanta dig med det innan du fortsätter med handledningen.
Det första steget är att ändra ActionScript så att det kommer att spela bra med WordPress. ActionScript som följer med Piecemaker definierar tre värden som Piecemaker behöver för att fungera korrekt:
XML-källan definierar Picemakerens olika inställningar och låter dig definiera bilder och deras beskrivningar. CSS-filen utformar Piecemakers beskrivningspaneler, och bildkatalogen berättar Piecemaker där man kan dra bilderna från.
Öppna FLA-filen med namnet "piecemakerNoShadow.fla" och öppna åtgärdsfönstret. I ram 1 visas åtgärderna nedan. Observera att du behöver Flash CS4 för att öppna källfilen.
För att Piecemaker ska fungera korrekt inom vårt WordPress-tema måste vi dynamiskt ställa in dessa variabler. För att uppnå detta använder vi FlashVars. FlashVars är variabler som vi ställer in i vår WordPress-sidmall som kommer att gå vidare till flashfilmen när sidan laddas. Gå vidare och ta bort standardåtgärderna i ram 1 i flashfilen och ersätt dem med följande kod:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Dra i Flashvars var var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Ställ in de nödvändiga variablerna för piecemaker piecemaker.xmlSource = String (allFlashVars.xmlSource); piecemaker.cssSource = String (allFlashVars.cssSource); piecemaker.imageSource = String (allFlashVars.imageSource); piecemaker.dispatchEvent (ny händelse ("egenskaper")); Ovanstående ActionScript laddas först i FlashVars, och ersätter sedan standard Piecemaker-värden med dessa nya variabler. Vår Flash-fil är nu klar att gå. Publicera SWF och ladda din FTP-klient efter eget val.
Nästa steg är att ladda upp de nödvändiga filerna och mapparna i ditt WordPress-tematkatalog. Denna handledning förutsätter att du kommer att ladda upp allt direkt i ditt temas huvudkatalog. Här är en lista över obligatoriska föremål:
Nästa steg är att bädda in SWF-filmen till din WordPress-sidmall. Vi använder SWFObject 2 för att bädda in filmen, och vi definierar också de tre FlashVars som vi hänvisade till i steg ett.
Du behöver först referera till swfobject inom huvudet på din sida. För att göra det, öppna ditt temas "header.php" -fil i din kodredigerare (mins BBEdit) och lägg till följande kod i huvudet på din sida:
Öppna sedan WordPress-sidmallen där du vill att Piecemaker 3D Rotator ska visas och klistra in följande kod:
Du måste uppgradera din Flash Player till version 10 eller senare.
Huvuddelen av koden är bara din standard swfobject-kod som används för att bädda in en flashfilm till vilken webbsida som helst. De viktiga sakerna vi behöver vara oroade över är FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/piecemakerCSS.css "; flashvars.imageSource ="/bilder";
Observera att vi har namngett våra FlashVars precis som vi definierade dem i ActionScript i steg on4. Vi använder också WordPress inbyggda bloginfo () -funktion för att referera till de exakta platserna för de tre nödvändiga filerna.
Ovanstående steg gör det möjligt för dig att framgångsrikt distribuera Piecemaker 3D Image Rotator till ditt WordPress-tema, men vi ska ta det ett steg längre. I följande steg diskuterar vi hur du skapar en anpassad administratörspanel som gör att du kan anpassa Piecemaker inställningar direkt från WordPress back-end.
Om du inte är intresserad av att konfigurera adminpanelen kan du gå över till Piecemakers webbplats för att läsa dokumentationen och börja göra några riktigt fantastiska animationer.
Vi kommer inte att täcka hur du skapar hela adminpanelen från början. I stället kommer vi att expandera på en redan djupgående handledning här på Nettuts: Hur man skapar en bättre WordPress Panel.
När du har följt den handledningen och du har inställningarna för adminpanelen, fortsätt till nästa steg.
Vi behöver nu lägga till ytterligare alternativ till administratörspanelen som du just skapat i handledningen. Öppna ditt temas "functions.php" -fil och ersätt den första biten med kod med följande:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Välj en kategori"); $ tween_types = array ("linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint", "easeOutQuint", "easeInOutQuint" EasyOutBack "," EasyOutBack "," easeOutInBack "," easeInQuad "," easeOutQuad "," easeInOutQuad "," easeOutInQuad "," easeOutInQuad "," easyOutInQuad "," easeOutCirc "," easeOutCirc " , "easeOutExpo", "easeOutExpo", "easeOutQuart", "easeOutQuart", "easeOutQuart", "easeOutExpo", "easeOutExpo", "easeOutExpo", "easeOutInExpo", "easeInElastic" easeInBounce "," easeOutBounce "," easeInOutBounce "," easeOutInBounce "); Huvuddelen av koden ovan är identisk med handledningen, men vi har lagt till en ny array som heter $ tween_types. Denna array innehåller alla de olika animeringseffekterna som är tillgängliga med PieceMaker. Vi använder denna array för att generera en rullgardinslista med de olika animeringseffekterna i vår anpassade panel. Du kan kolla in Tweener-dokumentationen för att granska en visuell representation av de olika Piecemaker-animeringseffekterna.
Detta skapar en ny glidningsalternativspanel som liknar dem du skapade i handledningen. Det är en lång kod, men det följer samma exakta logik som handledningen. Vi skapar helt enkelt variabler för alla de olika inställningarna som vi behöver definiera i Piecemakers XML-fil. En viktig sak att notera är att vi försäkrade att definiera standardvärden för varje alternativ (värdena i 'std' är standardvärdena). Det finns en anständig mängd inställningar för Piecemaker och vi vill inte tvinga våra användare att ställa in alla dessa alternativ om de inte vill.
array ("type" => "open"), array ("name" => "Segments", "desc" = " > "Antal segment där bilden ska skivas.", "Id" => $ kortnamn. "_ Segment", "typ" => "text", "std" => "9"), array "=" "Tween Time", "desc" => "Antal sekunder för varje element som ska vändas.", "Id" => $ kortnamn. "_ Tween_time", "type" => "text" => "3"), array ("namn" => "Tween Delay", "desc" => "Antal sekunder från ett element som börjar vända sig till nästa element som börjar.", "Id" => $ shortname. "_tween_delay", "type" => "text", "std" => "0.1"), array ("namn" => "Tween Type", "desc" => "Typ av animationsövergång.", "id "=> $ shortname." _ tween_type "," type "=>" välj "," options "=> $ tween_types," std "=>" Välj en kategori "), array (" name "=>" Z Distance " , "desc" => "I vilken utsträckning flyttas kubbarna på z-axeln när de är tweened. Negativa värden leder kuben närmare kameran, positiva värden tar det längre bort. En bra sprang ge är ungefär mellan -200 och 700. "," id "=> $ kortnamn." _ z_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Expand "," desc "=>" Till vilken etxend flyttas kubbarna från varandra när de tweening. "," Id "=> $ smsnamn." _ Expand "," type "=>" text "," std "=" > "9"), array ("name" => "Innerfärg", "desc" => "Färgen på elementenes sidor i hex-värden (t.ex. 0x000000 för svart) "," id "=> $ smsnamn." _ Inner_färg "," typ "=>" text "," std "=>" 0x000000 "), array (" name "=>" Text bakgrundsfärg " "desc" => "Färg på beskrivningstextens bakgrund i hex-värden (t.ex. 0xFF0000 för rött)", "id" => $ kortnamn. "_ text_background", "type" => "text", "std" => " 0x666666 "), array (" namn "=>" Text Distance "," desc "=>" Avståndet mellan informationstexten till dess bakgrundsgränser. "," Id "=> $ shortname." _ Text_distance " "=>" text "," std "=>" 25 "), array (" name "=>" Shadow Darkness "," desc "=>" I vilken utsträckning är sidorna skuggade, när elementen är tweening och 100% är svart, 0 är ingen mörkare. "," id "=> $ kortnamn." _ shadow_darkness "," type "=>" text "," std "=>" 25 "), array "namn" => "Auto Play", "desc" => "Antal sekunder till nästa bild när autoplay är på. Ställ 0, om du inte vill ha autoplay.", "id" => $ shortname. " _autoplay "," type "=>" text "," std "=>" 2 "), array (" type "=>" stäng "), I detta steg behöver vi ändra vår WordPress-sidmall något från steg tre. I stället för att peka vår xmlSource till en XML-fil, måste vi peka den på en PHP-fil. Genom att använda en PHP-fil i stället för en XML-fil kan vi dra in alla de värden som användaren ställt in i vår anpassade panel. Det är bara den enda raden av kod som behöver bytas ut:
flashvars.xmlSource = "/piecemakerXML.php ";
Vi är nästan där! I det här steget skapar vi den PHP-fil som vi bara refererade till i koden ovan. Denna PHP-fil kommer att användas för att dra in alla värden från vår anpassade alternativpanel och generera XML-filen som Piecemaker behöver för att kunna fungera korrekt. Koden är lite lång, så jag försöker bryta upp det i mer smältbara bitar.
Skapa en tom PHP-fil, namnge den "piecemakerXML.php" och klistra in följande kod i början av filen:
Därefter måste vi ange rubrikens innehållstyp så att webbläsaren vet att vi ska skriva ut XML-innehåll i stället för standardtexten / html. Vi kommer också att inkludera några initiala Piecemaker-inställningstaggar.
830 360 ';
Vi kommer nu att mata ut de variabler som vi lagrade i sina korrekta XML-taggar och stänga Piecemaker-inställningstaggen.
eko "'. $ segment. ' '; eko "'. $ tweentime. ' '; eko "'. $ tweendelay. ' '; eko "'. $ tweentype. ' '; eko "'. $ zdistance. ' '; eko "'. $ expandera. ' '; eko "'. $ innercolor. ' '; eko "'. $ textbackground. ' '; eko "'. $ textdistans. ' '; eko "'. $ skugga. ' '; eko "'. $ autoplay. ' '; eko "
Det sista steget är att utmata de bilder som vi vill inkludera i rotatorn tillsammans med deras beskrivningar, och vi stänger också ut Piecemaker XML-taggen.
Beskrivning Text Ӂ Här kan du lägga till en beskrivningstext för varje enskild bild. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, en venenatis nisl. Present scelerisque iaculis fringilla. Sed congue placerat eleifend. ӁhyperlinksBeskrivning Text Ӂ Här kan du lägga till en beskrivningstext för varje enskild bild. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, en venenatis nisl. Present scelerisque iaculis fringilla. Sed congue placerat eleifend. ӁhyperlinksBeskrivning Text Ӂ Här kan du lägga till en beskrivningstext för varje enskild bild. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, en venenatis nisl. Present scelerisque iaculis fringilla. Sed congue placerat eleifend. Ӂhyperlinks'; ?> Beskrivning Text Ӂ Här kan du lägga till en beskrivningstext för varje enskild bild. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, en venenatis nisl. Present scelerisque iaculis fringilla. Sed congue placerat eleifend. Ӂhyperlinks
Jag hoppas att du lärde dig något användbart i denna handledning. Genom att kombinera olika olika teknologier kan vi lägga till kraftfull funktionalitet till våra WordPress-teman. Ännu viktigare, vi gjorde det lätt för den genomsnittliga användaren att göra anpassningar till vårt tema.
