Timeline Advanced Mode Overview - Google Web DesignerYouTube↗  IA↗(long shot)
Science & Technology  12.2K views 93 likes 3 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
こんにちは Google Web Designer 開発担当エンジニアのナタリーです
Cześć. Jestem Natalie. Pracuję w zespole
この動画では詳細モードのタイムラインで アニメーションを作成する方法を説明します
Google Web Designera. W tym filmie omówię tworzenie animacji w trybie zaawansowanym osi czasu.
[タイムライン]パネルは デフォルトでは ワークスペースの下部にあります
Domyślnie oś czasu znajduje się na dole obszaru roboczego. To jeden z dwóch trybów osi czasu.
タイムラインはクイックモードでも使えます
Drugim jest szybki tryb osi czasu.
クイックモードのデフォルトでは 複数のファイルが同時に開きます
Wiele plików domyślnie będzie otwierać się
右上のこのボタンをクリックして モードを切り替えられます
w tym trybie, a przełączać się między nimi można, klikając ten przycisk.
これがクイックモード これが詳細モードです
To jest tryb szybki, a to zaawansowany.
クイックモードについてのチュートリアルは 別にあるので
Tryb szybki omawiamy w osobnym filmiku.
今回は この2つのモードのうち
Tutaj skupię się na trybie zaawansowanym,
より複雑で効果的な設定ができる 詳細モードについて説明します
który jest bardziej złożony, ale też daje więcej możliwości.
この短いアニメーション広告には スライドする画像と
Przygotowałam krótką, animowaną reklamę.
フェードイン / アウトする 2つのテキストボックス
Mamy tu przesuwającą się grafikę,
最後に表示されるロゴがあります
dwa pojawiające się i zanikające pola tekstowe i logo na końcu.
この広告をGoogle Web Designerで 作成してみましょう
Pokażę, jak można utworzyć taką reklamę w programie Google Web Designer.
まずは スライドする画像のアニメーションから
Najpierw zajmę się przesuwaną grafiką.
最初に画像をステージにドラッグして アニメーションの開始位置に合わせます
Muszę przeciągnąć ją na scenę i wstawić w miejscu,
このあたりですね
w którym ma być na początku animacji.
後でこのように画像をスライドします
Właśnie tak. Później będzie ona się tak przesuwać.
タイムラインに小さいトラックがありますね
Na osi czasu pojawiła się ścieżka.
これはタイムラインレイヤです
Jest to warstwa osi czasu,
ここで時間を合わせて オブジェクトのアニメーションを配置します
czyli element interfejsu, który pomoże nam utworzyć poszczególne etapy animacji.
詳細モードでアニメーションを作成する場合
Mówiąc najprościej,
特定の属性を持つ要素に キーフレームを定義して
będziemy określać klatki kluczowe, czyli punkty w czasie, w których element ma określoną właściwość.
各キーフレームを配置し操作することが 基本の作業となります
Potem określimy, jak przebiega i jak długo trwa przejście między tymi punktami.
この画像をスライドさせるために キーフレームをいくつか作りましょう
Aby utworzyć przesunięcie, utworzę kilka klatek kluczowych.
約1秒間固定したいので
Chcę zatrzymać grafikę na około sekundę.
1秒の位置で右クリックし [キーフレームを挿入]を選択 さらにその0.5秒後にも キーフレームを挿入します
Klikam prawym przyciskiem jedną sekundę i wybieram Wstaw klatkę kluczową, a potem to samo robię pół sekundy dalej.
次にこのキーフレームのこの時点で 画像がスライドするようにします
Tutaj przesuwam grafikę do miejsca, gdzie ma się znajdować w tym punkcie czasu.
ここでもう1秒ほど画像を固定します
Tutaj też zatrzymuję grafikę na około sekundę.
そして0.5秒後に画面から スライドアウトするようにします
Pół sekundy później grafika ma się przesunąć poza krawędź widoku.
プレイヘッドをドラッグすると タイムラインをスクラブして
Gdy przesuwam znacznik,
アニメーションをプレビューできます
wyświetla się podgląd animacji.
または左上にある再生ボタンをクリックして
Mogę też kliknąć w lewym rogu przycisk odtwarzania,
ステージ上でプレビューを見ることもできます
by zobaczyć podgląd na scenie.
問題なさそうです
Wygląda nieźle.
完成した広告では 画像は最初にフェードインで表示され
W finalnej wersji widzieliśmy, że grafika na początku po prostu się pojawia,
その後スライドします
a dopiero na końcu przesuwa się
では次に アニメーションの フェードインの方法を説明します
poza krawędź widoku. Zajmijmy się teraz tą animacją.
マーキーツールで全キーフレームを選択し
Zaznaczam wszystkie klatki kluczowe
全体を右にずらして フェードイン用のスペースを空け
i przesuwam je, by zrobić miejsce na pojawienie się grafiki.
ゼロの位置に新しいキーフレームを挿入します
W punkcie zero wstawiam nową klatkę.
このキーフレームでは 要素の透明度をゼロに設定します
Chcę, by widoczność elementu w tym miejscu wynosiła zero.
他のすべてのキーフレームは 透明度を100%にします
W pozostałych klatkach kluczowych powinna wynosić 100%.
次はテキストを追加します
Teraz dodam tekst.
ご覧のとおり テキストボックスは2つあり
Wcześniej widać było dwa pola tekstowe,
どちらも画像のスライドに合わせて フェードインします
które pojawiają się jedno po drugim, gdy grafika się przesuwa.
1つ目のテキストボックスを作成してみましょう
Utworzę więc pierwsze pole tekstowe.
最初のボックスはフェードインしてから この時間だけ同じ位置にとどまり 画像のスライドと同時にフェードアウトします
Powinno się pojawić, pozostać na ekranie, a potem zniknąć,
まず このボックスの透明度をゼロにします
gdy przesunie się grafika. Najpierw trzeba ustawić
これが最初の状態です
widoczność tego pola na zero.
0.5秒のあたりでキーフレームを作成し
Pół sekundy dalej utworzę klatkę kluczową
透明度を100%にします
i ustawię widoczność na 100%.
1.5秒の時点ではまだ100%のままで
Po półtorej sekundy ma ona nadal wynosić 100%.
2秒の時点で0%に戻します
Po dwóch sekundach znów powinna wynosić 0%.
必要な作業は 先ほどのように キーフレームを挿入するだけです
Można na przykład wstawić klatkę kluczową,
ただし今度はコピーすることもできます
tak jak poprzednio. Można też zduplikować klatkę kluczową.
Altキーを押したままキーフレームを 別の時間にドラッグすると
Przytrzymując Alt, mogę skopiować klatkę i przesunąć ją
そこにコピーが作成されます
w inne miejsce.
アニメーションの作成時間の短縮にもなります
Może to być spora oszczędność czasu.
テキストボックスがフェードアウトする キーフレームも追加しましょう
Teraz czas na animację znikającego pola tekstowego.
プレビューで確認します
Sprawdźmy podgląd.
いい感じです
Idealnie.
2つ目のテキストボックスは1つ目とほぼ同じで テキストが違うだけです
Drugie pole tekstowe jest dokładnie takie samo.
1つ目がフェードアウトした後に表示されます
Różni się tylko tekstem. Pojawia się, gdy pierwsze zniknie.
時間短縮になるので アニメーション付きの このレイヤをコピーしましょう
Oszczędzimy sobie trochę czasu, kopiując tę warstwę z animacją.
右クリックで[レイヤを複製]を選択します
Klikam prawym przyciskiem i wybieram Zduplikuj warstwę.
今度もマーキーですべてのキーフレームを選択し
Teraz znów zaznaczam
このアニメーションを表示したい位置に 移動します
wszystkie klatki kluczowe i przesuwam je tam, gdzie ma być animacja.
フェードアウトする最初のテキストと フェードインする次のテキストが重ならないよう
Dostosuję klatki, gdzie pierwsze pole znika, a drugie się pojawia,
キーフレームを調節します
by nie nachodziły na siebie.
このように時間が近い場合は
Jeśli klatki są tak blisko siebie,
ズームスライダーを使って アニメーションの時間をより正確に調節できます
można użyć suwaka powiększenia, by lepiej zobaczyć granice animacji.
テキストも変更しましょう
Teraz zmienię tekst.
今は2つのテキストボックスが重なっています
Mam tu dwa pola tekstowe,
間違ってクリックして 前面にある方を編集してしまわないよう
jedno nad drugim. Jeśli kliknę tutaj, mogę przypadkowo zmienić
そちらをあらかじめロックしておきます
pole na górze. Dlatego lepiej od razu je zablokować.
これで安心して 2つ目のテキストボックスを編集できます
Teraz mogę edytować pole pod spodem.
これでアニメーションはほぼ完成です
Animacja jest już właściwie gotowa.
ところでキーフレーム同士は どうつながっているのでしょう
Przyjrzyjmy się obszarom między klatkami kluczowymi.
キーフレームとキーフレームの間に [リニア]と表示されています
Między każdą parą widzimy napis Liniowo.
これはCSSのイージング機能で
Chodzi o funkcję wygładzania CSS,
各キーフレーム間の中間値の計算に 使用されるものです
która oblicza wartości pośrednie między
リニアとはこの値が一定の速度で 変化することを意味します
każdą parą klatek. Liniowo oznacza, że wartości zmieniają się jednostajnie.
イージングオプションは他にもあり
Są tu też inne opcje.
右クリックすると CSS仕様で定義されている 標準的なイージング機能が選べます
Gdy klikniemy prawym przyciskiem, zobaczymy wszystkie standardowe funkcje wygładzania CSS.
特にこの移行の場合 ちょうど中間で画像がスライドするので
W tym przypadku, gdy grafika się przesuwa,
別のイージングを選択してもよいでしょう
warto ustawić inną funkcję wygładzania,
たとえばイーズインアウト アニメーションが途中でやや速くなり
np. Wolno-normalnie-wolno.
その後速度を落として終わるので
Wtedy animacja lekko przyspieszy, by potem znów zwolnić i zatrzymać się.
現実の世界で見られる動きに少し近くなります
Wygląda to bardziej realistycznie.
プレビュー範囲を狭くしてみましょう
Ograniczę obszar podglądu,
黄色のハンドルをドラッグして 移行した部分だけプレビューするようにします
przeciągając żółte uchwyty do momentu przejścia.
プレビューを繰り返し再生するよう設定し
Włączę zapętlenie podglądu
この部分だけプレビューして 必要に応じて修正することもできます
i odtworzę tylko ten fragment, by wychwycić potencjalne błędy.
問題ないですね
Wygląda nieźle.
設定済みの機能の代わりに 独自の機能を作成することもできます
Nie trzeba używać gotowych funkcji. Można utworzyć własne.
右クリックして [イージングオプション]を選択し
Mogę kliknąć prawym przyciskiem Opcje wygładzania...
このベジェ曲線をカスタマイズしたら カスタムプリセットとして保存できます
i dostosować krzywą Beziera do własnych potrzeb.
[OK]をクリックすると適用されます
Klikam OK, by zastosować zmiany.
以上でこのチュートリアルは終了です
To koniec tego samouczka.
アニメーションをテーマに詳しく解説している チュートリアルは他にもありますので
Zainteresowanych odsyłam do naszych innych, bardziej szczegółowych samouczków.
そちらもぜひご覧ください
To wszystko. Dziękuję za uwagę.
Similar videos:

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


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


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


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


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


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


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


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


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


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


Groups Overview - Google Web Designer
Google Web Designer
2.6K views 11 likes 2 dislikes 03 Jan 201833% match


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


Outliner Overview - Google Web Designer
Google Web Designer
6K views 47 likes 1 dislikes 31 Mar 202033% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201833% match


Responsive Overview - Google Web Designer
Google Web Designer
7.2K views 126 likes 2 dislikes 31 Aug 202033% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201731% match


Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201831% match


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

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201531% match


Image Processing Overview - Google Web Designer
Google Web Designer
4.3K views 65 likes 0 dislikes 31 Aug 202031% match

Google Web Designer - DoubleClick Studio Dynamic Overview
Google Web Designer
11.5K views 20 likes 8 dislikes 17 Nov 201529% match


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


Custom Motion Effects in VideoStudio Pro X6
Corel VideoStudio
95.3K views 120 likes 9 dislikes 05 Mar 201327% match

Getting started with Google Web Designer: how to create a simple banner ad
Google Web Designer
46.6K views 339 likes 14 dislikes 29 Jul 201927% match


Timeline Update Overview
Google Web Designer
13.6K views 42 likes 3 dislikes 04 Aug 201427% match


Erweiterte Ereignissteuerung mit der Märklin CS3
Modelrailroad
28.9K views 287 likes 5 dislikes 21 Feb 201926% match

ANLEITUNG | Schatteneffekt erstellen 👥 in DiaShow und Stages
AquaSoft
2.3K views 86 likes 0 dislikes 06 Nov 202026% match
0 views 0 likes 0 dislikes 05 Jun 202626% match


Enchanced Dynamic - Multi schema support
Google Web Designer
3.8K views 8 likes 1 dislikes 31 Aug 201526% match


Minecraft Hotkey-Tutorial (German)
4fup
166K views 3.2K likes 189 dislikes 26 Nov 201526% match


Settings Privacy About Contact Donate