TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste...

27
TFE - Romain Bourgeois C’est en animant qu’on devient un bon animateur. Infographie ISIPS Année 2016-2017

Transcript of TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste...

Page 1: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

TFE - Romain Bourgeois

C’est en animant qu’on devient un bon animateur.

Infographie ISIPS Année 2016-2017

Page 2: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

2

Résumé :L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun résultat valable. À sa grande stupéfaction, le personnage commence à s’animer seul sur l’écran et à déranger

la plupart des programmes. Après toutes ces péripéties, une conversation s’en suivra et le personnage anime lui-même le

personnage en fil de fer.

Page 3: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Étape 1 : établissement du story-board.Adobe Flash : Création du personnage Début d’animation du personnage.

Joue avec la flèche comme un ballon -> la flèche essaye de reprendre le contrôle. Avec les trous dans le menu de gauche, les outils tombent

Ensuite, il se retrouve en dehors du programme et ouvre tous les autres programmes. L’utilisateur essaye de quitter le programme Adobe Photoshop : L’animateur quitte le programme, et après plusieurs

tentatives, réussit. Adobe Illustrator : L’animateur essaye de le containir dans une forme, mais le personnage en ressort. Après une deuxième tentative, le programme quitte inopinément.

Adobe InDesign : Défait la mise en page

Sublime Text : Modifie tout le code html.

Pro Tools : Force à quitter

Blender : Rentre sur le plan de travail et se transforme en 3D. L’animateur retourne celui-ci et le secoue. Le personnage tombe et redevient du 2D. Adobe After Effect : Forcer à quitter

Discussion : Discussion avec le personnage en PHP (echo=”…”) et réponse sur le navigateur.Retour sur Flash où le personnage montre comment on fait marcher un personnage.

3

Page 4: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

4

Étape 2 : vectorisation des programmes

concernés.

Page 5: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Flash

Flash Fichier Modifier Affichage TexteModificationInsertion Commandes Contrôle Déboguer Fenêtre Aide mar. 11:30indispensables CS LivePersonnage*

Propriétés Bibliothèque

Modifier...

Journal Effacer

Modifier...

Modifier...

Modifier...

Document

Personnage

Lecteur : Flash Player 10

Script :

Classe :

Profil :

ActionScript 3.0

Défaut

Paramètres d’AIR

Paramètres d’ActionScript

PUBLIER

PROPRIETES

HISTORIQUE DU FICHIER SWF

I/S :

Taille :

Scène :

24,00

1920 x 1080 px

Séquence 131%

Sortie Erreurs de compilation Editeur de mouvement Scénario1 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 8580Calque 1

1 24,00 i/s 0,0 s

Originale Vectorisée

5

Page 6: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Photoshop

Originale Vectorisée

6

Page 7: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Illustrator

Illustrator Fichier Edition Objet Texte Selection Effet Affichage Fenêtre Aide 49°C2000 rpm mar. 11:30

Les indispensables CS LiveAucune sélectionContour : 1pt Uniforme Ovale 10pt Style : Opacité : % Configuration du document Préférences

Sans titre - 1.ai @ 100% (CMJN/Apercu)

100% 1 Activer/Désactiver Sélection di...

Originale Vectorisée

7

Page 8: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe InDesign

InDesign Fichier Edition Page Texte Objet Tableau Affichage Fenêtre AideAntidote 49°C2000 rpm mar. 11:30

Les indispensables CS Live*Innoflash@ 50%

50 %

200 150 100 50 0 50 100 150 200 250 300 350 400 450 500 550 600

300

350

X :

Y :

l :

H :

73,5 mm

14 mm 0 pt

100 %4,233 mm [Bloc graphique standar...

1 Aucune erreur

Originale Vectorisée

8

Page 9: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Sublime Text

Sublime Text File Edit Selection Find View Tools Project Window HelpGoto 49°C2000 rpm mar. 11:30index.html

UNREGISTEREDGROUP

GROUP

inde

style

Line 1, Column 1

Spaces: 4 CSS

style.cssindex.html

12345678910111213141516171819

20

21

22

23

24252627282930

<link rel="stylesheet" type="text/css" href="style.css"/>

</head><body><div id="header"></div><div id="menu"> <li> <a href="index.html"> About me</a> </li><li> <a href="travaux.html"> Works </a> </li><li> <a href="contact.html"> Contact me </a></li></div><div id="contenu">

<div class="text"><p> Je m’appelle Romain Bourgeois ; je suis né le 22 septembre 1990 à Charleroi. </p><p> Après des études en Humanités générales Sciences-Langues à l' INDL à Loverval, je me suis redirigé pour le dernier cycle vers le graphisme en choisissant comme option Recherche Graphique à l’IATA à Namur. J'ai ensuite terminé mes humanités comme Technicien en Infographie à l’Enseignement en Hainaut - IETSPS, avec grande distinction à mon TFE. <br>Après avoir obtenu mon diplôme de technicien en infographie, j’ai décidé de poursuivre mes études et j'ai opté pour un bac en Infographie à l’Enseignement en Hainaut - ISIPS, afin d'approfondir mes connaissances.J'ai terminé mon troisième bac, et présenterai mon TFE au mois de mars 2016.</p><p> Ce site a pour but de présenter les travaux réalisés au cours de mes études. </p>

</div></div><div id="footer">&copy; design by Romain Bourgeois</div></body>

12345678ç1011121314151617181920212223242526272829303132333435363738394041

<!DOCTYPE html><html>

<meta charset=<title> RB Graphics </title>

<head>

</html>

"utf-8"/>

body { font-family: arial, verdana, sans-serif; font-size: 12pt; color: #867c69; margin: 0px; padding: 0px; background-color: #3a312b;}

#header { width: 800px; height: 250px; background-image: url(images/logo.png); margin: auto;}#header_works{ width: 150px; height: 100px; background-image: url(images/logo-back-off.png); margin: auto;}#header_works:hover { background-image: url(images/logo-back-on.png);}

#menu { width: 800px; margin: auto; text-align: center; margin-bottom: 15px; }#menu li { background-image: url(images/menu-off.png); width: 250px; height: 50px; display: inline-block;

}#menu a { text-decoration: none; color: #867c69;

Originale Vectorisée

9

Page 10: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Blender

Blender Window49°C2000 rpm mar. 11:30

File Render Window Help Défault Scène v2.76│Blender Render

Blender

Verts:0│Faces:0│Tris:0│Objects:0/0│Lamps:0/0│Mem:9.35M

View Search

Scene

Scene

Render

Rend Anim

Displa

Dimensions

Resolution:19201080

1000 24 fps

5 8 11 16 Mitchell-

1000

1.000

50%

Star:1E:250Fra: 1

Frame Ra

Aspect R...

Time Re...

Anti-Aliasing

Full Sa

Samplled Motion BlShading

Performance

Post Processing

Metadata

OutputNo Sync

GlobalObject ModeObjectAddSelectView

Toggle

(1)y

y

Extend

Number

Layers

History

DeleteDuplicate Linked

Duplicate

Edit

Mirror

ScaleRotateTranslate

Transform

Tool

sC

reat

eR

elat

ions

Ani

mat

ion

Phys

ics

Gre

ase

Penc

il

7

1250End:1Start:PlaybackFrameMarkerView

-40 -20 0 20 40 60 80 100 120 140 160 180 200 220 240 260 280

Frame Ra

Image Ed

Render Presets

RenderLaWorld

All

Right Persp

Audio

Originale Vectorisée

10

Page 11: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE MAMP (pour la discussion php)

MAMP

manage your website locally

Serveur ApacheServeur MySQL

Préférences... Ouvrir la page WebStart Arrêter les serveurs

Quitter Tester MAMP PRO

Originale Vectorisée

11

Page 12: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Finder

Romain

DropboxBureauDisque durRomainApplicationsBibliothèqueLimeWireMusiqueDocumentsImagesVidéosTéléchargements

0 éléments, 126,19 go disponibles

BOOTCAMP

FAVORIS

APPAREILS

PARTAGÉS

Originale Vectorisée

12

Page 13: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Dock

Originale

Vectorisée

13

Page 14: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

14

Étape 3 : vectorisation élément nécessaire à

l’animation.

Page 15: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Flash

Créer une interpolation de mouvementCréer une interpolation de formeCouperCopier

Copier le mouvementCopier le mouvement au format ActionScript 3.0...

Coller

Coller le mouvement

Sélectionner toutTout désélectionnerTransformer librementDérormerEnveloppe

Convertir en symbole...

Répartir vers les calques

Coller le mouvement spécial...Enregistrer en tant que préselection de mouvement...

Trajectoire du mouvement

15

Image clé Convertir en symbole (menu)Originale Originale

Vectorisée

Vectorisée

Page 16: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

16

Convertir en symboleNom :

Type :

Dossier :

Alignement :

OK

Anuler

Avancé

Liaison

Activer les repères d’échelle à 9 découpes

Exporter pour ActionScriptExporter dans l’image 1

Identifiant :

Classe :

URL :

Parcourir ...

Symbole...

Toujours mettre à jour avant de publier

Classe de base :

Racine de la bibliothèque

Partage

Source

Fichier :

Nom du symbole : Symbole 1

Exporter pour le partage à l’exécutionImporter pour le partage à l’exécution

Graphique

SelectionConvertir un symboleOriginale

OriginaleVectorisée

Vectorisée

Page 17: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

Selection transformation

Originale Vectorisée

17

Créer une interpolation de mouvementCréer une interpolation de formeCréer une interpolation classiqueInsérer une image

Insérer une image-clé vide

Insérer une image-cléEffacer l’image clé

Supprimer les images

Créer une interpolation de mouvementOriginale Vectorisée

Page 18: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

Image clé (animation)Originale

Vectorisée

18

Vous ne pouvez pas quitter l’applicationFlash car d’autres taches sont en cours.

OK

Message d’erreur (adapter pour Flash)

Originale

Vectorisée

Page 19: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Photoshop

Enrgistrer les modififications du document Adobe Photoshop“Sans titre-1” avant de quitter

EnregistrerAnnuler

Ne pas enregistrer

Adobe Photoshop

Quitter PhotoshopOriginale

Vectorisée

19

Page 20: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Adobe Illustrator

20

Rapport de problème pour Illustrator

Illustrator a quitté de manière imprévue.Cliquez sur Relancer pour rouvrir l’application. Ce rapport sera envoyé automatiquement à Apple.

Commentaires

? Afficher les détailsOK Relancer

Message d’erreur (Illustrator)

Originale

Vectorisée

Option rectangle

Originale Vectorisée

Page 21: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

21

Adobe InDesign

{ClipboardPageNumber}

www.brussels-irc.be {ClipboardPageNumber}

Information et CommunicationTechnologie d’adaptation du contenu des téléphones portablesRéférence : 05 IE IEEI 0DFXUne PME irlandaise développe et gère des services pour téléphones et appareils portables, fournissant des solutions marketing et d’interface mobiles à une liste de clients de première importance. Elle recherche un système de gestion de contenu capable de fournir différents conte-nus multimédias à un large éventail d’appareils. La technologie doit pou-voir intégrer les systèmes existants de la société et les systèmes des opérateurs de réseaux mobiles pour les services/systèmes de facturation et d’informations de pointe. La socié-té serait intéressée par un accord de licence ou un accord commercial.Information et

CommunicationSolution MAM (Machine-Machine) pour la gestion à distance de sous-systèmes de mesure et de surveillance par téléphone mobile et InternetRéférence : 04 ES MAAM 0BH6Une PME espagnole a développé un système de transmission de données MAM (Machine-Machine) spécialement conçu pour gérer les informations provenant de tous types de télécapteurs (gaz, bruit, température, humidité, etc.) de la façon la plus pratique par téléphone cellulaire et Internet. La société recherche des sociétés d’ingénierie qui mettraient en œuvre cette technologie dans différents projets et également des fabricants de capteurs susceptibles d’incorporer cette technologie dans leurs solutions.Environnement

Système de réduction du carburant diesel pour compresseurs d’air, pompes, générateurs et autres moteurs statiquesRéférence :05 GB EAST 0CGVUne société anglaise a développé un système de valorisation du diesel, destiné aux compresseurs d’air, pompes, générateurs et autres moteurs statiques. La technologie brevetée consiste en un collecteur de carburant et un module électronique mis en tandem avec le moteur, pro-

du carburant avec des émissions réduites. Avantages : réduction des factures de carburant et des émis-sions, et facilité d’installation. La société recherche des partenaires industriels pour des accords de

-sements.EmballageEnveloppes simples et recyclables

pour objets fragiles, et dispositifs d’emballageRéférence :06 FR NMCN 0E1K

Une entreprise française a développé

le transport d’objets fragiles. Utilisant un matériau amovible, ces enveloppes faciles à fabriquer à peu de frais sont réutilisables et recyclables. L’entreprise a aussi développé un conditionnement spécial pour stocker facilement ces enveloppes. Elle recherche des partenaires dans le secteur de la fabrication d’enveloppes pour des accords industriels et commerciaux.

Technologies du transportSystème permettant de baisser

en urgence les vitres latérales des voitures et camionsRéférence : 05 SE NSUC 0DSAUn inventeur suédois a breveté un appareil pour baisser en urgence les vitres latérales des véhicules, utilisable dans les voitures, camions, bus et véhicules marins et permettant à une personne de sortir d’un véhicule par la vitre latérale, lorsque la portière ne s’ouvre pas et que le système électronique ne fonctionne plus. L’inventeur propose de vendre son brevet à l’industrie automobile ou à des sous-traitants fournissant des composants ou de la R&D à l’industrie automobile.

Matériaux / Process controlTechnologie de procès pour la

uniformes d’épaisseur régulière (moins de 50 microns) conçus pour les produits de soins personnels Référence : 05 GB EAST 0DF1Une importante société britannique de soins de santé recherche une nouvelle technologie de process pour

uniformes d’épaisseur régulière

naturels ou synthétiques seront utilisés dans les produits de soins personnels destinés au marché mondial des soins de santé. La société souhaite établir des partenariats/accords de licence avec des sociétés externes du secteur

process vers une production grande échelle.

Information et CommunicationSystème d’alarme sans

Référence 05 TR TEEU 0CD6Une société turque produisant des systèmes d’alarme et des télévisions en circuit fermé recherche des technologies de fréquence radio

La société recherche un accord de licence ou de fabrication.

Technologies du transportMicro bitume régénérant et protecteur pour surfaces

asphaltées Référence : 06 IL ILMI 0E64Une PME israélienne a développé un nouveau type de micro bitume à base de polymère mono composant

l’oxydation et la détérioration des surfaces asphaltées ainsi que

Les avantages principaux sont l’augmentation de la durée de vie des routes, la réduction des coûts de maintenance ainsi qu’un temps réduit de mise en œuvre.

TR

TR

TO

TO

TO

TO

TO

TO

Si parmi les différentes rubriques de ce numéro, une référence vous intéresse, contactez-nous au moyen du formulaire ci-joint.

Offres et demandes de technologie

Mise en page

Vectorisée

Mise en page

Originale

Page 22: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

Do you want to save the changes you made toindex.html?

SaveCancel

Don’t Save

Your changes will be lost if you don’t save them.

Originale

Vectorisée

22

Sublime Text

Save

Save

Save As:

Tags:

Where: site

Cancel

Sauvegarde Sublime Text

Originale

Vectorisée

Enregistrer Sublime Text

Page 23: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

23

Safari Fichier Edition Présentation Historique Signets Développement Fenêtre Aide

Originale

Vectorisée

Safari

Belgique

Recherche Google J’ai de la chance

Le domaine Google.be est disponible en : Nederlands Deutsh English

Page d’accueil

Originale

Vectorisée

Interface (onglet)

Page 24: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

24

Forcer des applications à quitterSi une application est bloquée, sélectionnez son nom, puis cliquezsur Relancer.

Adobe After Effect CS5FlashITunesSafariFinder

Ouvrez cette fenêtre appuyant surCommande-Option-Escape. Forcer à quitter

Originale

Vectorisée

Forcer à quitter

Voulez-vous forcer Sublime Text 2 àquitter ?

Toute modification non enregistrée sera perdue.

Annuler Forcer à quitter

Sauvegarde Programme

Originale

Vectorisée

Forcer à quitter

Page 25: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

25

Options

Afficher toutes les fenêtresMasquer les autresForcer à quitter

Originale

Vectorisée

Application

Finder

Changer application

Originale

Vectorisée

Option dock

Page 26: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE

26

Personnage

3D2D

Page 27: TFE - Romain Bourgeois · 2018. 2. 24. · Bourgeois Romain TFE 2 Résumé : L’infographiste essaye d’animer la marche d’un personnage en fil de fer, mais n’obtient aucun

Bourgeois Romain

TFE Étape 4 : Montage des séquences

Étant donné que nous ne savons pas encore

imprimer une vidéo sur papier, pour voir les

étapes suivantes, il faut s’en référer à un support

informatique.

27