rad studio / appmethod study session from osaka (2014/09/27) haruyuki mohri
DESCRIPTION
RAD Studio勉強会@大阪 2014/09/27 毛利スライドTRANSCRIPT
![Page 1: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/1.jpg)
RAD Studio 勉強会 @ 大阪 14/09/27
TEffect を使った綺麗な Form
システムプランベネックス 毛利
appmethod 含む
![Page 2: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/2.jpg)
自己紹介• 毛利と申します
![Page 3: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/3.jpg)
XE7 から *.fmx が複数作られます
• 注意点
マスタ以外の form 名は、いじらない ( 理解できているなら大丈夫です )
*.fmx が増えるだけなので fmx ファイルに書き込まれるファイルはプロパティはそれぞれで別です
Platform ごとの *.fmx はこんな感じですForm1.iPhone4in.fmx ←iPhoneForm1.LgXhdpiPh.fmx ←Android5 インチForm1.SmXhdpiPh.fmx ←Android3.5 インチForm1.Macintosh.fmx ←MacOSForm1.pas ← マスタ (Win)
![Page 4: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/4.jpg)
Unit1.pas に呼出す fmx ファイルが書かれています
{$R *.fmx}{$R *.iPhone4in.fmx IOS}{$R *.LgXhdpiPh.fmx ANDROID}{$R *.SmXhdpiPh.fmx ANDROID}{$R *.Macintosh.fmx _MACOS}
なので解っていれば特にこの規則に従わなくても大丈夫だと思います
![Page 5: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/5.jpg)
C++Builder の場合は#pragma resource "*.fmx"#pragma resource ("*.NmXhdpiPh.fmx", _PLAT_ANDROID)#pragma resource ("*.iPhone4in.fmx", _PLAT_IOS)
![Page 6: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/6.jpg)
試してみます• マスタ以外で Effect コンポーネントを別の TPanel コン
ポーネントの上に置くと置けません
*. iPhone4in.fmx では移動できません でもマスタは移動できます
![Page 7: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/7.jpg)
コンポーネントの削除もマスタから
• 他の fmx ファイルから削除すると
ご注意ください
![Page 8: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/8.jpg)
Timage も同じく fmx ファイルが違うので結果は違います
• マスタ fmx の場合
*. iPhone4in.fmxはこんな感じです
![Page 9: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/9.jpg)
配置の順番を変えると• マスタ側で先に画像まで埋め込んだ
Timage を作るとほかも反映されます
⇒
*. iPhone4in.fmxはこんな感じです
いじってたらマスタ fmx 以外壊れたりして空っぽになったりしました ( ・ _ ・ ;)XE7 のバグ?
![Page 10: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/10.jpg)
ターゲットデバイスが 1 種類なら
• Android/iPhone などターゲットが固定ならマスタだけで設計しても問題無いと思います
• マスタだけを使う場合 Form のサイズだけを気にするようにすれば良い
![Page 11: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/11.jpg)
複数 *.fmx での注意まとめ• 何事もマスタで関係性だけを作ります
• それ以外のプロパティなどはそれぞれのfmx ファイルのプロパティを変更して OKです
• あまりにも fmx どうしが違うと壊れてマスタだけの情報になったりしました ( ・_ ・ ;)
![Page 12: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/12.jpg)
TEffect
• 業務用アプリとしては使わないのでしょうか
• 業務用タブレットでも楽しい動きが欲しい
![Page 13: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/13.jpg)
TShadowEffect デモ
実行⇒
できました完成ですwwコードは 1 行も書かなくて OK です
これ C++も Delphiも同じです
![Page 14: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/14.jpg)
次は動きのある Effect コンポーネントを使ってみます
このあたりの Effect コンポーネントが動画に動きがあるものです
デモります
![Page 15: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/15.jpg)
TDissolveTransitionEffect を使って画像を変化させてみましょう
実行⇒
パワポではわかりにくいですが 実行すると初音ミクと IA の画像が混ざって行く様子がわかります
![Page 16: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/16.jpg)
AnimateFloat メソッドを使って動きのある処理に変えてみましょう
• AnimateFloat() は TFmxObject からあるメソッドなので TFmxObject 継承されているFire Monky のコンポーネントはほとんど実装できます
• 内部的に TFloatAnimation を Create してくれて勝手に Start してくれます
![Page 17: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/17.jpg)
AnimateFloat メソッドを使って動きのある処理に変えてみましょう
• コンパイル時にこんな注意が。。。
でも僕は使いますwTTrackBar の value で警告は良いんですけどTefect にも出てくるなんて
![Page 18: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/18.jpg)
AnimateFloat 使い方• FireMonky の Visual コンポーネント上で例えば Tbutton: Button1 の場
合
Button1.AnimateFloat(‘Position.Y’, 0, 2); こんだけ書いておけば Button1 が一番上 (Position.Y:=0) に 2 秒間使って移動します
![Page 19: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/19.jpg)
先ほどのミクと IA が混ざる Effect 処理をAnimateFloat 使ってみましょう
タイマーコンポーネントのイベントハンドラーからDissolveTransitionEffect1.AnimateFloat を実行してみます
Button を実装してボタンイベントでも OK です
実行してみます
![Page 20: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/20.jpg)
DissolveTransitionEffect1.AnimateFloat が動いているのが確認できます
![Page 21: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/21.jpg)
実装も簡単です• タイマーイベントにほんの数行の処理だけです
![Page 22: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/22.jpg)
Effect かけたあとのデータって保存したいですよね?
• 可能ですTbitmap を作って Image1 の内容をコピーしますその後その Effect でDissolveTransitionEffect1.ProcessEffect();メソッドを実行すれば目的の Tbitmap に Effect 処理がかけれます
ProcessEffect メソッドは Teffect で実装されているので継承されているクラスならすべて持っています
![Page 23: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/23.jpg)
TMultiView は便利です• これ Tpanel で実装してたと思いますがかなり使えそうです• 設定も簡単ですボタンをプロパティに入れるだけです
コード書く必要が無いのでTMultiView 貼ったら実行してみますw
デモ実行します
![Page 24: RAD Studio / appmethod Study session from osaka (2014/09/27) haruyuki mohri](https://reader035.vdocuments.mx/reader035/viewer/2022062705/5566165bd8b42a7d608b4a24/html5/thumbnails/24.jpg)
以上• ありがとうございました