Close Categorie : Animation

10 janvier 2011

Carte de voeux et nouveau projet

Bonjour à tous, désolé pour le manque de nouvelles ces dernières semaines, comme d’habitude j’ai été débordé… La carte de voeux a par contre été faites dans les temps, ce qui est un exploit me concernant ! Elle est visible en cliquant sur l’image ci-dessous :

 

 

Encore merci à Laurent Heneman « Profectron » pour son aide sur l’ActionScript !

 

Par ailleurs, histoire de bien commencer l’année, j’ai dans mes tiroirs un nouveau projet, toujours autour des « Clonks », pour lequel toute aide est la bienvenue, donc si vous avez envie d’en savoir plus, n’hésitez pas à aller voir cette URL et de me donner vos avis !

 

 

7 décembre 2010

Carte de voeux – WIP #2

J’ai pu commencer la mise en couleur dans Illustrator. Avec le plugin « Perspective » de HootDoor, qui permet de faciliter la création d’objets isométrique et d’avoir une grille en fond de page. Et sans oublier de passer en symbole tous les éléments redondants, comme ça une fois exporté en SWF pour Flash, ces mêmes éléments seront déjà des symboles dans la bibliothèque.

 

 

Une vue plus grande :

 

4 décembre 2010

Carte de voeux – WIP #1

Certaines années j’arrive à trouver un peu de temps pour me faire une carte de vœux, en Flash. Le but de ce type de carte de vœux est en général promotionnel, beaucoup de sociétés et d’indépendants en font chaque année, ça permet de se rappeler au bon souvenir de ses contacts. Personnellement ce qui m’amuse surtout dans cet exercice, c’est de trouver une idée rigolote et sortir un peu des travaux habituels sur lesquels je travaille. J’ai la chance d’avoir « trop » de travail, donc je n’ai pas vraiment besoin de promotion, mais je prends quand même plaisir à travailler sur ce type de support.

 

Cette année je ne pensais pas en faire, mais Fréderic Aubailly, ami de longue date et formateur/graphiste à Toulouse a eu l’idée de me montrer la jolie carte de vœux papier sur laquelle il travaillait, et du coup il m’a donné envie d’en faire une, j’ai commencé à cogiter, et voilà, je suis pris au piège.

 

Cela fera d’ailleurs pile 10 ans que j’ai fait ma première carte de vœux en Flash ! C’était donc en 2001 : vœux 2001

Pour l’anecdote, j’avais oublié d’envoyer cette carte de vœux à un de mes clients, qui pour plaisanter avait joué la vexation une fois qu’il s’en était aperçu. J’étais rentré dans le jeu et en réparation avait fait une carte de voeux « bis » uniquement pour cette personne, me représentant, et dans l’animation j’avais placé un bouton permettant de me donner une baffe (pour se venger de l’oubli). Cette même agence travaillait pour le site internet de la chaine Comédie, qui à l’époque cherchait des jeux Flash à mettre sur son site, ils leur ont montré ma petite anim, et du coup ils m’ont commandé une déclinaison qui est devenu le Pafotron :)

 

En 2002, j’ai visiblement eu une période mystique  : voeux 2002

 

En 2003 je me suis servi du prétexte de la carte pour m’entrainer à la programmation de jeu en Flash… je n’avais jusqu’alors fait que de la programmation de base en Actionscript, du coup j’y ai passé un paquet de temps, mais ça a été vraiment formateur. C’était en 2003, la carte est visible ici : voeux 2003

 

Dans la foulée un de mes clients, l’agence Profileo, m’a demandé de réutiliser les mêmes personnages pour faire un autre jeu/carte de vœux sur le même thème : voeux Profileo

 

En 2004, je voulais refaire une animation en Flash, mais n’avais pas d’idée… du coup je me suis servi du thème « pas d’idée » pour faire une vrai/fausse carte sous la forme d’un roman/photo animé, visible ici : voeux 2004

 

En 2005 et 2006, pas eu de temps ou d’idée… en 2007 je suis retombé en enfance : voeux 2007

 

Et depuis 3 ans, rien, toujours par manque de temps, ou d’énergie, ou d’idée. Tout ceci pour dire que cette année je vais essayer d’en refaire une. En général, c’est plus amusant de jouer sur l’effet de surprise, donc je ne devrais pas l’annoncer ici… mais comme j’ai envie d’alimenter ce blog et de partager un « work-in-progress », et bien tant pis !

 

Donc, mon idée première est venu en voyant ce site : http://hellohikimori.com/ (attention, baissez le son avant d’y aller, vos tympans vous remercieront), ou on vois une animation en fond synchronisé avec la musique. J’ai depuis longtemps en tête l’envie de faire ça… Après quelques recherches, j’ai vu que l’actionscript 3 avait une nouvelle fonction, SoundMixer.computeSpectrum(),  permettant ce type de chose. J’ai donc d’abord fait un essai avec juste 2 carrés en isométrique, pour essayer de les faire bouger en fonction du spectre musical d’un morceau de test. Il m’a fallu une fois de plus l’aide de l’excellent développeur Laurent « Profectron » (http://www.profectron.com/) pour mettre en place le principe de base.

 

Ca a donné ça : essai 1

 

Le principe fonctionne, donc, mais la chose qui me gêne est que les cubes bougent en fonction du volume sonore uniquement. J’aurais préféré pouvoir faire bouger les éléments selon la nature des sons, par exemple faire bouger le cube de gauche selon les graves, et le carré de droite selon les aigues. Ce qui n’a pas été une mince affaire, là encore je n’y suis pas arrivé tout seul, malgré de longues recherches sur le net, les forums, etc. Cette fois c’est un autre développeur de talent, Jean-Pierre Dérigon, qui m’a tiré d’affaire, il parle à l’oreille de Flash et code des players vidéos sous la douche tous les matins.

 

Ca a donc donné ceci : essai 2

 

Voilà, forcément pour l’instant ça n’est pas très parlant mais encore une fois ca n’était que pour vérifier si le principe de base fonctionnait :)

 

Donc maintenant il faut s’attaquer à la réalisation, en passant d’abord par un mini storyboard :

 

 

Ce que je voudrais faire c’est avoir au départ juste 4 carrés au sol, en isométrique. Les 4 carrés sont en fait des trappes, qui s’ouvrent et laissent monter du sol les quatre chiffres 2, 0, 1 et 0. Ces quatres chiffres seraient formés de diverses pièces métalliques, un peu comme les robots de mon projet « Clonk« . Le zéro final de 2010 sera un peu tremblotant… et finit à la fin par s’écrouler, et un chiffre « un » flambant neuf vient le remplacer, une musique commence et les éléments constituant les différents chiffres bougent en rythme (via le script susnommé…). Un petit tableau apparait aussi, dans lequel je fait défiler le texte de mes voeux, et à la fin de la musique les trappes se re-ouvrent et tout disparait…

 

Voilà en gros le « scénario » !

 

Etape suivante, dessiner les 4 chiffres, en croquis, avant de passer à la mise en couleur. Pour ça j’ai été faire quelques recherches sur le net pour trouver des exemples de vieilles pièces métalliques, et je suis tombé par hasard sur le blog d’un artisan qui construit des lampes à partir de vieux phares de mobylettes et autres pièces métalliques démodées. Je trouve ces objets vraiment superbes, peut-être qu’un jour je pourrait m’offrir une de ces lampes, en attendant je ne peux que lui faire un peu e pub, c’est ici que ca se passe : http://lumieredelatelier.over-blog.com/

 

Quelques exemples de lampes :

 

Superbe, non ?

 

Et donc voici les premiers croquis de mes chiffres :

 

Voilà ou j’en suis ! Je vais maintenant passer à la mise en couleur… a suivre.

 

23 octobre 2010

Quelques travaux

En attendant de pouvoir avancer sur la refonte de ce blog, quand même quelques nouvelles des travaux réalisés ces dernières semaines, et qui illustrent bien la diversité des sujets sur lesquels un graphiste peut être amené à travailler !

En ligne depuis ce matin, le site/blog de Benjamin Chaminade, « Entrepreneur et chasseur de tendances ». Monté sur une base WordPress, je me suis occupé de la conception graphique. Le parti-pris que je m’étais fixé était d’avoir une charte sobre pour mettre en avant le contenu, et jouer graphiquement sur la notion de « shift », ce qui se retrouve dans le logo et le footer. Si vous ne savez pas ce qu’est le « shift », et bien allez voir son site :)

www.benjaminchaminade.com

 

J’ai proposé à l’école de 2 de mes fils de leur mettre en place un blog, qui sert à donner les nouvelles, des informations sur l’école, et à terme les instituteurs et les enfants participeront au remplissage. La aussi monté sur une base WordPress.

www.notre-dame-fouesnant.fr/

Réalisation de la charte graphique et de l’animation du header du nouveau site de Fédération Bancaire Française.

www.fbf.fr/

 

Réalisation d’une animation Flash servant de teaser avant l’ouverture du site d’une nouvelle exposition à la Cité des Sciences.
Teaser en Flash

 

Et enfin, réalisation des éléments Flash et de la charte graphique du site de l’exposition « Sciences et Fiction, aventures croisées »

3 mai 2010

Splashscreen

Vous, je sais pas, mais moi je suis assez doué pour perdre du temps sur des choses insignifiantes… même quand je manque de temps, d’ailleurs. Ma dernière perte de temps partait pourtant d’un bon sentiment à la base… Je suis donc en train d’organiser un peu mieux mon travail en optimisant le suivi de projet. Pour cela j’ai ouvert un domaine dédié, parce que les clients préfèrent parfois que je leur montre mes maquettes sur une URL qui soit « neutre » et dans laquelle il n’y a pas forcément mon nom. J’ai donc déposé le nom de domaine « atelier36″, et y ai ouvert des sous-domaines pour les agences avec qui je travaille. Donc sous la forme http://nom-de-l-agence.atelier36.net. Il y aura également un sous-domaine dédié au suivi de projet, avec dessus une application spécifique qu’a gentiment développé Pierre Canthelou ! Je vous en reparlerais bientôt, mais en attendant n’hésitez pas à aller voir son site, ses travaux, son blog…

 

Et donc, ceux qui ont suivi auront compris que dans mon système je n’utilise que des sous-domaines, et que sur le domaine principal atelier36.net il n’y a rien… ce qui n’est pas très grave, puisque je ne diffuse pas l’url… oui mais voilà, je me dit qu’il peut arriver qu’un client ai la curiosité d’aller voir quand même. Donc pour qu’il ne tombe pas sur une page 404, je me suis dit qu’il fallait au moins que je mette une page d’index… au début, je pensais juste mettre sur cette page un fond bleu et le texte html « atelier 36″. Et je me suis dit que ca faisait un peu pauvre, quand même… bon, en même temps, si ça se trouve personne n’ira jamais sur cette page… oui mais bon… allez, je vais mettre un fond de matière en fond… et le texte en image, faire un simili logo… ha tiens, pour illustrer la notion d’atelier, je pourrais mettre un engrenage, et ca ferais un clin d’oeil à mon projet « clonk »… bon un engrenage tout seul, ca tourne dans le vide, faut en mettre au moins 2… s’ils tournent pas, c’est du gachis… bon, je fais un petit flash… je pourrais mettre une clé animé, hop Fred Aubailly (webdesigner et formateur à Toulouse) me fourni des images en 3D, ha et tiens si je rajoutais ça, et ça, et un mouvement en fonction de la souris, etc. etc.

 

Bref vous l’aurez compris, au final je me suis embarqué dans la réalisation d’un « splashscreen », tout ça pour peut-être 3 visiteurs perdus ou curieux… Donc je me suis dit que je pouvais au moins vous le montrer ! Pour cela, cliquez sur l’image ci-dessous, attention, c’est très lourd (4Mo).

 

 

Au passage, je vous indique que le blog « Olybop », dont j’ai déjà parlé ici, m’a gentiment demandé une interview, qui est consultable ici !