More Fun with FileMaker Animations: Slide Panels
By carefully positioning images within slide panels we can get a nice animated effect when clicking a simple switch.
This doesn’t use any tricky code, just a very careful placement of the image inside a slide control whose radius has been set to match that of the switch image.
Just like a regular button, we use a simple script to set the field value our switch represents–the same script is attached to each “state” of the switch. We then set FileMaker 13’s animations to “on” before using GoToObject to move the correct panel into focus. The GoToObject routine is in a separate script so you can run it on layout enter to make sure the switch keeps up with its field value.
Download the sample file here: Switch.fmp12
Watch the full video below…
Your download does not work.
Works here, C.J. Mind trying again / refreshing the page?
Works for me. John you are a UI monster
Works very well! Thanks!
Thanks. Do you have something similar for a 2 part segment control? Need to replace the outdated radio buttons.
Nice work John!
Set Field[SomeTable::SomeField; Max ( 0 ; not ( SomeTable::SomeField ) )] is very nice, but
Set Field[SomeTable::SomeField; 1 – SomeTable::SomeField] is faster :)
Nice!
I don’t understand the use of the Max() function here. What does that add, rather than just use:
Set Field[SomeTable::SomeField; not ( SomeTable::SomeField )] ?
These sliders are great. I used them for a displaying information on an office map. I was not able to make the sliders show up on webdirect though… not sure why… probably me. If you want to download my map template, go here.
http://menerso.tumblr.com/post/108742856955/how-to-make-an-office-map-using-filemaker-pro
Nice!!
I was hunting for a way to create something that either illuminated like an old style toggle switch and found your page John. I downloaded the example file and went to fooling around. This is tricky to line up. I know there’s a slider panel. I also know theres two graphics, one for “On” and one for “Off” but how do you line them up? In my experimentation I seem to have broken the switch. Do you by chance have a video of how you line this up? (Aspiring developers want to know!)
Also what is it about Radu’s way of writing the calculation that makes it faster? (Haven’t even got that far yet but I’d like to know why that code is faster).
Hey there, I line these up using the positioning #s on the inspector: write down the Left and Top position of the image one panel 1 and then use the inspector to nudge the image on panel 2 to the exact same Left and Top. Here’s a video: http://quick.as/XYzYfB45l
As for speed, I think Radu’s calc is “shorter”, but you’d be hard-pressed to say it’s faster in any practical sense. The only speed difference would be that the calc engine doesn’t need to max two numbers but that’s not something a user could notice or even measure in a single iteration.
John,
Thanks so much! The quality of your step through is only exceeded by your awesomeness. (Is that a word?).
It’s funny but when you are fledgling developer you over look the obvious. I was so focused on the individual elements it never occurred to me to use the most obvious tool available to me which is the inspector. Doh!!
I also admit to being confused about the slider panel and how the graphics were placed. I created a second one but it had a white background and I got caught up in how to remove the little panel indicator dots and change the color of the white background. Your’s doesn’t have the panel indicator dots or a colored background. So I am guessing you copied the color on your layout then applied it to the background color on the slider. I will poke around and see if I can get the dots to go away.
Thanks for the explanation and the video. (Quick.As was a nice extra discovery too!)
John so I was really struggling with this and finally another developer looked at it and noticed that I had a problem with the name of the object “Switch_ON”. Since I wanted additional switches on the page I had copied and pasted it several times. This resulted in “Switch_ON”, “Switch_ON 2”, and “Switch_ON 3”. Since the script was referencing “Switch_ON” obviously the one I was working with was not being referenced as it was “Switch_ON 2”. I thought I would mention this in case someone else runs into it.
I know I could have just asked you why it might not be working but I didn’t want to take advantage of your time since you were so generous to provide this material.
There’s two things I note that make this king of stuff challenging for new guys/girls. Most documentation omits a needed ‘schematic’ or ‘eploded view’. Videos seem to circumvent that but not always.
What’s the best way to make a ‘punch list’ of the objects that are referenced in solutions others create. There are several solutions developers have created that might help with this such as Todd Geists “FM Perception” If I don’t have such tools what’s the best way for me to look for field names/object names, script references, etc? e.g. in the slider example there’s the object which says “Blank” but behind it is an Object that has an “S”. What’s the purpose of the two?
Hey there! I love FM Perception, but I don’t think that’s the kind of thing most people use to answer questions like “how does this button animation work?”. FM Perception is better at bigger, more tangled questions, like “If I remove this script, am I going to break something else in my solution?” =)
For “how does this work” questions, I think we all turn to the Script Debugger in FileMaker Advanced. Here’s a video showing how I’d explore this button animation if I’d never seen it before: http://quick.as/moqoczlbd (That video also explains the “s” and “blank” objects you found. Glad you’re diving into all this.
I liked my Freudian slip of using “king” instead of “kind” above. John thanks. The video was very helpful. Funny it never occurred to me to use script debugger but that’s the most logical thing to have tried. Glad I made the effort to buy FMPA instead of vanilla FMP. I love this stuff. Never thought I’d have the head for it.