Tutoriel Mediator 8.

0 Pro
Des exercices interactifs dune qualit professionnelle sans programmation.

Plan de la formation

Introduction Principes de base Cration dun nouveau document Cration de pages simples Cration de pages animes Cration de pages interactives Cration de la version de distribution

Introduction

Introduction
Mediator : quest ce que cest ? Un logiciel dit par Matchware qui permet de crer des CD-Roms, des sites Internet en HTML ou Flash sans rien y connatre en programmation informatique Mediator : quoi a sert ? crer des exercices interactifs fonctionnant sur nimporte quel poste informatique faire crer des sites ou des Cd-Roms aux lves.

Etape n1 Principes de base

Principes de base
Une activit cre sous Mediator se prsente sous 2 formes complmentaires :
Un fichier Mediator que vous modifiez loisir sur un poste informatique dot du logiciel Une version dite de distribution que vos lves utilisent sans pouvoir en modifier le contenu.

Principes de base
Un fichier Mediator peut tre agrment de tout un tas de fichiers :
Images Sons Vidos Textes bien sr !

Principes de base
Les pages que vous voyez sous vos yeux sont dites statiques. Pour en voir les animations (couter les sons, voir les vidos, animer les images ), il vous faudra passer en mode Test. Cliquez sur Test, Excutez page (pour tester la page en cours) ou Excutez document (pour tester tout le document) Pour sortir du mode Test, appuyez sur Echap.

Principes de base
Dans la fentre en bas gauche saffiche automatiquement la liste des objets que vous insrez. Noubliez pas de leur donner un nom vocateur !! Ce conseil anodin pour linstant vous fera gagner un temps prcieux dans les tapes venir.

Principes de base
A prsent dmarrez le programme Mediator.

Etape n2 Cration dun nouveau document

Cration dun nouveau document

Cliquez sur Crer un Document

Cration dun nouveau document

Dans les botes de dialogues qui apparaissent, choisissez :
Standard Plein cran avec cadre Une rsolution de 800x600

Ces options sont celles qui vous permettront daccder au plus grand choix de possibilits.

Cration dun nouveau document

Vous tes prt vous lancer dans la cration

Cration dun nouveau document

Au cours des exercices qui suivent nous aurons besoin de plusieurs pages. Renommez votre page1 (Page/Renommer) en PremiersPas Cliquez sur Page/Nouvelle et donnez un nom chacune de vos nouvelles pages Veuillez crer
une page Dessin, une page Forme une page Son, une page Vido

Cration dun nouveau document

La liste de vos pages saffiche en haut de gauche de votre fichier

Etape n3 Cration de pages simples

Cration de pages simples

Lors de cette tape vous allez apprendre :
insrer un titre insrer une zone de texte insrer une image insrer un dessin gomtrique insrer un fichier son insrer un fichier vido

Insrer un titre

Insrer un titre
Cherchez dans la barre doutils, llment Titre

Cliquez sur licne Titre Tracez un cadre o vous souhaitez voir apparatre votre titre Entrez votre texte puis cliquez sur OK Pour changer police et couleur, rendez vous dans les proprits de lobjet (clic droit proprits) puis sur le 3 onglet. Le 4 onglet vous permet dombrer votre texte, le 5 vous permet de lauroler dune couleur.

Insrer un titre
Voici quoi ressemble sans doute votre page

Insrer une zone de texte

Insrer une zone de texte

Cherchez dans la barre doutils, llment Texte

Cliquez sur licne Texte Tracez un cadre o vous souhaitez voir apparatre votre texte Entrez votre texte, formatez le, puis cliquez sur Dans les proprits de lobjet (clic droit/proprits), vous pourrez ombrez la zone de texte

Insrer une zone de texte

Voici quoi ressemble sans doute votre page

Insrer une zone de texte

Peut-tre souhaitez-vous toutefois insrer un texte beaucoup plus long ? Vous pouvez pour cela rajouter une barre de dfilement. Dans les proprits de lobjet (clic droit/proprits), 3 onglet, cochez activer barre de dfilement. Pour modifier le texte a posteriori, double-cliquez sur la zone en question. Une fois termin, cliquez sur

Insrer une zone de texte

Voici quoi ressemble sans doute votre page

Insrer une image

Insrer une image

Cherchez dans la barre doutils, llment Image

Cliquez sur licne Image Tracez un cadre o vous souhaitez voir apparatre votre image Cherchez sur votre disque dur lemplacement de votre image. Adaptez la taille du cadre limage puis cliquez sur OK

Insrer une image

Voici quoi ressemble sans doute votre page

Insrer un gif anim

De la mme manire, vous pourrez insrer un gif anim Vous pourrez le choisir dans la bibliothque multimdia de Mediator Vous pourrez galement utiliser vos propres gif anims. Pour juger du rendu, passez en mode Test (Test/Excutez page)

Insrer une image de la bibliothque

Cliquez sur Affichage/Panneaux Bibliothque multimdia Choisissez votre image Faites la glisser sur votre page

Insrer un dessin gomtrique Cliquez sur la page Dessin

Insrer un dessin gomtrique

Cherchez dans la barre doutils, llment Dessin

Cliquez sur licne Dessin Tracez un cadre o vous souhaitez voir apparatre votre dessin Donnez un nom votre dessin puis crez le dans loutil de dessin de Mediator. Enfin cliquez sur Fichier, retourner Mediator en enregistrant votre fichier.

Insrer un dessin gomtrique

Voici quoi ressemble sans doute votre page

Insrer un dessin gomtrique Cliquez sur la page Forme

Insrer un dessin gomtrique

Cherchez dans la barre doutils, llment Rectangle

Cliquez sur licne Rectangle Tracez votre rectangle Dans les proprits de lobjet, formatez votre rectangle (couleur, bordure, transparence )

Insrer un dessin gomtrique

Cherchez dans la barre doutils, llment Polygone

Cliquez sur licne Polygone Tracez votre polygone laide des points ;vous pourrez en ajouter ou en supprimer avec Vous pourrez ensuite jouer sur la forme des angles avec Dans les proprits de lobjet, formatez votre polygone (couleur, bordure, )

Insrer un dessin gomtrique

Voici quoi ressemble sans doute votre page

Insrer un fichier audio Cliquez sur la page Son

Insrer un fichier son

Cherchez dans la barre doutils, llment Media Player

Cliquez sur licne Media Player Tracez le cadre de votre lecteur Cherchez votre fichier son sur votre disque dur ou dans la bibliothque de sons de Mediator. Choisissez vos options. Cliquez sur OK Dans le 2 onglet des proprits vous pourrez choisir si oui ou non votre fichier son dmarre automatiquement Pour couter votre fichier son, testez votre page.

Insrer un fichier son

Voici quoi ressemble sans doute votre page

Insrer un fichier vido Cliquez sur la page Vido

Insrer un fichier vido

Cherchez dans la barre doutils, llment Media Player

Cliquez sur licne Media Player Tracez le cadre de votre lecteur Cherchez votre fichier vido sur votre disque dur ou dans la bibliothque de vidos de Mediator. Choisissez vos options. Cliquez sur OK Dans le 2 onglet des proprits vous pourrez choisir si oui ou non votre fichier vido dmarre automatiquement Pour visionner votre fichier vido, testez votre page.

Insrer un fichier vido

Voici quoi ressemble sans doute votre page

Etape n4 Cration de pages animes

Cration de pages animes

Lors de cette tape vous allez apprendre :
rendre des lments invisibles affecter un vnement un lment instaurer une navigation entre les pages grer lanimation grce la ligne du temps affecter un trac danimation un objet

Rendre les lments invisibles

Rendre les lments invisibles

Rendre un lment invisible peuttre trs utile pour lanimation. On pourra ainsi dcider quel moment le rendre visible, et comment le rendre visible. Sur la page PremiersPas, slectionner la zone de texte. Dans le 1er onglet des proprits, dcochez la case visible.

Rendre les lments invisibles

Voici quoi ressemble sans doute votre page

Affecter un vnement un lment

Affecter un vnement un lment

Tous les lments de vos pages peuvent sanimer. Sur votre page PremiersPas, slectionner limage Cliquez droit et slectionnez Evnements.

Affecter un vnement un lment

Nous voulons quen cliquant sur notre image, le texte apparaisse. Dans la fentre vnements
Choisissez Clic souris dans la colonne de gauche et faites le glisser dans le cadre Choisissez Afficher dans la barre du haut et faites le glisser dans le cadre Choisissez llment Afficher (ici le texte) et la manire dont vous voulez quil saffiche.

Affecter un vnement un lment

Voici quoi ressemble sans doute votre page

Affecter un vnement un lment

Passez en mode Test (Test/Excutez page). Cliquez sur limage ; votre texte saffiche. Quittez le mode Test (Echap) Cette fonction Evnements propose de nombreuses possibilits quil vous faudra dcouvrir (sortir de lapplication en cliquant sur un lment, imprimer une page, en cacher un lment, dmarrer un son )

Instaurer une navigation entre les pages

Instaurer une navigation entre les pages

Nous avons cr plusieurs pages. Nous voulons que nos lves puissent passer dune page lautre ou sortir de lactivit en cliquant sur des boutons. Ouvrez la bibliothque multimdia (Affichage/Panneaux) Cherchez les boutons qui vous conviennent et faites les glisser sur votre page

Instaurer une navigation entre les pages

Nous devons affecter un vnement distinct pour chaque bouton. Slectionner le bouton page suivante , cliquez droite et ouvrez la fentre vnements. Indiquez que pour un Clic Souris, vous souhaitez Aller la page Son.

Instaurer une navigation entre les pages

Voici quoi ressemble sans doute votre page

Instaurer une navigation entre les pages

Ritrez lopration pour tous les boutons insrs (attention au nom de la page) et sur toutes les pages. Vous pouvez si vous le souhaitez supprimer les pages Dessin, Forme et Vido.

La ligne du temps pour grer lanimation

La ligne du temps pour grer lanimation

Comme dans Powerpoint, il est possible danimer les pages, de les rendre plus vivantes La ligne du temps permet de rgler trs prcisment lapparition de tel ou tel vnement sur la page

La ligne du temps pour grer lanimation

Groupez vos boutons de navigation (les slectionner puis Ctrl+G / U pour dgrouper) Rendez tous vos lments invisibles Cliquez droit sur un espace vide de votre page, puis sur vnements Dans la colonne de gauche choisissez Page prte et ajoutez lui Ligne temps La ligne du temps apparat. Vous pouvez dsormais grer votre animation.

La ligne du temps pour grer lanimation

Voici quoi ressemble sans doute votre page

La ligne du temps pour grer lanimation

Nous allons afficher le titre, limage et les boutons. Le texte apparatra au clic sur limage

La ligne du temps pour grer lanimation

Comme vous le verrez au fur et mesure, cette ligne du temps vous permet un tas de possibilits, lajout dun fond sonore par exemple Amusez-vous parfaire lanimation de votre seconde page (les autres ayant t supprimes)

Affecter un trac danimation un lment

Affecter un trac danimation un lment

Sur une page Animation, insrez un clipart de la bibliothque danimation (ici un escargot) Trac un trajet danimation (idem polygone) Cliquez sur Faites apparatre la ligne du temps sur votre page

Affecter un trac danimation un lment

Voici quoi ressemble sans doute votre page Remarquez en pointills le trac danimation

Affecter un trac animation un lment

Sur la ligne du temps, choisissez Afficher votre clipart 0 sec A 1 sec, choisissez Animer (onglet Multimdia), lobjet animer tant votre clipart. Choisissez vos options. Passez en mode Test et admirez le rsultat ; ici lescargot suit scrupuleusement votre trac !!

Etape n5 Cration de pages interactives

Cration de pages interactives

Lors de cette tape vous allez apprendre :
crer une image ractive crer un questionnaire crer un exercice en glisser-dposer crer un exercice vrai-faux

Crer une image ractive

Crer une image ractive

Nous allons crer une carte ractive. Quand llve survolera certaines parties de cette carte, les drapeaux des pays safficheront. Cette activit est transfrable tout type de document (un tableau dont les lments seraient comments par des textes, un alphabet dont chaque lettre serait prononce dans un fichier son )

Crer une image ractive

Crez une nouvelle page, nomme Carte et insrez y une carte de votre choix (ici lEurope de lOuest). Faites en sorte quelle prenne les deux tiers de la page. Cliquez droit sur la carte, puis ajoutez 3 zones sensibles sur cette carte (une pour la France, une pour lEspagne, une pour la Grande Bretagne) Noubliez pas de placez ces zones au bon endroit (vitez quelles ne se chevauchent) Nommez les !!

Crer une image ractive

Voici quoi ressemble sans doute votre page Remarquez en pointills le trac des zones sensibles

Crer une image ractive

Dans la marge de droite insrez trois images, les unes en dessous des autres (les trois drapeaux) Nommez-les et rendez les invisibles Cliquez droit sur une zone sensible Ouvrez la fentre Evnement

Crer une image ractive

Voici quoi ressemble sans doute votre page

Crer une image ractive

Dans la fentre Evnements choisissez :

Faites de mme pour les trois zones

Crer une image ractive

Passez au mode Test Au survol de la souris sur le pays, le drapeau saffiche. Quand la souris sort de la zone, le drapeau sefface. Ajoutez des boutons de navigation votre page. Crez-en lanimation avec la ligne du temps.

Crer un questionnaire

Crer un questionnaire
Mediator vous permet de poser des questions vos lves et de leur donner les moyens davancer leur rythme. Pour ce faire, crez une nouvelle page appele Quiz Utilisez 3 zones de textes pour crer 3 questions ; nommez-les. Insrez galement 3 boutons OK et nommez-les.

Crer un questionnaire
Voici quoi ressemble sans doute votre page

Crer un questionnaire

Insrez trois objet entre Nommez-les Cliquez sur Document/Variable Crez trois variables locales-texte portant le mme nom que vos objets entre Rendez invisibles les 2 derniers boutons

Crer un questionnaire

Crer un questionnaire
Voici quoi ressemble sans doute votre page

Crer un questionnaire
A prsent nous devons programmer !! Quand llve validera sa rponse en cliquant sur ok :
Si elle est juste, le bouton de validation de la question suivante saffichera Si elle est fausse, un panneau attention saffichera

Insrez un panneau attention (de la bibliothque), puis rendez le invisible.

Crer un questionnaire
Voici quoi ressemble sans doute votre page

Crer un questionnaire
Cliquez droit sur le 1er bouton OK Slectionnez Evnements Choisissez :

Crer un questionnaire

Nom de la variable de la premire question.text="rponse"

Afficher le 2 bouton si la rponse est juste

Cacher le panneau si la rponse est juste

Afficher le panneau si la rponse est fausse

Crer un questionnaire
Ritrez lopration pour chaque bouton de validation. Faites attention la casse (la programmation est un domaine qui naime pas les fautes de frappe) Testez votre page avec des rponses justes ou fausses.

Crer un questionnaire

Vous pouvez dsormais habiller votre page Rajoutez images, couleurs, polices Noubliez pas les boutons de navigation ni lanimation de la page via la ligne du temps.

Crer un questionnaire
Voici quoi ressemble peut-tre votre page

Crer un exercice en glisser-dposer

Crer un exercice en glisser-dposer

Il sagit pour nos lve de faire correspondre deux lments en les faisant se chevaucher Associer une image un mot, un mot un autre Ici les lves vont associer les plantes et leurs noms

Crer un exercice en glisser-dposer

Crez une nouvelle page GlisserDposer Insrez 2 images de plantes Insrez 2 zones de texte avec leur nom (vitez de les mettre en face des bonnes plantes !!) Nommez ces zones de texte : nomjupiter et nomsaturne Crez une variable locale-texte : plante

Crer un exercice en glisser-dposer

Ouvrez la fentre Evnements pour le nom Jupiter Choisissez :

Crer un exercice en glisser-dposer

Voici les options choisir :

Si le bouton gauche de la souris est enfonc, llve peut faire Glisser lobjet texte en avant plan Si le bouton gauche est relch, llve peut Dposer lobjet en avant plan

Crer un exercice en glisser-dposer

Affectez (onglet programmation) une variable notre exercice :
Exemple pour le texte jupiter

Crer un exercice en glisser-dposer

Slectionnez ensuite une plante et comme Evnements, choisissez :

Crer un exercice en glisser-dposer

Dans la fentre Si-Alors-Sinon, choisissez :
Variable=nom de la zone de texte"

Nous avons dcid de faire exploser les lments justes : cacher limage et le texte en les faisant exploser.

Crer un exercice en Glisser-dposer

Ritrez lopration pour chaque zone de texte et chaque image Animez votre page Crez une navigation Testez votre page

Crer un exercice vrai-faux

Crer un exercice vrai-faux

Nous allons crer un exercice qui permet llve de choisir parmi plusieurs propositions. Lorsque son choix est juste ou faux, les propritss de lobjet cliqu (ici sa couleur) changent Crez une nouvelle page nomme VraiFaux Insrez une zone de texte avec une question de votre choix. Insrez 3 boutons avec 3 propositions de rponses.

Crer un exercice vrai-faux

Voici quoi ressemble peut-tre votre page

Crer un exercice vrai-faux

Au clic de la souris sur la bonne rponse le texte virera au vert

Slectionnez lvnement Dfinir Proprits dans longlet Multimdia

Crer un exercice vrai-faux

Au clic de la souris sur la mauvaise rponse le texte virera au rouge

Slectionnez lvnement Dfinir Proprits dans longlet Multimdia

Crer un exercice vrai-faux

En mode Test, une fois toutes rponses cliques, vous obtenez :

Etape n6 Cration de la version de distribution

Cration de la version de distribution

Votre fichier Mediator est termin
Vous avez cr toutes vos activits Vos pages sont toutes lies les unes aux autres Lanimation fonctionne sur chaque page Vous avez test tout votre document Vous en avez vrifi la conception (menu Test)

Vous devez prsent en crer une version que vous pourrez exporter sur un rseau, envoyer par mail afin quil soit utilisable mme par ceux qui nont pas Mediator !!

Cration de la version de distribution

Enregistrez votre document (cest lui que vous modifierez ensuite si vous souhaitez rajouter des pages ) Puis cliquez sur Fichier Crer version de distribution Choisissez rapide puis le format que vous souhaitez (un excutable est apprciable) Mdiator se charge de crer un dossier contenant toutes vos images, sons, vidos Cest ce dossier appel EXE ou CDROM que vous transfrerez sur votre cl USB ou sur tout autre support.