Snowman

以下の項目について学ぶことができます.Kwikを扱う基本的なテクニックになります

以下のリンクからチュートリアルのファイルをダウンロードできます.

.psdは768 x 1024です.iPadMini向けのKwikプロジェクトを作成しましょう.

page1

  • snowman
  • house
  • tree
  • text
  • start


Snowman animation

  • shake widget
    • degress 15
    • duration/speed 0.1
    • delay 0
    • Loop 3 times
    • waite request

actionの作成

このアクションは"snowman"というテキストと連携して発動します.

  • Name:action_sman
  • play animation

アクションの名前は"action_sman"とします。.


Snowflake - multiplier

  • amount 20 copies
  • time interval 0.5 sec
  • rotation between 0 to 45 degree
  • play forever
  • Boundary X between 0 to 1024
  • Boundary y between -500 to 0
  • Enable physics Normal
  • Wait request

action snow

  • Name:action_snow
  • play multiplier for snowFlake


Read Me Audio

読み上げ(read to me)を myTextレイヤーに設定します。サンプルの中にohno.mp3ohno.txtがあります.ohnoテキストは,Audacityによって作られたtimecodesを含んでいます。(Audacityについては後で説明します)

  1. ohno.pm3をread to meのオーディオファイル(audio)として追加します
  2. myTextレイヤーと連携させます

では,ohno.mp3を追加しましょう

  • add audio: ohno
  • read me file
  • Loop times 1
  • Play when page starts is disabled.


Sync Audio & Text

myTextレイヤーを選択して、sync aduio and textをクリックします。そして、以下のように設定してください

  • Aduio file: ohno
  • Import From Audacity ohno.txt
  • Text Hight light color is pink
  • Show Play button

read me sentenceの先頭にある小さなスピーカーアイコンが表示され,クリックすることによって読み上げ(read to me)を再生することができます.

snowmanの欄をクリックすると,timecodesテーブルが表示されてアクションを設定することができます.読み上げ再生のタイムラインがこのワード snowman に到達した時,アクションが発動します.

  • timecode snowman

  • timecode snow


Audacity

timecodeファイルを作成する時,Audacityのラベル機能を使用します.Audacityは以下のリンクからダウンロードできます

https://sourceforge.net/projects/audacity/

  • オーディオファイルを開きます
  • 波形のエリアを選択します。マウスでドラッグすると選択できます。
  • Tracks > Add lable (Command + B on Mac, Ctr+B on Win) ラベルの追加
  • File > Export
  • File > Export Lable


House

houseレイヤーは下書きのレイヤーなので,Kwikでパブリッシュする際に出力されないように設定します。

  • レイヤーの名前の前に - をつけてください.- がついているレイヤーはパブリッシュされません.


Tree

木のレイヤを再利用します。

  • tree2, tree3, tree4 レイヤーを同時に複数選択してください.

layer & replacementsからlayer propertiesを選択してください.

  • Export PropertiesでRender as treeを設定してください


Path1は左から右に動くように作られています.帽子はそのpathに沿って一緒に飛びます

Path Animation

  • Layer: hat
  • Path: Path1
  • Auto turn
  • Duration 3 sec
  • Loop times 1
  • Starts: When page starts
  • Breadcrumbs
    • Enable
    • From: Center
    • Shape: Circle
    • Width/Radius: 3 px, Height 10px
  • Color rand (ランダムな色が選ばれます)
  • Interval: 50
  • Dispose after 1 sec


Add Page2 using page1

コピーではなくpage1.psdを使用しましょう.

  • Use page1.psdをチェックします


Layer_1 background

backgroundレイヤーは共通です。また,PNG変換をする必要はありません.jpgとしてレンタリングして、page1とpage2とで共有しましょう.

page1に移動して,Layer_1を選択し,レイヤープロパティーを開いてください.

Layer_1のpage2でも同様のことを行なってください.KwikはLayer_1.jpgを複製せず,画像を共有します.


グループのアニメーション

hatとsnowmanを一つのグループにまとめます.hatとsnowmanレイヤーを選択して,Create Groupsを選択してください.

+アイコンをクリックして,グループのレイヤーを追加することができます.

グループをLinear animationに設定すると,hatとsnowmanが一緒に動きます.

gp_hat_snowmnにLinear Animationを追加

  • Group: gp_hat_snowmn
  • X:605, Y:273
  • Duration 3 sec
  • Loop times 1
  • Starts: When page starts

hatにLinear Animationを追加

scaleとtransprency, ratationをhatに追加しますが,このままではhatは指定したxとy座標に移動しません.Group control end positionをチェックすることによって正しい位置にxとy座標を設定できます.

  • Layer: hat
  • Group animation controls end position
  • Duration 3 sec
  • Loop times 3
  • Reverse at endng
  • Starts: When page starts
  • Return to start after play

小さなhatが少し傾いています

大きなhatはもう少し傾きます。


Publish

複数のレイヤーを選択、または一つのレイヤーを選択するときにシフトキーを押しておくことで,kwikの画像のパブリッシュの方法を変えることができます.

  • 選択した画像のみパブリッシュするためには複数のレイヤーを選択してください
  • 一つのレイヤーをパブリッシュするときにはshiftキーを押してください

settingウィンドウで,どのページをCorona Simulatorが開くかを設定することができます.

  • When publishing only current page, start Simulator in the current page
    • 現在のページのみパブリッシュしたい場合,そのページでシュミレータを起動させる

アプリを最終的にビルドするときには以下の項目をチェックしないでください

  • Export sample icons. アイコンを上書きしてしまいます
  • Export each image inside group(layer set). 使用しない画像を生成してしまいます
  • Show memory used in the Termial. メモリの使用量をチェックするためのデバッグモードです

補足 bilinear interpolation

プロジェクトが、小さい画像ファイルを自動生成するときに、利用可能です。画像のwidth/heightが奇数である場合、@2xの画像から@1xの画像が生成されません。画像を修正するためにbilinear interpolationを使用することができます.画像は自動で適正な大きさに修正されて,小さなデバイスに対応した画像を生成します.

results matching ""

    No results matching ""