Texture Button ( Larger Hit Area )


(lee) #1

Simply Question! I want this Big Watch now button to change Image on Hover ( Easy )… However… I want the Button area to be the whole bottom section. I dont want the Button hit area to be so small… I can only change the overall size of the button… hope it makes sense!


#2

Have the “whole bottom section” (which I assume is the “Group” folder in the Timeline layers) respond to an “On Mouse Click” action.


(lee) #3

So Group selection > On mouse Hover > Actions > create new timeline ?..


#4

Do whatever You want to accomplish with the “mouse event” of your design. My response was how to account for the “whole bottom section” being a target - I have no idea what your goals are.


(lee) #5

Ah! I see.

Timeline Action > Pause Timeline
On Hover go to frame 2 ( frame 2 change image )

Ok, this is simliarrrrrr to gwd and Animat CC but with more functions I just need to get used to.

Thanks :slight_smile:


#6

Yep … “On Mouse Over” (hover) just add an action that

  • plays a timeline
  • runs some code
  • plays audio / video

In your case you can either manipulate one large timeline that you may have but also you can split “animations” into separate timelines so you could have a “change image timeline” that just handles the change of the image, etc

Also, groups are your friends too as you can make them whatever size and use as the click area (as Jim has mentioned) for some element inside or as a mask. Do many tricks, one can.


(lee) #7

That all makes, I am starting to pick it up. So what I have done is just On mouse on/off move to time in timeline (Main timeline).

But another way could be to duplicate the whole timeline, name it Button timeline, and just change Frame 1 and 2 hover/nothover on new timeline… ok thanks :slight_smile:

Thanks. :slight_smile: I am going to be using all these as archives for myself and others learning


(Jonathan Deutsch) #8

Along with groups (probably the best solution in your case), you can also create a Rectangle element placed above other elements and remove all styling to act as a hit target. Another option to simply expand hit target area is to increase the padding (in the Border section of the Element Inspector).

Yes, what you’re describing sounds correct – multiple timelines can run in parallel so often it is easier to make timelines targeted to a single button or small grouping of animations that way you don’t have to play tricks with jumping around on a main timeline. It is much simpler this way.


(lee) #9

ah that Padding around a rectangle element is clearly 100% the best solution, I will use that a lot thanks!

I feel gwd, and Animate cc/edge always had the problem of tricking the timeline, it does always feel slightly disorderly however I have have gotten used to it.
Would running multiple timelines increase the file size by any noticeable means? it may be a habit I don’t want to get into if there is always another way of replicating it.


(Jonathan Deutsch) #10

Timelines don’t have much overhead. Looking at the *_hype_generated_script output with some tests:

Document with 1 element, 1 timeline with 0 keyframes: 2,071 bytes
Document with 1 element, 2 timelines with 0 keyframes each: 2,124 bytes
difference: 53 bytes

Document with 1 element, 1 timelines with 20 keyframes: 2,903 bytes 2,850 bytes
Document with 1 element, 2 timelines with 10 keyframes each (20 total): 2,902 bytes
difference: 52 bytes

So the strict overhead to timelines is probably going to be 50-60 bytes (with differences probably being in timeline name and duration). You can see that the keyframe data can add up, but if you were going to have the same number of keyframes you might as well use different timelines to make organization easier.

Scenes, Layouts, and Symbols will have more significant overhead.

However all of this is likely to be dwarfed by image/asset sizes, so make sure to prioritize accordingly!


(lee) #11

Thats awesome thanks so much for the detailed answer. It probably seems good practice to make difference timelines I think it will make things neater and more organized like you said!