Par Vincent, samedi 12 juillet 2008 à 16:07 :: AFPA :: haut
Veuillez trouver ici les liens vers mes principales créations que stagiaire "Infographiste Multimédia" à l'AFPA Futuroscope
Veuillez trouver ici les liens vers mes principales créations depuis le jour où j'ai touché un PC (1996). Elles sont concentrées autour de 2 pôles : ma participation bénévole à l'association Philopartous entre 1997 et 2001 et mon emploi en tant qu'animateur multimédia à la FOL86 pendant 5 ans entre février 2000 et 2005
Par Vincent, mercredi 9 juillet 2008 à 11:43 :: Stages :: haut
Dans le cadre de ma formation à l'AFPA, j'ai effectué un stage d'un mois dans l'entreprise Cyberscope à Niort. J'avais choisi cette dernière pour la qualité de leurs réalisations d'une part et pour le travail dans une équipe conséquente d'autre part. En effet, je souhaitais trouver un maximum de personnes ressources spécialisées et observer le fonctionnement dans une "grosse" structure (pour la province). J'ai été satisfait en tous points ! J'ai eu plein de projets à réaliser dans des domaines divers, de la mise à jour d'un vieux site en tableaux jusqu'à la réalisation d'une animation flash interactive en passant par des propositions de maquettes présentées en AG.
Afin de décrocher un futur contrat, on m'a demandé de réaliser un ensemble de maquettes pour un site ressources sur les tarifs des publicités dans les différents médias. Le site TarifMédias existant déjà, il s'agissait d'une refonte. La difficulté venait de demandes assez évasives de la part du client, mais surtout du nombre de services proposés. Il y avait une réelle recherche ergonomique à mener... malheureusement sans le concours du client vu les contraintes temporelles et humaines. J'ai donc essayer de me projeter un maximum à la place de l'utilisateur final afin d'organiser de façon effective les éléments. J'ai réalisé les maquettes de 4 pages -clefs puis les ai imprimées en A3 avant de les coller sur du carton plume en vue de leur présentation par la commerciale de Cyberscope en charge du projet. Le retour a été très positif et le projet est en cours de développement.
Logiciels utilisés : Illustrator, Photoshop
Quand j'ai commencé mon stage, une équipe de Cyberscope était en train de terminer un projet de bornes interactives connectées à Internet et dont le contenu était gérable à la fois par un administrateur général et l'utilisateur final. Vu mon intérêt pour la conception, on m'a demandé de rendre un peu plus ergonomique l'interface de configuration proposée à ces derniers. Il fallait qu'ils puissent choisir très facilement une image ou une vidéo à uploader avec une courte description et le choix d'un comportement. Je me suis rapidement orienté vers une application flash liée au PHP et à une base de données MySQL. Je ne l'avais jamais fait auparavant et il a fallu que j'argumente pour faire valoir mon choix. Cela a été au final une expérience enrichissante et un travail serré avec le développeur PHP responsable du projet. Le client a demandé à ce que toute son interface soit réalisée ainsi ! Et mon tuteur a salué ma force de proposition. Je pense que de telles interfaces représentent un réel atout tant ergonomique que technique et s'orientent vers les technologies telles que AIR d'Adobe. Si l'occasion m'en était donnée, je souhaiterais explorer cette voie.
Logiciels utilisés : Illustrator, Photoshop, Flash, Dreamweaver
PS : je ne peux pas proposer de liens vers cette application du fait qu'elle soit liée à une structure PHP/MySQL dont je ne suis pas propriétaire. Désolé.
Lors d'une manifestation de basket, il a été demandé à Cyberscope une petite animation pour le tirage au sort d'un gagnant. La recherche graphique a été réalisée sous Photoshop par une infographiste de Cyberscope et la réalisation de l'animation flash en 6 heures m'a été confiée. Le scénario était simple : des ballons ratent le panier jusqu'au moment où on lance le tirage au sort. Le ballon passe dans le panier et le nom apparait. J'ai mêlé l'actionscript et l'animation traditionelle. J'ai créé les différentes trajectoires de balle sous Illustrator puis les ai importées sous flash sous forme de clips que je tire aléatoirement en attendant le clic pour le tirage. J'ai pris soin d'éviter de tirer deux fois de suite la même trajectoire. Anecdote : au moment où je finissait l'animation, le client téléphonait pour dire qu'ils avaient trouvé un autre moyen de procéder au tirage. Petite déception.
Mais vous pouvez consulter l'animation ici (sans sa liaison avec le script PHP procédant au tirage au sort).
Logiciels utilisés : Illustrator, Photoshop, Flash.
Une maquette pour un hôtel, la mise à jour d'un vieux site en tableaux, un éphéméride en flash, une interface de connexion en une demi-heure chrono, l'intégration de documents Print en 3h...
Logiciels utilisés : Illustrator, Photoshop, Flash, Dreamweaver
Par Vincent, mercredi 9 juillet 2008 à 10:06 :: Stages :: haut
J'ai effectué mon premier stage de formation à l'agence Cocoon à Poitiers. Cette dernière compte 4 personnes dont le patron de l'entreprise. Ils réalisent des sites internet mais en portant l'accent sur la création et l'intégration de contenus vidéo et d'animations 3D. J'ai choisi cette petite structure pour ces raisons, la vidéo et la 3D étant des domaines manquant à ma culture. En outre, le profil polyvalent de chacun des membres de l'équipe me séduisait fortement. J'ai appris beaucoup pendant ce mois chez Cocoon et je pense avoir aussi apporté ma petite contribution. Mon tuteur ainsi que Sébastien Rama, chef d'entreprise, ont été élogieux à mon égard.
Après plusieurs petits travaux, Sébastien Rama m'a confié la réalisation complète d'un site : contact avec le client, conceptions graphiques et techniques, développement. Le site devait à l'origine accueillir plusieurs centaines de photos organisées en rubriques. Je me suis donc interrogé sur la façon la plus attractive d'afficher un tel volume sachant que je n'avais encore aucune notion en flash ou en javascript. J'ai alors choisi de générer aléatoirement des hauteurs d'affichage ce qui renforcait le découpage horizontal des vignettes. Ainsi à chaque page, la disposition changeait. Et pour gérer un tel volume et pouvoir le mettre à jour rapidement, j'ai utilisé et transformé un CMS dédié photo. Au final, seules quelques dizaines de photos ont été conservées, problème de communication lors du passage de la commande...
Vous pouvez consulter le site à l'adresse http://jean-marc-rama.com/
Logiciels utilisés : Illustrator, Photoshop, Dreamweaver
Une plaquette et un calendrier en Print, un lever de rideaux en flash, une intégration full CSS et une intégration pour un mailing...
Logiciels utilisés : Illustrator, Photoshop, Flash, Dreamweaver
Par Vincent, dimanche 23 mars 2008 à 16:23 :: AFPA :: haut
Notre formation à l'AFPA se compose de 4 modules, chacun se terminant par une évaluation. Après presque 3 mois de flash, le sujet choisi par notre bien-aimé formateur fut : l'AFPA ! :) En 2 jours et demi chrono, sans possibilité de travailler le soir, il nous a donc été proposé de créer une animation flash interactive présentant l'AFPA et ses formations. Le contenu, images et textes, était fourni.
J'ai choisi une orientation lumineuse et dynamique pour m'extraire du vert AFPA et rendre ce site institutionnel plus dynamique sans être bouleversant. Afin d'épauler les textes courts, j'ai sélectionné des images de bonne taille présentant les acteurs de la formation en action. Pas de photo vide de vie. Pour rendre l'internaute plus acteur, le passage de la souris sur les photos les animent, ce qui invite à découvrir ce qui s'y cache : l'internaute devient acteur dans sa propre découverte en somme.
Vous pouvez découvrir ici l'animation interactive de présentation de l'AFPA
Par Vincent, vendredi 14 mars 2008 à 14:18 :: AFPA :: haut
Cette semaine, nous avons pratiqué sur 3 jours un exercice très intéressant avec Anthony (d'Hippocampe Studios à Poitiers). Nous avons tous tiré au sort le nom d'un de nos collègues qui est ainsi devenu notre client. A nous de le vendre sur le net en lui réalisant un site, toutes technologies confondues, qui vante ses mérites et qui lui ressemble.
Ma cliente fut Anne et après un entretien fourni, j'ai commencé à travailler sur son site : maquette, collecte des éléments, etc...
Le deuxième jour, j'ai réalisé la charte graphique et le dernier jour, j'ai intégré cette dernière dans Flash.
Vous pouvez consulter mon travail par ICI
Je vous mets aussi à disposition l'excellent travail de ma prestataire qui était Aleksandra Vedrenne. Vous pouvez le consulter ICI
Par Vincent, mercredi 20 février 2008 à 12:32 :: Autres réalisations :: haut
C'est en 2001 que j'ai réalisé le premier site pour Michel Tozzi. Suite à notre rencontre au colloque de Castres sur les pratiques philosophique en café philo, il m'a demandé si je pouvais l'aider à réaliser son site internet. La masse d'articles qu'il me proposa de mettre sur le site m'effraya. Mais avec l'aide d'un bon ami développeur, je développais une sorte de CMS rudimentaire permettant de gérer les rubriques et les articles.
Sept ans plus tard, il était grand temps de rénover ce site obsolète. Et plutôt que de continuer à développer ce que d'autres savent mieux faire que moi, j'ai choisi Wordpress comme plateforme d'accueil pour les plus de 300 articles de Mr Tozzi. Pourquoi Wordpress ? Parce que le système est simple et vaillant. Expliquer Joomla ou SPIP à Mr Tozzi aurait été compliqué alors qu'en moins de 3 heures, il a appris (en elearning grâce à LogmeIn) à gérer ses articles. J'ai remanié aussi la charte graphique afin de la rendre plus "web 2.0" :)
Vous pouvez bien sûr consulter le site : www.philotozzi.com
Par Vincent, mercredi 20 février 2008 à 12:15 :: Autres réalisations :: haut
Une commande d'un vrai client : la refonte de leur ancien site réalisé en 2001 avec du bon vieux HTML et pas une goutte de CSS. Pour ce site, j'ai touché tous les niveaux d'un site :
Vous pouvez bien sûr consulter le site : www.gites-la-font.com
Par Vincent, vendredi 15 février 2008 à 12:04 :: AFPA :: haut
Pour reprendre les hittest et les onenterframe, les attachMovie et les CreateEmptyMovieClip : un piti Pong ! Afin de compléter un peu le truc, j'ai préféré déplacer la raquette avec la souris. Ce qui ne m'empêche pas de calculer la vitesse de la raquette et donc d'influer sur la trajectoire de la balle. Essayez un peu de lifter et vous verrez ! J'ai posé une limite de vitesse mais il y a des moments où çà part vite :) Pour gagner (c'est quand même le but quelque part dans un jeu) il suffit de toucher trois fois le lanceur orange à droite. J'ai aussi intégré un "Bullet Time" avec la barre espace mais attention à ne pas vous rater sinon la balle ira encore plus vite après.
Par Vincent, vendredi 8 février 2008 à 11:32 :: AFPA :: haut
Second exercice d'animation : intégrer une publicité dans une page web existante capturée. Cette dernière nous a été imposée par notre formateur ! Si, si. C'est donc tombé sur une page du Figaro. Et c'est là que mes ennuis ont commencé parce qu'il y avait un article sur l'affaire RyanAir, cette compagnie ayant utilisé, sans autorisation, une image de Carla Bruni et Nicolas Sarkozy. Moi qui suis plutôt appliqué, je n'ai pas pu résister à la parodie. J'ai donc réalisé une pub RyanAir. Pas formidable mais rigolote.
Pour voir l'animation, c'est par ICI
L'intégration s'est faite avec swfobject. Cependant il y avait un problème pour réaliser le survol de l'avion sur la page. En effet, le fond transparent du flash ne permet pas le cliquage des liens placés dessous. Après recherches, j'ai compris qu'il fallait switcher deux animations flash. J'ai donc bricolé un code javascript collé au swfobject qui semble bien fonctionner. Pour l'expérience, veuillez me rapporter tout problème rencontré.
Je tiens au passage à signaler que lors d'un exercice, je cherche à respecter le temps imparti. J'estime que c'est une contrainte du métier qu'il faut absolument prendre en considération. C'est pourquoi certains de mes travaux peuvent avoir un aspect "simple". Mieux vaut finir quelque chose de fonctionnel que rendre une promesse de belle réalisation.
Par Vincent, mardi 5 février 2008 à 10:59 :: AFPA :: haut
Exercice en 2 jours : réaliser en 300 sur 250 une petite animation de 18 secondes promouvant l'exercice physique auprès des jeunes enfants.
Temps imparti : une journée et demie.
Piège : notre gentil formateur nous a fourni quantité de docs sur l'animation (type dessin animé celle-là)
Conclusion : je suis tombé dans le panneau :) Je me suis fait plaisir en réalisant une animation quasiment image par image. Ce qui prend du temps ! Personnellement, j'ai adoré même si le résultat me semble moins que moyen. Cependant tout le monde (en particulier mon petit gars de 6 ans qui se l'ai passé en boucle) adore ce petit bout de personnage alors vive la magie de l'animation :)
PS : Il y a un truc que je ne m'explique pas, c'est un décalage au moment où il frappe fort la balle. Selon les machines et navigateurs, cela varie. Pourtant c'est de l'animation à la timeline. Si quelqu'un a une idée, merci de me contacter
