Aujourd’hui, je recherche un poste de développeur flash as2/as3 à temps plein, à Montréal, dans une équipe créative et dynamique, histoire de vraiment me spécialiser après avoir touché un peu à tout. Ici, les contacts sont plutôt rapides, mais j’attends d’avoir vu plusieurs agence avant de faire mon choix.

Mon folio est disponible ici. N’hésitez pas à me contacter!

A insérer dans un swf seul ou dans un site flash, grandement paramétrable, voici la classe LcGalerie:
Version 2 : Téléchargez la source ici. (27/04/2008) ou lire l’article
Version 1 : Téléchargez la source ici. (24/03/2008)

Pour l’utiliser, rien de plus simple:

• Téléchargez la source ici, puis placez les répertoires IMG, XML et com à la racine de votre site
• Pour les novices des classes n’oubliez pas d’importer le package à l’aide de la ligne suivante:
  import com.lc.galerie.LcGalerie;
• Ouvrez votre flash as2, copiez la ligne suivante et remplacer les paramètres par ceux que vous souhaitez:
  var myGalerie1:LcGalerie=new LcGalerie(400,400,20,3,3,"0xFF1D140C","XML/galerie.xml",false,hote_mc,"H");
• Remplissez le fichier XML/galerie.xml avec vos images et leurs légendes.
• Placez vos images dans le répertoire IMG dans des tailles optimisées pour l’affichage
• Complilez le fla, votre galerie devrait s’afficher.

Les variables dans l’ordre de déclaration

• largeur de la galerie
• hauteur de la galerie
• marge entre les images
• nombre de lignes
• nombre de colonnes
• couleur du fond de type arvb (alpha de 00 à ff + code alphanumérique de la couleur
• fichier xml contenant la liste des images et légendes
• affichage de la legende de l’image : true pour oui, false pour non
• clip hote de la galerie
• animation Verticale ou Horizontale (H ou V)

Notes:
Si le nombre d’images dans le xml est supérieur à nombre de lignes*nombre de colonnes, seul le nombre maximal sera affiché (nombre de lignes*nombre de colonnes)
Si le nombre d’images dans le xml est inférieur à nombre de lignes*nombre de colonnes, les cases vides sont remplies avec la couleur de fond précisée

LcTags is an editable flash template for wordpress tags.
LcTags allow you to display wordpress tags in a nice flash presentation.
Requires at least: Wordpress 2.3/PHP5
Stable tag: 1.0.1
Flash Player 9

Version francaise

Summary

1. Description
2. Downloads
3. Installing
4. Updating
5. Integration of the swf in a wordpress page
6. Uninstalling
7. Languages

1. Description

LcTags is an editable flash template for wordpress tags.
Tags come from the wordpress simple tags database, and allow administrator to edit display settings:

• Color panel of tags
• Buttons color and background color
• Max and min size of words

Visitors can choose some settings when they visit the tagcloud

• Tags space disposition (line, circle, 3d space)
• Sort on date, popularity, alphabetic

Example here

2. Downloads

• LcTags v 1.0.1
• LcTags v 0.0.4
• LcTags v 0.0.3
• LcTags v 0.0.2
• LcTags v 0.0.1

Your wordpress tree should be like this:

3. Installation

1. Unzip files. Now you have 2 main directories : /wp-lctags and /lcTags.
2. Put the folder /lcTags to wp-content/plugins/.
3. Put the folder /wp-lctags to the root of your wordpress blog.
4. Go to backoffice, in plugins tabs, then activate LcTags.
5. Plugin is well installed, you can edit settings in « options »/ »LcTags »
6. You can see your tagcloud on wwww.your-blog-url/wp-lctags/

Your wordpress tree should be like this:

• wordpress/
  • + wp-content/
    • + plugins/
      • + lctags/
        • lctags.php
        • class.php
        • + admin/
          • admin.php
          • infos.php
        • + img/
          • gamme1.jpg
          • gamme2.jpg
          • gamme3.jpg
          • gamme4.jpg
          • gamme5.jpg
          • gamme6.jpg
          • gamme7.jpg
          • gamme8.jpg
        • + languages/
          • lctags_fr_FR.mo
          • lctags_fr_FR.po
          • lctags_en_EN.mo
          • lctags_en_EN.po
  • + wp-lctags/
    • lctags.swf
    • expressinstall.swf
    • index.php
    • + js/
      • swfobject.js
    • + php/
      • liste_tag.php
      • settings.php

4. Updating

To update LcTags :

1. Unzip files. Now you have 2 main directories : /wp-lctags and /lcTags.
2. Delete existing folder /wp-content/plugins/lcTags and upload the new one.
3. Delete existing folder /wp-lctags at the root of your Wordpress and upload the new one.
4. Update is well done

5. Integration in a wordpress page

1. If you want to display lcTags in all your posts:

• Put the following code in file wp-content\themes\your-template\page.php at the place you want:
  

  
  
  LutinCapuche 2008 - LcTags - Plugin Wordpress - Here alternative content
  
  
  
  

• Put width and height you want for the swf, blog root in pathBase variable, save file and update it on your server with an ftp software.
• You can insert the swf in all your pages templates if you want. (home.php,archive.php…)
• Don’t forget to follow the step 3 to well finished the integration.

2. If you want to insert LcTags in a post with WordPress backoffice

• Note that WP content editor is not easy to use to insert flash content. You had to do a manipulation each time you want to edit your post. I don’t success in find an easier solution yet.
• Open your post in WP backoffice. Choose the « code » view.
• Put your mouse where you want to insert LcTags.
• Copy paste this code:
  

  
  
  LutinCapuche 2008 - LcTags - Plugin Wordpress - Here alternative content
  
  
  
  

• Put width and height you want for the swf, blog root in pathBase variable and save post.
• If you edit the post later, be careful: Wordpress re-edit the code and delete some code which break swf integration. You had to copy past code again.
• Don’t forget to follow the step 3 to well finished the integration.

3. For this two solutions, you had to add the swfObject file to your wordpress page.
To do this, you had to put a line in your file header:

• Open the file \wp-content\themes\votre-theme\header.php with a text editor
• Copy paste this line between <head> and </head>:
  

• Save the file and update it on your server with an ftp software.

6. Uninstalling

If you dislike lcTags, you can uninstall it in your plugin page. Click on « uninstall ». Then delete folders wp-content/plugins/lcTags and wp-lctags. Uninstalling is done.

Uninstalling is well done !

7. Languages

Open plugins/lcTags/lcTags.php en change the following line:
define(‘LCTAGS_LANG’, ‘fr_FR’);
by
define(‘LCTAGS_LANG’, ‘en_EN’);

Upload plugins/lcTags/lcTags.php on your server.

Téléchargez la version 1.0.1 ici

Pour plus d’informations sur l’installation ou la mise à jour, rendez vous sur la page du plugin.

LutinCapuche 2008 – LcTags – Plugin Wordpress

Après quelques mois d’absence sur mon blog, dus au développement de mon nouveau portfolio, le voici enfin quasi finalisé.
Vous pouvez le découvrir à cette adresse: portfolio.lutincapuche.com
N’hésitez pas à laisser des commentaires, des retours… ils seront les bienvenus.

Un nouveau portfolio… pourquoi?
Tout simplement car mr Daweed et moi même partons pour de nouvelles aventures à Montréal à partir du mois de juillet.
Ce qui veut dire nouveau taf, nouveau réseau, nouvel environement, donc nouveau portfolio!

Utilisation de deux systèmes d’url :
-un format pour la navigation et les utilisateurs (que j’appelerai « format user » tout au long de l’article pour plus de lisibilité)
-un format pour le référencement (que j’appelerai « format robots » )

Le format user est un format type ancre nommée, que la classe ExternalInterface de flash permet de modifier directement dans la barre de navigation, sans recharger la page.
Certaines classe comme swfAddress permettent de faire la même chose avec des fonctionnalités en plus que l’on n’abordera pas ici.
Il permet alors de faire des liens directs vers vos pages flash, comme on le ferai sur une page html, et donc facilite la navigation pour l’utilisateur.
http://www.blog.lutincapuche.com/#4-18-monArticle
4 et 18 sont respectivement l’id de la catégorie et l’id de l’article à afficher, qui, une fois parsés en js puis transmis au flash, permettront d’afficher les bonnes informations dans le flash.
monArticle est le titre de l’article, qui permet d’expliciter l’url à l’utilisateur. Cette information n’est pas indispensable.

Le format robots permet d’optimiser le référencement, puisqu’il permet de créer virtuellement chaque page, et de générer le contenu alternatif du flash en fonction de la page appelée.
http://www.blog.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=18

Pourquoi deux types d’url?

• Google ne considère pas que les pages
  http://www.blog.lutincapuche.com/wp-flashblog/#4-18-monArticle
  et
  http://www.blog.lutincapuche.com/wp-flashblog/#4-19-monArticle2
  soient différentes, puisque les urls ne contiennent que des ancres nommées.
  Par contre
  http://www.blog.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=18
  et
  http://www.blog.lutincapuche.com/wp-flashblog/index.asp?idCat=4&idArticle=19
  sont 2 pages disctinctes, comme dans tout site dynamique.

• Flash ne permet pas de modifier l’url de la barre de navigation d’une autre manière qu’avec un # ou sans rien, il n’est pas possible d’y inscrire directement les variables en get avec le ?, car dans ce cas, la page est rechargée.

C’est donc le format robots que l’on va utiliser pour optimiser le référencement, c’est à dire le sitemap et le contenu/menu alternatif.
Il faut bien sur que les 2 formats d’url mènent à la même page flash, donc traiter les 2 cas pour récupérer les id catégorie et article dans votre page php ou asp.

Voila sur le principe, je vais maintenant décrire chaque étape, avec des exemples pour être plus claire. Ces exemples sont basés sur le flogMaker, mon plugin worpdress.

• 1. Choix du format d’url

• 2. Ecriture de l’url format user depuis flash

• 3. Format user: récupération des idArticle et catégorie au chargement de la page

• 4. Format robots: récupération des variables et création du contenu alternatif

• 5. Affichage du flash à la bonne page

• 6. Génération du plan sitemap.xml

• 7. Liens utiles

1. Choix du format d’url

format user: http://www.blog.lutincapuche.com/#idCategorie-idArticle-titreArticle
format robots: http://www.blog.lutincapuche.com/index.asp?idCat=idCategorie&idArticle=idArticle&titre=titreArticle

C’est bien de mettre le titre de l’article dans le format robots car le contenu de l’url est pris en compte par les moteurs de recherche.
Ces formats dépendent de vos besoins, un seul id peut suffir, à vous de voir.

2. Ecriture de l’url format user depuis Flash

Le code AS2, disponible à partir de Fash 8, qui permet d’écrire dans la barre de navigation :

//importation de la classe
import flash.external.ExternalInterface

//definition de la fonction de reecriture
function reecriture_url(tag){
	ExternalInterface.call('eval', 'location.href="http://www.lutincapuch
	e.com/#'+tag+'" ');
}

//on appelle la fonction sur une action de l'utilisateur par exemple
monBouton.onPress=function(){
	monTag = this.idCategorie+"-"+ this.idArticle +"-"+this.titreArticle;
	reecriture_url(monTag) ;
}

3. Format user: récupération des variables

Au chargement de la page html, si l’url ne contient pas les variables GET recherchées :

-Parsage javascript de l’url pour voir si elle contient les id catégorie et article après le #.
-Passage des paramètres en variables au flash

Exemple:

Puis lors de l’insertion du flash:

4. Format robots: création du contenu alternatif

On vérifie les variables passées en GET. Si l’url contient ces variables, on remplie le header avec les informations sur l’article que l’on peut alors aller chercher en base (titre, date, description, contenu pour le référencement).
Le contenu alternatif du Flash doit contenir ces informations pour qu’il puisse être scanné pertinement par les robots des moteurs de recherche.
Pour optimiser le référencement, je vous conseille aussi de générer l’équivalent de votre menu flash sous forme de liste item, et en utilisant le format d’url contenant les variables en GET pour être considéré comme un lien et pas une ancre nommée.
Ne pas oublier de passer au flash les variables PHP et non les variables récupérées en javascript.

Exemple:

menu1
menu2

...




...


var categorie = ;
var article = ;

var categorie = retourne_cat();
var article = retourne_art();

5. Ouverture du flash à la bonne page

Là, à vous de gérer dans le flash, chaque cas est tellement différent.
Vous récupérez les variables en _root sur le flash appelé, avec le nom renseigné dans le javascript. (ici idCategorie et idArticle).

6. Génération du plan sitemap.xml

Faites un petit script php qui génère automatiquement le fichier sitemap.xml à chaque nouvel insert ou suppression d’article.
Ici, on crée une entrée pour chaque article, en utilisant le format robots d’url pour que chaque article soit considéré comme une page:

Exemple:

get_results($reqContenu);

$filename = 'sitemap.xml';
$var = "";
$var = $var."";
$var = $var."";
$myURL="http://www.blog.lutincapuche.com";

if(!$resultPage){
}else{
	foreach($resultPage as $e){
		$UrlArticle="index.php#idCat=".$e->ID_cat."&idArticle=".$e->ID;
		$var = $var."";
		$var = $var."";
		$var = $var."".$e->post_date."";
		$var = $var."daily";
		$var = $var."
0.9";
		$var = $var."";
	}
	$var = $var."";
	// Assurons nous que le fichier est accessible en écriture
	if (is_writable($filename)) {
	   if (!$handle = fopen($filename, 'w')) {
	         echo "Impossible d'ouvrir le fichier ($filename)";
	         exit;
	   }
	   // Ecrivons quelque chose dans notre fichier.
	   if (fwrite($handle, $var) === FALSE) {
	       echo "Impossible d'écrire dans le fichier ($filename)";
	       exit;
	   }
	    fclose($handle);
	} else {
	   echo "Le fichier $filename n'est pas accessible en écriture.";
	}
}
?>

Il ne reste qu’à lier ce sitmap.xml à votre site flash en utilisant le WebmasterTools de Google.

Si vous avez des propositions pour encore améliorer le système, n’hésitez pas !

7. Liens relatifs

• swfAddress: swf address est une classe permettant de changer facilement le nom d’une page depuis Flash, avec quelques options supplémentaires par rapport à la classe external Interface. Par contre elle ne permet pas de mieux référencer son site.
• swfObject: swfObject est un petit script Javascript utilisé pour inclure un contenu swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC) et est conçu pour rendre l’intégration des swf aussi simple que possible. L’intégration dans la page est très propre il peut être employé dans les documents valides HTML et XHTML 1.0 *, et est compatible avec les spécifications futur, ainsi vous pourais continuer a l’utiliser pendant les prochaines années a venir.
• xml-sitemap : Un générateur de sitemap gratuit, qui permet de voir le format exact d’un sitemap ou de le générer pour un site dynamique classique
• flogMaker : Mon plugin wordpress qui met en pratique ce tutorial, et ici la page du plugin

En fait il s’agit du système de sécurité de Flash, qui ne permet pas par défaut de manipuler les objets Bitmap quand la source vient d’une url externe. On peut les afficher, les lire, mais pas les transformer et les cloner.

Le code de base pour dessiner le Bitmap apres avoir chargé le NetStream est le suivant :

itemToConnect.nc = new NetConnection();
itemToConnect.nc.connect( null );
itemToConnect.ns=new NetStream(itemToConnect.nc);
itemToConnect.ns.play(« http://www.monDomaineExterne.com/video.flv »);

var bitmap = new flash.display.BitmapData(106, 86,false,0×000000);
createEmptyMovieClip(« copie », 2);
copie.attachBitmap(bitmap,2, »auto »,false);
bitmap.draw(itemToConnect);
lv = new LoadVars();
lv.tab = new Array();

//tableau de pixel image de 86px de haut par 106 de large
for (i=0; i<86; i++) {
for (j=0; j<106; j++) {
lv.tab.push(bitmap.getPixel(j, i));
}
}

//écriture du fichier par appel d’un fichier asp ou php…
var lv2 = new LoadVars();
lv.sendAndLoad(« generejpg_.aspx »,lv2, »POST »);
lv2.onLoad = function () {
trace (« image enregistrée »);
}

Ensuite, 3 choses à faire :
1. Charger la classe nécessaire :

System.security.loadPolicyFile();

2. Initialiser la valeur checkPolicyFile à true avant le chargement du NetStream.

itemToConnect.ns.checkPolicyFile=true;
itemToConnect.ns.play(« http://www.monDomaineExterne.com/video.flv »);

3. Mettre le fichier crossdomain.xml à la racine du domaine hébergeant la video externe
Ce fichier indique les urls pour lesquelles l’accès aux fichiers est autorisé.

Son contenu :
<?xml version= »1.0″?>
<!DOCTYPE cross-domain-policy SYSTEM « http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd »>
<cross-domain-policy><allow-access-from domain= »www.monDomaineSource.com » />
</cross-domain-policy>

Vous pouvez mettre * à la place du domaine si vous souhaitez autoriser l’accès à tous les domaines, mais vos fichiers ne seront plus protégés sur ce point la.

Et voila, tout devrait fonctionner comme sur un fichier venant du même domaine.