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…


Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Tagged with →  

17 Responses to Best-Of: FileMaker 13 Animations

  1. C. J. Weigand says:

    Your download does not work.

  2. Rothmayr says:

    Works very well! Thanks!

  3. arnisgross says:

    Thanks. Do you have something similar for a 2 part segment control? Need to replace the outdated radio buttons.

  4. Joe says:

    Nice work John!

  5. Radu says:

    Set Field[SomeTable::SomeField; Max ( 0 ; not ( SomeTable::SomeField ) )] is very nice, but

    Set Field[SomeTable::SomeField; 1 – SomeTable::SomeField] is faster :)

  6. 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

  7. Tunes says:

    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).

    • seedcode says:

      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.

      • Tunes says:

        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!)

  8. Tunes says:

    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?

    • seedcode says:

      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.

  9. Tunes says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share →
DOWNLOAD
DayBack Calendar
DayBack's 30-day trial is unlocked so you can customize it and integrate it with your files.
Download DayBack and we'll send you a couple short emails with tips on how to modify it and use some of the coolest features.
Thank you! Please download: DayBack Calendar
Need More?
SeedCode tips & example files in your inbox
Need More?
SeedCode tips & example files in your inbox
Want More?
Be the first to see articles and tips like these
DOWNLOAD
TimeZync
Download TimeZync and we'll send you a couple short emails with tips syncing your FileMaker Go files.
Thank you! Please download: TimeZync
Want More?
Be the first to see articles and tips like these