Share
Deze tutorial laat je zien hoe je de Piecemaker 3D Flash image rotator met succes kunt integreren in je WordPress-thema. We bespreken ook het instellen van een aangepast beheerderspaneel, waardoor het voor uw gebruikers supereenvoudig is om aanpassingen aan de rotator aan te brengen.
Piecemaker is een prachtige, open-source 3D Flash image rotator gemaakt door Björn Crüger van Modularweb. U kunt de Piecemaker in actie bekijken op Sansation, het eerste premium WordPress-thema op ThemeForest om Piecemaker te integreren.
Alle bestanden in het ZIP-bestand zijn al voor u aangepast. We hebben ook een map toegevoegd met alle standaard niet-gemodificeerde Piecemaker-bestanden. Ik raad aan dat je de Piecemaker-site bezoekt en je er vertrouwd mee maakt voordat je verder gaat met de tutorial.
De eerste stap is om de ActionScript-code zodanig aan te passen dat deze goed wordt afgespeeld met WordPress. Het ActionScript dat bij Piecemaker wordt geleverd, definieert drie waarden die de Piecemaker nodig heeft om goed te kunnen functioneren:
De XML-bron definieert de verschillende instellingen van de Picemaker en stelt u in staat om afbeeldingen en hun beschrijvingen te definiëren. Het CSS-bestand geeft een opmaakprofiel voor de beschrijvingen van de Piecemaker en de afbeeldingenmap vertelt de Piecemaker waar de afbeeldingen vandaan moeten worden getrokken.
Open het FLA-bestand met de naam "piecemakerNoShadow.fla" en open het venster Acties. In frame 1 ziet u de onderstaande acties. Houd er rekening mee dat u Flash CS4 nodig hebt om het bronbestand te openen.
Om ervoor te zorgen dat de Piecemaker correct werkt binnen ons WordPress-thema, moeten we deze variabelen dynamisch instellen. Om dit te bereiken, zullen we FlashVars gebruiken. FlashVars zijn variabelen die we zullen instellen in onze WordPress paginasjabloon die zal worden doorgegeven aan de flash-film wanneer de pagina wordt geladen. Ga door en verwijder de standaardacties in frame 1 van het flash-bestand en vervang ze door de volgende code:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Pull in the Flashvars var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Stel de vereiste variabelen in voor piecemaker piecemaker.xmlSource = String (allFlashVars.xmlSource); piecemaker.cssSource = String (allFlashVars.cssSource); piecemaker.imageSource = String (allFlashVars.imageSource); piecemaker.dispatchEvent (nieuwe gebeurtenis ("eigenschappen")); Het bovenstaande ActionScript wordt eerst in de FlashVars geladen en vervangt vervolgens de standaard Piecemaker-waarden met deze nieuwe variabelen. Ons Flash-bestand is nu helemaal klaar voor gebruik. Publiceer de SWF en laad uw FTP-client naar keuze.
De volgende stap is om de vereiste bestanden en mappen in de directory van uw WordPress-thema te uploaden. Deze tutorial gaat ervan uit dat je alles direct in de hoofddirectory van je thema zult uploaden. Hier is een lijst met vereiste items:
De volgende stap is om de SWF-film in uw paginasjabloon WordPress te embedden. We zullen SWFObject 2 gebruiken om de film in te sluiten, en we zullen ook de drie FlashVars definiëren waarnaar we in stap één verwezen hebben.
U moet eerst swfobject binnen de kop van uw pagina raadplegen. Open hiervoor het "header.php" -bestand van je thema in je code-editor naar keuze (BBEdit van mij) en voeg de volgende code toe aan de kop van je pagina:
Open vervolgens de paginasjabloon van WordPress waar u de Piecemaker 3D Rotator wilt weergeven en plak de volgende code:
U moet uw Flash Player upgraden naar versie 10 of nieuwer.
Het grootste deel van de code is gewoon uw standaard swfobjectcode die wordt gebruikt om een Flash-film in te sluiten op een webpagina. De belangrijke dingen waar we ons zorgen over moeten maken zijn de FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/piecemakerCSS.css "; flashvars.imageSource ="/afbeeldingen";
Merk op dat we onze FlashVars een naam hebben gegeven zoals we ze in ActionScript stap 4 hebben gedefinieerd. We gebruiken ook de ingebouwde bloginfo () -functie van WordPress om te verwijzen naar de exacte locaties van de drie vereiste bestanden.
Met de bovenstaande stappen kunt u de Piecemaker 3D Image Rotator met succes in uw WordPress-thema implementeren, maar we gaan nog een stap verder. In de volgende stappen zullen we bespreken hoe u een aangepast admin-paneel kunt maken waarmee u Piecemaker-instellingen rechtstreeks vanuit de WordPress-back-end kunt aanpassen.
Als u niet geïnteresseerd bent in het instellen van het admin panel, dan kunt u naar de Piecemaker-website gaan om de documentatie te lezen en enkele echt geweldige animaties te maken..
We zullen niet behandelen hoe je het hele admin-paneel vanuit het niets kunt maken. In plaats daarvan zullen we hier een uitgebreide handleiding over Nettuts verder uitdiepen: Een beter WordPress-paneel maken.
Zodra u die zelfstudie hebt gevolgd en u hebt uw configuratie voor het configuratiescherm, gaat u verder met de volgende stap.
We moeten nu extra opties toevoegen aan het beheerderspaneel dat u zojuist in de zelfstudie hebt gemaakt. Open het "functions.php" -bestand van uw thema en vervang het eerste stuk code door het volgende:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Kies een categorie"); $ 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 " , "easeInQut", "easeOutQuart", "easeInOutQuart", "easeOutInQuart", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeOutInExpo", "easeInElastic", "easeOutExlastic", "easeInOutElastic", "easeOutInElastic", "easeOutInlastic" easeInBounce "," easeOutBounce "," easeInOutBounce "," easeOutInBounce "); Het grootste deel van de bovenstaande code is identiek aan de zelfstudie, maar we hebben een nieuwe array met de naam $ tween_types toegevoegd. Deze array bevat alle verschillende animatie-effecten die beschikbaar zijn met PieceMaker. We gebruiken deze array om een vervolgkeuzelijst van de verschillende animatie-effecten te genereren in ons paneel met aangepaste opties. Je kunt de Tweener-documentatie bekijken om een visuele weergave van de verschillende Piecemaker-animatie-effecten te bekijken.
Hiermee wordt een nieuw deelvenster met glijdende opties gemaakt, vergelijkbaar met degene die u in de zelfstudie hebt gemaakt. Het is een lang stuk code, maar het volgt dezelfde exacte logica als de zelfstudie. We maken simpelweg variabelen voor alle verschillende instellingen die we moeten definiëren in het XML-bestand van Piecemaker. Een belangrijk aandachtspunt is dat we ervoor hebben gezorgd dat we standaardwaarden voor elke optie definiëren (de waarden in 'std' zijn de standaardwaarden). Er zijn een behoorlijk aantal instellingen voor de Piecemaker en we willen onze gebruikers niet dwingen al die opties in te stellen als ze niet willen.
array ("naam" => "3D Rotator Options", "type" => "section"), array ("type" => "open"), array ("naam" => "Segmenten", "desc" = > "Aantal segmenten waarin de afbeelding wordt gesneden.", "Id" => $ korte naam. "_ Segmenten", "type" => "tekst", "std" => "9"), array ("naam "=>" Tween Time "," desc "=>" Aantal seconden voor elk element dat moet worden gedraaid. "," Id "=> $ shortname." _ Tween_time "," type "=>" text "," std " => "3"), array ("name" => "Tween Delay", "desc" => "Aantal seconden vanaf een element dat begint te draaien naar het volgende element beginnend.", "Id" => $ shortname. "_tween_delay", "type" => "text", "std" => "0.1"), array ("name" => "Tween Type", "desc" => "Type animatieovergang.", "id "=> $ shortname." _ tween_type "," type "=>" select "," options "=> $ tween_types," std "=>" Kies een categorie "), array (" name "=>" Z Distance " , "desc" => "in welke mate de kubussen op de z-as worden verplaatst bij tweened. Negatieve waarden brengen de kubus dichter bij de camera, positieve waarden nemen het verder weg. ge is ongeveer tussen -200 en 700. "," id "=> $ shortname." _ z_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Expand "," desc "=>" Naar welke etxend zijn de kubussen van elkaar verwijderd tijdens het tweenen. "," Id "=> $ shortname." _ Expand "," type "=>" text "," std "= > "9"), array ("name" => "Inner Color", "desc" => "Kleur van de zijkanten van de elementen in hexadecimale waarden (bijv. 0x000000 voor zwart) "," id "=> $ shortname." _ Inner_color "," type "=>" text "," std "=>" 0x000000 "), array (" name "=>" Tekstachtergrondkleur ", "desc" => "Kleur van de beschrijvende tekstachtergrond in hexadecimale waarden (bijv. 0xFF0000 voor rood)", "id" => $ korte naam. "_ text_background", "type" => "tekst", "std" => " 0x666666 "), array (" name "=>" Text Distance "," desc "=>" Afstand van de infotekst naar de randen van de achtergrond. "," Id "=> $ shortname." _ Text_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Shadow Darkness "," desc "=>" In welke mate zijn de zijden overschaduwd, wanneer de elementen tweenen en de eenzijdige beweging naar de achtergrond 100 is zwart, 0 is niet donkerder. "," id "=> $ korte naam." _ shadow_darkness "," type "=>" text "," std "=>" 25 "), array ( "naam" => "Automatisch afspelen", "desc" => "Het aantal seconden tot de volgende afbeelding wanneer automatisch afspelen is ingeschakeld. Stel 0 in als u niet wilt dat automatisch wordt afgespeeld.", "id" => $ korte naam. " _autoplay "," type "=>" text "," std "=>" 2 "), array (" type "=>" sluiten "), In deze stap moeten we onze paginasjabloon WordPress enigszins aanpassen vanaf stap drie. In plaats van onze XML-bron naar een XML-bestand te verwijzen, moeten we deze naar een PHP-bestand verwijzen. Door een PHP-bestand te gebruiken in plaats van een XML-bestand, kunnen we alle waarden ophalen die door de gebruiker zijn ingesteld in ons paneel met aangepaste opties. Het is gewoon de regel code die moet worden vervangen:
flashvars.xmlSource = "/piecemakerXML.php ";
We zijn er bijna! In deze stap maken we het PHP-bestand dat we zojuist in de bovenstaande code hebben vermeld. Dit PHP-bestand wordt gebruikt om alle waarden uit ons paneel met aangepaste opties in te voeren en het XML-bestand te genereren dat de Piecemaker nodig heeft om goed te kunnen werken. De code is nogal lang, dus ik zal proberen het te verdelen in meer verteerbare brokken.
Maak een leeg PHP-bestand, noem het "piecemakerXML.php" en plak de volgende code aan het begin van het bestand:
Vervolgens moeten we de koptekst van het inhoudstype instellen zodat de browser weet dat we XML-inhoud zullen uitvoeren in plaats van de standaardtekst / html. We zullen ook enkele initiële Piecemaker-instellingen tags toevoegen.
830 360 ';
We gaan de variabelen die we hebben opgeslagen nu uitvoeren in hun juiste XML-tags en sluiten de Piecemaker-instellingentag af.
echo ''. $ segmenten. ' '; echo ''. $ tweentime. ' '; echo ''. $ tweendelay. ' '; echo ''. $ tweentype. ' '; echo ''. $ afstand. ' '; echo ''. $ expand. ' '; echo ''. $ innercolor. ' '; echo ''. $ textbackground. ' '; echo ''. $ textdistance. ' '; echo ''. $ schaduw. ' '; echo ''. $ autoplay. ' '; echo '
De laatste stap is om de afbeeldingen die we in de rotator willen opnemen samen met hun beschrijvingen uit te voeren en we sluiten ook de Piecemaker XML-tag af.
Beschrijving Tekst Ӂ Hier kunt u een beschrijvingstekst toevoegen voor elke afzonderlijke dia. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed Concer placerat eleifend. ӁhyperlinksBeschrijving Tekst Ӂ Hier kunt u een beschrijvingstekst toevoegen voor elke afzonderlijke dia. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed Concer placerat eleifend. ӁhyperlinksBeschrijving Tekst Ӂ Hier kunt u een beschrijvingstekst toevoegen voor elke afzonderlijke dia. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed Concer placerat eleifend. Ӂhyperlinks'; ?> Beschrijving Tekst Ӂ Hier kunt u een beschrijvingstekst toevoegen voor elke afzonderlijke dia. Ӂ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed Concer placerat eleifend. Ӂhyperlinks
Ik hoop dat je iets nuttigs hebt geleerd in deze tutorial. Door verschillende technologieën te combineren, kunnen we krachtige functionaliteit aan onze WordPress-thema's toevoegen. Wat nog belangrijker is, we hebben het voor de gemiddelde gebruiker gemakkelijk gemaakt om aanpassingen aan ons thema aan te brengen.
