Share
Ce tutoriel vous montrera comment intégrer avec succès le rotateur d’images Piecemaker 3D Flash dans votre thème WordPress. Nous discuterons également de la configuration d’un panneau d’administration personnalisé qui facilitera la personnalisation par vos utilisateurs du rotateur..
Piecemaker est un superbe rotateur d'images flash 3D open-source créé par Björn Crüger de Modularweb. Vous pouvez prévisualiser le fabricant de pièces en action sur Sansation, le premier thème WordPress premium sur ThemeForest intégrant Piecemaker..
Tous les fichiers inclus dans le fichier ZIP sont déjà modifiés pour vous. Nous avons également inclus un dossier contenant tous les fichiers Piecemaker non modifiés par défaut. Je vous recommande de consulter le site Piecemaker et de vous familiariser avec celui-ci avant de poursuivre le didacticiel..
La première étape consiste à modifier le code ActionScript afin qu'il fonctionne correctement avec WordPress. Le code ActionScript fourni avec Piecemaker définit trois valeurs nécessaires au bon fonctionnement de Piecemaker:
La source XML définit les différents paramètres de Picemaker et vous permet de définir des images et leurs descriptions. Le fichier CSS style les panneaux de description de Piecemaker et le répertoire des images indique à celui-ci où extraire les images..
Ouvrez le fichier FLA nommé "iecemakerNoShadow.fla "et ouvrez la fenêtre Actions. Dans l'image 1, vous verrez les actions ci-dessous. Notez que vous avez besoin de Flash CS4 pour ouvrir le fichier source..
Pour que Piecemaker fonctionne correctement dans notre thème WordPress, nous devons définir ces variables de manière dynamique. Pour ce faire, nous utiliserons FlashVars. Les FlashVars sont des variables que nous définirons dans notre modèle de page WordPress et qui seront transmises au film Flash lors du chargement de la page. Allez-y et supprimez les actions par défaut de l'image 1 du fichier flash et remplacez-les par le code suivant:
Accentsconagua
stage.scaleMode = StageScaleMode.NO_SCALE; // Extrait les variables Flash var allFlashVars: Object = LoaderInfo (this.root.loaderInfo) .parameters; // Définit les variables requises pour rattrapeur rattrapeur.xmlSource = String (allFlashVars.xmlSource); rattrapeur.cssSource = Chaîne (allFlashVars.cssSource); iecemaker.imageSource = String (allFlashVars.imageSource); iecemaker.dispatchEvent (nouvel événement ("propriétés")); Le code ActionScript ci-dessus se charge d'abord dans les FlashVars, puis remplace les valeurs par défaut de Piecemaker par ces nouvelles variables. Notre fichier Flash est maintenant prêt à partir. Publiez le fichier SWF et chargez le client FTP de votre choix.
La prochaine étape consiste à télécharger les fichiers et dossiers requis dans le répertoire de votre thème WordPress. Ce tutoriel suppose que vous allez tout télécharger directement dans le répertoire principal de votre thème. Voici une liste des éléments requis:
L'étape suivante consiste à intégrer le film SWF dans votre modèle de page WordPress. Nous utiliserons SWFObject 2 pour intégrer le film, et nous définirons également les trois FlashVars que nous avons référencés à la première étape..
Vous devez d’abord faire référence à swfobject dans l’en-tête de votre page. Pour ce faire, ouvrez le fichier "header.php" de votre thème dans l'éditeur de code de votre choix (BBEdit) et ajoutez le code suivant dans l'en-tête de votre page:
Ensuite, ouvrez le modèle de page WordPress où vous souhaitez que Piecemaker 3D Rotator s’affiche, puis collez le code suivant:
Vous devez mettre à niveau votre Flash Player vers la version 10 ou plus récente..
La majeure partie du code est simplement votre code swfobject standard utilisé pour incorporer une animation flash sur une page Web. Les choses importantes dont nous devons nous préoccuper sont les FlashVars:
flashvars.xmlSource = "/piecemakerXML.xml "; flashvars.cssSource ="/piecemakerCSS.css "; flashvars.imageSource ="/images";
Notez que nous avons nommé nos FlashVars tels que nous les avons définis dans le code ActionScript à l'étape 4. Nous utilisons également la fonction bloginfo () intégrée de WordPress pour référencer les emplacements exacts des trois fichiers requis..
Les étapes ci-dessus vous permettront de déployer avec succès le Rotor d'images 3D Piecemaker dans votre thème WordPress, mais nous allons aller plus loin. Dans les étapes suivantes, nous verrons comment créer un panneau d’administration personnalisé qui vous permettra de personnaliser les paramètres de Piecemaker à partir du back-end WordPress..
Si vous n'êtes pas intéressé par la configuration du panneau d'administration, vous pouvez consulter le site Web de Piecemaker pour lire la documentation et commencer à créer des animations vraiment impressionnantes..
Nous ne verrons pas comment créer l'intégralité du panneau d'administration. Au lieu de cela, nous développerons un didacticiel déjà détaillé sur Nettuts: Comment créer un meilleur panneau WordPress.
Une fois que vous avez suivi ce tutoriel et que vous avez configuré votre panneau d’administration, passez à l’étape suivante..
Nous devons maintenant ajouter des options supplémentaires au panneau d'administration que vous venez de créer dans le tutoriel. Ouvrez le fichier "functions.php" de votre thème et remplacez le premier bloc de code par le suivant:
cat_ID] = $ category_list-> cat_name; array_unshift ($ wp_cats, "Choisissez une catégorie"); $ tween_types = array ("linear", "asyInSine "," easlyOutSine "," "easInOutSine", "" easInCubic "," "easInOutCubic", "" easInOutSine "," "" "", "" "", "" "", "" "", "" "" aisanceOutInQuint "," aisanceInCirc "," aisanceOutCirc "," aisanceInOutCirc "," aisanceOutInCirc "," aisanceAuto "," aisanceOutBack "," aisanceOutBack "," aisanceOutInBack "," aisanceOutInBack "," aisanceOutBack "," aisance "," aisance " , "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance", "aisance" easyInBounce "," aisanceOutBounce "," aisanceInOutBounce "," aisanceOutInBounce "); La majeure partie du code ci-dessus est identique au didacticiel, mais nous avons ajouté un nouveau tableau nommé $ tween_types. Ce tableau contient tous les divers effets d'animation disponibles avec PieceMaker. Nous allons utiliser ce tableau pour générer une liste déroulante des différents effets d’animation dans notre panneau d’options personnalisées. Vous pouvez consulter la documentation Tweener pour revoir une représentation visuelle des divers effets d’animation de Piecemaker..
Cela créera un nouveau panneau d'options coulissantes similaires à celles que vous avez créées dans le tutoriel. C'est un long morceau de code, mais il suit la même logique exacte que le tutoriel. Nous créons simplement des variables pour tous les différents paramètres que nous devrons définir dans le fichier XML de Piecemaker. Une chose importante à noter est que nous nous sommes assurés de définir des valeurs par défaut pour chaque option (les valeurs dans 'std' sont les valeurs par défaut). Il y a une quantité décente de paramètres pour le fabricant de pièces et nous ne voulons pas forcer nos utilisateurs à configurer toutes ces options s'ils ne veulent pas.
array ("name" => "Options de rotation 3D", "type" => "section"), array ("type" => "open"), array ("name" => "Segments", "desc" = > "Nombre de segments dans lesquels l'image sera découpée.", "Id" => $ shortname. "_ Segments", "type" => "text", "std" => "9"), array ("name "=>" Tween Time "," desc "=>" Nombre de secondes pour chaque élément à transformer. "," Id "=> $ shortname." _ Tween_time "," type "=>" text "," std " => "3"), array ("name" => "Tween Delay", "desc" => "Nombre de secondes à partir du moment où un élément commence à passer au prochain élément.", "Id" => $ shortname. "_tween_delay", "type" => "texte", "std" => "0.1"), tableau ("nom" => "Tween Type", "desc" => "Type de transition d'animation.", "id "=> $ shortname." _ _ tween_type "," type "=>" select "," options "=> $ tween_types," std "=>" Choisir une catégorie "), array (" name "=>" Z Distance " , "desc" => "dans quelle mesure sont les cubes déplacés sur l’axe z lorsqu’ils sont interpolés. Les valeurs négatives rapprochent le cube de la caméra, les valeurs positives l’éloignent davantage. ge est approximativement compris entre -200 et 700. "," id "=> $ shortname." _z_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Développez "," desc "=>" Dans quel etxend les cubes sont-ils écartés lors de l'interpolation. "," Id "=> $ shortname." _ Expand "," type "=>" text "," std "= > "9"), array ("name" => "Inner Color", "desc" => "Couleur des côtés des éléments en valeurs hexadécimales (par exemple 0x000000 pour le noir) "," id "=> $ shortname." _ Inner_color "," type "=>" text "," std "=>" 0x000000 "), array (" name "=>" Couleur d'arrière-plan du texte ", "desc" => "Couleur de l'arrière-plan du texte de description en valeurs hexadécimales (par exemple 0xFF0000 pour le rouge)", "id" => $ shortname. "_ text_background", "type" => "text", "std" => " 0x666666 "), array (" name "=>" Distance du texte "," desc "=>" Distance du texte d’information par rapport à la bordure de son arrière-plan. "," Id "=> $ shortname." _ Text_distance "," type "=>" text "," std "=>" 25 "), array (" name "=>" Shadow Darkness "," desc "=>" Les côtés sont ombrés, lorsque les éléments sont interpolés et les 100, noir, 0, pas d’obscurcissement. "," id "=> $ shortname." _ shadow_darkness "," type "=>" text "," std "=>" 25 "), array ( "name" => "Auto Play", "desc" => "Nombre de secondes avant la prochaine image lorsque la lecture automatique est activée. Définissez la valeur 0 si vous ne voulez pas la lecture automatique.", "id" => $ shortname. " _autoplay "," type "=>" text "," std "=>" 2 "), tableau (" type "=>" fermer "), Dans cette étape, nous devons légèrement modifier notre modèle de page WordPress à partir de la troisième étape. Au lieu de pointer notre source xmlSource vers un fichier XML, nous devons le pointer vers un fichier PHP. En utilisant un fichier PHP au lieu d'un fichier XML, nous pouvons extraire toutes les valeurs définies par l'utilisateur dans notre panneau d'options personnalisées. C'est juste la ligne de code qui doit être remplacée:
flashvars.xmlSource = "/piecemakerXML.php ";
Nous y sommes presque! Dans cette étape, nous allons créer le fichier PHP que nous venons de référencer dans le code ci-dessus. Ce fichier PHP sera utilisé pour extraire toutes les valeurs de notre panneau d'options personnalisées et générer le fichier XML dont le fabricant de pièces a besoin pour fonctionner correctement. Le code est un peu long, je vais donc essayer de le décomposer en morceaux plus faciles à digérer..
Créez un fichier PHP vierge, nommez-le "iecemakerXML.php "et collez le code suivant au début du fichier:
Ensuite, nous devons définir l’en-tête content-type afin que le navigateur sache que nous allons afficher le contenu XML plutôt que le texte / HTML par défaut. Nous allons également inclure quelques balises de paramètres initiaux de Piecemaker.
830 360 ';
Nous allons maintenant sortir les variables que nous avons stockées dans leurs balises XML correctes et fermer la balise Paramètres de Piecemaker..
écho ''. segments $. ' '; écho ''. $ tweentime. ' '; écho ''. $ tweendelay. ' '; écho ''. $ tweentype. ' '; écho ''. $ zdistance. ' '; écho ''. $ expand. ' '; écho ''. $ innercolor. ' '; écho ''. $ textbackground. ' '; écho ''. $ textdistance. ' '; écho ''. $ shadow. ' '; écho ''. $ autoplay. ' '; écho '
La dernière étape consiste à sortir les images que nous voulons inclure dans le rotateur ainsi que leurs descriptions. Nous fermerons également la balise XML de Piecemaker..
Description Texte Ӂ Ici, vous pouvez ajouter un texte de description pour chaque diapositive. Ӂ Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. YphyperlinksDescription Texte Ӂ Ici, vous pouvez ajouter un texte de description pour chaque diapositive. Ӂ Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. YphyperlinksDescription Texte Ӂ Ici, vous pouvez ajouter un texte de description pour chaque diapositive. Ӂ Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. Yphyperlinks'; ?> Description Texte Ӂ Ici, vous pouvez ajouter un texte de description pour chaque diapositive. Ӂ Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Aliquam eu quam dolor, un venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend. Yphyperlinks
J'espère que vous avez appris quelque chose d'utile dans ce tutoriel. En combinant différentes technologies, nous sommes en mesure d’ajouter des fonctionnalités puissantes à nos thèmes WordPress. Plus important encore, nous avons facilité la tâche de l'utilisateur moyen à la personnalisation de notre thème..
