Timeline Keyframe Scaling - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  4.2K views 28 likes 0 dislikes   18 Jun 2018
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
hi my name is Natalie I'm a software
Hola, me llamo Natalie
engineer on the Google web designer team
y soy ingeniera de software de Google Web Designer.
and in this demo I'm going to show you a new feature that's now available in the
En este vídeo, explicaré una función del modo avanzado de la línea de tiempo
advanced mode timeline which lets you change the duration of an animation that you've already created so in this
con la que podrás cambiar la duración de animaciones que ya tengas.
example file i have several layers that fade in sequentially looks it looks like
En este ejemplo, tenemos varias capas que se funden secuencialmente.
this through pretty simple so right now
Tiene este aspecto si lo reproducimos.
this animation takes about a second and
Muy sencillo. Ahora, esta animación dura un segundo y medio.
a half and so let's say that I'd like for it to take more like three or four
Supongamos que quiero que dure tres o cuatro segundos
seconds or maybe I'd like to compress it down and have the animation be done after five hundred milliseconds this is
o que quiero comprimirla para que dure 500 milisegundos.
now pretty easy to do right in the UI
Ahora es muy fácil de hacer desde la interfaz.
you select your keyframes you hold down shift on your keyboard and click a
Selecciona los fotogramas clave, mantén pulsado Mayús en el teclado
keyframe on the right end of the
haz clic en el fotograma del extremo derecho
selection and drag to set the new length
y arrástralo hasta la duración que quieras.
so I can stretch it and I can compress it and say I drop it right around there and you can do this for any selection of keyframes not only entire layers so for
Puedes estirarlo, comprimirlo y soltarlo, por ejemplo, aquí. Puedes hacerlo con un grupo de fotogramas, no solo con capas enteras.
example if for some reason I'd like to stretch or compress or change only the
Por ejemplo, si quiero estirar, comprimir o modificar
the keyframes on the end here I can do
solo los fotogramas clave del final, hago lo mismo
the same thing just select them hold down shift and drag and non-contiguous
que es seleccionarlos, mantener pulsado Mayús y arrastrarlos.
selections are also okay so I can select
También funciona con fotogramas alternos.
keyframes in a configuration like this
Por ejemplo, puedo seleccionar estos fotogramas clave
and this will also work you can also
y funcionará igual.
scale keyframes in the other direction if you'd like to keep the the right end
Puedes modificar el otro lado si quieres dejar fijo el derecho
fixed and extend the length to the left
y estirar el izquierdo.
all you have to do is once you've selected your keyframes hold down shift
Una vez seleccionados los fotogramas
and begin dragging somewhere on the left
mantén pulsado Mayús y arrastra un punto de la izquierda
half of the selection instead of on the
en vez de uno de la derecha.
right and the the rightmost keyframe
Así, el fotograma clave de la derecha no se moverá
will stay fixed and the length will change to the left
y la duración cambiará en el lado izquierdo.
and remember that you can have some pretty precise control over the
Con esta función, puedes tener un control muy preciso de la selección.
selection you can as we've seen you can
Puedes usar la herramienta de marcado
use the marquee tool you can click keyframes individually to select them
o seleccionar fotogramas concretos mediante clics.
and you can also combine clicking keyframes or using the marquee tool with holding down the the command or the
También puedes pulsar Comando o Control mientas haces clic o usas la herramienta
control key to add or remove keyframes
para añadir o quitar fotogramas de la selección.
from the selection so for example I may have selected some keyframes with the
Por ejemplo, selecciono algunos con la herramienta
marquee I can hold command or control of my keyboard drag some more select some
mantengo pulsados Comando o Control en el teclado
more to add them to the selection and I
y arrastro o selecciono otros para añadirlos.
can also while holding command I can deselect some sub keyframes that's it
Puedo hacer lo mismo para quitarlos de la selección.
for now and thanks for watching
Eso es todo. Gracias por tu atención.
Similar videos:

Timeline Enhancements - Google Web Designer
Google Web Designer
13.2K views 68 likes 3 dislikes 21 Jun 201757% match


Timeline Advanced Mode Overview - Google Web Designer
Google Web Designer
12.2K views 93 likes 3 dislikes 18 Jun 201852% match


Outliner - Google Web Designer
Google Web Designer
4.1K views 15 likes 6 dislikes 18 Jun 201850% match


Multiple keyframe & thumbnail selection - Google Web Designer
Google Web Designer
5.6K views 11 likes 2 dislikes 16 Nov 201648% match


Hiding and Locking Timeline Layers - Google Web Designer
Google Web Designer
5K views 10 likes 6 dislikes 16 Nov 201646% match


Ad Validator - Google Web Designer
Google Web Designer
4.8K views 16 likes 1 dislikes 07 Sep 201845% match


Responsive Ad Workflow - Google Web Designer
Google Web Designer
21.8K views 208 likes 5 dislikes 24 Aug 201840% match


Google Web Designer - Animation Updates
Google Web Designer
53.6K views 136 likes 9 dislikes 17 Nov 201539% match


Google Web Designer - Text Overview
Google Web Designer
13.1K views 25 likes 9 dislikes 17 Nov 201539% match

An Overview of the updated Google Web Designer
Google Web Designer
89.8K views 346 likes 14 dislikes 04 Aug 201439% match


A Google Web Designer Thought Experiment
Google Web Designer
330.9K views 345 likes 20 dislikes 04 Aug 201439% match


Code View - Google Web Designer
Google Web Designer
7.2K views 55 likes 4 dislikes 14 Oct 201938% match

Dynamic in Studio - Google Web Designer
Google Web Designer
10.5K views 54 likes 1 dislikes 31 Aug 201837% match


Google Web Designer - Spritesheet Component Overview
Google Web Designer
18.6K views 52 likes 4 dislikes 17 Nov 201536% match


Google Web Designer - Streetview Component Overview
Google Web Designer
7.3K views 24 likes 0 dislikes 17 Nov 201536% match


Zoom for Advanced Timeline - Google Web Designer
Google Web Designer
10.4K views 15 likes 4 dislikes 16 Nov 201635% match


Responsive Layout: Overview - Google Web Designer
Google Web Designer
106.5K views 444 likes 8 dislikes 03 May 201635% match


Parallax Overview - Google Web Designer
Google Web Designer
31.9K views 285 likes 6 dislikes 28 Nov 201834% match


Text Fitting - Google Web Designer
Google Web Designer
8.2K views 33 likes 6 dislikes 28 Nov 201833% match

Responsive Layout: Animation - Google Web Designer
Google Web Designer
27.6K views 82 likes 10 dislikes 03 May 201633% match


Responsive Campaign Tutorial - Google Web Designer
Google Web Designer
3.1K views 84 likes 0 dislikes 15 Oct 202033% match

Timeline Easing and Preview Range - Google Web Designer
Google Web Designer
7.6K views 37 likes 6 dislikes 03 Jan 201832% match


Responsive Layout: Advanced Techniques - Google Web Designer
Google Web Designer
54.7K views 200 likes 4 dislikes 03 May 201632% match


Publish to Display & Video 360 - Google Web Designer
Google Web Designer
7.1K views 19 likes 3 dislikes 28 Nov 201831% match

Advanced Preview Configuration - Google Web Designer
Google Web Designer
14.3K views 68 likes 3 dislikes 28 Nov 201830% match

Authoring Dynamic Sample Data - Google Web Designer
Google Web Designer
14.6K views 62 likes 1 dislikes 28 Nov 201830% match

Easing functions (Step start/end) - Google Web Designer
Google Web Designer
25.5K views 43 likes 5 dislikes 16 Nov 201629% match


Transition Gallery - Google Web Designer
Google Web Designer
18.4K views 116 likes 3 dislikes 07 Oct 201929% match

Masking - Google Web Designer
Google Web Designer
9.1K views 92 likes 1 dislikes 07 Oct 201929% match

Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201826% match



Settings Privacy About Contact Donate