Flash

 

Accueil
Flash
Collège
Lycée
Pédagogie

 

 

 

Cette page est dédiée aux fichiers d'animations Flash utilisables en histoire en Sixième et en Cinquième. Il s'agit le plus souvent de documents glanés sur le Net et modifiés ou adaptés lorsque cela s'avérait nécessaire. Les sources des documents originaux sont citées lorsqu'elles sont connues.
A la fin de la liste, figure un exemple de technique de création de carte interactive en Flash.

SIXIEME
 
Orient ancien
  Carte interactive Carte animée Carte vocale Animation Animation vocale
L'Orient et les écritures        
 
 
Egypte
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Mesurer la crue du Nil        
Le fonctionnement des mastabas        
Les hypothèses de construction des pyramides        
Plan de Saqqarah        
Un objet : un parasol
Un objet : un bâton allume-feu        
Un objet : les vases canopes
Un objet : les coffres funéraires
Un objet : une horloge à eau
Un objet : un lit pliable
Un objet : des nains à jouer
 
 
Mésopotamie
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Une statue de Gudéa        
 
 
Grèce
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les périodes de l'histoire grecque        
Le monde grec        
 
 
Athènes
  Carte interactive Carte animée Carte vocale Animation Animation vocale
L'Attique        
La ville d'Athènes        
La population de l'Attique        
La démocratie athénienne        
La clepsydre        
 
 
Alexandre le Grand
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les conquêtes d'Alexandre        
Les royaumes hellénistiques        
 
 
Rome
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Rome : débuts et conquêtes        
L'Italie aux VIIIe - VIe s. av. J.-C.        
Les conquêtes romaines        
La conquête de la Gaule        
 
 
Débuts du judaïsme
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les migrations des Hébreux avec les extraits de la Bible        
Les migrations des Hébreux        
Le temple de Jérusalem        
 
 
Débuts du christianisme
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les voyages de Paul de Tarse        
La diffusion du christianisme        
 
 
Chine des Han
  Carte interactive Carte animée Carte vocale Animation Animation vocale
L'empire des Han        
Apprendre à écrire chinois        
 
 
Inde des Gupta
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les empires indiens        
L'empire Gupta        
 
 
Empires chrétiens
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les empires chrétiens        
 
 
Empire byzantin
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Explorer Sainte-Sophie de Constantinople        
 
 
Empire carolingien
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Explorer Aix-la-Chapelle        
 
 
 
CINQUIEME
 
 
Débuts de l'islam
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Explorer la mosquée de Kairouan        
 
 
Paysans et seigneurs
  Carte interactive Carte animée Carte vocale Animation Animation vocale
La construction d'un château        
L'évolution des châteaux selon les siècles        
 
 
Place de l'Eglise
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Gothique et croisée d'ogives        
Villard de Honnecourt, bâtisseur de cathédrales        
 
 
Expansion de l'Occident
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Le commerce en Europe aux XIIIe-XIVe s.        
 
 
Découvertes et conquêtes européennes
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Une mappemonde du XIIIe s.        
Une caravelle : la Santa Maria        
Voyages et Grandes découvertes        
Les routes des explorateurs        
Colonies et commerce à la fin du XVIe s.
Explorer Tenochtitlan        
Explorer Tulum, cité maya
 
 
Humanisme, Renaissance, Réformes
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Les foyers de l'Humanisme et de la Renaissance        
L'Europe de la Renaissance        
Jouer à déguiser la Joconde !        
 
 
L'émergence du « roi absolu »
  Carte interactive Carte animée Carte vocale Animation Animation vocale
Le Roi-Soleil        
Louis XIV par Rigaud        
Un roi, une foi        
Lire le plan de Versailles        
Survoler la grande perspective de Versailles.
Molière et L'Avare        
 
 
Créer une carte interactive en Flash

Objectif :

Partir d'une carte au format vectoriel bitmap (.bmp) et en faire une carte interactive où l'on pourra cliquer sur chaque élément dans la légende pour qu'il apparaisse progressivement sur la carte.

Logiciel : Adobe Flash CS3 Professional (ActionScript 2.0)

 1ère étape : Ajouter la carte et la décomposer

On crée un nouveau document (Flash File) de type ActionScript 2.0. On importe le bitmap initial dans la scène (Stage) et on définit la taille (Size) du document en fonction du contenu (Match Contents). Ce bitmap doit ensuite être séparé (Break Apart, Ctrl + B) : l'outil lasso (Lasso Tool) puis la baguette magique (Magic Wand) permettent de sélectionner les régions du bitmap contenant les mêmes couleurs (figurés de surfaces, linéaires ou ponctuels). Les éléments séparés doivent être au fur et à mesure transformés en calques (Layers) : lorsque l'ensemble des figurés identiques est sélectionné avec la baguette magique (Magic Wand), un clic droit permet de l'envoyer sur un nouveau calque (Distribute to Layers).

2ème étape : Transformer les calques (Layers) en clips (Movie Clip)

On sélectionne un par un les calques créés. A chaque fois, on se place dans le scénario (Timeline) à l'image 1 (Frame 1). On crée un symbole (Convert to Symbol, F8) de type clip (Type Movie Clip) ; il s'affiche dans la bibliothèque (Library). On fait de même pour les autres calques (Layers).

3ème étape : Transformer les clips (Movie Clip) pour qu'ils apparaissent progressivement

On va dans la bibliothèque et on effectue un double-clic sur le clip. Dans le scénario (Timeline), on sélectionne l'image 1 (Frame 1) et on crée à nouveau un symbole (Convert to Symbol, F8) de type clip (Type Movie Clip) ; il s'affiche dans la bibliothèque (Library). On effectue un clic droit dans l'image 30 (Frame 30) et on choisit d'insérer une image-clé (Insert Keyframe). N'importe où entre les images 1 et 30 on effectue un clic droit et on crée une animation interpolée (Create Motion Tween). On sélectionne l'image 1 et dans les propriétés du clip on définit une couleur (Color) Alpha 0%. Toujours avec ce clip, on crée un nouveau calque, on sélectionne l'image 1 et on presse F9 pour déclencher la fenêtre d'actions (Actions – Frame). On colle le code suivant :
stop();

On  sélectionne l'image 30 dans ce second calque et on choisit d'insérer une image-clé (Insert Keyframe) puis on presse F9 pour déclencher la fenêtre d'actions (Actions – Frame) et on colle le même code :

stop();

On revient dans la Scene 1. On sélectionne le clip contenant l'animation et on lui donne dans la fenêtre des propriétés un nom d'occurrence (Instance Name) en fonction de ce qu'il représente mais avec des caractères sans espaces.

4ème étape : Créer les boutons de commande invisibles

On revient dans la Scene 1. On crée un calque (Insert Layer). On se place dans le scénario (Timeline) à l'image 1 (Frame 1) et on crée un rectangle (Rectangle Tool) sur l'élément de la légende. On cache les autres calques (Show/Hide All Layers), on sélectionne le rectangle et on le convertit en symbole (Convert to Symbol, F8) de  type bouton (Type Button) ; il s'affiche dans la bibliothèque (Library). On le modifie dans la bibliothèque (Library) en double-cliquant dessus. Dans le scénario (Timeline) s'affichent 4 moments : l'état Haut (Up, quand la souris est en dehors du bouton), l’état Dessus (Over, lorsque la souris est déplacée à l'intérieur du bouton), l'état Abaissé (Down, lorsque la souris est cliquée dans le bouton) et l'état Cliqué (Hit, zone active du bouton qui réagit à l'événement de la souris). La zone réactive au clic que l'on souhaite créer doit être invisible, l'élément figurant déjà dans la légende. On se place donc dans le scénario (Timeline) et on glisse en maintenant le clic Haut (Up) vers Cliqué (Hit). On revient dans la Scene 1, on laisse les autres calques cachés, on sélectionne le rectangle (en bleu turquoise) que l'on vient de créer et dans la fenêtre des propriétés on lui donne un nom d'occurrence (Instance Name) en fonction de ce qu'il représente mais avec des caractères sans espaces. On fait de même pour les autres boutons (on peut passer par le copier-coller mais en n’oubliant pas de les renommer).

5ème étape : Créer les lignes de commande

On crée un calque (Insert Layer). On se place dans le scénario (Timeline) à l'image 1 (Frame 1) et on presse F9 pour déclencher la fenêtre d'actions (Actions – Frame). Il faut d'abord rendre invisibles les clips que l'on a créés. On colle donc le code suivant en écrivant successivement le nom d'occurrence des clips qui devront apparaître en cliquant dans la légende :
nom_d'occurrence_du_clip._visible = false;
Puis on revient à la ligne pour les commandes de bouton à cliquer et on entre le code suivant :
nom_d'occurrence_du_bouton.onPress = function()
{if (nom_d'occurrence_du_clip._visible == false)
{nom_d'occurrence_du_clip._visible = true;
nom_d'occurrence_du_clip.play();}
else {nom_d'occurrence_du_clip._visible = false;
nom_d'occurrence_du_clip.gotoAndStop(1);}}

On peut utilement créer un bouton « Tout afficher » en copiant le code suivant (ici avec deux clips) :
bouton_afficher.onPress = function()
{if (nom_d'occurrence_du_clip1._visible == false)
{nom_d'occurrence_du_clip1._visible = true;
nom_d'occurrence_du_clip1.play();}
else {nom_d'occurrence_du_clip1._visible = false;
nom_d'occurrence_du_clip1.gotoAndStop(1);}
if (nom_d'occurrence_du_clip2._visible == false)
{nom_d'occurrence_du_clip2._visible = true;
nom_d'occurrence_du_clip2.play();}
else {nom_d'occurrence_du_clip2._visible = false;
nom_d'occurrence_du_clip2.gotoAndStop(1);}}
Pour un bouton « Tout effacer », le principe revient à reprendre le codage de départ :
bouton_effacer.onPress = function()
{nom_d'occurrence_du_clip1._visible = false;
nom_d'occurrence_du_clip2._visible = false;} 

Conseils : mieux vaut en général nommer tous les éléments (calques, boutons, clips...) pour ne pas les mélanger. Pour travailler en sécurité, mieux vaut aussi toujours bloquer (Lock/Unlock All Layers) les calques avec lesquels on ne travaille pas. Il est aussi parfois nécessaire lorsqu'on travaille avec un calque de cacher les autres (Show/Hide All Layers).

 

Accueil