Projet «Celerina interactif - UNIGEtecfaetu.unige.ch/staf/staf-i/gorga/staf13/projetStaf13.pdf · - ouvrez le fichier collage1.psp, sélection Rounted Rectangle et feather=32, copiez

TECFA, 2002-2003 Staf13 Projet - Image, Son et Communication dans les Logiciels Multimédias Dorel Gorga Professeur : Sam Fitouri juin 2003

Dorel Gorga : projet : « Celerina ° Engadine ° Suisse » Page 1 sur 15

Projet «Celerina interactif »

Photos et vidéos de la Haut-Engadine Musique, Ils Fränzlis da Tschlin « Pariampampam »

Description générale du projet

But du projet Le but de ce projet est la réalisation d’un CD-Rom multimédia. Le terme "multimédia" désigne aujourd'hui des réalités fort différentes suivant le point de vue que l'on adopte. Pour le grand public, le multimédia est un ensemble de produits " futuristes ", aux qualités parfois spectaculaires dont les percées les plus significatives sont sûrement celles qui touchent aux services (ventes, publicité, kiosques...), aux arts (peinture, musique...) ou aux savoirs dits "encyclopédiques" (muséographie, bornes interactives). Pour mon projet, j’ai choisi le thème d’un CD-Rom de présentation, à travers les images, les vidéos et la musique, d’une commune du Haute-Engadine, Celerina. C’est la première esquisse d’un projet plus grand, qui m’a permit à suivre les consignes données dans le cadre de cours staf13. Dans ce projet, je propose une galerie des photos, une présentation de la carte de la région, une salle animée contenant des fichiers avi (des vidéoclips courtes, réalisés avec une caméra analogique et convertis en numérique) et un fond sonore avec des séquences musicales extraites d’un cd-rom « Pariampampam » apartient aux « Ils Fränzlis Tschlin », la musique romanche très connue en Haute-Engadine (canton Grison). Malheureusement, les séquences vidéo tournées dans la région de Haute-Engadine (au mois de mars 2003) ont été endommagés après leur sauvegarde sur un cd-rom. Je me suis rendu compte de cette situation au moment où le logiciel Adobe Premier ne m’a pas permit leur ouverture pour introduire des titres, transitions, etc. Vu cette situation, j’ai réalisé en Adobe Premier seulement un vidéoclip introductif d’accueil pour la « fenêtre » vidéo.

Organisation générale du projet et navigation Le CD-ROM « Celerina interactif » comprend, pour le moment, 25 photographies en couleurs (vue générale de la commune, les traditions, les fleurs des Alpes, les montagnes, les églises de la commune), 5 séquences vidéo des alentours de Celerina. Tout est accompagné par des morceaux musicaux traditionnels de l’Engadine. Le CD-ROM va contenir 4 version : français,



allemand, anglais, italien, et il fonctionne sur MS Windows 9x, 2000. Systèmes recommandés : 64Mb Ram, lecteur pour CD 16xCDROM, carte vidéo 16Mb Ram, carte son. Il faut encore ajouter que l’organisation générale permet le développement ultérieur du projet.

- Page 1 « Tecfa »: Un générique d’entrée, animé, réalisé en Mediator qui contient des informations sur ce projet du staf13.

- Page 2 « Générique Celerina »: La première page de démarrage du logiciel est aussi un générique animé, où les images (traités en Paint Shop Pro) et les lettres ont un parcours sur des trajectoires bien définies. Au démarrage de la page un fichier son est activé (celui-ci contient un morceau d’une pièce musicale, édité en CoolEdit).

- Page 3 « Langue »: C’est la page qui permet le choix de la langue de communication du cd-rom et l’accès à la section du CD-ROM correspondant à la langue choisi. Toutes les pages qui suivent sont accompagnées de son.

- Page 4 ( sous page 3) « Français » : La page d’accueil pour la section en français contient le système de navigation principal du cd-rom (les boutons « exit », « carte », « photo », « vidéo » et une ZoneListe (un sommaire qui permet l’accès direct aux pages désirées), une image de fond composée en Paint Shop Pro (pour les zones sensibles, j’ai créé des effets spéciaux, par exemple, en utilisant un canal alpha qui sert à doter une image d'un effet de transparence). J’ai utilisé aussi des images du Mediator (toutes les images provenant du logiciel Mediator se trouvent dans le dossier de données mediator_imag).

- Page 5 (sous page 3) « Carte » : C’est une page créée pour développer une section interactive du CD-ROM avec des images, textes et sons spécifiques pour chaque zone choisie. Maintenant elle contient seulement une esquisse des liens (par exemple vers la galerie des photos avec les églises de Celerina) et les boutons de navigation globale.

- Page 6 (sous-page 3) « Vidéo » : J’ai conçu une interface graphique qui contient en grandes lignes une section pour afficher les séquences vidéo, une zone pour afficher les textes décrivant les séquences vidéo où en perspective des vidéoclips, un sommaire avec des séquences vidéo (on peut sélectionner la séquence désirée pour la visionner), un bouton pour mettre en route la séquence sélectionnée, boutons de navigations globale (la page accueil et sortir du cd-rom). On peut créer des sous-pages identiques pour des différents thèmes semblables comme structure pour les photographies.

- Page 7 (sous-page 3) « PhotoCelerina » : C’est la première page de la galerie photo du projet. J’ai conçu une interface semblable à la page « Vidéo » où dans le sommaire on peut sélectionner et cliquer sur l’image qu’on souhaite afficher ou avec le bouton « Diaporama » (le curseur « Diapo »), on met en route une diaporama sur les photos de cette page. J’ai introduit un système de navigation interne de la galerie.

- Page 8 – 11 (sous-page 7) « photo-FleursAlpes, Tradition, Eglise, Nature », sont identiques avec la page mère « PhotoCelerina », seulement les images diffèrent en



fonction du domaine choisi à représenter. Cette page peut contenir un nombre illimité des images.

Chaque interaction utilise des différentes modèles de curseurs que j’ai crées avec le logiciel ArtCursors, un trial version de Aha-soft. Même si j’ai utilisé plusieurs types de curseurs (dans l’avenir je vais opérer un choix à ce niveau) j’ai essayé pourtant à garder une certaine cohérence en fonction du type d’interaction.

Voila la structure du CD-ROM synthétisée au cours de la courte description de ses pages composantes que je les fais au-dessus :



Arborescences des dossiers et des fichiers L'organisation des données est très importante pour moi puisque ce travail a été fait en plusieurs étapes et si les fichiers n’étaient pas correctement classés, je n’arrivais plus à les retrouver plus quand il fallait les modifier ou les importer dans Médiator. Premièrement, j’ai fais la structure de dossiers qui va contenir les fichiers (utilisés dans Mediator) pour les images photos (format jpg), les séquences vidéo (.avi), les sons (.wav), les modèles des



curseurs (.ani ou .cur), et une structure des dossiers pour les fichiers à traiter (des images en format .psp, les projets vidéo en Adobe Premier, les sons et pour le projet compilé pour distribution via CD-ROM (direct).

Outils utilisés J’ai utilisé les outils suivants :

1. Paint Shop Pro 7.0 qui sert à créer des objets graphiques et à retoucher des images.

2. Cool Edit et Audiograbber pour échantillonner du son et pour le traiter.

3. Adobe Premiere qui est utilisé pour traiter les vidéos (faire des enchaînements, mixer avec du son...).



4. ArtCursors qui sert à créer des modèles des curseurs animés ou fixes.

5. Mediator, un logiciel auteur qui permet d'assembler les diverses sources multimédias (sons, images, vidéos, textes) pour construire le projet.

Description des objets réalisés

Le logiciel Paint Shop Pro Les photographies utilisées sont obtenues par la numérisation des diapositifs colorées.

Interface 1. La page d’accueil « français » contient une interface obtenue suite à la compilation des plusieurs photographies traitées avec le logiciel Paint Shop Pro.

Calque 1 : fond transparent. Calque 2, 3, 4, 6, 7, 8 : importation de fichier img0011.bmp, img0040.bmp, egl9_san.psp, img0031. Sur toutes les images j’ai appliquée une sélection type rounted rectangle et feather 40, j’ai ajusté, en fonction de chaque photographie, la lumière et le contraste. 2. La page type galerie photo ou vidéo, est réalisée en Mediator mais j’ai utilisé des images traitées en Paint Shop Pro du point de vue de la lumière, le contraste, les dimensions, etc.

Par exemple, pour l’image fondPhoto.psp : - dimension 640 x 480 pixels - couleur de fond (R : 128, G : 128, B : 128)



- importation de fichier bar1.png (des images qui appartient au Mediator)

Boutons Boutons "Diaporama", "Vidéo", "Photo",

Nom : but2 Image : 4.2x1 cm 120 x 30 pixels -- résolution 72. Calque 1 : fond transparent, cliquez sur Effets / 3D Effets / Buttonize et introduisez les valeurs suivantes:

- height =12 - width=29 - opacity=3 - transparent edge (coché)

après l’effet drop shadow, les valeurs qui suivent : - vertical=2 - horizontal=2 - opacity=51 - blur=1 - color : R 110, G 51, B 219

Calque 2 : texte vectoriel • Police : Arial Narrow, corp 14, bold, couleur texte : R 27, G 38, B 147

Affiche, couverture CD-ROM, introduction L’image affiche1.psp contient des informations sur la production de ce CD-ROM. Calque 1 : new image,

- dimension : 500 x 375 pixels - résolution : 72 - background color : R 154, G 158, B 206 - image type : 24bit/16,7mill

Calque 2 : - ouvrez le fichier collage1.psp, sélection Rounted Rectangle et feather=32, copiez

merged /coller comme nouveau calque (2) (redimensionnez et tournez à gauche 20°)

Calque 3 : Rectangle vectoriel :

- fil : R 44, G 52, B 154 - stroke : R 33, G 39, B 121 - stroke with=20 - Textures fil : wrap

Hexagon : - Stroke : R 245, G 241, B 241 - fil : R 195, G 198, B 229



- textures stroke et fil : Brush Strokes Textes vectoriels :

- police: Abadi MT Cond…Extra B - corp=48 - fil: R 30, G 30, B 46 - stroke: current gradient

Le logiciel Adobe Premier N'ayant pas une caméra numérique, j'ai utilisé une caméra analogique. Les séquences vidéos de ce projet ont été obtenues à l’aide d’une carte d'acquisition vidéo analogique / numérique (pas de très bonne qualité). J'ai enregistré plusieurs séquences et j'ai choisi celles où je ne "bafouillais" pas trop puis je les ai importé dans Première pour supprimer les parties indésirables et ne garder que quelques secondes. Je les ai sauvé après en gravant un cd-rom, mais à Genève, j’ai eu une mauvaise surprise, car les fichiers .avi étaient endommagés et Adobe Premier n’a plus permis leur ouverture. Dans cette situation, pour répondre aux demandes du cours, j’ai réalisé une séquence vidéo qui contient le fond d’une couleur uni (canal vidéo1a), le titre déroulant et le titre « Celerina » (transition - balayage) (canal vidéo3) qui après le zoom de l’image titreCel1.jpg, va balayer l’image disposé sur le canal vidéo 2.

Le logiciel Cool Edit Pro La musique a été saisie avec Audiograbber, afin de les convertir en ".wav " à partir d'un CD-ROM audio. Je n'ai enregistré que quatre pistes car mon disque dur est plein et les fichiers son utilisent beaucoup de mémoire. Avec CoolEdit, j'ai choisi 2 séquences de 23s « pariam2 » et 31 s « pariam17 » pour illustrer mes pages. Dans le développement ultérieur du projet, il y aura plusieurs séquences musicales.

Le logiciel Médiator Dans ce projet, j’ai utilisé les fonctions suivantes de Mediator :

- mise en place de l’espace de travail - création et mise au point du projet - création du document, des objets (boutons, rectangle, texte, image, gif, vidéo, etc. avec

boites à outils). - afficher et masquer un objet - animer un objet - groupement des objets - diffuser un son, une vidéo - création des pages (utilisation, propriétés) - événements et actions - canaux alpha et reliefs 3D - rectangle transparent



- utilisation de zone de liste - programmation en utilisant l’action SI - optimisation en vue de la distribution via CD-ROM (direct ou avec installation)

Interface accueil « Français », navigation

10 9 8 7

1 2 3 4 5 6 Le système de navigation global et les principales interactions sont : 1 – le bouton type Mediator « Exit » permet sortir du programme 2 – le bouton type Mediator « Carte » pour accéder à la page Carte. 3 – le bouton type Mediator « Photo » pour accéder aux pages avec des photographies 4 – le bouton type Médiator « Vidéo » pour accéder à la page Vidéo 5 – texte type Mediator



6 – image accent101.jpg, réalisé en Paint Shop Pro avec une transparence de 60%, pour accentuer la portion de l’image sensibiliser avec l’outil Polygone de Mediator (l’objet GoFleursAlpes). Je lui ai associé des actions et des événements comme les suivants :

Brièvement, les actions sont : L’action de la souris en dedans du polygone a associé l’événement d’affichage de l’image accent1.jpg pour accentuer la section sensible, d’affichage de l’objet caché PhotoFleursAlpes (un texte type Mediator) qui a associé une transition de type balayage droite rebond et d’affichage d’une autre image pour la souris. L’action de la souris en dehors du polygone a associé la cache d’objet accent101, PhotoFleursAlpes et la revenue de l’image classique pour la souris. L’action clic souris a associé l’événement d’aller à la page PhotoFleursAlpes et de cacher l’objet sélectionné. L’action de relâche de la souris fait revenir l’image initial associé a l’action de la souris. 7 –Le bouton « Menu » type Mediator a associé les événements et les actions suivants :

L’action de la souris sur l’objet bouton « Menu » a associé l’événement d’affichage de la ZoneList et d’activer les données de la zone de liste. 8 - La zone liste représente un sommaire qui permet l’accès direct à la page souhaitée.

Quand nous sélectionnons le nom de la page souhaitée à accéder nous associons au variable _page une valeur correspondant au nom sélectionné. Quand on fait clic sur la souris, l’événement associé est d’aller à la page dont le nom a été sélectionné. Rectangle invisible qui permet, à la situation que l’action de la souris est en dehors de ce rectangle, de cacher la zone de liste. 9 - texte type Mediator



10 – Les mêmes actions et événements comme pour la position 6.

Animation « Tecfa », « GeneriqueCelerina » La première page du CD-ROM est l’interface animée qui permet d’identifier ce projet. 8 7 6

1 2 3 4 5

1- Texte type Mediator

2 – Texte type Mediator

3 – Image (affiche1.jpg) qui peut devenir l’image personnalisé de ce CD-ROM multimédia.



4 – Un groupe d’objets qui contient une image tecfa1.jpg, obtenue en Paint Shop Pro par copier/coller répété où la sélection a été faite avec cercle et l’opacité (feather) presque 60, et une image contenue dans le Mediator (en 3D).

5 – L’objet image pilow140x100.png je le trouvé aussi dans les templates du Mediator.

6 ,8 – Des objets textes types Mediator représentant les lettres (T, E, C, F, A) et des objets qui représentent les tracés d’animation de chaque lettre.

7 – Texte type Mediator

Quand la page est appelée, cette action a associé une ligne de temps dont les événements associés sont l’affichage et la cache des objets, le démarrage de l’animation de chaque lettre et l’événement d’aller à la page suivants tout comme l’image suivante le montre.

Interface photo, vidéo Les interfaces pour visionner les photos ou les séquences vidéo sont identiques donc je présenterai brièvement seulement l’interface pour la galerie des photos. 1 2



7 6 5 4 3 1 – Une « Zone liste » dont les données représentent les noms des photos de chaque galerie ou des séquences vidéo. Les actions et les événements associés sont conformes la figure suivante :

La programmation en utilisant la condition SI (voir l’image suivante) permet à définir une variable _photo qui peut prendre les valeurs inscrites dans les données de la zone liste.



Si la condition est vraie (la variable prend la valeur sélectionnée avec la souris), on affiche la photo ou la vidéo correspondante à la valeur choisie et le texte type Mediator, une phrase qui décrit l’image ou la séquence vidéo et qui a associé une transition de balayage vers la droite. Si la condition est fausse, on cache l’image ou la séquence vidéo et le texte correspondant qui a associé une transition de balayage vers la gauche. 2 – La zone d’affichage pour les photos et les séquences vidéo.

3 – Deux boutons de navigation interne entre les pages type galerie de photos.

4 – Le bouton Diaporama permet le démarrage d’un diaporama des photos.

5 – La zone où on affiche les textes types Mediator décrivant chaque photo ou séquence vidéo.

6 – Un groupe d’objets (image + texte) qui permettent aller à la page d’accueil pour la langue française.

7 -Une image bm-exit.png qui a associé quand on fait clic sur elle l’événements qui permet de sortir du CD-ROM

Conclusion



J’ai mis beaucoup de passion pour réaliser cette première esquisse d’un projet multimédia et je regrette de n’avoir pas eu plus de temps à y consacrer. Pour faire une production de qualité, surtout en ce qui concerne le travail du son et des vidéos, il reste encore beaucoup à apprendre. En conclusion, malgré ses imperfections, je suis content d’avoir abouti à une structure perfectible qu’on peut utiliser comme base pour le développement ultérieur du projet.

Bibliographie

Chopinet, Frank (2001), Premier 6. Pratique. Complet. Actuel. Micro Application, Paris

*** , Mediator 6. Conception Web & Multimedia. Matchware.

Davis, Lori J. Paint Shop Pro 6. Power !, Muska & Lipman Publishing.

Clark, Michael T. (1997) Paint Sop Pro. Web techniques. New Riders Publishing, Indianopolis, Indiana, USA.

Documents

Projet «Celerina interactif - UNIGEtecfaetu.unige.ch/staf/staf-i/gorga/staf13/projetStaf13.pdf · - ouvrez le fichier collage1.psp, sélection Rounted Rectangle et feather=32, copiez