et

Comme on est pas des sauvages ; la petite explication

La méthode utilisée est : polar(len:Number, angle:Number)

var p:Point=Point.polar(monDiametre ,monAngleEnRadians);

On a un point !!! A partir de là vous donnez la coordonnées du point à votre clip ou autre et c’est bon.

monClip.x = p.x; monClip.y = p.y;

Certes c’est pas très fun. L’idéal est d’ajouter quelques centaines ou milliers de points dans une boucle for et de faire varier des paramètres en fonction de l’index du point par exemple, genre :

var p:Point=Point.polar(Math.sin(i)*1200,radian*i*mouseX/10);

Ca devient tout de suite mieux.

Si les exemples rament, signalez le moi.

J’y reviendrai avec quelque chose de plus interactif :)

Découper un textfield en as3 se fait facilement avec les fonctions slice() ou substr() de la classe String. A partir de là, facile de remettre chaque caractère dans un textField indépendant pour ensuite l’animer, changer l’échelle, etc. Seul problème ; chaque lettre a sa largeur propre.

Recoller

Pour contourner un peu salement le problème de la largeur des caractères, je me sers d’une variable “largeurLettres” à laquelle vient s’ajouter la largeur de chaque nouvelle lettre (dans une boucle “for”).

lettre.x = largeurLettres;
largeurLettres+=lettre.textWidth;

Ca marche bien mais :

• Il faut appliquer les éventuelles transformations d’échelle Avant d’incrémenter la variable ;
• Ca correspond à la largeur des lettres et non à leur chasse.

Allez un exemple histoire de…

La source de cet exemple à télécharger ici.

En l’occurence je ne découpe pas de textField dans cet exemple puisque je capture la saisie clavier. Mais le recollage des caractères fonctionne de la même manière.

Art-directed blog (ADB)

Un ADB c’est un blog qui adopte une présentation spécifique à chaque article. Un peu comme un magazine papier. C’est une tendance qu’on voit émerger essentiellement chez des graphistes, et pour le moment, surtout outre-atlantique. Et non, je ne vois pas comment le traduire. Ce sera ADB.

Faire un ADB est très facile avec WordPress 3. On peut créer un template php différent par article et le tour est joué. A court terme, c’est sympa. Le faire à chaque article c’est un peu relou. Pour la version actuelle de ce blog, j’ai opté pour un compromis : je ne change que le fond de page, que ce soit pour une image, une animation, une vidéo… ou rien. Et ce grâce aux shortcodes.

Les shortcodes, qu’est-ce ?

C’est une fonction qui commence avec un [ et qui termine par un ] et qui s’insère dans l’éditeur WYSIWYG de WordPress. Wouuuu. Dedans je mets mes arguments, ce que je veux. Comme en HTML on peut aussi les utiliser en double avec le couple [Shortcode] du contenu [/Shortcode].

Dans notre cas on veut lui transmettre l’adresse de notre fond de page (jpg, swf, js…) et qu’il s’occupe d’insérer ça proprement en fond de page.

Le plus simple : changer le fond de page

Pour changer le background en CSS, on utilise ça :
<style type="text/css">body{background:#fff url('mon-image.jpg') top center no-repeat;}</style>
Notre shortcode n’aura besoin que de l’url de l’image.

Première étape, on se rend dans “functions.php” présent dans le dossier du thème WordPress utilisé. Puis, n’importe où après “<? php” on ajoute cette fonction :function customBg($atts){
$bloginfo = get_bloginfo($template_directory);
extract(shortcode_atts(array(
"url" => 'http://www.site.com/fond_par_defaut.jpg',
), $atts));
return '<style type="text/css">body{background:#fff url('.$url.') top center no-repeat;}</style>';
}
add_shortcode('bg', 'customBg');
La fonction extrait les attributs qu’on lui passe (l’url de l’image). Et elle retourne notre code CSS avec l’image dedans. La dernière ligne active le shortcode, et associe la fonction “customBg” avec le shortcode “bg”.

“url” est le seul paramètre à extraire. On lui assigne une valeur par défaut au cas où.
Dans le corps du message, on insère juste [bg url=”ladresse_de_limage.jpg”] et voila ;)
Attention à bien utiliser des adresses absolues. Je trouve personnellement bien pratique d’uploader l’image dans la bibliothèque WordPress et copier-coller l’url. Ca permet de ne pas faire de boulette lors de mises à jour ou migrations car l’image restera dans le dossier “uploads”.

Next

La prochaine fois on verra pour intégrer soit du flash fullscreen soit du canvas. Un peu plus fun.

UPDATE : Le dernier article a sauté avec la mise en jour. Mais au moins elle est faite :)

Pour info le fond ne restera pas entièrement blanc. J’ai fait un petit shortcode qui me permettra d’ajouter un fond de page par article.

Si, comme moi, vous n’y comprenez rien et êtes forcés de les utiliser, vous serez heureux de trouver ici un testeur live d’expression.
C’est bien pratique pour faire plein de tests dans tous les sens jusqu’à aboutir au bon résultat :)

Si vous n’avez rien compris à cet article, sachez qu’une expression régulière c’est ce qui sert à tester la validité d’une adresse email, formater un numéro de téléphone, inverser “balo-bali” en “bali-balo”, remplacer le “β” par “ss” et “yogurt” par “yaourt”.

Le principe : Donner naissance à un caractère typographique qui n’a rien demandé, complètement hors contexte et hors du temps. Fond transparent ou blanc de préférence. Postez-le sur votre blog avec comme titre “Lost Characters”.

EN : Create a single character, out of context and out of time. Post it on your blog with “Lost Characters” as a title. The freak must be on a transparent or white background.

Contributions

• F : Florent Guerlain
• G : Gautier GEVREY
• R : Raphaël Bastide
• M : Baptiste Fluzin
• Y : Alexandre Perrachon
  

Voila une petite explication du fonctionnement à destination de tout le monde sauf les devs, sous peine d’être pris pour un neuneu.

En gros il s’agit d’un bitmap, donc d’une image avec des pixels. On est dans flash qui est un environnement vectoriel à la base, donc il est important de le préciser.

On crée un bitmap (ici, bmp), un bitmapData (bmd), puis on assigne le bitmapData au bitmap. Par la suite on ne travaillera plus que sur le bitmapData.

var bmp:Bitmap = new Bitmap();
var bmd:BitmapData;
addChild(bmp);
addChild(bmd);
bmd = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFF0000);
bmp.bitmapData = bmd;

Le bitmapData fait la taille de la scène, nickel, il est transparent (true), et la dernière valeur ne sert donc à rien puisqu’il s’agit de la couleur de fond.

Maintenant pour “colorier” les pixels, il suffit de donner les coordonnées et la couleur. Par exemple :

bmd.setPixel(30,30,0xFF0000);

C’est chouette. On peut aussi faire pareil avec une zone rectangulaire avec setPixels(monRectangle, monTableaudOctets); Il y a d’autres fonctions pour créer du bruit, du bruit fractal (exactement comme Photoshop), etc.

Dans l’exemple tout en haut, je ne me suis pas amusé à colorier tous mes pixels avec setPixel(). En fait j’ai des clips animés par dessus mon bitmap, et à chaque frame (ici, 60/s) je les dessine sur mon bitmap. Mettons que j’ai monClip_mc qui bouge dans tous les sens, je peux faire en sorte qu’il soit “imprimé” sur mon bitmap en permanence en écrivant :

bmd.draw(monClip_mc);

On a pas réellement dupliqué le clip (ce qui serait assez violent niveau mémoire) mais on a dessiné ce clip sur le bitmap. Les pixels du bitmap ont pris la couleur du clip à l’emplacement du clip. C’est clair ?

Terminons sur le fade out (alpha out) de l’exemple. Les clips créent une traînée qui s’estompe rapidement. Pour ce faire, j’applique à mon bitmapData un colorTransform, et ce toujours à chaque frame. Ca permet de changer les couleurs et l’alpha en permanence, et comme au même moment je dessine les clips par dessus, ça donne cette sensation de traînée. Pour appliquer ce colorTransform, il faut lui spécifier dans quelle zone agir, et quelles valeurs de couleurs et d’alpha.

var changeColors: new ColorTransform(1, 1.05, 1.1, 0.95);
var rect:Rectangle=new Rectangle(0,0,stage.stageWidth,stage.stageHeight);
bmd.colorTransform(rect, changeColors);

Mon colorTransform a plusieurs arguments (1,1.05,1.1,0.95), ce sont des multiplicateurs. En l’occurence les 3 premiers correspondent aux canaux de couleur RVB, et le dernier est l’alpha. Pourquoi un multiplicateur ? Tout simplement parceque si je dis que le multiplicateur d’alpha fait 0.8, l’action engendrée sera : monAlphaActuel*0.8, et non pas alpha 0.8; Vous voyez la nuance ? A chaque frame, l’alpha fera 80% de l’alpha précédent. Je vous laisse calculer combien de frames il faut pour arriver à 0 ;)

En clair dans cet exemple, à chaque frame je vais augmenter mon canal vert de 5%, le bleu de 10%, et baisser l’alpha de 5%, ce qui entraîne un léger changement de teinte et va progressivement faire disparaitre les éléments.

Ce n’est qu’un aperçu du fonctionnement des bitmapData, et surtout une infime partie de ce qu’on peut en faire. Pour l’instant je constate que c’est très véloce (toujours fluide à 120frame/s) et qu’il y a moyen d’expérimenter des systèmes de particules assez facilement.