-
Je m'appelle Lucas.
Je suis ingénieur
-
pour Google Web Designer.
-
Cette vidéo complète
celles expliquant comment créer
-
des documents au format "responsive"
à l'aide de réglages multimédias.
-
Elle montre comment combiner
des animations et des réglages multimédias.
-
Nous commencerons
par un document simple
-
utilisant une mise en page verticale
lorsque la fenêtre d'affichage est étroite
-
et une mise en page horizontale
lorsque la fenêtre d'affichage est plus large.
-
Je vais maintenant
développer ce document
-
de sorte que s'il utilise
une mise en page horizontale
-
et s'il est suffisamment haut,
il inclue deux images (et non une seule)
-
qui sont initialement superposées,
-
puis séparées par une animation.
-
Web Designer fait appel
aux images clés CSS3
-
pour représenter les animations.
-
Je peux procéder à un encodage
au moyen des réglages multimédias.
-
Pour commencer,
j'accède aux réglages principaux,
-
puis je copie et colle cette image.
-
Ensuite, à partir d'une nouvelle image,
je pointe vers un autre élément.
-
Pour ce faire, je modifie directement
le chemin d'accès à l'élément.
-
Par ailleurs, je paramètre l'image
pour qu'elle soit masquée par défaut.
-
Je reviens ensuite
aux réglages multimédias.
-
J'ajoute un point d'arrêt en hauteur.
-
Vous constatez que je modifie
la plage de hauteurs la plus large.
-
J'ajoute maintenant une image clé
-
pour chacune de ces deux images.
-
Je les déplace verticalement
à l'aide de l'outil de translation,
-
comme ceci.
-
Enfin, je définis la visibilité
de la deuxième image
-
pour que celle-ci
soit de nouveau visible.
-
J'utilise à présent la barre de lecture
pour prévisualiser l'animation.
-
Cette animation est responsive puisque
-
les deux images restent centrées même si
-
la taille de la fenêtre d'affichage change.
-
Toutefois, si je remplace
ce réglage multimédia par un autre,
-
l'animation disparaît.
-
Comme vous le voyez dans la timeline,
toutes les pistes sont vides,
-
sauf si j'utilise le réglage multimédia
-
inférieur droit.
-
Imaginons maintenant que
je veuille utiliser une animation par défaut
-
où cette image apparaît en fondu
avec une valeur d'opacité passant de 0 à 1.
-
Pour cela, j'accède aux réglages principaux
-
afin d'insérer une image clé.
-
Je définis l'opacité de base sur 0.
-
Au niveau de l'image clé,
je définis l'opacité sur 1.
-
Si j'utilise les réglages principaux,
vous constatez qu'elle apparaît en fondu.
-
Si je reviens aux réglages multimédias,
-
vous voyez que pour chacun d'eux,
-
j'obtiens la même animation en fondu.
-
Une première image,
-
une deuxième
-
et une troisième.
-
La seule exception est
le réglage multimédia inférieur droit,
-
pour lequel j'ai défini
une animation de remplacement.
-
La seule chose à corriger
-
est l'opacité de base de la première image,
-
que j'ai redéfinie sur 0.
-
Il me suffit de rétablir la valeur 1.
-
Vous constatez à présent
que l'animation est restaurée.
-
Vous pouvez toujours savoir si
une animation remplace le réglage multimédia,
-
car, dans ce cas, son libellé
-
est mis en surbrillance dans la timeline.
-
Si vous cliquez sur ce libellé,
une fenêtre pop-up s'affiche
-
pour vous permettre de
supprimer l'animation de remplacement.
-
Vous pouvez ainsi n'utiliser
que l'animation de base s'il en existe une.
-
Ainsi se termine la vidéo
expliquant comment combiner des animations
-
et des réglages multimédias.
-
Merci de votre attention.
