Barはアプリ下部にある主にアプリ内の各画面へ遷移することを目的に実装されたものです。Barのベースを375×83作成し(図14)、ベースの上に「lv1/line/border」を配置しプロパティパネル上部からFlipさせます。Designeから配置します。Bar内のボタンを作成していきます。このレッスンで使うアイコンはこちらからダウンロードしてください。26にリサイズし下記用のように配置します。上記で作成した2つのオブジェクトを選択し、「lv2/btn/tab」にシンボル化します。次に作成したシンボルを編集していきます。TabBar4シンボル化した「lv2/btn/tab」のRectangleを消去します。26の「lv1/color/keycolor」を「lv1/icon/tab_home」に名前を変更しシンボル化します(図19)。シンボルをダブルクリックし、さらにシンボルを編集していきます。TabBar6ダウンロードしたアイコン素材を上記backButton(図8)と同じ要領で、keycolorとアイコンを選択し、マスクを行います(図20)。※マスク前の「lv1/icon/tab_home」を複製しておきましょう。TabBar7上記と同じ要領で、マスク前の「lv1/icon/tab_home」を使用し以下のシンボルを作成していきます。図21のように作成できましたら次に行きます。setting)以下2つはそのままで大丈夫です。TabBar8ページに戻り、Insertから「lv2/btn/tab」を5つ配置します。このとき両端のマージンを16px開けてください。TabBar95つ配置し終えたら、ボタンを全て選択し、Distributeを行います。TabBar10配置を終えたら、プロパティパネルのオーバーライドから、アイコンと色を個々に変えていきます。TabBar11最後に上記で作成したオブジェクトをまとめて選択し、「lv3/bar/TabBar」にシンボル化します。TabBarの完成です。投稿用コンポーネント作成する投稿コンポーネントを作るhomeの中の投稿コンポーネントを作成していきます。初めにユーザーアイコン、ユーザーネームとオプションを表示する部分を作っていきます。54pxにリサイズします。投稿コンポーネント1次にユーザーアイコン、ユーザーネームラベル、オプションボタンを垂直中心に配置します。※両端マージンは16px、ユーザーアイコンとユーザーネームラベルのマージンは10pxです。作成したら、全てを選択し「lv2/cell/user」にシンボル化します。ダブルクリックしシンボル編集ページに移り、Ovalを「lv1/img/usericon」にシンボル化します。投稿コンポーネント2次に、サムネイルを作成していきます。250pxの3:2のRectangleオブジェクトを作成します。(図27)作成したら、Rectangleを「lv1/img/Post」にシンボル化します。投稿コンポーネント3文字やアイコンが表示されるベースを作っていきます。375pxにリサイズします。投稿コンポーネント4サムネイルから10px下に、ハートアイコン、コメントアイコン、レシピアイコン、ブックマークアイコンを配置します。※アイコン同士のマージンは10pxにします。アイコンを全て選択し、「lv2/block/icon」にシンボル化します。投稿コンポーネント5「lv2/block/icon」の10px下に、文章のテキストラベルを配置し、「lv1/txt/Post」にシンボル化を行います。#3D3D3D次に、「lv1/txt/Post」の5px下に日付のテキストラベルを配置し、「lv1/txt/date」にシンボル化を行います。#8A8A8A配置後、2つのテキストラベルを選択し、「lv2/detail/discription」にシンボル化を行います。最後に「lv1/line/border」をRectangle一番下に配置します。投稿コンポーネント6上記の作成したオブジェクトをまとめて選択し「lv3/home/Post」にシンボル化して、これで投稿コンポーネントの完成となります。投稿コンポーネント最後の工程です。投稿コンポーネントを複製、配置し、アイコン画像、サムネイルの写真を挿入したらホーム画面の完成です。