パーツをつくるシリーズ)このレッスンでは、色違いの商品を選択するドロップダウンのつくり方を解説します。起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。画像を表示するコンポーネントの作成アートボード上の写真、カラーバリエーションの文字、ドロップダウンのボタンを選択します。そのまま、プロパティインスペクタのコンポーネントの右のプラスマークをクリックして、コンポーネントに変換します。色違いの商品を表示する状態のために別のステートを作成します。新規ステートを作成し、名前を「black-up」とします。プロパティインスペクタで「black-up」が選択されている状態で、ブラックの商品写真を選択してコピーし、コンポーネント内の商品写真を選択して「アピアランスをペースト」を実行します。これで商品写真を差し替えられます。商品カラー名も忘れずに「ブラック」にします。「初期設定のステート」に切り替えます。ドロップダウン用のリストをコピーして、コンポーネントをダブルクリックして編集状態にしてからペーストします。このように「初期設定のステート」にオブジェクトを追加すると、自動的に「black-up」ステートにも反映されます。続けて、リストの表示:非表示を切り替えるためにマスクを追加します。長方形ツールを選びリストを隠すように長方形を描いたら、リストと長方形を選択して「シェイプでマスク」を実行します。「初期設定のステート」では「グリーン」のシューズが表示されるため、リスト内の選択中のカラーを示すチェックマークは、「ブラック」の方の不透明度を0%にしておきます。最後に、リストをマスク領域の上に移動して、リストが非表示になるようにします。次は、ドロップダウンのリストが表示されている状態をつくります。新規ステートを作成し、名前を「green-down」とします。上に移動していたリストをマスクの位置に戻します。同じように、「black-up」を選択してから新規ステートを作成し、名前を「black-down」とします。「green-down」と同じ位置に、ドロップダウンのリストを移動します。リスト内の選択中のカラーを示すチェックマークは、「ブラック」の方が表示されるように不透明度を変更します。ドロップダウンにインタラクションを設定プロトタイプモードに移動して、ドロップダウンにインタラクションを設定します。「初期設定のステート」を選択し、ボタンを選択してから水色のプラスマークをクリックし、インタラクションを追加します。トリガーは「タップ」、種類は「自動アニメーション」、移動先は「green-down」ステートにします。これでボタンをタップすると、ドロップダウンのリストが表示された「green-down」ステートに遷移します。次に、リストを非表示に戻すインタラクションを追加します。「green-down」のステートに切り替え、リスト内の「グリーン」を選んでプラスマークをクリックします。トリガーは「タップ」、種類は「トランジション」、移動先は「初期設定のステート」にします。最後に、商品画像を切り替えるインタラクションを追加します。「green-down」のステートのまま、リスト内の「ブラック」を選んでプラスマークをクリックします。トリガーは「タップ」、種類は「トランジション」、移動先は「black-up」ステートにします。「black-up」ステートと「black-down」ステートにも、ここまでと同じ要領で、リストの表示を切り替えるインタラクションと、「グリーン」のシューズを選択するインタラクションを追加します。ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したインタラクションを確認できます。撮影時XDバージョン49使用している機能コンポーネント自動アニメーション画像ファイルの配置トランジションマスクこちらの機能をあらかじめ習得しておきましょうシェイプでマスクを作成マスクを使用すると、画像またはオブジェクトの一部を任意の形に切り取り、デザイン要素として利用できます。マスクとして使用するシェイプを描画します。1/3(フェードイン/アウト)自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できます。プロトタイプモードでアートボードを接続し、プロパティ...プロトタイピングさらに強化。描画ツールを使うと、さまざまな装飾的な表現を描くことができます。利用条件Cookieについて。