Embed Size (px)
Citation preview
MOTIONCOMPOSER
GU IDE D ’UT I L I SAT ION
A Q U A F A D A SGet the most o f your digital l i fe
M I B I / C a p O m e g a , R o n d P o i n t B e n j a m i n F r a n k l i n 3 4 9 6 0 M o n t p e l l i e r F r a n c e
w w w. a q u a f a d a s . c o m
Configura)on minimum 5
Introduc)on 6
Structure des Anima)ons 8
Document 8
Pre chargement 8
Composants 8
Diaposi)ves 9
Etats 9
Transi)ons 9
Effets 10
Ac)ons 11
Groupes 11
Liste d’Affichage 11
Construire sa première anima)on 13
Vue d’ensemble de l’interface 20
Fenêtre principale 21
Zone de travail 22
Aperçu 24
Liste des diaposi)ves 25
Inspecteur 29
Panel des paramètres 31
Liste des transi)ons 32
Liste des composants 34
Ges)onnaire d’images 36
Librairie d’images 37
Recadrer une image 38
U)lisa)on des effets 43
Rajouter un effet sur un élément qui vient d’être créé 43
Ajouter un effet manuellement 45
Appliquer un préréglage à l’effet 47
Personnaliser un effet 49
Publica)on 51
Publica)on actuelle 51
Insérer un publica)on à votre site web 51
Prise en considéra)on du code 51
Flash et HTML5 52
Restric)ons du HTML5 52
Configura)on minimumMac OS X 10.6.8 ou plus
1 GHz avec processeur Intel
1 Go de mémoire RAM
Flash® Player v10.0.1 ou supérieur
Une connexion internet est requise pour l'enregistrement de l'applicaKon et pour la publicaKon
MoKonComposer est compaKble sur Snow Leopard et Lion
Introduc)onMo)onComposer est un ouKl auteur pour la créaKon de contenu Web interacKf en Flash et
HTML5.
Les deux plus importantes foncKonnalités sont l’interface graphique intuiKve, et le système de
publicaKon.
L’interface est conçue pour être simple d’uKlisaKon tout en permeYant de créer de animaKons
riches. Mo)onComposer uKlise la structure de base des ouKls de créaKon de présentaKons
(comme Keynote ou PowerPoint), mais il introduit aussi de nouveaux concepts qui permeYent de
rendre possible la créaKon d’animaKons complexes. Le système de publicaKon repose sur deux
parKes différentes :
1. La parKe principale est la publicaKon Flash qui repose sur l’omniprésence de Flash
Player pour afficher l’animaKon dans une grande majorité des navigateurs Web.
2.La seconde parKe est l’HTML5 pour la publicaKon WebKit qui affiche les animaKons sur
les appareils iOS. Il est important de noter que tandis que la publicaKon uKlise les
foncKonnalités HTML5, il est étroitement lié à la mise en oeuvre du WebKit et CSS3 ne
sera visible que sur les navigateurs WebKit basé sur Safari ou Chrome. C’es pourquoi est
affiche dans la plupart des situaKons .
Vous trouverez plus d’informaKons et de vidéos didacKciels ici:
www.aquafadas.com/fr/moKoncomposer/videos
Structure des Anima)onsAfin de comprendre comment foncKonne réellement Mo)onComposer, il est important de
comprendre la structure d’une animaKon et les concepts clés qui font parKe de sa concepKon.
Document
Le Document décrit les informaKons de base de l’animaKon : sa taille, son fond, et un paramètre
du facteur temps qui vous permet d'accélérer ou ralenKr l’animaKon.
Tout cela peut être modifié à tout moment, mais vous devez toujours commencer par définir la
taille de votre document.
Les Documents sont sauvegardés sur le disque comme un package contenant la
structure de l’animaKon et elements uKlisés dan le document.
L’extension par défaut est .mcdoc.
Pre chargement
Un document peut définir un pré chargement qui sera affiché pendant que les éléments de
l’animaKons se charge lorsque l’animaKon est inséré dans une page web.
Composants
Un animaKon Mo)onComposer affiche des composantes graphiques.
Ces composants sont limités à quelques types simples (plusieurs types de composants seront
ajoutés dans les nouvelles version du logiciel), mai chaque type de composant a une large liste de
foncKonnalités qui peuvent être modifié dans les animaKons.
-‐ Rectangle: affiche une composante de base. Ces paramètres incluent des coins arrondis, une
bordure et un fond dégradé.
-‐ Image: affiche toutes images insérées dans la bibliothèque d’images.
-‐ Texte: affiche un champ de texte de base. Les polices et les styles sont limités pour des raisons
techniques.
-‐ Groupes: ils peuvent être créés dynamiquement à l’intérieur d’une diaposiKve et sont uKlisés
pour animer un ensemble de composants ou un seul.
Une animaKon Mo)onComposer affiche des composants graphiques. Ces composants sont limités
à quelques types simples (plus de types de composants seront probablement ajoutés dans les
versions futures), mais chaque type de composant dispose d'une grande liste de paramètres qui
peuvent être modifiés à travers l'animaKon:
Rectangle: affiche une composante forme de base. Ces paramètres incluent des coins arrondis,
une bordure et un fond dégradé.
Image: affiche toute image insérée dans la bibliothèque d'images.
Texte: affiche un champ de texte de base. Les polices et les styles sont limitées pour des raisons
techniques.
Groupes: les groupes peuvent être créés dynamiquement à l'intérieur d'une diaposiKve et sont
uKlisés pour animer un ensemble de composants, comme un seul
Diaposi)ves
Une animaKon est divisée en plusieurs diaposiKves (les animaKons simples peuvent contenir une
seule diaposiKve) qui affichent différents ensemble de composants. Par exemple, une animaKon
pourrait contenir une diaposiKve d'introducKon qui affiche uniquement le Ktre des animaKons,
une diaposiKve principale qui affiche plusieurs images, et une diaposiKve qui affiche une
conclusion ainsi qu’un bouton pour rejouer l’animaKon.
Vous pouvez éventuellement définir un arrière-‐plan différent pour chaque diaposiKve.
Transi)ons des diaposi)ves
Chaque diaposiKve affiche quelque chose de différents, il est possible de spécifier une simple
transiKon animée entre deux diaposiKves dans le but de faire le moins de changements brusques
possibles.
Les transiKons entre les diaposiKves sont complètement opKonnels.
Etats
Chaque diaposiKve est subdivisé en plusieurs états. Un état peut être vu comme une image-‐clé de
l'animaKon. Un Etat a une certaine durée et se compose d’une liste de transiKons qui décrivent
quels sont les changements qui font passer l'animaKon d'un état à l'autre et comment ils sont
animés.
Transi)ons
Les transiKons sont automaKquement crées par l’éditeur à chaque fois qu’un changement est fait
dans un état qui n’est pas l’état iniKal de la diaposiKve.
Une transiKon conKent toujours les informaKons suivantes décrivant les changements de
transiKons :
-‐ L’élément cible sur lequel la transiKon est appliquée
-‐ La propriété de l’élément qui est changé
-‐ L’ancienne et la nouvelle valeur de la propriété
Exemple : la rotaKon d’un rectangle va de 0° à 90°
Ensuite, des informaKons supplémentaires décrivent la manière dont la transiKon est animée :
-‐ Un délai et une durée. Il est important de remarquer que ce ne sont pas des valeurs : ils
ne sont pas mesurés en secondes mais plutôt comme un raKo de la durée de l’état.
-‐ Une foncKon d’easing ?
-‐ Exemple : La rotaKon commence à la moiKé de l’état (délai=0,5), et dure jusqu’à la fin
(durée=0.5) et est animée d’une manière élasKque
Ceci s’applique à la plupart des propriétés numériques
Cependant, les propriétés n’ayant pas de valeurs numériques, comme par exemple la propriété
aligner d’un texte ne peuvent être animées. Leurs transiKons peut avoir un délai mais pas une
durée ni d’effet d’easing puisque le changement ne peut être qu’instantané.
La source d’une image ou la police d’un texte ne peuvent être changé pendant une animaKon et
ne peuvent jamais être uKlisé dans une transiKon.
Finalement la propriété visible a un caractère spécial: elle peut foncKonner comme une propriété
non animée, mais vous pouvez aussi choisir d’y associer un effet et vous pourrez alors ensuite lui
donner une durée.
Effets
Les effets ne peuvent être appliqués que sur les transiKons visibles des textes et images. (pas
d’effets pour les rectangles)
Par conséquent,il y a quatre types d’effets possibles : appariKon et dispariKon, pour les images et
pour les textes.
Tous les effets foncKonnent sur le même principe: les éléments sont d’abord séparés en
différentes parKes: les images sont coupées dans une grille et les textes sont divisés en ligne, mots
ou caractères.
Les parKes sont ensuite animée dans un ordre spécifique, soit de droite à gauche, de gauche à
droite, au hasard etc. Pour chaque parKe, des transiKons sur l'abscisse ou l’ordonnée, une
rotaKon, l’échelle X, l'échelle Y, ou une opacité peuvent être créé.
Ce système basique permet de créer une large game d’effets élégants.
Vous ne serez pas obligé d’éditer toutes ces foncKons vous même puisqu’il existe une liste d’effets
prédéfinis.
Ac)ons
Les acKons vous permeYent d’introduire des mouvements complexes dans votre animaKon.
Elles peuvent êtres déclenchées de deux manières différentes:
-‐ Lorsque l’uKlisateur clique sur un élément
-‐ Lorsqu’une diaposiKve ou un état commence ou fini
Il y a deux principaux types d’acKons:
-‐ Les acKons qui contrôlent l’animaKon (lecture, pause, aller à une diaposiKve ou un état
spécifique)
-‐ Les acKons qui interagissent avec le navigateur ( aller à une url ou exécuter un javascript)
Par exemple, un type commun d’acKon serait de spécifier une acKon de pause sur le dernier état
de l’animaKon pour l’empêcher de remonter la boucle depuis le début (foncKonnement par
défaut) Une autre possibilité d’uKlisaKon commune est de meYre une image ouvrant une url
lorsque l’uKlisateur clique dessus.
Groupes
Les groupes peuvent être crée à n’importe quel moment de l’animaKon. Ils remplacent un groupe
d’éléments par un seul élément. Les groupes permeYent d’effectuer des rotaKons et des
changements d’échelle pour tous les éléments à la fois. Une fois qu’un groupe est créé, ses
éléments ne peuvent plus être changés tant qu’ils n’ont pas été séparés/ sorK du groupe. Les
transiKons automaKques sont créées dans l’état dans lequel le groupe commence et fini.
Liste d’Affichage
Chaque diaposiKve comprend une liste d’éléments. L’ordre de la liste correspond à l’ordre dans
lequel les éléments sont affichés. Le premier élément de la liste est celui de derrière, tandis que le
dernier est affiché devant tous les autres.
Dans la plupart des situaKons cela marche : l’ordre d’affichage reste le même pour tous les états
de la diaposiKve pour différentes raisons :
-‐ Un groupe est commencé. Dans ce cas les éléments groupés disparaissent et sont
remplacés par le groupe. Une nouvelle liste d’affichage est automaKquement créée pour
gérer cela.
-‐ Un groupe est terminé. Même chose mais le groupe disparait et les éléments sont remis
dans la liste.
-‐ L’uKlisateur fait une demande spécifique pour une liste d’affichage différente. Cela peut
servir à faire apparaître un élément par dessous un autre, et plus tard le remeYre au
dessus.
Construire sa première anima)onMaintenant que nous avons vu les concepts de base, voyons maintenant comment créer
facilement une première animaKon.
1) Commencez par ouvrir Mo)onComposer et sélecKonnez “Nouveau document
2) Définissez le document dans l’inspecteur. Changez sa largeur pour 300px, sa hauteur pour
250px, et donnez lui un fond noir.
On remarque que la Zone de travail et la vigneYe état se situant dans la liste des diaposiKves
deviennent automaKquement noires.
3) Ajouter un rectangle dans votre diaposiKve en cliquant sur le bouton rectangle dans la barre
d’ouKls.
Un rectangle apparait dans la zone de travail et s’affiche immédiatement dans la vigneYe d’état.
4) Glissez et Déposez le rectangle hors de la zone du document, vers la gauche
Nous ne voulons pas que le rectangle soit visible au début de l’animaKon, nous le placerons alors
en dehors de la zone visible.
5) Ajoutez un nouvel état en cliquant sur le bouton «+» situé à côté de la vigneYe d’état
Un nouvel état apparaît immédiatement dans la liste de diaposiKve et est sélecKonné
automaKquement.
6) Glissez et Déposez le rectangle au centre de la zone du document
CeYe acKon permeYra de faire bouger le rectangle vers le centre du document. On remarque que
dans l’inspecteur, la valeur de x pour le rectangle a changé et une nouvelle transiKon a été créée
dans la liste des transiKons.
7) Ajoutez un nouvel état
8) Réglez l’opacité du rectangle à 0 dans l’inspecteur
Cela rendra le rectangle transparent et une nouvelle transiKon reflétera ce changement dans la list
e des transiKons.
9) Pour prévisualiser votre document, cliquez sur le bouton aperçu se situant sous la zone de
travail
Vous devrez voir jouer l’aperçu. Le rectangle vient de la gauche puis s‘efface. L’animaKon sera lue
en boucle.
Si vous cliquez sur le bouton de prévisualisaKon HTML5 dans la barre d’ouKl, la même animaKon
apparaîtra et jouera dans une fenêtre safari.
Vue d’ensemble de l’interfaceAprès ceYe rapide vue d’ensemble de l’interface uKlisateur, nous allons maintenant vous donner
une explicaKon plus détaillée de ses opKons.
hYp://www.aquafadas.eu/documentaKon/MoKonComposer/quickstart_fr.pdf
Fenêtre principale
Voici une vue d’ensemble de la fenêtre d’édiKon de Mo)onComposer.
La barre d’ou)l possède trois groupes de boutons :
-‐ Celui de gauche vous permet d’ajouter des éléments sur la diaposiKve en cours
d’uKlisaKon. Seuls les rectangles, textes et images peuvent être ajoutés de ceYe manière,
les groupes ne peuvent être créés que via le menu fichier, éditer ou en uKlisant le raccourci
+G.
-‐ Le deuxième groupes conKent le bouton d’aperçu HTML5 ( Pour une quesKon de
compaKbilité, l’animaKon sera toujours ouverte sous safari). Le second bouton démarre la
publicaKon.
-‐ Le bouton (toggle ?) dans le groupe de droite commande le panneau de droite, l’autre
bouton permet d’afficher le gesKonnaire d’image.
Le contrôle de la prévisualisaKon permet de lancer un aperçu du document dans la zone principale
d’édiKon.
Le panneau à droite de la fenêtre est divisé en plusieurs parKes. Selon Le bouton «toggle» du haut,
il affichera soit la bibliothèque d’image, soit le panneau d’édiKon. Le panneau d’édiKon est lui
même divisé en plusieurs parKes: l’inspecteur, la liste des transiKons, et la liste d’éléments.
Zone de travail
La zone de travail affiche toujours l’état en cours d’uKlisaKon du document.
Le zoom peut être sélecKonné en bas à gauche, vous avez aussi la possibilité de le régler en
uKlisant la commande + (plus) ou commande -‐ (moins) comme raccourci.
Vous pouvez faire défiler en uKlisant la barre de défilement ou en appuyant sur la barre d’espace
tout en faisant glisser l’aperçu avec la souris.
On peut choisir d’afficher ou cacher les règles et guides dans les préférences.
Vous pouvez déplacer, redimensionner ou faire pivoter l’élément dans ceYe fenêtre, répercutant
ainsi les changements sur la sélecKon et sur les valeurs dans l’inspecteur.
Pour redimensionner un élément, faite glisser un des points de l’élément sélecKonné. Quelques
touches peuvent être uKlisées:
-‐ Appuyer sur shi~ tout en redimensionnant mainKendra le raKo d’aspect (cela fera le
contraire pour les groupes et images pour lesquels le raKo d’aspect et mis par défaut)
-‐ Appuyer sur alt tout en redimensionnant mainKendra la posiKon centrale, et
redimensionnera l’élément d’une manière symétrique.
Vous pouvez faire pivoter un élément en appuyant sur la touche «bas» et en déplaçant l’un des
points de l’élément. Il est aussi possible de changer le centre de rotaKon de votre élément en
faisant glisser le point central.
De plus vous pouvez éditer le contenu d’un texte en double cliquant dessus.
Aperçu
Dès que vous cliquez sur le bouton de lancement/démarrage de l’aperçu, la fenêtre d’édiKon
principale est remplacée par l’aperçu du document.
Vous pouvez choisir différents type d’aperçu :
-‐ L’aperçu document est l’aperçu exact du document, qui montre ce à quoi la publicaKon
Flash ressemblera. C’est l’unique mode pendant lequel les acKons de navigaKon sont
possible.
-‐ L’aperçu diaposiKves affiche uniquement la diaposiKve en cours d’uKlisaKon.
-‐ L’aperçu Etat est le plus intéressant. Il affichera uniquement l’état en cours d’uKlisaKon
mais il vous permeYra d’accéder au panneau de droite vous permeYant alors de voir en
direct les changements que vous ferez. Ce qui est parKculièrement uKle lors de la mise en
place des effets et transiKons.
-‐ L’aperçu TransiKon de diaposiKve peut être uKlisée pour configurer la transiKon de
diaposiKve en cours
-‐ L’aperçu de pré-‐chargement peut être uKlisé pour configurer le pré chargement de l’icône
de chargement.
La barre de contrôle du lecteur vous permet de contrôler le lecteur (lecture, pause, aller à. Selon le
mode de prévisualisaKon, certaines commandes sont désacKvées.
Vous pouvez sorKr de la fenêtre aperçu en cliquant n’importe ou dans la zone noire ou en cliquant
sur le bouton stop dans la barre de contrôle du lecteur.
Liste des diaposi)ves
La liste de diaposiKve vous donne une vue d’ensemble de la structure du document. Elle sert à
naviguer à travers l’animaKon et l’état sélecKonné en bleu est l’état en cours d’uKlisaKon, affiché
dans la fenêtre principale d’édiKon.
Le bouton sur la gauche vous permet d’ajouter, déplacer ou d’enlever des diaposiKves dans la
liste. Gardez à l’esprit qu’un document doit toujours avoir au moins une diaposiKve, c’est
pourquoi une diaposiKve seule ne peut être enlevée.
Le bouton plus+ sur l’état en cours vous permet d’insérer un nouvel état dans la liste. Vous
uKliserez beaucoup ce bouton lorsque vous construirez une animaKon: placez l’élément dans
l’état en cours, ensuite cliquez sur l’état suivant, faites les changements puis cliquez sur état
suivant, etc..
Si vous choisissez d’enlever un état, toutes ses transiKons seront enlevée, ce qui impactera tous
les états suivant de l’animaKon.
La durée de chaque état peut être modifié en cliquant dessus et en changeant la valeur.
Pour finir, vous pouvez ajouter ou supprimer des transiKons entre les diaposiKves dans la liste, de
la même manière que pour l’onglet transiKons de diaposiKves dans l’inspecteur.
Inspecteur
L’inspecteur vous permet de modifier les paramètres de tout ce qui est à l’intérieur de votre
document. L’onglet à boutons défini ce que vous êtes en train d’éditer.
Le contenu de l’onglet diaposiKve, transiKon de diaposiKve et état dépendra de l'élément actu
ellement sélecKonné dans la liste de diaposiKve.
Le contenu des onglets élément et effet de l'élément actuellement sélecKonné dans la zone de
travail. Si rien n’est sélecKonné, rien de s’affichera dans ces onglets.
La plus grande parKe de l’inspecteur conKendra une autre secKon de paramétrage dépendant du
type d’objet édité. Tous les changements sont immédiats.
L’onglet élément est le plus uKlisé lors de la construcKon d’une animaKon. Il affiche les propriétés
actuelle des éléments sélecKonnés pour l’état en cours d’uKlisaKon.
Chaque changement effectué est immédiatement visible dans la zone principale d’édiKon, et, si
l’état en cours d’uKlisaKon n’est pas l’état iniKal, créez automaKquement ou meYez à jour une
transiKon, dans la fenêtre des transiKons.
Le bouton de préréglages sur la droite est uKlisé pour ouvrir le panneau des paramètres
prédéfinis.
Panel des paramètres
La fenêtre de préréglage vous permet de gérer et appliquer les préréglage des type d’objet
actuellement affiché dans l’inspecteur.
Les préréglages applicaKon sont livrés avec le logiciel alors que les préréglages uKlisateur seront
vide lorsque vous lancerez le logiciel pour la première fois.
Les préréglages vous permeYent de sauvegarder un ensemble de propriétés pour un type d’objet
donné dans le but de les appliquer plus tard dans le document en cours d’uKlisaKon ou un suivant.
Ils sont principalement uKlisés pour gérer les paramètres des effets pouvant être plutôt
complexes. Cependant si vous vous retrouvez à définir toujours les mêmes types de dégradés
complexes, les préréglages vous permeYront de les enregistrer et de les uKliser à chaque fois que
vous en avez envie.
Appliquer un préréglage se fait aussi simplement que quelques modificaKons dans l’inspecteur. Ce
qui signifie que si vous appliquez un préréglage sur un élément alors que vous n’êtes pas dans
l’état iniKal, les transiKons seront créées.
Les préréglages sont ordonnées dans une arborescence qui peut être éditée en faisant un glisser-‐
déposer (si le préréglage uKlisateur est sélecKonné)
Notons qu’un double clic sur un préréglages l’appliquera sans fermer le panneau, contrairement
au bouton «appliquer».
Liste des transi)ons
Tandis que vous pouvez parfaitement construire une animaKon sans rien éditer, la modificaKon de
transiKon vous permeYra de rajouter de la vie et du rythme à votre animaKon. Notez s’il vous plait
que lors de la mise au point et l’effet d’easing des transiKons, il est fortement recommandé de
lancer le mode de prévisualisaKon Etat qui facilite les choses.
La liste des transiKons est composée de deux parKes principales.
La parKe du bas est la liste en elle même et conKent un bloc de transiKon par transiKon disponible
pour l’état en cours d’uKlisaKon de l’élément actuellement sélecKonné.
Les informaKons de bases sont affichées pour chaque transiKons. Certaines opKons d’édiKon sont
disponible par roulement lorsque c’est possible:
-‐ Le curseur Kming vous permet de gérer le Kming des transiKons sur une chronologie
basique. La première vigneYe défini le point de départ de la transiKon (le délai), la seconde
défini son point d’arrivée. L’espace entre les deux vigneYes défini la durée, et placer les
deux vigneYes au même endroit rendra la transiKon instantanée. La durée exacte dépend
de la durée de l’état.
-‐ La valeur suivante, qui correspond à la valeur à la fin de l’état peut être ajustée ici, de la
même manière que dans l’inspecteur. Notez que si la valeur de début et de fin sont les
mêmes, Mo)onComposer ne les supprimera pas mais le signalera comme inuKle.
-‐ Le bouton easing ouvre le sélecteur d’effet d’easing et vous permet de définir le type
d’easing que vous voulez appliquer à la transiKon
-‐ Le bouton de suppression supprimera la transiKon et l’élément retrouvera sa valeur
première. Il peut être uKle pour supprimer des transiKons ajoutées par erreur.
-‐ Le bouton d’iniKalisaKon est plus dur à comprendre mais peut être d’une grande aide. Il
prend la nouvelle valeur de la transiKon et l’appliquer à l’état iniKal de l’animaKon,
supprimant toutes les transiKons similaires du déroulement de l’animaKon. Cela peut être
trés uKle lorsque vous vous rendez compte que vous voudriez que le changement effectué
sur le second état devienne la valeur réelle de départ de l’élément.
-‐ Le sélecteur de rotaKon est affiché uniquement pour les propriétés de rotaKon et vous
permet de définir dans quelle direcKon sera faite la rotaKon et combien de tour seront fait.
-‐ Le sélecteur d’effet n’est uKlisé que pour les transiKons visible, permeYant de paramètrer
un effet d’appariKon ou de dispariKon. Il peut être effectué dans l’onglet effet de
l’inspecteur.
La seconde parKe du panneau de transiKon, en haut, est caché par défaut.
Il permet deux ac)ons spécifiques :
-‐ Trier et filtrer le contenu de la fenêtre de transiKon
-‐ Modifier toutes les transiKons affichées une fois
Par exemple vous pouvez l’uKliser pour supprimer toutes les transiKons d’un élément donné ou
paramétrer l’easing de tous les X et Y d’un paquet d’élément, etc.
Cela peut sembler inuKle à première vue, mais cela peut être très praKque une fois que vous y
êtes habitués.
Liste des composants
Ce panneau conKent la liste des éléments disponible dans l’état en cours d’uKlisaKon.
Sa première uKlisaKon est de faciliter la sélecKon d’élément. Il vous permet aussi de verrouiller ou
cacher les éléments dans la principale fenêtre d’édiKon. Par exemple vous pouvez verrouiller une
image desKnée à être uKlisée comme image de fond dans la diaposiKve, de ceYe manière, vous ne
la déplacerez pas par erreur pendant l’édiKon de la diaposiKve.
Ensuite, l’opKon la plus importante est la case se situant en haut à gauche de la fenêtre. Si l’état
en cours est sélecKonné, la case ne sera pas visible. Vous êtes libre de réordonner les éléments
dans la liste et tous les changement affecteront les états suivants.
Si vous sélecKonner n’importe quel autre état, la case sera décochée, ce qui signifie qu’il n’y a pas
de liste d’affichage spécifique pour l’état en cours. Dans ce cas là, la liste est verrouillée et ne peut
être réordonnée.
Si vous cochez la case, une nouvelle liste d’affichage sera créée dans l’état en cours. La liste est
ensuite déverrouillée et tous les changements affecteront les états suivant.
D’abord, vous n’avez pas à vous inquiéter à propos de la liste d’affichage, réordonner à chaque
fois les éléments dans l’état iniKal devrait suffire. Cependant, comprendre ce mécanisme vous
permeYra de construire des animaKons plus complexe.
Voici un exemple simple de de la manière dont ceYe opKon peut être uKlisée.
CeYe diaposiKve est uniquement composée de trois états et de deux rectangles. Sur le deuxième
états, il apparaitra en allant vers la droite. Dans le troisième état, la liste d’affichage est
déverrouillée et l’ordre a été changé : le rectangle mauve peut désormais apparaître devant le
rectangle orange.
Ges)onnaire d’imagesDans la plupart des cas, les rectangles et les textes ne suffiront pas et vous voudrez rajouter des
images à votre document.
Rajouter des images provenant d’une source externe.
Rajouter des images à un document peut être fait avec un simple glisser-‐déposer. Vous pouvez
prendre toute les images dans votre Finder ou votre bureau et les déposer dans la principale
fenêtre d’édiKon puis l’image apparaîtra dans votre document.
Mo)onComposer vous donne aussi accès à un gesKonnaire d’image qui permet d’aYeindre plus
facilement les images contenues dans son ordinateur. Le gesKonnaire d’image s’ouvre en cliquant
sur le bouton en haut à droite de la barre d’ouKl.
Librairie d’images
Quand vous ajoutez une image provenant d’une source extérieure par un glisser-‐déposer (soit le
gesKonnaire d’image soit le Finder), l’image est importée dans la bibliothèque d’image du
document.
La bibliothèque d’image garde des traces de toutes les images importées dans le document. Elle
indique combien de fois a été uKlisée chaque image. Par exemple, si le compteur de l’image est a
0, l’image est disponible mais n’est uKlisée dans aucune diaposiKves et peut être alors supprimée
sans modifier l’animaKon.
Il est important de comprendre que si vous voulez qu’une image s’affichent plusieurs fois dans un
document, vous n’avez besoin de l’importer qu’une seule fois dans le document pour ensuite la
faire glisser-‐déposer autant de fois que vous le voulez depuis la bibliothèque jusqu’au document.
Si vous ne le faites pas ainsi et faites glisser et déposer plusieurs fois en provenance du
gesKonnaire d’image, Mo)onComposer importera l’image autant de fois dans le document. Cela
finira par augmenter la taille de la publicaKon et le document sera plus difficile à gérer lorsque
vous voudrez remplacer l’image.
La bibliothèque de média vous permeYra aussi de recadrer ou remplacer l’une des images dans la
bibliothèque. Cela affectera toutes les images du document.
Cela peut être parKculièrement uKle lorsque vous voulez éditer l’un des modèles de document
fourni avec le logiciel: vous pouvez remplacer chaque éléments dans la bibliothèque sans avoir à
toucher les images en cours d’uKlisaKon. Notez que vous pouvez aussi remplacer l’image par une
autre image en faisant un glisser-‐déposer d’une image provenant d’une source externe, dans la
vigneYe image de la bibliothèque de média.
Recadrer une image
Mo)onComposer vous permet de recadrer et de faire pivoter n’importe quelle image présente
dans la bibliothèque d’image. Cela aura le même effet que de remplacer une image et affectera
toutes les éléments images du document.
Ges)on de l'audio
MotionComposer permet d'ajouter du son aux animations que vous avez créé. MotionComposer supporte seulement les fichiers MP3, tout autre type de fichier son ne fonctionnera pas avec l'application.
Bibliothèque de sonTout comme les images, les sons peuvent être ajoutés au document en utilisant le gestionnaire media, ou en les prenant directement à partir du Finder. Ils peuvent être déposés dans la bibliothèque de son.Cela fonctionne de la même façon que la bibliothèque d'images, excepté qu'il n'est pas possible de faire glisser un son de la bibliothèque vers l'animation. La vignette de droite permet d'écouter le son en cliquant sur le bouton lecture.De plus, vous avez la possibilité de choisir d'intégrer le fichier son sur votre fichier swf (cela concerne seulement les documents flash). Par défaut, MotionComposer intégrera les petits fichiers son dans le document swf, avec toutes les images, et gardera les fichiers son plus importants en dehors du swf. Dans le cas où vous voudriez tous les éléments de l'animation intégrés dans le swf, vous pouvez choisir d'intégrer tous les sons, mais le document flash final sera beaucoup plus lourd.
Lire les sons dans l'animation
Dans MotionComposer, les sons sont contrôlés par les actions contenues dans le document.Les actions peuvent être déclenchées à différents moments:- Lorsque l'utilisateur clique sur un élément-Lorsqu'une diapositive commence ou finit-Lorsqu'un état commence ou finit
Le son s'ajoute au document en utilisant l'inspecteur et en sélectionnant l'onglet approprié (Diapositive, état, ou composant lorsqu'un composant est sélectionné).
Il y a différents types d'actions qui permettent de lire un son spécifique, le mettre en pause, contrôler le volume global et le stopper. Cependant, un même son ne peut être lu simultanément, car chaque lancement d'actions, le redemarrera depuis le début.
Dans cet exemple, nous avons ajouté 3 actions différentes à la diapositive:-Au début, la lecture du son débutera.-A la fin, le son sera en pause, puis l'animation sera en pause.
Composants du contrôle du sonAfin de permettre à l'utilisateur de contrôler le son, vous pouvez aussi ajouter trois différents types de contrôle dans votre animation:-Boutons muet pour appliquer ou annuler la fonction muet de tous les sons dans l'animation-Composants du contrôle du volume, utilisés pour configurer le volume global-Boutons basculer utilisés pour lire ou mettre en pause un son spécifique. Pour ceux-ci vous devez ouvrir l'inspecteur et déterminer quelle fonction sonore le bouton contrôle.
Limites HTML5Alors que le support audio Flash Player est très complet, le support audio HTML5 reste toujours encore à developper. Ainsi, le support audio varie considérablement selon les navigateurs, notamment avec les navigateurs mobiles.
Voici quelques limites : -‐ iOS 5.0 ne peut pas jouer deux sons en même temps-‐ iOS ne permet pas le contrôle du volume sonore-‐ sur plusieurs versions d’iOS et Android, il n’est pas possible de jouer un son
automaKquement : il doit être déclenché par l’uKlisateur-‐ certaines versions d’Android n’ont pas les codecs requis pour jouer un son.
Qu’est ce que ça change pour vous ?
Vous devez choisir votre public cible.Si vous voulez cibler principalement les ordinateurs (de bureau), n’hésitez pas à uKliser tout ce que MC vous permet de faire. Si vous ciblez un public plus large, incluant les uKlisateurs mobiles, il faudrait mieux vous limiter :
-‐ contrôler seulement le son grâce au click, en évitant d’uKliser l’acKon commencer ou finir dans la diaposiKve et l’état
-‐ éviter d’uKliser différents sons dans la même animaKon-‐ ne pas afficher le contrôle du volume sonore, se limiter aux boutons marche/arrêt-‐ ne pas essayer de synchroniser le son avec l’animaKon : depuis que les sons peuvent
seulement être joués en cliquant, pour la plupart des navigateurs mobiles, ils ne peuvent être préchargés. Donc, vous aurez toujours une pause entre le moment où vous cliquerez sur marche et le moment où le son commence.
Par exemple, si vous voulez que votre bannière ait un fond sonore dans votre animaKon, vous pouvez essayer de créer un écran de démarrage. Dans votre première diaposiKve, meYez seulement un bouton marche (une image ou un texte) et une acKon de pause. Lorsque l’on clique sur ce bouton, une première acKon audio va lire la bande sonore et une autre va amener le lecteur à la seconde diaposiKve où l’animaKon se trouve. Laissez un bouton son marche/arrêt dans votre animaKon pour que l’uKlisateur puisse arrêter le son quand il veut, au lieu d’uKliser le contrôle du volume étant donné que cela ne foncKonne pas sur iOS.
Le support audio va très vite s’améliorer pour les futurs supports, en espérant que les nouvelles technologies améliorent ces limites.
Pour plus d’informaKon DocumentaKon Apple: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10
Autres ressources :http://stackoverflow.com/questions/12517000/no-sound-on-ios-6-web-audio-apihttp://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5http://www.gamasutra.com/blogs/ChrisKhoo/20120618/172573/The_HTML5_audio_troubleshooting_guide.phphttp://phoboslab.org/log/2011/03/the-state-of-html5-audio
U)lisa)on des effetsL’une des opKons importante du logiciel est la possibilité d’ajouter des effets sur les images et les
textes.
Les effets sont toujours associés à une transiKon visible ou à une image ou un texte. Cela signifie
que l’effet sera toujours une appariKon ou dispariKon de l’un de ces éléments. En réalité vous avez
plusieurs moyen d’ajouter un effet dans un document.
Rajouter un effet sur un élément qui vient d’être créé
Quand vous ajoutez une image ou un texte dans le document, une fenêtre va apparaître, vous
permeYant d’y appliquer un effet d’appariKon.
Dans l’état iniKal, la fenêtre vous demandera si vous voulez que l’image apparaisse avec un effet
dans l’état suivant. Si vous cliquez sur ok, cela définira automaKquement la propriété visible de
votre élément à faux dans l’état iniKal, puis rendez vous dans le deuxième état, créez une
transiKon définissant la propriété visible vraie et assignez lui un effet par défaut.
Dans les autres états, la situaKon est un peu plus compliquée. La première chose à savoir
est que lorsque la popup est affichée, tous les changements que vous effectuez sur l’élément
affectera son état iniKal et non pas celui en cours d’uKlisaKon.
Cela vous permet de définir l’état iniKal d’un élément qui vient d’etre ajouté sans avoir à
retourner manuellement jusqu’à l’état iniKal. Ensuite la popup vous permet de cacher l’élément
sur l’état iniKal et de ne le faire apparaître que dans l’état en cours. C’est très uKle parce que la
plupart du temps, quand vous ajoutez un élément dans un état qui n’est pas l’état iniKal, cela
signifie généralement que vous ne voulez pas que l’élément soit visible avant.
Finalement si vous choisissez de cacher l’élément dans les états précédents, vous pouvez
demander à Mo)onComposer d’appliquer un effet dans les transiKons créées.
Ces pop-‐ups peuvent sembler inKmidantes au départ mais vous pouvez les éviter en cliquant sur
annuler ou en cliquant dans la fenêtre d’édiKon.. Cependant vous finirez par les trouver très
praKque dans le long terme.
Ajouter un effet manuellement
Si vous voulez appliquer un effet de dispariKon ou d’appariKon sur un élément aprés avoir rejeté/
fait parKr la pop-‐up, vous avez toujours la possibilité de le faire manuellement.
La seule chose que vous avez à faire est de faire changer les propriétés visibles de l’élément à
certain points de l’animaKon puis d’associer un effet à la transiKon créée
Vous pouvez aussi choisir de laissez Mo)onComposer créer la transiKon pour vous en ajoutant
l’effet uKlisant l’onglet effet de l’inspecteur.
A la fin cela finira toujours pas créer une transiKon visible, dans la liste des transiKons.
Appliquer un préréglage à l’effet
Après avoir ajouter un effet, vous voudrez la plupart du temps changez son animaKon. La manière
la plus facile de le faire est d’uKliser l’un des préréglages intégrés.
Voici ce que vous devez faire après avoir appliqué un effet à un élément.
-‐ Lancez le mode de prévisualisaKon d’état.
-‐ Ouvrez l’onglet effet dans l’inspecteur (Mo)onComposer le fait normalement
automaKquement), et cliquez sur le bouton des préréglages.
-‐ Double cliquez sur n’importe quel élément de la liste et observez de quelle manière la
prévisualisaKon directe est affectée de votre état.
IMPORTANT : Puisque les effets sont associés à une transiKon, leur Kming est traitée
exactement de la même manière : leur délai et durée peuvent être ajustée dans la fenêtre de
transiKon , mais leur durée réelle dépendra toujours de la durée de l’état.
Vous aurez alors besoin d’ajouter la durée de l’état en cours pour que l’effet soit bien. (1 ou 2
secondes est une bonne valeur pour la plupart des préréglages)
Personnaliser un effet
Après avoir créer un effet et être passé par les préréglages, vous pourriez avoir envie de les
personnaliser ou même de créer un effet totalement nouveau en repartant de zéro.
Les explicaKons suivantes risquent d’être un peu difficile à comprendre, mais le changements des
valeurs tout en gardant la fenêtre de prévisualisaKon d’état ouverte peut vous aider à démarrer.
D’abord, vous pouvez définir la division de l’élément. Un élément de texte peut être coupé en
paragraphe, lignes, mots ou caractère, tandis qu’une élément image sera toujours divisé en grille
Pour chaque élément créée de ceYe manière vous définirez son origine (la valeur par défaut est
(0.5,0.5) qui se situe au centre.
Le réglage de la direcKon défini l’ordre dans lequel les éléments seront animés, cela peut aller de
gauche à droite, dans l’autre sens ou de manière aléatoire etc..
La propriété de temps défini la durée et le délai de l’animaKon de chaque élément. Pour chaque
élément, la durée de l’animaKon sera : d=temps*durée de l’effet
Si vous le régler sur 0, chaque élément s’animera sur la durée totale de l’effet, et les effets
commenceront et finiront en même temps. Si vous le réglez sur 1, toute les animaKons seront
instantanées.
Voici une chronologie simple d’un effet avec un Kming de 0.5 sur le texte «Ceci est un texte» divisé
en mot, animé de gauche à droite.
Chaque éléments sera animé sur la moiKé de la durée de l’effet et le délai entre chaque animaKon
du mot est le même (1/6 du total de la durée)
Finalement, le paramètre d’easing permet de changer la manière dont est calculée le délai entre
chaque animaKon.
Voici le même exemple avec un effet circulaire d’ease out :
La durée est la même alors que le délai non.
Une fois que le Kming de chaque élément est défini, vous pouvez définir la manière dont sera
animé chaque élément.
CeYe parKe est basée sur le même principe que les transiKons. Pour chacune des propriétés
suivantes: x, y, échelle X, échelle Y, rotaKon, opacité, vous pouvez définir une transiKon.
Vous devez faire aYenKon à si vous êtes en train d’éditer la valeur précédente ou suivante.
Si l’effet est un effet d’appariKon vous définirez la valeur de départ de chaque propriété, la valeur
de fin correspondant à un texte ou à une image est affiché normalement, vous pouvez définir une
transiKon.
Notez que en plus de définir une valeur de fin (ou de début), vous pouvez définir un classement
aléatoire qui l’affectera.
Publica)onLa publicaKon est la dernière étape du processus de créaKon, vous pouvez la déclencher en
cliquant sur le bouton de publicaKon dans la barre d’ouKl du logiciel.
Publica)on actuelle
La première étape consiste à choisir entre une publicaKon en local ou sur le net. Le même fichier
sera produit dans les deux cas. La publicaKon locale est vraiment directe et vous laisse choisir le
dossier ou tous les fichiers de publicaKon seront rangés, tandis que la publicaKon en ligne vous
demandera d’abord de définir un serveur FTP avant de choisir un dossier de la liste.
Votre choix dépendra uniquement de votre flux de publicaKon, faire une publicaKon locale et la
télécharger manuellement avec un FTP client aura le même résultat que de faire une publicaKon
en ligne via Mo)onComposer.
Insérer un publica)on à votre site web
Une fois la bannière publiée, Mo)onComposer ouvrira le fichier mc.html dans le dossier de
publicaKon. CeYe page vous montrera l’animaKon jouer et vous proposera de copier le code html.
Une fois le dossier de publicaKon téléchargé, insérer la bannière dans votre page est aussi simple
que de copier le code HTML et de le coller dans votre page.
Note s’il vous plait que le code HTML dépend de l’emplacement du dossier mc.html quand vous
l’ouvrez, le code ne foncKonnera pas si le fichier est déplacé ou renommé par la suite.
C’est pourquoi, après la publicaKon locale, vous ne devrez ouvrir que bz.html pour copier le code
après qu’il ait été téléchargé.
Prise en considéra)on du code
Mo)onComposer est basé sur iframe. Quand vous insérez votre bannière dans votre page, vous
devrez insérer en réalité une iframe pointant vers le dossier mcFrame.html placé dans le dossier
de publicaKon. La publicaKon a été construite de ceYe manière dans le but d’éviter autant que
possible toutes interférences (JavaScript et CSS) avec la page hôte.
Si vous reconnaissez l’HTML et le JavaScript, vous pouvez aussi choisir de ne copier que le code
dont vous avez besoin depuis mcFrame.html et l’insérer dans votre page, mais ceci dépasse le
périmètre de ce document.
Flash et HTML5
Le code de publicaKon conKent du JavaScript uKlisant la bibliothèque swfObject qui détecte si le
lecteur Flash est disponible. Si celui-‐ci est disponible, la version flash de l’animaKon sera affichée.
Dans le cas contraire, Mo)onComposer vérifiera si le navigateur est équipé du WebKit (Safari ou
Chrome) et affichera la version HTML5;
IMPORTANT: l’animaKon HTML5 produite par Mo)onComposer ne foncKonnera que dans les
navigateurs sous WebKit. Il a été développé à la base pour compenser les manques de Flash Player
sur les ouKls iOS, et s’appuie fortement sur l'implémentaKon CSS3 WebKit. Flash est préféré dans
toutes les autres situaKons
Restric)ons du HTML5
Dans le but d’éviter les problème de performance et de compaKbilité, certaines des opKons
disponible en publicaKon flash ne le sont pas dans la version HTML5.
Cela concerne en parKculier les filtres (ombre, lumière, flou) pouvant être apposés aux éléments.
