Pixtiz, Jeux Flash et Tutoriaux

Tutorial : Comment creer un jeu flash, ActionScript et animation (2)

Thu, 14 Jun 2007 21:27:05 +0100

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 gerer le score ainsi que l'elimination du joueur.
Les fichiers source .fla sont disponibles en telechargement apres chaque etape. Vous pouvez bien sur modifier ce fichier source pour creer le jeu que vous avez envie avec des graphismes ameliores.

Tutorial : Comment creer un jeu flash, ActionScript et animation (1)

Thu, 14 Jun 2007 20:42:39 +0100

Grace a ce tutorial, vous allez creer un jeu flash, en partant de 0.
Les fichiers sources flash (.fla) sont disponibles pour chaque etape du tutorial.
Le jeu que vous allez creer est un jeu simple qui vous permettra de comprendre comment organiser ses calques, gerer les appuis clavier (touches flechees), animer les differents MovieClip et gerer un systeme de score.

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

Exporter une illustration avec une zone de recadrage

Sun, 18 Mar 2007 16:44:30 +0100

Votre illustration ne prend qu'une partie de votre plan de travail et vous voulez exporter seulement cette partie.
Une solution peut etre de redimensionner votre plan de travail aux bonnes dimensions et de deplacer vos objets a l'interieur de cet espace de travail puis d'ecreter selon les limites du plan de travail au moment de l'exportation.
Cette operation est plutot 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 presenter les deux manieres d'exporter une partie de l'illustration.

Utiliser l'outil plume pour le dessin vectoriel avec Illustrator

Sat, 17 Mar 2007 23:09:15 +0100

L'outil le plus pratique et puissant sous Illustrator est sans doute l'outil plume. L'outil plume permet de creer des traces aussi bien recitlignes qu'arrondis mais aussi de combiner les deux.
Cepandant, sa manipulation n'est pas simple et il va falloir vous entrainer pour le maitriser totalement.
C'est avec l'experience que vous saurez placer vos points d'ancrage afin que votre trace suive vos envies.
Ce tutorial presente les differentes manieres d'utiliser l'outil plume ('+' et '-') ainsi que les outils associes.

Recuperer une variable dans un SWF Flash avec FlashVars

Sat, 17 Mar 2007 16:02:58 +0100

Pour un de mes projets, je devais charger des donnees personnalisees depuis une base MySql dans un swf Flash.
L'identifiant permettant de retrouver ces donnees dans la base etait indique dans l'url de la page sous la forme index.php?id=xxx.
Ce n'etait pas une valeur POST mais une valeur GET qu'il fallait recuperer.
Apres avoir teste plusieurs solutions (LoadVariables(), load() ...), la solution la plus simple fut de transmettre l'identifiant
grace aux FlashVars. Avec un peu de PHP et d'ActionScript (as), les donnees sont chargees automatiquement dans mon SWF.
Ce tutorial presente le code source a ecrire pour pouvoir utiliser ces FlashVars sous tous les navigateurs web.

Selectionner les valeurs predentes/suivantes en PHP/Mysql

Fri, 16 Mar 2007 01:42:50 +0100

Pour ameliorer la navigation et le referencement des articles de mon blog, j'ai decide d'ajouter a la fin de chaque article, un lien vers un article de la meme categorie. Mon choix a ete de prendre l'article de la meme categorie ecrit juste avant et celui ecrit juste apres, s'il existe.

Toutes les entrees de mon blog etant stockees dans une base mysql, il me suffisait d'effectuer les bonnes requetes pour selectionner les articles precedents / suivants.
Pour eviter de faire plusieurs requetes ou deux while imbriques, j'ai du trouver une solution simple en SQL. La solution se passe avec les selecteurs < et >.
Ce court tutorial presente la source PHP que j'utilise avec ses commentaires.

Creer un masque d'ecretage pour decouper une forme

Sun, 25 Feb 2007 17:58:11 +0100

Dans ce tutorial, je vais expliquer en detail comment faire un masque d'ecretage sous Illustrator.
Un masque d'ecretage 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 creer une texture pour un texte ou une simple decoupe de votre image.
Dans ce tutorial, vous allez apprendre comment creer, selectionner, modifier et annuler ce masque d'ecretage.

La culture Web 2.0 et le design web, conseils et exemples

Fri, 23 Feb 2007 13:06:30 +0100

Pour creer un design a la mode, il vous faut un design style Web 2.0.
Pour cela, pas de standards etablis, seulement des regles 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 ecrit un article en anglais qui resume parfaitement ces regles.
Avec son autorisation, voici donc la traduction en francais de son article sur la 2.0Culture.
Grace a ses conseils et ses exemples, vous pourrez creer vous-meme votre design Web 2.0 !

Decouper un design web avec l'outil Tranche, Illustrator

Sat, 17 Feb 2007 19:56:19 +0100

Apres avoir cree votre design web sous Illustrator (ou dans Photoshop par ex), vous voulez maintenant le decouper pour pouvoir exporter les images separement.
Il existe pour cela l'outil Tranche dans Illustrator, que vous pourrez trouvez dans la boite a outils.
Il vous permet de creer des zones qui seront exportees separemment.
Vous pourrez ensuite optimiser le poids des images en les exportant en jpeg, gif ... et dans la palette de couleurs qui correspondra a votre image.
Illustrator peut aussi fournir une page HTML mise en forme avec des tableaux.
Il est fortement conseille de retravailler le design decoupe avec un fichier CSS pour une meilleure accessibilite.

Creer un pop-up accessible en CSS sans Javascript

Thu, 15 Feb 2007 23:34:59 +0100

Pour ouvrir une nouvelle fenetre (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 (a cause du javascript).
De plus, l'ouverture de pop-up peut-etre bloquee par les bloqueurs de pop-up integres aux navigateurs recents.
Cette solution est d'autant plus a proscrire qu'elle n'est pas tres 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 realisee entierement en CSS et permet donc d'avoir un contenu indexe pas les moteurs.

Rediriger un visiteur selon sa langue en PHP

Thu, 15 Feb 2007 18:33:35 +0100

Dans ce tutorial, je vais expliquer comment rediriger simplement le visiteur de votre site internet suivant sa langue.
De facon automatique et transparente, on va detecter sa langue et le visiteur sera renvoye vers la page correspondant a sa langue preferee.
Il faut savoir que la langue recuperee avec le script PHP est celle fixee par l'utilisateur dans les preferences de son navigateur et pas celle de son systeme d'exploitation.
Le script utilise ainsi la variable $HTTP_ACCEPT_LANGUAGE et renvoie le header correspondant de maniere automatique.

Le flux RSS des tutoriaux illustrator, web, flash, php, CSS

Wed, 31 Jan 2007 09:26:08 +0100

Apres plusieurs mois de developpement, Pixtiz commence a decoller 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'actualite du site, Pixtiz dispose a present d'un flux RSS.
Vous pouvez vous abonner des maintenant et utiliser votre lecteur de flux habituel qui vous permettra de ne pas avoir a consulter le site tous les jours.
Recevoir l'actualite des tutoriaux illustrator, css, flash et php...

Creer une image de verification anti-spam pour formulaire

Sun, 21 Jan 2007 18:37:00 +0100

Votre site comporte surement des formulaires, que ce soit pour un formulaire de contact/d'inscription, un systeme de commentaire pour votre blog,
un livre d'or, un forum...
Ces formulaires peuvent etre la cible de robots de spam, qui envoient de maniere automatique des publicites ou des liens.
Des hackers peuvent aussi le faire de maniere massive pour crasher votre base de donnees voire votre serveur web.
Pour y remedier, il existe une solution simple que vous avez surement deja vu sur de nombreux sites: une image de verification aussi appelee captcha.
Cette image est cryptee et prouve que celui qui remplit le formulaire est bien humain.
Vous apprendrez avec ce tutorial a creer cette image et a effectuer la verification de la valeur entree.

Creer un flux RSS manuel ou automatique avec PHP

Sat, 20 Jan 2007 00:21:07 +0100

Creer un flux RSS pour son site, permet a vos visiteurs de se tenir au courant de l'actualite du site ou des nouveaux articles parus sans avoir a s'inscrire a une newsletter.
Les lecteurs (aggregateurs) de flux se sont multiplie (NetVibes, Google Reader ...) et permettront a vos visiteurs d'economiser du temps en consultant plusieurs flux RSS en meme temps, c'est la syndication.
Le langage utilise pour le creer est le XML, langage proche du HTML mais plus puissant et strict.
Un autre avantage est celui du referencement.
En effet, vous allez lier ce flux RSS a votre site web et Google va s'abonner a ce flux et revenir plus souvent.
A travers ce tutorial, vous apprendrez la syntaxe d'un fichier RSS, comment le creer de maniere automatique, comment le lier a votre page et comment l'afficher avec XSLT pour les utilisateurs n'ayant pas d'aggregateur.

Le hack CSS pour des images PNG transparentes sous IE

Fri, 19 Jan 2007 16:02:08 +0100

Un autre probleme que j'ai eu a la creation de Pixtiz fut la compatibilite des images PNG avec Internet Explorer et je pense que
tout le monde a deja eu ce souci.
En effet, les zones transparentes deviennent bleues pour toutes les versions d'IE.
Pour resoudre ce probleme, il y a plusieurs solutions :

Utiliser le progid Microsoft sur chaque image

Utiliser un script JavaScript qui automatise cette operation

Utiliser la propriete behavior CSS