Traitement des médias I. Projet 02 - Le cryptex

Transcription

1

2 Énoncé 30% Description générale du projet Concevoir et produire des pages interactives dont le sujet concerne la découverte d un secret. L utilisateur aura le rôle d un curieux qui, à partir des indices laissés dans une pièce, devra trouver et ouvrir le coffre-fort contenant le secret. Scénario de l histoire Vous travaillez pour le FBI. Vous enquêtez sur un agent double, un personnage qui semble sans histoire. Selon vos sources, vous croyez qu il cache des documents compromettants dans un coffre-fort bien camouflé. Vous savez aussi qu il doit s absenter souvent et qu il demande régulièrement un service de garde à domicile pour s occuper de son poisson rouge. Afin de pouvoir fouiller dans son appartement, vous vous faites passer pour un employé de ce service de garde et vous en profitez pour chercher et ouvrir le coffre. La conclusion: lorsque vous découvrez le contenu du coffre-fort, vous vous apercevez qu il n y a pas de secret, mais qu il fabrique à chaque absence, un jeu pour la gardienne de son poisson rouge. 2

3 Description (1/3) 01 - L interface d inscription Un titre. Un texte qui explique la situation. Une phrase invitant l utilisateur à s identifier. Un champs de saisie «texte» pour le nom de l utilisateur. Une zone pour les messages d erreur. (intégrée dans la maquette Photoshop) Un aquarium avec le poisson. (images fournies, l animation est en bonus) Un élément interactif (deux états : normal et survolé). L interaction : au clic, changement de marqueur, affichez l image «pièce sombre» La pièce sombre Une grande image d une pièce sombre sans l éclairage. (photo) Un interrupteur visible (deux états). (photo) L interaction : effet visuel au survol sur l interrupteur en position fermée. au clic, changement de marqueur, affichez l image «pièce éclairée» La pièce éclairée Image de la pièce avec l éclairage. (photo) Des objets indices dissimulés dans la pièce. (photo) Un interrupteur visible (deux états). L interaction : effet bisuel au survol, de l interrupteur en position ouvert. au clic, changement de marqueur, affichez l image «pièce sombre» Les objets Les objets indices réagissent au passage de la souris (deux états ; normal et survolé). L interaction : au survol, effet visuel de l objet. au clic, affiche la fenêtre d agrandissement. Un journal : une image d un journal. (photo) Un coffre-fort. (image fournie) Deux petites lumières sur le coffre-fort, soit rouges ou vertes (à ajouter avec Photoshop) Une serrure numérique (à fabriquer avec Photoshop) Un tableau ou un poster pour dissimuler le coffre-fort. (photo ou banque d images) Une clé pour l objet verrouillé. (photo). Un objet verrouillé : petite boîte; valise; tiroir; classeur; etc.) (photo ou banque d image) Un calepin : une image du calepin fermé et une image du calepin ouvert. (photo) Une photo illustrant le mouvement (photo). Une photo illustrant la profondeur de champs. (photo) 3

4 Description (2/3) 05 - Une fenêtre d agrandissement, en superposition. Agrandissement de l objet indice. L interaction : au survol, rien au clic, cachez la fenêtre. Le journal : Nous voyons une partie de la première page du journal, «la Une» et un bout de journal déchiré de la section des petites annonces (indice sur la cachette du coffre). Le calepin : Il est ouvert. Présentation du code pour ouvrir le coffre (une série de 4 signes) et un papier déchiré avec la moitié du solutionnaire (traduction du code). Le contenu de l objet verrouillé : Diverses choses et l autre moitié du papier déchiré du solutionnaire. Les photos : Les deux images sont présentées en grand format (photo mouvement et photo profondeur de champ). Le coffre-fort : Avec les deux lumières témoins (vertes) et une serrure numérique (une lettre, un chiffre, une lettre, un chiffre). Le contenu du coffre : Une surprise (ex. des bonbons et une lettre de félicitations). L objet inutile : un objet au choix qui était présent lors de la prise de vue Le jeu 00- L interface d introduction : Texte de mise en situation et image intégrant le poisson; champ texte pour l identification du joueur et bouton pour débuter le jeu. 01- Présentation de la pièce principale, elle est sombre : trouver l interrupteur afin d éclairer la pièce. 02- Une fois la pièce éclairée, chercher des objets qui nous donneraient des indices sur la cachette du coffre-fort et sur son code pour l ouvrir. Les objets A- Un objet verrouillé qui ne s ouvre pas tant et aussi longtemps que la clé n est pas déplacée par-dessus. B- Une clé Elle est déposée quelque part dans la pièce. (deux états) Au clic sur la clé, elle reste attachée au curseur tant et aussi longtemps que la souris reste enfoncée. Au relâchement de la souris, ailleurs que sur l objet verrouillé, la clé peut rester sur place, retourner à sa place d origine ou tomber sur le sol. (au choix de la programmation) Lorsque celle-ci est relâchée au-dessus de l objet verrouillé. Affichage de la fenêtre d agrandissement avec l image du contenu de l objet verrouillé (divers choses, papier, crayon, photos, etc.) et un bout de papier déchiré montrant la moitié du solutionnaire du code. (l autre moitié est présentée dans l agrandissement du calepin) C- Un calepin Il est déposé quelque part dans la pièce. Il est fermé. (deux états) Un clic sur le calepin : Affichage de la fenêtre d agrandissement avec l image du calepin ouvert. On peut y voir : le code pour ouvrir le coffre-fort (une série de signes) et un bout de papier déchiré avec la moitié du solutionnaire du code. 4

5 Description (3/3) D- Un journal Il est déposé quelque part dans la pièce. (deux états) Un clic sur le journal : Affichage de la fenêtre d agrandissement. Nous voyons une partie de la première page du journal (la Une) et par-dessus, un bout de journal déchiré de la section des petites annonces. (l annonce indique que le coffre est dissimulé derrière le tableau) Exemple : À vendre, un coffre-fort, n ayant presque pas servi, en très bonne condition, très solide, prévu pour être encastré dans un mur et dissimulé derrière un tableau. E- Un tableau ou poster qui cache le coffre-fort Il est sur un mur de la pièce. (deux états). Il reste insensible, tant et aussi longtemps que le journal n est pas consulté. Au clic sur le tableau : Effacement graduel et dévoilement du coffre-fort. F- Un coffre-fort avec une serrure numérique. À la même place que le tableau. (deux états) À côté ou sur le coffre, deux petites lumières témoins (rouges ou vertes). Les lumières restent rouges tant et aussi longtemps que l objet verrouillé n est pas visité et le carnet n est pas consulté. Elles deviennent vertes si l objet verrouillé a été visité et si le carnet a été consulté. Il y a une lumière témoin pour le carnet et une lumière témoin pour l objet verrouillé. Le coffre-fort reste insensible, tant et aussi longtemps que les lumières sont rouges. Il réagit au clic de la souris seulement si les deux lumières sont vertes. Un clic sur le coffre-fort : Affichage de la fenêtre d agrandissement avec la serrure numérique. Une serrure numérique de quatre composantes (une lettre, un chiffre, une lettre, un chiffre). Chaque composante est constituée d une image (lettre ou chiffre) et de flèches (précédente et suivante). Deux composantes pour afficher les lettres de l alphabet (10 lettres, A à J). Deux composantes pour afficher les chiffres (10 chiffres, 0 à 9). Lorsque le code est bon, affichez le contenu du coffre. Le contenu du coffre : Un petit mot de remerciement avec un cadeau. 5

6 Spécifications Les codes ActionScript Les spécifications seront précisées dans le cours de programmation. Spécifications relatives aux médias Le traitement des médias (images, éléments graphiques, typographie, etc.) doit être cohérent, pertinent et en respect des critères de qualité. Les objets sont traités de façon à mettre en évidence l interactivité. Deux états par élément. Un état normal (up) et un état pour le survol de la souris (rl). L aspect graphique des états (up et rl) sont constants. Spécifications techniques Le style graphique exploité est en cohérence avec le sujet. Les images sont prises avec la caméra numérique en respectant l énoncé. Les maquettes sont réalisées avec Photoshop, l intégration se fait avec Flash et les codes exploités sont développés dans le cours de Programmation. Le solutionnaire est réalisé avec Illustrator. Le projet utilise la structure des fichiers et respecte la nomenclature expliquée en classe. L interface du projet est en 1024 x 768. Les agrandissements sont en 800 x 600 (Filtre noir + style de fenêtre obligatoire). Spécifications pour la prise de vue Avec un appareil photo numérique. (en mode manuel ou semi-automatique). Le flash est désactivé. Utilisation du trépied. La résolution des photos : minimum 3 M (2016 X 1512 pixels). Faire une planification de la prise de vue et liste des objets à photographier. Spécifications pour le solutionnaire. Les signes sont fournis, mais devront être retracés avec Illustrator. Le solutionnaire se trouve en deux morceaux dans le jeu, il devra donc être imprimé, déchiré en deux et photographié. Étapes de travail Analyse : Bien comprendre la commande. Faire les schémas fonctionnels. Conception : Planification de la prise de vue et réservation de la caméra. Faire l inventaire des objets nécessaires au projet. Production : Faire les prises de vues. Préparer les maquettes. Produire le document Flash. Programmer l interactivité en Actionscript. 6

7 Structure de fichiers 7

8 Échéancier du projet cours 23 Mercredi 14 novembre cours 24 Vendredi 16 novembre cours 25 Mercredi 21 novembre cours 26 Vendredi 23 novembre cours 27 Mercredi 28 novembre cours 28 Vendredi 30 novembre cours 29 Mercredi 5 décembre cours 30 Vencdredi 7 décembre Présentation du projet. Analyse du projet, schéma fonctionnel. Planification de la prise de vue avec liste des objets à photographier. Réservation de l équipement. Remise à la fin de l atelier : Schéma fonctionnel, planification avec liste des objets à photographier. Prise de vue (hors cours)... Structure des fichiers. Préparation de la maquette «Introduction». Préparartion des éléments du solutionnaire. Préparation de l agrandissement «coffre-fort» et le design de la serrure numérique. Préparartion du «contenu du coffre». Prise de vue (hors cours)... Préparation de la maquette «Introduction». Préparartion des éléments du solutionnaire. Préparation de l agrandissement «coffre-fort» et le design de la serrure numérique. Préparartion du «contenu du coffre». Remise à la fin de l atelier : Maquettes : Introduction; agrandissement «coffre-fort» avec le design de la serrure numérique; «contenu du coffre»; les images traitées du solutionnaire. Sélectionner les photos pour le projet. Préparation de la maquette «Pièce principale» avec tout les objets et les agrandissements. Remise de la prise de vue (seulement les photos sélectionnées). Préparation de la maquette «Pièce principale» avec tout les objets et les agrandissements. Remise des maquettes finales. Découpage des éléments pour l intégration dans Flash. Découpage des éléments, intégration dans Flash et début d arrimage avec la programmation. Examen Critique du projet. Remise du projet (programmé ou non). 8

9 Grille d évaluation Grille d évaluation Analyse (15 %) - Structure des fichiers ; - Schéma fonctionnel ; - Planification de la prise de vue et liste des objets à photographier. Prise de vue (20 %) - Qualité des images (focus, exposition, balance des blancs et ISO) ; - Mode de prise de vue A, S ou M ; - Flash désactivé ; - Utilisation du trépied. Maquette visuelle (40 %) - Conception et cohérence visuelle ; - Qualité des éléments graphiques ; - Réalisme des montages (objets dans la pièce, coffre fort, clavier numérique) ; - Typographie : lisibilité et hiérarchie ; - Utilisation de «Composition de calques». Montage interactif (25 %) - Nomenclature des fichiers et structure de la bibliothèque Flash ; - Précision de l intégration. ** Pénalités : Le respect de la commande; la remise des étapes; les sources et les droits d auteur; la qualité des textes et du français, les retards. Modalités de remise (Vendredi, 7 décembre à 15h) - Structure des fichiers complète (non-compressée) sur le réseau ou sur clé USB. Dans le dossier «Gestion» : L énoncé du projet et un document «Word» indiquant pour chaque image téléchargée : le numéro et l adresse de la banque d images. Dans le dossier «Images traitées» : Les images de la prise de vue calibrées. Dans les dossiers «Originaux» : Les images sources utilisées au projet. - Les maquettes finales. - Le montage final Flash (programmé ou non). 9