
Thai: 
สวัสดีค่ะ ฉันชื่อนาตาลี
ฉันเป็นวิศวกรที่ทำงานในทีม
ของ Google Web Designer
วันนี้ฉันจะมาสาธิต
วิธีสร้างภาพเคลื่อนไหวโดยใช้ไทม์ไลน์
ในโหมดด่วน
ไทม์ไลน์ในโหมดด่วนเป็นหนึ่งใน
เครื่องมือภาพเคลื่อนไหว 2 อย่าง
ที่เรามี
ไฟล์จำนวนมากจะเปิดในโหมดนี้โดยค่าเริ่มต้น
และเครื่องมืออีกอย่างหนึ่งคือ
ไทม์ไลน์ในโหมดขั้นสูง
ซึ่งเข้าถึงได้โดยคลิกปุ่มสลับนี้
ที่มุมขวาบนของแผง "ไทม์ไลน์"
และเรามีบทแนะนำแยกต่างหาก
ที่จะพูดถึงโหมดขั้นสูงโดยเฉพาะ
ในบทแนะนำนี้เราจะพูดถึงโหมดด่วน
และสิ่งที่ทำได้ในโหมดนี้
มาดูตัวอย่างกันเลย
ฉันมีรายการปุ่มเหล่านี้อยู่
สมมติว่าฉันอยากให้ปุ่ม
ค่อยๆ ลอยเข้ามาทีละปุ่ม
จากทางซ้าย
ขั้นตอนแรกคือการจัดตำแหน่ง
ไว้ในจุดแรกเริ่มที่ต้องการ
ซึ่งก็คือข้างนอกทางด้านซ้ายของหน้า
จากนั้นฉันจะคลิกปุ่ม
เครื่องหมายบวกด้านล่างนี้
ในแผง "ไทม์ไลน์"
ซึ่งจะเพิ่มฉากใหม่หลังจากผ่านไป
ครึ่งวินาที
เราจะปรับแต่งส่วนนี้ได้ในภายหลัง

Turkish: 
Merhaba, benim adım Natalie.
Google Web Designer'da mühendisim.
Bu videoda, Hızlı moddaki
zaman çizelgesini
kullanarak animasyonları nasıl
oluşturacağınızı göreceğiz.
Hızlı mod zaman çizelgesi,
sunduğumuz iki animasyon
aracından biridir.
Pek çok dosya varsayılan olarak
bu modda açılır.
Diğer araç ise Gelişmiş
mod zaman çizelgesi.
Buna, Zaman çizelgesi
panelinin sağ üst köşesindeki
şu açma kapama düğmesini
tıklayarak erişebilirsiniz.
Özel olarak Gelişmiş modu
ele aldığımız
ayrı bir eğiticimiz de var.
Bu eğiticide ise
Hızlı modu ve bu modda
yapabileceğiniz bazı şeyleri
anlatacağız.
Bir örnekle başlayalım.
Bu düğme listem var.
Bunların sol kenardan
tek tek uçmalarını
istediğimi düşünelim.
İlk olarak bunları başlangıçta
olmalarını istediğim yere,
yani sayfanın dışına
konumlandırıyorum.
Ardından Zaman çizelgesinde,
aşağıdaki bu Artı düğmesini
tıklayarak yarım saniye sonrasına
yeni bir sahne ekliyorum.
Bunu daha sonra özelleştirebileceğiz.

Dutch: 
Hallo, mijn naam is Natalie.
Ik ben een van de engineers
die werken aan Google Web Designer.
In deze video bekijken we
hoe u animaties maakt met de tijdlijn
in de snelle modus.
De tijdlijn in de snelle modus
is een van twee animatiegereedschappen
die beschikbaar zijn.
Veel bestanden worden
standaard in deze modus geopend.
Het andere gereedschap is
de tijdlijn in de geavanceerde modus,
die u kunt openen via deze schakelknop
in de rechterbovenhoek
van het deelvenster Tijdlijn.
We hebben een afzonderlijke training
over de geavanceerde modus.
In deze training hebben we
het alleen over de snelle modus
en de taken
die u daarin kunt uitvoeren.
Laten we een voorbeeld doorlopen.
Ik heb deze lijst met knoppen.
Stel dat ik ze een voor een
in beeld wil laten komen
vanaf de linkerkant.
Ik moet ze eerst positioneren
waar ik ze aan het begin
wil hebben, dus buiten
de pagina aan de linkerkant.
Dan klik ik op deze plusknop
in het deelvenster Tijdlijn
om na een halve seconde een nieuwe scène
toe te voegen.
Dit kunnen we later aanpassen.

Polish: 
Cześć, jestem Natalie
i pracuję w zespole Google Web Designera.
Dziś przyjrzymy się
tworzeniu animacji na osi czasu
trybu szybkiego.
Jest to jedno z dwóch
dostępnych narzędzi
do animacji.
Wiele plików otwiera się
domyślnie w tym trybie.
Drugie to oś czasu
trybu zaawansowanego,
którą włączamy tym przyciskiem
w prawym górnym rogu panelu Oś czasu.
Mamy osobny film
o trybie zaawansowanym.
Tutaj skupimy się na trybie szybkim
i jego funkcjach.
Omówimy go na przykładzie.
Mam tu listę przycisków.
Chcę, by wysuwały się kolejno
z lewej strony.
Najpierw muszę je umieścić
w miejscu początkowym,
czyli poza krawędzią strony
po lewej.
Teraz klikam ten przycisk z plusem
w panelu Oś czasu, 
który doda nową scenę
po pół sekundy.
Później będziemy mogli to zmienić.

English: 
NATALIE: Hello, my
name is Natalie.
I'm one of the engineers that
works on Google Web Designer.
And in this video,
we're going to take
a look at how to create
animations using the Quick mode
timeline.
The Quick mode timeline is
one of two animation tools
that we have.
A lot of files will open
in this mode by default.
And the other tool is the
Advanced mode timeline,
which you can access by
clicking this toggle button
in the top right hand corner
of the Timeline panel.
And we have a separate
tutorial which
will focus on Advanced
mode specifically.
And in this one, we'll
just talk about Quick mode
and some things that
you can do with it.
Let's step through an example.
I have this list of buttons.
And let's say that I'd like
for them to fly in one by one
from the left side.
So the first step
is to position them
where I'd like for them to be
at the beginning, which is off
the page on the left side.
Then I'm going to click
this Plus button down here
in the Timeline panel, which
will add a new scene after half
a second.
This is something we'll be
able to customize later.

French: 
Bonjour,
je m'appelle Natalie.
Je suis ingénieur pour
Google Web Designer.
Je vais vous expliquer
comment créer des animations
avec la timeline
en mode rapide.
C'est l'un des deux outils d'animation
que nous proposons.
Ce mode est activé par défaut
pour de nombreux fichiers.
L'autre outil est
la timeline en mode avancé.
Pour y accéder,
cliquez sur ce bouton d'activation
dans l'angle supérieur droit
de la timeline.
Un autre tutoriel est dédié à
la timeline en mode avancé.
Cette vidéo se concentre
sur le mode rapide
et sur ce qu'il permet de faire.
Prenons un exemple.
Voici des boutons.
Disons que j'aimerais
qu'ils apparaissent un par un
depuis le côté gauche.
Il faut d'abord les placer
où je veux qu'ils soient au début,
c'est-à-dire en dehors
de la page, à gauche.
Je clique ensuite sur le bouton "Plus"
de la timeline
pour ajouter une scène après 0,5 s.
Nous verrons comment
changer cela plus tard.

Chinese: 
大家好，我叫 Natalie
是 Google Web Designer 的工程師
我會在本片中說明
如何使用時間軸快速模式建立動畫
GWD 有兩個動畫工具
時間軸快速模式是其中之一
很多檔案預設以此模式開啟
另一個工具是時間軸進階模式
按一下時間軸面板右上角
這個切換按鈕
就能進入進階模式
我們有另一個教學課程
專門介紹進階模式
這次我們只介紹快速模式
以及這個模式的各種運用
現在我來逐步示範
我有這些按鈕
假設我想讓它們
由左邊逐一快速滑移進來
第一步是設定元素的位置
我想把元素的起始位置
設定在頁面左邊外圍處
點擊下方時間軸面板中這個加號按鈕
就能新增間隔半秒的場景
這樣待會就能進行調整

Spanish: 
NATALIE: Hola, me llamo Natalie.
Soy una de las ingenieras
que trabaja en Google Web Designer.
En este vídeo, voy a explicar
cómo crear animaciones
con la línea de tiempo
en Modo rápido.
Este modo es una de las
dos herramientas de animación
que tenemos.
Muchos archivos se abrirán
en este modo de forma predeterminada.
La otra herramienta
es el Modo avanzado
al que se accede
desde el botón activar/desactivar
en la esquina superior
derecha de la línea de tiempo.
Tenemos un tutorial específico
sobre el Modo avanzado.
En este tutorial, nos centraremos
en el Modo rápido y en cómo se usa.
Vamos a ver un ejemplo.
Tengo esta lista de botones
y supongamos que quiero
que se incorporen uno por uno
desde la izquierda.
El primer paso es colocarlos
donde quiero que estén
al principio, o sea, fuera de la página
a la izquierda.
Ahora voy a hacer clic
en el botón del signo más
de la línea de tiempo
para añadir otra escena
al cabo de medio segundo.
Después podremos
personalizar esta duración.

Russian: 
Здравствуйте!
Меня зовут Натали.
Я специалист по Google Web Designer.
В этом видео я расскажу о том,
как создавать анимацию в быстром режиме
временной шкалы.
Это один из двух
инструментов создания
анимации.
Множество файлов по умолчанию
открываются в этом режиме.
Второй инструмент – расширенный режим.
Чтобы перейти в него,
нужно нажать на переключатель
в правом верхнем углу временной шкалы.
Расширенному режиму
посвящено отдельное видео.
А в этом видео я расскажу о быстром режиме
и о том, как работать в нем.
Приведу пример.
У меня есть документ с кнопками,
и я хочу, чтобы они появлялись
по одной
с левой стороны.
Сначала нужно поместить их там,
где они должны быть в начале анимации –
вне страницы слева.
Теперь я нажимаю кнопку с плюсом
на временной шкале,
чтобы добавить новую сцену
через полсекунды.
Об этом параметре я расскажу позже.

Portuguese: 
Olá! Meu nome é Natalie.
Sou engenheira do Google Web Designer.
Neste vídeo, você verá
como criar animações usando
a linha do tempo no modo Rápido.
Essa é uma das nossas duas ferramentas
de animação.
Diversos arquivos são abertos
nesse modo por padrão.
E a linha do tempo no modo Avançado
pode ser acessada clicando neste botão
no canto superior direito
do painel "Linha do tempo".
Temos um tutorial específico
com foco no modo Avançado.
Agora, veremos apenas o modo Rápido
e o que você pode fazer com ele.
Vejamos este exemplo.
Temos uma lista de botões.
E queremos que eles se movam um por um
a partir do lado esquerdo.
Primeiro, os posicione
onde quiser que o movimento comece,
como à esquerda da página.
Depois, clique no botão de mais
do painel "Linha do tempo",
que adicionará uma nova cena
após meio segundo.
Podemos personalizar isso mais tarde.

Italian: 
Ciao, mi chiamo Natalie.
Faccio parte del team di ingegneri
che si occupano di Google Web Designer.
In questo video ti mostrerò come
creare un'animazione utilizzando la
sequenza temporale in modalità veloce.
Si tratta di uno dei due
strumenti di animazione
di cui disponiamo.
Molti file si apriranno in questa
modalità per impostazione predefinita.
L'altro strumento è la sequenza
temporale in modalità avanzata
alla quale puoi accedere facendo
clic sul pulsante in alto a destra
nel riquadro della sequenza temporale.
Esiste un altro tutorial che si occupa
nello specifico della modalità avanzata.
In questo video parleremo
solo della modalità veloce
e di alcuni modi in cui puoi utilizzarla.
Facciamo un esempio.
Ho un elenco di pulsanti
e vorrei che comparissero uno per uno
arrivando dal lato sinistro.
Il primo passo è posizionarli
nel punto in cui voglio che
si trovino quando inizia l'animazione
cioè fuori dalla pagina, a sinistra.
Faccio clic sul pulsante
Più, qui nel riquadro della
sequenza temporale e
aggiungo una nuova scena
dopo 0,5 secondi.
La personalizzeremo più avanti.

Japanese: 
Google Web Designer
エンジニアのナタリーです
この動画ではタイムラインの
クイックモードを使って
アニメーションを作成します
アニメーションツールは2つあり
通常はクイックモードがデフォルトです
もう1つは詳細モードで
タイムラインパネルの右上のボタンで
切り替えることができます
詳細モードについては
別のチュートリアルで解説します
ここではクイックモードで
何ができるかを説明します
実際にやってみましょう
3つのボタンを左側から
1つずつスライドさせましょう
まずはこれらのボタンを開始位置
つまり左側の外に移動します
次にタイムラインパネルの
+ボタンをクリックし
0.5秒後にシーンを追加します
この間隔は後でカスタマイズできます

Chinese: 
大家好，我叫Natalie
是Google Web Designer团队的一名工程师
在本视频中，我将介绍
如何使用快速模式时间轴
制作动画
我们有两种动画工具
这是其中一种
很多文件打开后，默认会处于这种模式
还有一种是高级模式时间轴
只要点击时间轴面板右上角的这个切换按钮
就可以使用另一种工具
我们会在另一个教程视频中
专门介绍高级模式
本视频主要介绍快速模式
及其用途
下面我们通过一个示例进行说明
我有这些按钮
假设我希望这些按钮从左侧
逐一飞进来
第一步就是将这些按钮
放到动画开始时它们应处在的位置
也就是页面外部左侧的位置
然后点击时间轴面板下部的加号按钮
系统会添加一个新场景
用于在动画播放到半秒处时显示

Korean: 
Natalie: 안녕하세요.
Natalie입니다
Google Web Designer의
엔지니어입니다
이 동영상에서는
빠른 모드 타임라인을 사용하여
애니메이션을 만드는 방법을
살펴보겠습니다
빠른 모드 타임라인은
Google Web Designer의
두 가지 애니메이션 도구 중
하나입니다
기본적으로 많은 파일이
이 모드로 열립니다
다른 하나는 고급 모드 타임라인입니다
타임라인 패널의
오른쪽 상단 모서리에서
이 전환 버튼을 클릭하면
액세스할 수 있습니다
별도 가이드에서
고급 모드를 다루게 됩니다
여기서는 빠른 모드와
이 모드로 할 수 있는 작업을
살펴보겠습니다
예시를 함께 볼까요?
여기 버튼 목록이 있습니다
왼쪽에서 하나씩 날아오도록
해보겠습니다
우선 이 세 버튼의
위치를 지정합니다
시작 지점을 편집하는데
바로 페이지 바깥 왼쪽입니다
그런 다음 타임라인 패널에서
더하기 버튼을 클릭하면
새로운 장면이 0.5초 간격을 두고
추가됩니다
이 부분은 나중에
맞춤 설정할 수 있습니다

German: 
Hallo!
Mein Name ist Nathalie.
Ich bin Entwicklerin
im Google Web Designer-Team.
In diesem Video zeige ich Ihnen,
wie Sie im Schnellmodus der Zeitachse
Animationen erstellen können.
Der Schnellmodus der Zeitachse
ist eins von zwei Animationstools.
In diesem Modus lassen sich
viele Dateien standardmäßig öffnen.
Das andere Tool ist der erweiterte Modus,
den Sie durch Klicken
auf diese Schaltfläche
rechts oben im Steuerfeld
"Zeitachse" aktivieren.
Zum erweiterten Modus
gibt es ein eigenes Video.
Hier geht es nur um den Schnellmodus
und einige Möglichkeiten, die er bietet.
Sehen wir uns ein Beispiel an.
Ich habe diese Liste mit Schaltflächen.
Angenommen, ich möchte,
dass sie nacheinander
von links ins Bild kommen.
Als Erstes positioniere ich sie
am gewünschten Ausgangspunkt,
der sich
außerhalb der Seite links befindet.
Dann klicke ich hier unten
im Steuerfeld "Zeitachse"
auf das Plus, 
um nach einer halben Sekunde
eine neue Szene einzufügen.
Das können wir später noch anpassen.

Italian: 
In questa scena riposiziono
gli elementi nel punto in cui voglio
che si trovino dopo 0,5
secondi dall'inizio dell'animazione.
Voglio che il pulsante azzurro
sia bel visibile nella mia pagina.
E così di seguito.
In questo modo la galleria
di pulsanti comparirà poco per volta
entrando dal lato sinistro.
Una terza scena per il pulsante verde
che entra sempre dal lato sinistro.
Ora abbiamo un'animazione.
Puoi fare clic su ogni
miniatura per verificare
l'anteprima dell'aspetto dell'animazione
in quel dato momento.
O puoi fare clic sul pulsante Riproduci
per vedere un'anteprima
dal vivo dell'animazione sullo stage.
Questo piccolo pulsante Ripetizione
visualizza l'anteprima ripetutamente
permettendoti di eseguire
il debug della tua animazione.
Come abbiamo visto, i 0,5
secondi ogni due miniature
rappresentano la durata
che separa tutte le transizioni
ogni due scene.
Se facciamo clic qui,
possiamo allungare o

Portuguese: 
Nesta cena, vamos reorganizar os elementos
para que fiquem
no ponto 0,5 segundos da animação.
Só o botão "SOBRE"
ficará visível na página.
E faça isso com os demais botões.
Assim, o botão "GALERIA"
vem do lado esquerdo.
E o botão "CONTATO"
vem do lado esquerdo.
Agora, vemos a animação.
Clique em cada miniatura para ver
como a animação ficou
no ponto especificado.
Ou clique no botão "Reproduzir"
para visualizar
sua animação ao vivo no cenário.
Este botão "Loop" repetirá a visualização.
Assim, você pode depurar a animação.
Cada 0,5 entre cada par de miniaturas
representa a duração da transição
entre duas cenas.
Ao clicar aqui, 
é possível deixar a duração

Russian: 
На второй сцене я располагаю элементы так,
как они должны размещаться
через полсекунды анимации.
Сейчас на странице должна быть видна
только кнопка ABOUT.
И так далее.
Новая сцена, на которой слева появляется
кнопка GALLERY,
и на третьей появляется
кнопка CONTACT.
Анимация готова.
Чтобы ее проверить, можно по очереди
нажать на все кадры
и посмотреть, как она выглядит
на этом этапе.
Или можно нажать кнопку "Запустить",
чтобы посмотреть анимацию
в рабочей области.
Если нажать кнопку "Повторять",
анимация зациклится,
и ее будет удобно отлаживать.
Значение 0,5 между парой кадров –
это длительность перехода
между двумя сценами.
Чтобы изменить ее,

German: 
In dieser Szene ordne ich
meine Elemente dort an,
wo sie sich nach einer halben Sekunde
in der Animation befinden sollen.
Ich möchte, dass nur die Schaltfläche
"ABOUT" auf der Seite sichtbar ist.
Dasselbe noch einmal.
Jetzt kommt die Schaltfläche "GALLERY"
von links ins Bild.
Und zum Schluss
die Schaltfläche "CONTACT".
Jetzt haben wir eine Animation.
Wenn Sie
auf die Miniaturansichten klicken,
wird eine Vorschau der Animation
zum jeweiligen Zeitpunkt angezeigt.
Sie können auch auf "Wiedergabe" klicken,
um eine Livevorschau der Animation
auf dem Anzeigebereich zu starten.
Mit dieser kleinen Schaltfläche "Schleife"
wird die Vorschau endlos wiederholt,
damit Sie Fehler
in der Animation beheben können.
Wie wir gesehen haben,
steht die Zahl "0,5"
zwischen zwei Miniaturansichten
für den Zeitraum zwischen jedem Übergang,
also zwischen zwei Szenen.
Wenn Sie darauf klicken,
können Sie den Zeitraum

French: 
Dans cette scène,
je vais placer mes éléments
où je veux qu'ils soient à 0,5 s.
Je veux que seul le bouton "ABOUT"
soit visible sur la page.
Je recommence ensuite pour
faire apparaître le bouton "GALLERY"
du côté gauche,
avant de terminer par le bouton "CONTACT",
qui apparaît aussi
du côté gauche.
L'animation est prête.
Vous pouvez la vérifier
en cliquant sur chaque vignette.
Un aperçu de l'animation à ce moment-là
s'affiche alors.
Le bouton de lecture
vous permet aussi
d'afficher en direct un aperçu de
votre animation sur l'espace de création.
Le bouton de lecture en boucle permet de
répéter la lecture de l'animation
pour la déboguer.
La période de 0,5 s
entre chaque paire de vignettes
représente la durée
de chaque transition
entre deux scènes.
Cliquez ici pour raccourcir ou rallonger

Turkish: 
Bu sahnede, öğelerimi animasyonda
yarım saniye sonra olmasını
istediğim şekilde yeniden düzenliyorum.
ABOUT düğmesinin sayfada
görünür olmasını istiyorum.
Ardından diğerlerini düzenliyorum.
Soldan uçarak gelen
GALLERY düğmemiz var.
Üçüncüsü CONTACT düğmesi olacak
ve sol kenardan uçacak.
Böylece animasyonumuz hazır oldu.
Bunu, her bir küçük resmi tıklayarak
doğrulayabilirsiniz.
Tıkladığınızda animasyonunun
o saniyede nasıl
göründüğüne ait bir önizleme
gösterilir.
İsterseniz Oynat düğmesini
tıklayarak
animasyonunuzun sahnede
canlı bir önizlemesini görebilirsiniz.
Bu küçük Döngü düğmesiyle
animasyonunuzu sürekli önizleyerek
hatalarını ayıklayabilirsiniz.
Gördüğümüz gibi, her küçük resim
çiftinin arasındaki 0,5 saniye
her geçişin, her iki sahnenin
arasındaki süreyi
gösteriyor.
Bunu tıklarsak süreyi daha uzun

Spanish: 
Voy a reorganizar
los elementos para que se muestren
como quiero al cabo de
medio segundo de la animación.
Primero solo debe verse
en la página el botón ABOUT
y así sucesivamente.
De este modo,
se incorpora el botón GALLERY
desde la izquierda.
Con la tercera escena,
se incorpora el botón CONTACT
también desde la izquierda.
Ya hemos creado una animación.
Puedes verificarlo haciendo clic
en cada una de las miniaturas
para mostrar
una vista previa de la animación
tal como está ahora.
También puedes hacer clic
en el botón de reproducción
para obtener una vista previa
de la animación en la escena
y este botón te permite
mostrar la animación en bucle
para poder depurarla.
Como hemos visto,
los 0,5 s entre miniaturas
son la duración de cada transición
entre dos escenas.
Si haces clic aquí, puedes aumentar

Polish: 
Tutaj mogę określić,
gdzie mają się znaleźć elementy
po pół sekundy animacji.
Chcę na przykład, żeby przycisk ABOUT
był już widoczny na stronie.
To samo dotyczy pozostałych elementów.
Potem powinien
pojawić się przycisk GALLERY,
wysuwający się z lewej strony.
I na koniec przycisk CONTACT,
też wysuwający się z lewej.
Oto nasza animacja.
Możemy ją przejrzeć,
klikając poszczególne miniatury.
Zobaczymy poszczególne etapy animacji
w danym punkcie na osi czasu.
Możemy też kliknąć przycisk Odtwórz
i obejrzeć gotową animację.
Ten mały przycisk pozwala zapętlić podgląd
i wyłapać ewentualne błędy.
Pół sekundy pomiędzy miniaturami
to czas przejścia
między scenami.
Gdy tu klikniemy, możemy skrócić

Chinese: 
我想重新排列這個場景中的元素
把它們的動畫設為半秒
一開始只讓「ABOUT」(關於) 按鈕
出現在頁面上
然後依序如法炮製
接著，「Gallery」(圖片庫) 按鈕
由左邊滑移進來
第三個「CONTACT」(聯絡) 按鈕
也從左邊滑移進來
這樣就完成動畫了
你可以點選各個縮圖加以檢查
預覽各時間點的動畫
或是點擊 [播放] 按鈕
就能即時預覽中心區域的動畫
點擊這個 [循環] 按鈕可以重複預覽
方便你找出動畫中的錯誤
每一對縮圖的間隔都是 0.5 秒
代表場景之間的轉換時間是 0.5 秒

Chinese: 
之后我们可以对这个场景进行自定义
在这个场景中，我会重新排列元素
使它们在动画的半秒处呈现我想要的效果
首先只让ABOUT按钮显示在页面上
依此操作
让GALLERY按钮
从左侧飞进来
接着再让CONTACT按钮
从左侧飞进来
现在就有了一个动画效果
我们可以验证一下
方法是点击各个缩略图
预览相应时间点处的
动画效果
您也可以点击“播放”按钮
在场景上实时预览动画效果
使用这个“循环播放”小按钮可反复播放预览画面
以方便您对动画进行调试
我们可以看到每对缩略图之间的0.5
代表每两个场景之间、
每次过渡之间的时长
点击这个时长可加以自定义

Japanese: 
このシーンに要素を配置して
アニメーションの0.5秒後の状態にします
まずは[ABOUT]ボタンだけ
ページに表示しましょう
同じ手順でシーンを追加し
[GALLERY]ボタンを
左からスライドさせ
最後に[CONTACT]ボタンを
左からスライドさせます
これでアニメーションは完成です
下のサムネイルをクリックすると
その時点の状態を確認できます
再生ボタンでステージ上の
アニメーションを動かすこともできます
デバッグのためにループさせたい場合は
ループボタンをクリックします
今回はサムネイルの遷移時間
つまり「シーンの間隔」を0.5秒にしました

English: 
In this scene, I'm going to
rearrange my elements the way
I want them to be at a half
a second in the animation.
So I want just the ABOUT
button to be visible on page.
And then so on and so forth.
And you seem to have the
Gallery button fly in
from the left side.
And a third to have
the CONTACT button
fly in from the left side.
And so now we have an animation.
You can verify this by clicking
each of the thumbnails, which
will show you a preview of
what the animation looks
like at that point in time.
Or you can also
click the Play button
to get a live preview of
your animation on stage.
And this little Loop button
will let you preview repeatedly,
so you can debug your animation.
So as we saw, the 0.5 between
every pair of thumbnails
represents the duration
between every transition,
between every two scenes.
If we click this, we can
customize this duration

Thai: 
ในฉากนี้ ฉันจะจัดเรียงองค์ประกอบใหม่
ในลักษณะที่อยากให้เป็น
เมื่อภาพเคลื่อนไหวถึงจุดครึ่งวินาที
ฉันอยากให้ปุ่ม "เกี่ยวกับ"
ปรากฏขึ้นในหน้าเพียงปุ่มเดียว
และปุ่มอื่นตามกันมาเรื่อยๆ
ให้ปุ่ม "แกลเลอรี" ลอยเข้ามา
จากด้านทางซ้าย
และปุ่มที่ 3 คือปุ่ม "ติดต่อเรา"
ลอยเข้ามาจากด้านซ้าย
ทีนี้ก็ได้ภาพเคลื่อนไหวแล้ว
คุณยืนยันภาพเคลื่อนไหวได้ด้วยการคลิก
ภาพขนาดย่อแต่ละภาพ
ซึ่งจะแสดงพรีวิวของภาพเคลื่อนไหว
ที่จุดเวลานั้นๆ
หรือคุณอาจคลิกปุ่ม "เล่น"
เพื่อพรีวิวภาพเคลื่อนไหวสดๆ ในพื้นที่งาน
และปุ่ม "วนซ้ำ" เล็กๆ นี้
จะให้คุณดูพรีวิวแบบวนซ้ำ
เพื่อแก้ไขข้อบกพร่องของภาพเคลื่อนไหว
อย่างที่เห็นว่า 0.5
ระหว่างภาพขนาดย่อแต่ละคู่
ก็คือระยะเวลาระหว่างการเปลี่ยนแต่ละครั้ง
ระหว่างฉาก 2 ฉาก
ถ้าเราคลิกตรงนี้
ก็จะปรับแต่งระยะเวลา

Dutch: 
In deze scène rangschik ik
mijn elementen opnieuw
zoals ik ze na een halve seconde
in de animatie wil hebben.
Ik wil dat alleen
de knop ABOUT zichtbaar is op de pagina.
En zo verder.
Nu lijkt het alsof de knop GALLERY in beeld komt
vanaf de linkerkant.
En als derde komt de knop CONTACT in beeld
vanaf de linkerkant.
En nu hebben we een animatie.
U kunt dit controleren
door op elk van de miniaturen te klikken.
U ziet een voorbeeld
van hoe de animatie eruitziet
op dat moment.
U kunt ook op de knop Afspelen klikken
voor een live voorbeeld
van uw animatie op het werkvlak.
Met deze knop Herhalen
kunt u het voorbeeld herhalen
zodat u problemen
met de animatie kunt oplossen.
Zoals we zagen,
geeft de 0,5 tussen elk paar miniaturen
de duur aan tussen elke overgang,
tussen elke twee scènes.
Als we hierop klikken,
kunnen we deze duur

Korean: 
이 장면에서
요소를 재정렬하여
애니메이션에서
장면 간격을 0.5초로 설정하겠습니다
먼저 페이지에
ABOUT(정보) 버튼을 놓고
다른 버튼들도 놓겠습니다
GALLERY(갤러리) 버튼도
왼쪽에서 날아오도록
페이지 위에 옮기고
세 번째로 CONTACT(문의) 버튼도
왼쪽에서 날아오도록 합니다
이제 애니메이션이 생성되었습니다
각 썸네일을 클릭하면
애니메이션을 확인할 수 있습니다
그럼 해당 시간에
어떤 애니메이션이 표시되는지
미리볼 수 있습니다
재생 버튼을 클릭해도
스테이지에서 실시간으로
애니메이션 미리보기를
확인할 수 있습니다
이 작은 반복 버튼을 클릭하면
반복해서 미리보기할 수 있으므로
애니메이션을 디버그할 수 있습니다
각 썸네일 쌍 사이의 간격이
0.5초이므로
각 전환 사이와
두 장면 사이의 간격을
알 수 있습니다
이를 클릭하면
재생 시간을

Korean: 
사용자에 맞게
조정할 수 있습니다
1초로 늘여보겠습니다
이징을 조정할 수도 있습니다
이렇게 하면 바로 
베지어 곡선이 나타납니다
이 곡선은 모든 애니메이션에서
장면 내 모든 장면 간
중간값을 계산하는 데 사용합니다
표준 CSS 이징 기능을
모두 사용할 수 있습니다
이렇게 클릭하면 하나씩
살펴볼 수 있습니다
이즈 인 아웃은
실제 모션을 시뮬레이션할 수 있으므로
유용한 기능입니다
미리보기를 해보면
세 번째와 네 번째 썸네일 사이의
전환은 이즈 인 아웃 전환이며
약 1초가 걸린다는 것을
알 수 있습니다
지금까지 빠른 모드를 사용하여
애니메이션 만들기를 시작할 때
필요한 내용을
간략하게 살펴봤습니다
사용법은 아주 쉽습니다
그러나 복잡한 애니메이션을 만들 때는
다소 제약이 따를 수 있습니다
예를 들어, 동시에 애니메이션으로
만들 요소가 여러 개이면서
각 애니메이션 요소의
키 프레임과 전환을
개별적으로 편집하려는 경우나
사용자 맞춤 이징 기능 등을
생성하려는 경우 또는
상호작용을 추가하려는 경우에는

Spanish: 
o disminuir la duración.
Ahora quiero aumentar
esta transición a un segundo
y también puedo ajustar el easing.
Esta es la curva de Bézier
que se usa para computar los valores
intermedios de todas las animaciones
entre dos escenas.
Aquí están
las funciones CSS de easing estándar
de las que dispones,
que puedes ver una por una.
La función Acelerar y desacelerar es
útil porque simula el movimiento real
bastante bien.
En la vista previa, observamos
que la transición entre las miniaturas
tercera y cuarta se hace con esta función
y tarda un segundo aproximadamente.
Espero que esta introducción
te sirva para poder empezar
a crear algunas animaciones
en el Modo rápido.
Es bastante sencillo de usar
pero presenta algunas limitaciones
en animaciones muy complejas.
Por ejemplo, si tienes muchos elementos
con animaciones simultáneas
y quieres editar los fotogramas
y las transiciones de cada uno
por separado, o si quieres crear
funciones de easing personalizadas
o añadir interactividad

Italian: 
o accorciare questa durata.
Diciamo che voglio farla
durare un secondo.
Possiamo regolare anche l'easing.
Questa è la curva di Bézier
usata per calcolare due valori
intermedi per tutte le animazioni
ogni due scene.
Abbiamo tutte le funzioni
di easing CSS standard disponibili.
Possiamo regolarle una per volta.
Questa è una buona variazione,
che simula un movimento del mondo reale
efficacemente.
Se guardiamo l'anteprima,
la transizione tra la terza e la
quarta miniatura utilizza
una variazione in entrata e in uscita
che impiega circa un secondo.
Questa anteprima dovrebbe aiutarti
a creare le tue prime animazioni
con la modalità veloce.
È uno strumento molto semplice
ma potrebbe avere
dei limiti nella creazione
di animazioni complesse.
Se per esempio avessi numerosi
elementi che si
animano contemporaneamente
e volessi modificare ogni
transizione e ogni fotogramma chiave
animato dell'elemento,
per utilizzare funzioni come
l'easing personalizzato
o per aggiungere interattività

Dutch: 
langer of korter maken.
Stel dat ik wil dat deze één seconde duurt.
Ook kunnen we de easing aanpassen.
Met deze Bézier-curve kunnen we
tussenliggende waarden
bereken voor alle animaties
tussen elk paar scènes.
Alle standaard
css-easingfuncties zijn beschikbaar.
U kunt de functies
een voor een doorlopen.
Ease-in-out is een goede
omdat deze de echte beweging
goed simuleert.
We zien nu in het voorbeeld 
dat de overgang tussen de derde en
vierde miniatuur
de overgang ease-in-out gebruikt
en ongeveer een seconde duurt.
Dit is een overzicht waarmee u
zelf aan de slag kunt gaan
met animaties maken
in de snelle modus.
Eenvoudig in gebruik, 
maar er zijn
beperkte mogelijkheden
beschikbaar voor zeer
complexe animaties.
Stel dat u veel elementen heeft
met gelijktijdige animaties
en u de sleutelframes en
overgangen van elk element met animatie
afzonderlijk wilt bewerken en dat u aangepaste
easingfuncties wilt maken
en interactiviteit wilt toevoegen.

Russian: 
нужно нажать на это число.
Например, пусть
этот переход длится 1 секунду.
Также здесь можно изменить динамику.
Это кривая Безье, с помощью которой
рассчитываются промежуточные
значения для анимации
между двумя сценами.
Здесь представлены все стандартные
функции динамики CSS.
Вот так можно
переключаться между ними.
Вариант Ease-in-out отлично
имитирует реальное
движение.
При просмотре видно,
что для перехода между третьим
и четвертым кадрами
используется динамика Ease-in-out,
и переход длится одну секунду.
Надеюсь, что этот обзор
поможет вам при создании анимации
в быстром режиме.
Этот режим просто использовать,
но его возможности ограничены.
Их не хватит для сложной анимации,
например, если одновременно нужно
анимировать несколько элементов
и при этом по отдельности
редактировать кадры
и переходы для каждого из них,

Chinese: 
點擊這個按鈕可以拉長或縮短時間
假設我要把間隔設成 1 秒
我也可以調整加/減速
這是貝茲曲線
可用來計算場景之間所有動畫的中間值
我們可以使用所有標準 CSS 加/減速功能
你可以逐一循環切換
先加速後減速很像現實中的動作
是不錯的選擇
現在預覽的話
可以看到第三和第四縮圖之間的轉換
是使用先加速後減速，時間是 1 秒
介紹到這裡
你應該會用快速模式
建立動畫了
快速模式很簡單
但是要製作複雜的動畫
則稍嫌不足
比方說，如果你有許多元素
想同時呈現動畫效果
還要逐一編輯各個動畫的
主要畫格和轉換
或者如果您想自訂加/減速功能
或是加入互動元素

Polish: 
lub wydłużyć ten czas.
Powiedzmy, że ten ma trwać sekundę.
Możemy też zmienić wygładzanie.
To krzywa Beziera,
która służy do obliczania
wartości pośrednich w animacji
pomiędzy scenami.
Mamy tu wszystkie
standardowe funkcje wygładzania CSS.
Możemy je kolejno przeglądać.
Przyspiesz i zwolnij dobrze oddaje
realizm ruchu.
Na podglądzie widzimy,
że przejście między trzecią
a czwartą miniaturą
używa opcji Przyspiesz i zwolnij
i trwa około sekundy.
Te informacje powinny pomóc Wam
na początku pracy z animacjami
w trybie szybkim.
Jest on prosty w użyciu,
jednak raczej nie sprawdzi się
przy złożonych animacjach.
Na przykład jeśli mamy wiele elementów
animowanych jednocześnie
i chcemy edytować
klatki kluczowe i przejścia
każdego z nich
albo utworzyć
niestandardowe funkcje wygładzania 
lub dodawać funkcje interaktywne,

Japanese: 
ここをクリックすると
カスタマイズできます
たとえば1秒に変更します
イージングも調整できます
ベジェ曲線を使ってシーン間の
中間値を計算しているわけですが
このように標準的なCSS
イージング関数はすべて揃っています
「Ease-in-out」は
動きがリアルでおすすめです
再生してみましょう
3番目と4番目のサムネイルの間の
遷移にEase-in-outが適用されています
このようにクイックモードを使えば
アニメーションを簡単に作成できます
ただし機能的にはシンプルなので
複雑なアニメーションには向いていません
たとえば たくさんの要素を
同時に動かしたい場合
要素のキーフレームと遷移を
個別に編集したい場合
独自のイージング関数を
作りたい場合

Turkish: 
veya daha kısa olacak şekilde
özelleştirebiliriz.
Sürenin bir saniye olmasını
istiyor olalım.
Yumuşatmayı da ayarlayabiliriz.
Bu, her iki sahne arasındaki
tüm animasyonlar için ara değerleri
hesaplamakta kullanılan
Bezier eğrisidir.
Tüm standart CSS yumuşatma
işlevlerimiz mevcut.
Bunların arasında tek tek
dolaşabilirsiniz.
Yumuşak giriş ve çıkış seçeneği
gerçek dünyaya benzer hareket
sağladığından çok kullanışlı.
Şimdi önizlersek üçüncü ve
dördüncü küçük resimler
arasındaki geçişte yumuşak
giriş çıkışı ve yaklaşık
bir saniye sürdüğünü
görebiilriz.
Bu genel bakışın
Hızlı modu kullanarak
animasyonlar oluşturmaya
başlamanıza
yardımcı olacağını umarım.
Kullanması çok kolay,
ancak çok karmaşık animasyonlarda
bazı
işlev kısıtlamaları var.
Örneğin aynı anda animasyon
uygulanan çok sayıda
öğeniz olup bu öğelerin
her birinin animasyon karelerini
ve geçişlerini ayrı ayrı
düzenleyebilmek istediğinizde,
özel yumuşatma işlevleri
gibi şeyler oluşturmak ya da
etkileşim eklemek istediğinizde

Thai: 
ให้ยาวขึ้นหรือสั้นลงได้
สมมติว่าฉันอยากให้ตรงนี้ยาว 1 วินาที
เรายังปรับการค่อยๆ เปลี่ยนได้ด้วย
นี่คือโค้ง Bezier
ที่ใช้คำนวณค่ากลางของภาพเคลื่อนไหวทั้งหมด
ระหว่างฉากทุกๆ คู่
เรามีฟังก์ชันการค่อยๆ เปลี่ยน
พื้นฐานทั้งหมดของ CSS ให้ใช้งาน
คุณเลื่อนดูทีละอันได้
"ค่อยๆ เข้า-ออก" เป็นฟังก์ชันที่ดี
เพราะจำลองการเคลื่อนไหวได้
ค่อนข้างสมจริง
ถ้าเราพรีวิวดู
จะเห็นว่าการเปลี่ยนระหว่างภาพขนาดย่อ
อันที่ 3 และ 4
ใช้การเปลี่ยนแบบ "ค่อยๆ เข้า-ออก"
และใช้เวลาประมาณ 1 วินาที
ฉันหวังว่าภาพรวมนี้
จะช่วยให้คุณเริ่มสร้างภาพเคลื่อนไหว
โดยใช้โหมดด่วนได้
โหมดนี้ใช้งานง่าย
แต่มีความสามารถที่จำกัด
สำหรับภาพเคลื่อนไหวที่ซับซ้อนมากๆ
เช่น ถ้าคุณมีองค์ประกอบที่จะเคลื่อนไหว
หลายรายการพร้อมๆ กัน
และอยากแก้ไขคีย์เฟรมและการเปลี่ยน
ขององค์ประกอบที่เคลื่อนไหว
แต่ละรายการแยกกัน
ถ้าอยากสร้างฟังก์ชัน
อย่างการค่อยๆ เปลี่ยนที่กำหนดเอง
หรือเพิ่มการโต้ตอบ

Chinese: 
延长或缩短该时长
比如，可将这一段的时长调整为1秒
我们还可以调整加/减速选项
这是一种贝塞尔曲线
用于计算每对场景之间
所有动画的中间值
这里有所有标准CSS加/减速函数
你可以一个接一个地
循环切换这些函数
先加速后减速很实用
因为它高度模拟了
真实的运动
如果现在预览，则会看到
第三个缩略图和第四个缩略图
之间的过渡采用先加速后减速方式
持续大约1秒钟
希望本视频中的简要介绍
能帮助您顺利使用快速模式
制作动画
这款工具使用起来很简单
但如果要制作非常复杂的动画
其功能就显出局限性了
比方说，您有很多元素
同时呈现动画效果
而您希望能够逐个修改
各个动画元素的关键帧和过渡效果
或者说，您希望创建诸如
自定义加/减速函数等内容
或希望能够添加互动元素

Portuguese: 
mais longa ou mais curta.
Posso fazer uma de um segundo.
E também posso ajustar o easing.
Esta é a curva de Bézier
usada para registrar
valores intermediários das animações
entre cada par de cenas.
Todas as funções
de easing CSS estão disponíveis.
Você pode usar cada uma delas.
A opção de aproximar e afastar
pode ser um bom recurso para simular
um movimento real.
Na visualização,
vemos que o ease é usado na transição
entre a terceira e quarta miniatura
e dura cerca de um segundo.
Esta visão geral pode ser útil
para você começar a criar animações
com o modo Rápido.
É muito fácil de usar,
mas haverá limitações a alguns recursos
para animações muito complexas.
Por exemplo,
se você tiver muitos elementos
animados simultaneamente
e quiser editar os frames-chave
e as transições individualmente, e quiser
criar funções de easing
personalizadas ou interatividade,

French: 
cette durée.
Imaginons que je veuille
qu'elle dure 1 s.
Vous pouvez aussi
ajuster le lissage de vitesse.
Ici, la courbe de Bézier.
Elle permet de calculer
les valeurs intermédiaires des animations
entre deux scènes.
Tous les lissages de vitesse CSS standards
sont disponibles.
Vous pouvez les parcourir un à un.
"Ease-in-out" permet de
reproduire un mouvement réel
de façon assez fidèle.
Si je lance l'aperçu,
la transition entre la 3e vignette
et la 4e a recours
au lissage "Ease-in-out", et
dure environ 1 s.
Cette présentation
devrait vous permettre
de commencer à créer
des animations à l'aide
du mode rapide.
Il est facile à utiliser,
mais certaines de ses fonctions
ne sont pas disponibles
pour les animations très complexes.
Par exemple,
si de nombreux éléments
s'animent simultanément,
si vous voulez modifier séparément
les images clés et les transitions
de chaque élément animé,
si vous souhaitez créer des éléments,
tels que
des lissages de vitesse personnalisés

English: 
to be longer or shorter.
Let's say I want this one
to be one second long.
And we can also
adjust the easing.
So this is the
Bezier curve that's
used to compute intermediate
values for all the animations
between every pair of scenes.
So we have all the standard
CSS easing functions available.
You can cycle through
them one by one.
So ease in out is a good one as
it simulates real world motion
pretty well.
So if we preview now, we can
see the transition between third
and fourth thumbnails uses
the ease in out transition
and takes about one second.
So this is an overview
that should hopefully
get you started with building
some animations using
the Quick mode.
It's pretty simple
to use, but there
will be a limit to some of
its capabilities for very
complex animations.
So for example, if you've
got many elements that
are animating
concurrently and you
want to be able to edit each
animated element's key frames
and transitions individually,
if you want to create things
like custom easing functions or
be able to add interactivity,

German: 
verlängern oder verkürzen.
Ich lege hier mal 1 Sekunde fest.
Außerdem lässt sich das Easing anpassen.
Das ist die Bézierkurve,
die zur Berechnung der Werte
zwischen zwei Szenen
für alle Animationen verwendet wird.
Hier sind alle standardmäßigen
CSS-Easing-Funktionen verfügbar.
Klicken Sie doch einfach mal durch.
Die Funktion "ease-in-out" ist toll,
weil sie die Bewegungen in der realen Welt
ziemlich gut simuliert.
In der Vorschau sehen wir,
dass für den Übergang zwischen
den Miniaturansichten 3 und 4
"ease-in-out" verwendet wird
und der Übergang 1 Sekunde dauert.
Ich hoffe, diese Grundlagen
helfen Ihnen
beim Erstellen von Animationen
im Schnellmodus.
Die Verwendung ist einfach,
bei sehr komplexen Animationen
stoßen Sie jedoch
an die Grenzen des Möglichen.
Wenn Sie zum Beispiel
viele Elemente haben,
die gleichzeitig animiert werden,
und Sie möchten
die Keyframes und Übergänge
aller animierten Elemente
einzeln bearbeiten,
oder wenn Sie benutzerdefinierte
Easing-Funktionen erstellen

German: 
oder Ihre Inhalte
interaktiv gestalten möchten,
müssen Sie
auf den erweiterten Modus zurückgreifen.
Dazu gibt es ein separates Video
mit detaillierten Anleitungen.
Das wars von mir.
Vielen Dank fürs Zusehen!

Chinese: 
这些情况下都需要
使用高级模式时间轴才能放开手脚
我们有另外一个教程
详细介绍了这种模式
本视频到此为止
谢谢观看

Portuguese: 
será preciso usar
a linha do tempo no modo Avançado.
E existe um tutorial específico
que trata desse tópico em detalhes.
Isso é tudo.
Obrigada por assisitir!

Chinese: 
如果要這些效果
就必須使用時間軸進階模式
我們有另一個教學課程
會深入介紹進階模式
我的說明到此為止，謝謝觀看

Japanese: 
インタラクティブ性を
追加したい場合などは
別のチュートリアルで解説する
詳細モードのタイムラインをお試しください
この動画は以上です
ありがとうございました

Spanish: 
tendrías que hacerlo
en la línea de tiempo en Modo avanzado.
Tenemos un tutorial específico en el que
tratamos este tema en profundidad.
Eso es todo por ahora.
Gracias por tu atención.

Korean: 
고급 모드 타임라인에서
작업해야 합니다
이와 관련하여 더 자세한 내용을 다루는
가이드가 별도로 있습니다
그럼 여기서 마치겠습니다
시청해 주셔서 감사합니다

Russian: 
или если нужно создать настраиваемую
динамику или добавить интерактивность.
Для всего этого
необходим
расширенный режим временной шкалы.
Он подробно описан
в отдельном видео.
Это все.
Спасибо за внимание!

Turkish: 
bunları yapabilmek için
Gelişmiş mod zaman çizelgesini
kullanmanız gerekecek.
Bunun için daha ayrıntılı
bilgilerin verildiği
ayrı bir eğiticimiz var.
Şimdilik bu kadar.
İzlediğiniz için teşekkürler.

Polish: 
wtedy musimy skorzystać
z osi czasu trybu zaawansowanego.
Mamy na ten temat osobny film,
który wyjaśnia szczegóły.
To tyle.
Dziękuję za uwagę.

Italian: 
dovresti necessariamente usare la
sequenza temporale in modalità avanzata.
Esiste un tutorial specifico
che approfondisce questo strumento.
Per adesso è tutto.
Grazie per aver guardato il video.

Thai: 
คุณต้องทำสิ่งเหล่านี้
ด้วยไทม์ไลน์ในโหมดขั้นสูง
ซึ่งเรามีบทแนะนำแยกต่างหาก
ที่จะเจาะลึกโหมดดังกล่าว
ขอจบวิดีโอเพียงเท่านี้
ขอบคุณที่ติดตามชมค่ะ

French: 
ou ajouter de l'interaction,
vous devez utiliser
la timeline en mode avancé.
Un autre tutoriel couvre ce sujet
plus en détail.
C'est terminé.
Merci de votre attention.

English: 
those are all things
for which you'd
need to venture into the
Advanced mode timeline for.
And we have a
separate tutorial that
goes more in-depth into that.
That's it for now.
And thanks for watching.

Dutch: 
Daarvoor heeft u
de tijdlijn in de geavanceerde modus nodig.
We hebben een afzonderlijke training
die gedetailleerder daarop ingaat.
Dat was het.
Bedankt voor het kijken.
