FileMaker スライドコントロールの小ネタ

FileMakerでファイルを作るときにいつも必ず使う小ネタ・小技、本日はスライドコントロールのちょっとしたお楽しみ。

タブとスライドは目的も機能も似たようなものですが、スライドコントロールはわりといろいろカスタムできて楽しいのでよく使います。

アニメーション

スライドの特徴は何つっても切り替え時にアニメーション効果を付けられることです。

アニメ効果を付けるために、スクリプトステップでこんな感じの一手間を掛けます。

レイアウトオブジェクトアニメーション設定 [ オン ]
オブジェクトへ移動 [ オブジェクト名: Get ( スクリプト引数 ) ]
スクリプト一時停止/続行 [ 間隔(秒): .3 ]

アニメーション設定をオンにして
パネルに名前を付けておき「オブジェクトへ移動」
一時停止で指定した時間分アニメーションします。

左右のみ

アニメーションはいいのですが非常に残念なことに左右にスライドする効果しかありません。上下に移動する効果があればナンチャッテ折りたたみのインターフェイスが実現するのですができません。

上下のアニメーションができればナンチャッテ折りたたみができるというのは、左右のアニメーションで「せり出てくる」ような効果をよく使うからです。これを縦に使えるといいんだけどなあ。「オブジェクトを90度回転できないか」と思いましたができませんでした。

せり出てくる感じのスライド

いつも使う手は、透明なスライドを使うことです。そしてデフォルトのパネルには何も置きません。パネル2、パネル3にものを置きます。

移動のスクリプトは目的別に3つほど作っています。
ひとつはデフォルトパネルと他のパネルのトグル(オンオフみたいな挙動)、ひとつは単に指定パネルに移動、もうひとつはデフォルトパネルに一旦戻ってから指定パネルに移動する挙動です。

パネルの順番によって左右に動くアニメーションの方向が決まります。画面の右端に置くときと左端に置くときでは、デフォルトパネルの順番が異なります。反対側から出てくるように見えれば不細工ですので位置を変えたりします。

一旦 0 に戻るアニメ

左右にパネルが動くのが相応しくない場合というのがあって、それはスライドの各パネルに繋がりというものを感じさせたくない時ですね。

さっき書いた三つ目の「一旦デフォルトに戻ってから移動」は、そうした繋がりを感じさせないようにするという動きです。

たまに使いますが、動きが少々くどいので、頻繁にスイッチングするような使い方にはあまり向いていません。

スクリプトの細かい内容をたらたらと説明しませんが、代わりにサンプル置いておきます。実際にはこの動きをベースに、デザインと制御を整えていったりして作りこみます。

サンプル→ SlideControl.fmp12.zip

※ 後に確認したところ、いくつか不手際がありました。各自バグフィックスしていただくか、参考程度にお願いします💦

レイアウトデザインのベースをスライドに頼ることも多くて、すぐにやり過ぎてしまいます。スライドが画面の半分以上を占め、多数のパネルが入れ子状態、それぞれが別レイアウトの如くオブジェクトで溢れかえります。編集するのも実際に利用するのも重くなってきてスリム化で考え込むこともシバシバ。

レイアウトを分けてしまうとレイアウト名の指定が面倒なので、ついつい一つのレイアウト内に全部詰め込んでしまうという悪い癖ですが、それが容易くかつ美しくできてしまうという魔性のスライドコントロールです。ご利用は計画的に。

 

Penguin icon という軽い内容の記事をお届けしましたが、じつは実作編Ver.3の大改造で記事書くことに折れてしまいそうでして、それで逃避のひとつとしてこんなのをひょいと出してみましたわけです。V3にも透明スライドを利用しています。