Best-Of: FileMaker 13 Animations

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…


[ba-youtubeflex videoid=”EcM9qkz43GA”]

[ba-box background=”#778899″ border=”#708090″ textcolor=”#F7F7F7″][jetpack_subscription_form][/ba-box]

Featured Posts

Follow Along

Stay up to date with the latest news & examples from SeedCode

17 Comments

  • Tunes

    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.

  • Tunes

    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

      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.

  • Tunes

    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

      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

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

    • seedcode

      Nice!!

  • Radu

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

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

    • Jorge

      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 )] ?

    • seedcode

      Nice!

  • Joe

    Nice work John!

  • arnisgross

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

  • Rothmayr

    Works very well! Thanks!

  • C. J. Weigand

    Your download does not work.

    • seedcode

      Works here, C.J. Mind trying again / refreshing the page?

      • Oreste

        Works for me. John you are a UI monster

Leave a Reply

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

Check out some of our other posts ...

Suggesting Appointment Slots

Show Available Slots that Match Multiple Criteria Schedulers often look for gaps in their schedules to find the open resources for each opportunity. But sometimes,

Introducing Draft Settings Mode

Following up on this idea that people stretch themselves when they feel a little safer, we’ve been very focused on the customization experience for DayBack

New Longer Timescales for DayBack

Resource Scheduling Swimlanes You can now extend the pivoted scheduling view in DayBack to show items by week instead of solely by day. This lets

FileMaker Summer Camp – Recap

Unconference Sessions If you missed Pause in October, here’s a look at the sessions that attendees hosted. All the sessions are listed in this post

COMPANY

FOLLOW ALONG

Stay up to date with the latest news & examples from SeedCode

© 2024 SeedCode, Inc.