Dynamic Panel needs Animation Effect (fade in pictures and loop)

Hi Everyone

I need some fancy image fades from my states to make something look really special and almost animated. I am begging for some hands on help please.

MY ART NEEDS THIS:

  1. I have a wise Owl as my main image and that will be constantly the main image. But need these next things to happen OnLoad and in a loop.
  2. But after 30 seconds I want state 2 (lightening in sky) to fade in for about 5 seconds and fade out quickly. Just as normal lightening does.
  3. Then as the lightening comes to the end on that state - state 3 fades in and the eyes of the owl look to blink - so this would need to come in at the end of lightening flash and fade in and out quickly for 3 seconds only. the two states must fade in to make it look smooth and kind of natural on the eye.

…then I would like this to go in a repeatable loop to keep it going. Can this be done please? Have provided my owl and its 2 other states in place in Document here.

Is some Axure RP genius able to look at my file and fiddle with it and then send it back? - will learn from what they do and will be a great learning curve for me.

Thanks: Daryl

(PLEASE NO PERSON WITH WRITTEN ADVICE - I NEED SOMEONE WHO CAN LOOK AT THE FILE AND I CAN LEARN FROM WHAT THEY DO)

SEEKERS - (OWL ANIMATION).rp (1.6

This should be pretty easy to do, but I’m not clear on the number of state changes. Also, the lightning appears in the blinking owl state, so you want the lightning to flash every time the owl blinks?

Can you list the state(s) and duration(s) you want in order?

For example:
Normal - 30 sec
Lightning - 5 sec
Blink - 1 sec
etc.

daryl_lee,

I took a stab at this.

SEEKERS - (OWL ANIMATION).rp (2.4 MB)

But I’m going to offer you some written advice as well, whether you want it or not. You’re much better off animating this in After Effects, Photoshop or a video app and saving it out as a GIF or MP4, then playing that in Axure. The lightning flash and blink need some “professional care” to get right. In fact, if you have your lightning layer by itself (transparent background) and ideally separated from the clouds, we could get this to look better even just with Axure.

In Axure with what you have here, though, I got better results by layering the 3 images and using show/hide and opacity than by changing dynamic panel states.

Trying to animate with dynamic panel state changes is tricky and I’ve only got it work well with simple line drawings. The best I could do with this is on Page 2. You can see with the complex background, the fades just don’t work like you’d expect.

Regardless, the way to set up a repeating sequence loop, or even to just do one long sequence with timing, is to set up a “control function” in a dynamic panel. This dp has two states, and they can be empty. You can change the state of the dp on a delay and repeat that delay. Every time the dynamic panel changes states, it performs its sequence. Have a look at the OnPageLoad and the Control Loop widget (I put a box widget in this to name it and make it easily findable; it hides itself with OnLoad.) I also put in an OnPageClick event so you could test the animation without having to wait 30 seconds.

You can play around with the durations in the Control Loop code to tweak to your needs. I thought 5 seconds was pretty long to show the lightning, so I tried to make it a bit “active” by varying its opacity.

1 Like

Dear MBC
THANK YOU FOR GETTING BACK…I think this is the way it should flow.
15 seconds normal then fade into lightening for 7 seconds and fade out (but think the eyes should blink in between that lightening flash (he’s scared) and can be fade in and out in 2 seconds…then back to normal screen - then the process repeats.

Will love to see the programming and learn from what you do!

How is that: Best: DARYL

PS: So the normal look fades into lightening (but in middle of lightening sequence) the eyes closed comes in…then the lightening sequence is still running when it fades out - then lightening comes to its end and that fades out and into the normal calm screen. All to repeat - as long as screen is open.

Dear MBC
After Effects is a course I did 1 yr ago and would be perfect for this. But sending a Prototype out to Hong Kong in a few Days time and wanted something to show quickly - I have the inside stuff done and needed a cover (will add a logo on it tonight).

Thanks for looking at my file and will study this well.
Last question: is there a way to make it all happening ON LOAD - rather than click on the screen here.

Will get back home and study this well and good now.

Best wishes and THANK YOU!!!

Daryl

Lots of good learning here for me…does the control loop (it has two states)…One with the artwork for the DP, but the other is empty and nothing there. Does it need the second state?

All the rest looks straight forward, make DP for the top two layers and program them in from the Control Loop at the bottom. Never have thought about this box outside artwork.

Best: Daryl

Oh it does happen on page load. …Or at least it should. :confused: Did you try waiting for 30 seconds? And then another 30 s for the repeat?

If you want it to happen immediately on page load, open the OnPageLoad event and uncheck the checkbox for “delay…”

You can remove the OnPageClick testing by just deleting it before you ship it. When you look at it, you will see both the OnPageLoad and OnPageClick do the same thing: change the Control Loop dynamic panel state. The only difference is the OnPageLoop event has a repeat to change the state every 30 s instead of just once.

Yes. It needs at least two states in order to change states. Changing the state is what triggers it to do something. As I said, both states can be empty–or they can contain whatever–does not matter. With these interaction options, it will automatically change states until you tell it to stop:

If you want it to repeat every 15 s then change the “Repeat every 30000 ms” to 15000 ms. Likewise with timing when to show lightning and blink images. Just remember that it will fire each of the commands in this sequence as fast as the computer will execute them, it will not wait for animation durations. You need to add in the Wait commands and account for how long things should take. …Then you always have to tweak things by trial and error.
Here is the animation sequence for the Control Loop dynamic panel, set to take a total of about 5 s currently:

So,
The thunder image fades in for 250 ms (to 100% opacity)
We wait 250 ms for that to happen
It fades to 33% opacity over the next 500 ms
We wait 250 ms for that to happen–halfway
It goes all the way to 100% opacity over the next 250 ms
We wait 1000 ms (So, it should start to flash partway, then all the way, then stay steady for about 750 ms…)
Then it fades down to 66% opacity over the next 500 ms
… etc …

Hopefully, this gives you enough to adjust the timing to your needs.

THANKS yet again…can I send you some money to buy some coffee’s? I have so appreciated your help to me…I had a little play with the delay and it looks wonderful (in its just simple way).

Sincerely: Daryl