graphiste freelance : création de sites internet | création de logos | création d'animation flash | créations d'affiches, flyers

Seconde partie du tutorial. Vous allez maintenant programmer en Actionscript pour animer les movieclips flash.

Vous allez apprendre comment calculer une distance dans flash en action script et gérer le score ainsi que l'élimination du joueur.
Les fichiers source .fla sont disponibles en téléchargement après chaque étape. Vous pouvez bien sur modifier ce fichier source pour créer le jeu que vous avez envie avec des graphismes améliorés.

---

Grâce à ce tutorial, vous allez créer un jeu flash, en partant de 0.
Les fichiers sources flash (.fla) sont disponibles pour chaque étape du tutorial.
Le jeu que vous allez créer est un jeu simple qui vous permettra de comprendre comment organiser ses calques, gérer les appuis clavier (touches fléchées), animer les différents MovieClip et gérer un système de score.

Je vais expliquer dans ce tutorial comment faire un jeu flash en ActionScript, clône de Dance Dance Revolution. Attention, tutorial en deux parties.

---

Votre illustration ne prend qu'une partie de votre plan de travail et vous voulez exporter seulement cette partie.
Une solution peut être de redimensionner votre plan de travail aux bonnes dimensions et de déplacer vos objets à l'intérieur de cet espace de travail puis d'êcréter selon les limites du plan de travail au moment de l'exportation.
Cette opération est plutôt laborieuse, mais il existe une seconde solution sous illustrator : la zone de recadrage.
Cette solution est beaucoup plus maniable et intuitive.
Dans ce tutoriel illustrator, je vais présenter les deux manières d'exporter une partie de l'illustration.

---

L'outil le plus pratique et puissant sous Illustrator est sans doute l'outil plume. L'outil plume permet de créer des tracés aussi bien recitlignes qu'arrondis mais aussi de combiner les deux.
Cepandant, sa manipulation n'est pas simple et il va falloir vous entraîner pour le maîtriser totalement.
C'est avec l'experience que vous saurez placer vos points d'ancrage afin que votre tracé suive vos envies.
Ce tutorial présente les différentes manières d'utiliser l'outil plume ('+' et '-') ainsi que les outils associés.

---

Pour un de mes projets, je devais charger des données personnalisées depuis une base MySql dans un swf Flash.
L'identifiant permettant de retrouver ces données dans la base était indiqué dans l'url de la page sous la forme index.php?id=xxx.
Ce n'était pas une valeur POST mais une valeur GET qu'il fallait récupérer.
Après avoir testé plusieurs solutions (LoadVariables(), load() ...), la solution la plus simple fut de transmettre l'identifiant
grâce aux FlashVars. Avec un peu de PHP et d'ActionScript (as), les données sont chargées automatiquement dans mon SWF.
Ce tutorial présente le code source à écrire pour pouvoir utiliser ces FlashVars sous tous les navigateurs web.

---

Pour améliorer la navigation et le référencement des articles de mon blog, j'ai décidé d'ajouter à la fin de chaque article, un lien vers un article de la même catégorie. Mon choix a été de prendre l'article de la même catégorie écrit juste avant et celui écrit juste après, s'il existe.

Toutes les entrées de mon blog étant stockées dans une base mysql, il me suffisait d'effectuer les bonnes requêtes pour sélectionner les articles précédents / suivants.
Pour éviter de faire plusieurs requêtes ou deux while imbriqués, j'ai du trouver une solution simple en SQL. La solution se passe avec les sélécteurs < et >.
Ce court tutorial présente la source PHP que j'utilise avec ses commentaires.

---

Dans ce tutorial, je vais expliquer en détail comment faire un masque d'écrêtage sous Illustrator.
Un masque d'écrêtage est un objet ou un groupe d'objets dont la forme masque les autres illustrations, rendant ainsi visible uniquement l'illustration contenue dans les limites du masque.
Ce masque peut ainsi permettre de créer une texture pour un texte ou une simple découpe de votre image.
Dans ce tutorial, vous allez apprendre comment créer, sélectionner, modifier et annuler ce masque d'écrêtage.

---

Pour créer un design à la mode, il vous faut un design style Web 2.0.
Pour cela, pas de standards établis, seulement des règles simples que l'on retrouve sur tous ces nouveaux sites.
Par exemple, les contours arrondis, les couleurs pastel, les polices sans serif ou les ombres sont typiques de ces designs.
Roman Mittermayr a écrit un article en anglais qui résume parfaitement ces règles.
Avec son autorisation, voici donc la traduction en français de son article sur la 2.0Culture.
Grâce à ses conseils et ses exemples, vous pourrez créer vous-même votre design Web 2.0 !

---

Après avoir créé votre design web sous Illustrator (ou dans Photoshop par ex), vous voulez maintenant le découper pour pouvoir exporter les images séparément.
Il existe pour cela l'outil Tranche dans Illustrator, que vous pourrez trouvez dans la boîte à outils.
Il vous permet de créer des zones qui seront exportées séparemment.
Vous pourrez ensuite optimiser le poids des images en les exportant en jpeg, gif ... et dans la palette de couleurs qui correspondra à votre image.
Illustrator peut aussi fournir une page HTML mise en forme avec des tableaux.
Il est fortement conseillé de retravailler le design découpé avec un fichier CSS pour une meilleure accessibilité.

---

Pour ouvrir une nouvelle fenêtre (pop-up), on pense souvent au Javacript, qui permet de le faire facilement.
Seulement, le contenu du pop-up n'est pas indexable puisqu'il n'est pas parcouru par les moteurs de recherche (à cause du javascript).
De plus, l'ouverture de pop-up peut-être bloquée par les bloqueurs de pop-up intégrés aux navigateurs récents.
Cette solution est d'autant plus à proscrire qu'elle n'est pas très "user-friendly" car elle surprend l'utilisateur.
Il existe une solution qui permet d'afficher une infobulle, un peu comme les info-bulles windows au survol du curseur.
Cette solution est réalisée entièrement en CSS et permet donc d'avoir un contenu indéxé pas les moteurs.

---

Dans ce tutorial, je vais expliquer comment rediriger simplement le visiteur de votre site internet suivant sa langue.
De façon automatique et transparente, on va détecter sa langue et le visiteur sera renvoyé vers la page correspondant à sa langue préférée.
Il faut savoir que la langue récupérée avec le script PHP est celle fixée par l'utilisateur dans les préférences de son navigateur et pas celle de son système d'exploitation.
Le script utilise ainsi la variable $HTTP_ACCEPT_LANGUAGE et renvoie le header correspondant de manière automatique.

---

Après plusieurs mois de developpement, Pixtiz commence à décoller et de plus en plus de visiteurs viennent jouer aux jeux flash gratuits et lire les tutoriaux illustrator, flash, php et css du blog.
Afin de permettre aux visiteurs habituels de suivre l'actualité du site, Pixtiz dispose à présent d'un flux RSS.
Vous pouvez vous abonner dès maintenant et utiliser votre lecteur de flux habituel qui vous permettra de ne pas avoir à consulter le site tous les jours.
Recevoir l'actualité des tutoriaux illustrator, css, flash et php...

---

Votre site comporte sûrement des formulaires, que ce soit pour un formulaire de contact/d'inscription, un système de commentaire pour votre blog,
un livre d'or, un forum...
Ces formulaires peuvent être la cible de robots de spam, qui envoient de manière automatique des publicités ou des liens.
Des hackers peuvent aussi le faire de manière massive pour crasher votre base de données voire votre serveur web.
Pour y remédier, il existe une solution simple que vous avez sûrement déjà vu sur de nombreux sites: une image de vérification aussi appelée captcha.
Cette image est cryptée et prouve que celui qui remplit le formulaire est bien humain.
Vous apprendrez avec ce tutorial à créer cette image et à effectuer la vérification de la valeur entrée.

---

Créer un flux RSS pour son site, permet à vos visiteurs de se tenir au courant de l'actualité du site ou des nouveaux articles parus sans avoir à s'inscrire à une newsletter.
Les lecteurs (aggrégateurs) de flux se sont multiplié (NetVibes, Google Reader ...) et permettront à vos visiteurs d'économiser du temps en consultant plusieurs flux RSS en même temps, c'est la syndication.
Le langage utilisé pour le créer est le XML, langage proche du HTML mais plus puissant et strict.
Un autre avantage est celui du référencement.
En effet, vous allez lier ce flux RSS à votre site web et Google va "s'abonner" à ce flux et revenir plus souvent.
A travers ce tutorial, vous apprendrez la syntaxe d'un fichier RSS, comment le créer de manière automatique, comment le lier à votre page et comment l'afficher avec XSLT pour les utilisateurs n'ayant pas d'aggrégateur.

---

Un autre problème que j'ai eu à la création de Pixtiz fût la compatibilité des images PNG avec Internet Explorer et je pense que
tout le monde a déjà eu ce souci.
En effet, les zones transparentes deviennent bleues pour toutes les versions d'IE.
Pour résoudre ce problème, il y a plusieurs solutions :

Utiliser le progid Microsoft sur chaque image

Utiliser un script JavaScript qui automatise cette opération

Utiliser la propriété behavior CSS

---

Pour la création du design de Pixtiz, j'avais décidé que mon design serait plutôt classique avec header pour le multi-langue et footer pour le menu annexe.
Pour le contenu, il serait réparti sur trois colonnes: à gauche le menu et les sites partenaires, au centre le contenu et à droite la publicité et les utilisateurs en ligne.
Le tout serait bien sur au centre de la page et pas aligné sur un bord.
Au cours de la création de mon fichier CSS, j'ai été confronté à beaucoup de bugs et d'obstacles qui semblent revenir souvent dans la création de ce type de design.
Le code est propre, n'utilise aucun hack CSS, et fonctionne parfaitement sous Internet Explorer que sous Firefox
Le but de ce tutorial est de vous montrer comment contourner ces problèmes. Un fichier CSS "modèle" est en téléchargement sur cette page.

---

Lorsque l'on développe un site web, on a souvent besoin de beaucoup d'outils externes comme la validation W3C ou autres.
Certaines actions sont, elles, trop répétitives (uploader un fichier css et actualiser la page par exemple).
Pour vous simplifier ces tâches, il existe un outil extrêmement pratique que j'ai utilisé tout au long du developpement de ce site, la WebDeveloper Toolbar.
Je vous décrirai ici les fonctions que j'utilise le plus et celle que j'estime comme les plus pratiques même si vous pourrez découvrir par vous même toutes les options offertes par cette barre d'outils.

---

Dans ce tutorial, je vais expliquer en détail comment faire un dégradé vers une transparence sous Illustrator.
Faire ce type de dégradé n'est pas aussi simple que sous Flash où il suffit simplement d'entrer un alpha pour rendre la couleur transparente.
Sous Illustrator, vous devrez utiliser un masque d'opacité afin de cacher les parties que vous souhaitez
Vous pourrez ainsi créer des fondus entre vos éléments illustrator facilement, aussi bien pour un fondu entre images que pour un fondu entre illustrations.
Les masques d'opacité peuvent aussi servir à créer des "perçages" dans vos illustrations, des trous en quelques sorte.

---

Dans ce tutorial, je vais expliquer en détail la création de dégradés sous Illustrator.
Ces étapes vous seront sûrement familières si vous utilisez déjà Flash par exemple puisque tous les produits Adobe / Macromedia ont adopté le même système. Il est donc important de savoir s'en servir jusqu'au bout des doigts.
Vous apprendrez ici comment créer votre dégradé, le modifier, en changer les couleurs ...

---

Il y a quelques semaines, j'ai découvert Kongregate, un nouveau site proposant des jeux flash gratuits.
Le concept est différent des autres annuaires de jeux flash traditionnels.
Ici ce sont les developpeurs qui uploadent leur propres jeux flash, ce qui vaut a Kongregate d'être déjà considéré comme le Youtube du jeu flash.
Toutes les semaines, Kongregate organise un concours, visant à recompenser le meilleur jeu flash uploadé dans la semaine.
Le gagnant de la semaine remporte 250 $, et le gagnant sur les 9 premières semaines gagne 1500 $.
Au début, il n'y avait qu'une vingtaine de jeux différents proposés sur le site, il y en a déjà plus d'une centaine aujourd'hui ...

---

Il existe aujourd'hui plusieurs critères pris en compte par les moteurs de recherche.

Parmi les plus importants, il y a le titre de la page, sa description meta et de plus en plus son URL.
Grâce à l'URL Rewriting, le webmaster peut changer une URL de type www.site.com/index.php?page=blog en www.site.com/blog.

Les moteurs ne prennent pas en compte ces paramètres (?param1=1&param2=2&param3=3...) s'ils sont trop nombreux.

D'un point de vue utilisateur, le cheminement à l'intérieur du site est plus clair et plus agréable.
En effet, il voit la correspondance avec des pseudo-répertoires comme ceux qu'ils peut voir quand il parcourt son disque dur.
Pour effectuer cette réecriture, on peut passer par un .htaccess et des expressions régulières qui sont, pour des débutants, difficiles à mettre en place...

---

Pour avoir un bon référencement naturel sur les moteurs de recherche, j'ai décidé d'utiliser la réécriture d'URL pour Pixtiz.
Pour cela, il y a deux solutions :

Faire son URL Rewriting directement dans le .htaccess grâce aux expressions régulières
Rediriger tout son site vers une même page PHP et faire le traitement par extraction de l'URL

Pour des raisons de simplicité de code, j'ai décidé d'utiliser la deuxième solution.
En effet les expressions régulières sont difficiles à maîtriser et le traitement par PHP permet de gérer les erreurs plus facilement.
Le site étant hébergé chez 1&1 en hébergement mutualisé, il m'a fallu adapter le code pour que cela fonctionne.

---

Vous connaissez sûrement le site CSS Zen Garden, un site dédié entièrement au webdesign.
Il montre la puissance du CSS, grâce à une page web HTML unique mais un CSS différent à chaque fois.
Au départ le site ne présentait que 5 CSS différents et il en compte aujoud'hui 150!
Ce qui fait la réputation du Zen Garden, c'est surtout l'excellente qualité des feuilles de style présentées et leur professionalisme.
Je me suis recemment procuré le livre écrit par leur fondateurs, Dave Shea et Molly E.Holzschlag, 300 pages très instructives !
Tout est en anglais, et disponible en import (voir lien à la fin de l'article).

---

Après l'article sur la création de logo web 2.0, je vous propose de créer des boutons type Web 2.0.
Comme pour les logos, aucun standars mais certains styles redondants (dégradés, ombres, coins arrondis...).
Dans ce tutorial, je vais vous apprendre comment créer des boutons type Web 2.0 très facilement grâce à Adobe Illustrator.

Les sources illustrator sont disponibles à la fin de ce tutorial.

---

Vous venez de créer un site web 2.0 ou vous voulez tout simplement rajeunir le look de votre design, et pour cela, il faut créer un webdesign à la mode. Et aujourd'hui, la mode c'est le Web 2.0 !
Depuis quelques temps, on voit l'emergence des sites web 2.0 comme flock ou silverorange et beaucoup d'autres.
Il n'y a pas de vrais règles pour créer un design Web 2 mais certains styles reviennent souvent (ombres, coins arrondis, design épuré, taille de police disproportionnée ...).
Dans ce tutorial, je vais vous apprendre comment créer un logo type Web 2.0 très facilement grâce à Adobe Illustrator.
Les sources illustrator sont disponibles à la fin de ce tutorial.

---

A la création de pixtiz, je voulais créer un formulaire d'identification entièrement en flash.
Il fonctionnait bien, notamment grâce à la communication avec PHP / Mysql qui vérifiait si la combinaison pseudo / mot de passe était correcte.
Il manquait cependant une fonctionnalité que l'on a avec un formulaire classique : la saisie semi-automatique.
En effet, lorsque vous remplissez un formulaire html sous FireFox ou autre, celui conserve vos informations et vous n'avez pas à les retaper à chaque
visite du site. En cherchant un peu, j'ai découvert les Shared Objects, qui créent un cookie sur le pc du client et remplit cette fonctionalité.
Les fonctionalités sont multiples, cela peut servir à garder en mémoire un identifiant, le dernier niveau joué ...

---

Pour la création des jeux Pixtiz, j'ai implanté un système de classement. Ce classement doit donc être visible par tous les membres du site.
Le plus pratique était donc de ranger tous les scores dans une base MySQL qui pourrait être appelée dans le site web et dans les jeux par PHP.
J'ai donc cherché sur le net des tutoriaux mais la plupart étaient mal expliqués ou ne fonctionnaient tout simplement pas.
Dans ce tutorial, je vais vous donner les sources du script qui me permet de récupérer le meilleur score et de l'afficher au début de chaque partie.

---

Par défaut, Flash génère un fichier HTML invalide lors de la publication (mais qui fonctionne).
L'importance du respect des standards n'est aujourd'hui plus à prouver et on peut donc se demander comment intégrer son swf sans soucis.
Pour cela, une méthode à été developpée par Drew McLellan dans son article "Flash Satay: Embedding Flash While Supporting Standards".
Les objectifs de cette méthode sont de ...

---

Comme tout le monde le sait, il est difficilement gérable (voire impossible) d'avoir le même rendu sur tous les navigateurs dès que l'on veut réaliser un design complexe.
Le problème venant surtout de la manière différente des navigateurs à interpréter les padding, margin, height et autres ...

Pour y remédier, il y a une solution plutôt simple, les Hack CSS. Les Hack sont ces instructions comprises par certains navigateurs et pas par d'autres. Ils s'intègrent directement dans le fichier CSS, comme un bloc d'instructions ...

---

Après quelques semaines de "geekisme" acharnées, l'heure est à la nouveauté sur Pixtiz ! Tout d'abord, le site a adopté un nom définitif : Pixtiz ! Pourquoi Pixtiz ? Tout simplement parce que ca sonne bien et que c'est simple de s'en rappeler ! Ensuite, un joli logo, qui a la forme d'un signe PI mais s'il on regarde bien, on peut trouver toutes les lettres de Pixtiz (un peu d'imagination !). Le site est maintenant hébergé chez 1&1, un hébergeur professionnel, finit donc les coupures aux heures de pointe. Pour ce qui est du contenu du site, j'ai rajouté un formulaire d'inscription avec vérifications (longueur du mot de passe, du pseudo, savoir s'il est déjà pris ...) en instantané grâce à la technique AJAX...

---