1/3)このレッスンでは、ページを読み込んだ際に表示されるイントロアニメーションのつくり方を解説します。起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。新規アートボードを作成し、それをコピーして2枚目を作成します。2枚目のアートボードには、アセットパネルからロゴをドラッグして中央に配置し、アートボードと同じ大きさの黒い長方形を作成してアートボードの下に配置します。2枚目のアートボードをコピーして3枚目を作成します。ロゴを削除し、2枚目のアートボードの黒い長方形をコピーしてアートボード全体が隠れるように貼り付けます。用意されているマスターデザインのアートボードをコピーして、4枚目のアートボードを作成します。アートボード上部に配置されている「参加する」ボタンと「ページトップ」ボタンの不透明度を0%にして非表示にします。これでイントロアニメーション開始から終了までの各段階ができました。自動的にアニメーションが開始されるインタラクションを設定プロトタイプモードに移動して、1枚目のアートボードから4枚目のアートボードまで自動的にアニメーションされるように設定します。1枚目のアートボードを選択して、表示される青い矢印を2枚目のアートボードに接続します。トリガーに「時間」、ディレイに「1秒」を指定すると、1枚目のアートボードが表示された1秒後に、自動的にインタラクションが開始されます。アクションの種類に「トランジション」、アニメーションに「ディゾルブ」、イージングに「イーズアウト」、デュレーションには「0.6秒」を指定します。次に、2枚目のアートボードを選択し、青い矢印を3枚目のアートボードに接続します。1枚目のアートボードと同様に、トリガーに「時間」、ディレイに「1秒」を指定します。アクションの種類に「トランジション」、アニメーションに「上にスライド」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。最後に、3枚目のアートボードを選択し、青い矢印を4枚目のアートボードに接続します。トリガーに「時間」、ディレイには「0秒」を指定します。アクションの種類に「自動アニメーション」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。プレビューして動きを確認1枚目のアートボードを選択した状態で、ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、1枚目のアートボードから4枚目のアートボードまで、自動的にアニメーション付きで遷移することを確認できます。2/2(画面遷移のアニメーション)画面遷移のインタラクションにはデフォルトで「ディゾルブ」のアニメーションが設定されています。1/2(時間トリガーの基本)時間トリガーを使用して、時間の経過により自動的に発生するアートボード間のトランジションを作成できます。プロトタイプモードで、移動元のアートボードを選択し、移動先のアー...プロトタイピングさらに強化。XDで、タップして操作できるボタンをデザインしましょう。デザインの動的な側面を表現すれば、アイデアを周囲に伝えることがずっと容易で確実になります。利用条件Cookieについて。