Bienvenue sur mon blog !

Et oui, j’ai enfin pu dégager un peu de temps pour reprendre mon projet d’économiseur d’écran… Après Blew Clonks, J’ai l’honneur de vous présenter son frère, Raid Clonks ! Reste à l’animer, puis faire le troisième larron…

Faites tourner :

J’ai enfin pu avancer un peu sur mon projet « clonks »… Ayant un planning surchargé en ce moment, je ne peux avancer qu’au compte-goutte, désolé. En clair, j’arrive difficilement à trouver 1 ou 2 heures par semaine pour y travailler, ce qui explique la lenteur de l’avancée du projet ! Mais merci aux quelques personnes m’ayant demandé des nouvelles, ça me motive pour avancer !

Bref, je n’avait pour l’instant travaillé que sur l’animation du premier robot, Blew… J’ai pu lui faire un tapis roulant, et l’ampoule associé.
Voici ce que ça donne :

Un zoom sur la partie « mécanique » du tapis roulant et l’ampoule :

Pour rappel, le principe de l’économiseur d’écran que j’ai prévu est le suivant : 3 robots, Raid Grin et Blew font avancer des tapis roulant qui alimentent chacun une ampoule à sa couleur. Chaque robot marche pendant un temps aléatoire (random Flash sur le nombre de boucle de marche), puis s’arrête pendant un temps lui aussi aléatoire. Quand un robot s’arrête, son ampoule s’éteint, donc la luminosité de l’écran diminue. Donc comme tout est aléatoire pour chaque robot, il peut arriver que les 3 robots soient en marche, auquel cas la luminosité est maximum, et il peut aussi arriver que les 3 robots soient arrêtés, auquel cas la luminosité est au plus bas.

Rien de bien compliqué techniquement… par contre j’ai donc commencé l’intégration de l’ensemble dans Flash, et première déconvenue : avec juste un robot, l’animation est déjà trèèèèès gourmande en ressources processeurs… Chez moi presque 90% du processeur est sollicité. Donc avec 3 robots, ca devrait être totalement saturé, perdre en fluidité, etc. Un économiseur d’écran ruineur de processeur, c’est pas top…
Vous pouvez tester par vous même, c’est visible ici :
Economiseur V1
Pour la gestion du plein écran, je me suis basé sur ce tutorial : http://www.flashxpress.net/ressources-flash/site-en-flash-a-100/ que je trouve très didactique, et un fichier d’exemple est disponible.

Pour l’instant j’ai mis des points rouge et vert à la place des robots manquants. En haut à gauche sont visibles les variables de boucles de marche et d’arrêt, c’est juste provisoire, pour vérifier le fonctionnement. Mais donc avant de continuer et de travailler sur les 2 autres robots, il faut optimiser tout ça ! J’ai donc demander conseil autour de moi, que ce soit sur la mailinglist Flash-fr, le réseau PAO dont je fais partie, etc.
Les principales pistes d’optimisation qu’on ma conseillé : passer en bitmap la plupart des éléments vectoriels, vu que ces derniers sont assez complexes et comportent beaucoup de vecteurs, parfois un gros bitmap est préférable. Gérer aussi la luminosité de l’écran par l’ActionScript plutôt que par des interpolation.
Cet essai est visible ici :
Economiseur V2
Mais sauf erreur, c’est en effet un peu plus fluide, mais quand même aussi gourmand en ressources processeurs…

Du coup j’ai essayé en enlevant certains calques, pour essayer d’isoler les éléments d’animations qui prenaient trop de ressources, et il semble que ce soit les rayures du tapis roulant… En les enlevant, ca semble mieux :
Economiseur V3

Dernier essai en remetant les éléments en vectoriels, mais donc sans les rayures :
Economiseur V4

Je vais encore faire quelques essais avant de trancher…

Dernier point sur lequel il faut que je me penche : quel logiciel utiliser pour transformer l’animation Flash en économiseur d’écran… Après quelques recherches, il semble qu’il ne soit pas évident de trouver un logiciel pas cher et qui permette de générer des économiseur d’écran à la fois pour Mac et Windows… J’ai posé la question aux créateurs du célèbre économiseur Anooki, si vous ne le connaissez pas, je ne peux que vous conseiller de l’essayer, il est vraiment très très chouette ! Et donc, en plus ces créateurs, l’agence Inook sont apparement très sympas, vu qu’ils m’ont répondu dans l’heure en me donnant des informations précises sur le logiciel utilisés, les avantages et inconvénients, etc. Encore merci à eux !
Ils utilisent donc le logiciel Screentime. Inconvénient, pour générer un économiseur pour les 2 plateformes, il est necessaire d’acheter les 2 versions, donc 400$… Ca commence à faire cher pour un économiseur que je ne compte pas vendre…
Si jamais vous avez d’autres pistes, n’hésitez pas !
Et à bientôt pour la suite…

Faites tourner :

Après pas mal de difficulté, voici le premier robot, Blew, en train de marcher…
J’ai vraiment peiné pour le mouvement de la marche, je m’aperçois qu’il est vraiment difficile d’avoir un mouvement « naturel ». J’ai du modifier un peu le robot de base, pour éviter des effets de perspective que je n’arrivais pas à gérer. Je ne suis pas complètement satisfait du résultat, mais je laisse comme ça pour l’instant je verrais plus tard si j’arrive à mieux !

[edit 22 février : j'ai modifié le mouvement des bras, ça me semble déjà mieux comme ça...]

La première étape a été de préparer le fichier dans Illustrator, en placant sur des calques séparés chaque éléments qui serait animés dans Flash. Donc dissocier les bras, tronc, main, etc. Dans l’image ci-dessous, les formes noires et roses correspondent aux masques prévus dans Flash. Vu que je n’aime pas du tout les outils vectoriels de Flash, j’essaye au maximum de prévoir tous les objects nécessaires en amont, dans Illustrator.

Ensuite, export en swf, en demandant à dispatcher les calques AI en images :

Et enfin, import du SWF dans Flash, j’ai redispatché les images sur des calques, puis animation de l’ensemble… Sur l’image ci-dessous, les filets et points rouges et gris visibles derrière sont des repères que j’ai fait pour me guider…

Faites tourner :

J’ai le plaisir de vous présenter le premier né de la famille Clonk : Blew !
Blew Clonk, donc.

Et ci dessous, un patchwork d’images montrant les différentes étapes de réalisation.

Voilà, prochaine étape : le faire marcher !
Puis, s’occuper de ses 2 frères, Raid et Griîin.
Puis faire de tout ça un économiseur d’écran…

Faites tourner :

Les mauvaises langues vont dire qu’avant d’entamer un nouveau projet perso, je devrais peut-être finir les précédents qui sont au point mort, comme « Albert », par exemple…

Je me justifierais donc en expliquant que pour « Albert » je me sens encore un peu juste en terme de technique d’animation, j’attends de voir ce que donnera la nouvelle version de Flash avec ses fonctions avancées en animation.

Donc pour revenir à « The mysterious Clonks », voici le « pitch » : Les clonks sont de petits robots qui, sans que vous vous en doutiez, font tourner le monde qui nous entoure. Un monde parallèle et invisible, sans qui nous ne serions rien. Votre cafetière, votre machine à laver, votre ordinateur, votre baladeur MP3, tout fonctionne grâce à de petits clonks. Si si, je vous assure. L’ordinateur sur lequel je tape ce texte, lui-même, ne tournerai pas sans eux. Peut-être même sommes-nous habités par des clonks, mais nous ne le savons pas. Et oui, toi, moi et elle, et tous ceux qui sont seuls, et… non, ça c’est autre chose.

Bref, ça c’est le principe de base, qui est en fait le prétexte à une série d’animations Flash, économiseurs d’écrans, etc. sous la forme d’illustrations isométriques.

J’ai tout d’abord travaillé un logo, donc voici les essais :

Je suis parti sur la piste 7, et fait une petite animation du logo, visible ici :
Logo animé

Première application concrète prévue, un économiseur d’écran, basé sur un robot faisant tourner un tapis roulant, et la luminosité de l’écran variera en fonction de la vitesse de marche du robot. Les recherches de robots :

Je vais partir sur le 6, en le faisant alterner marche sur les mains, marche sur les pieds, et marche à quatre pattes comme le robot 8. Voilà, vous savez tout, prochaine étape mise en couleur, avant le début de l’animation.

A suivre, donc !
Tous vos avis et remarques sont les bienvenues !

Faites tourner :