Indesign - Rollover / On-click Animations on Buttons and Menu Elements
Copy link to clipboard
Copied
This menu uses Scaleform GFx, which was a game development middleware package, a vector graphics rendering engine used to display Adobe Flash-based user interfaces and HUDs for video games. You can find menus like this in most games (Crysis, Borderlands, Mass Effect, etc). I love the interactivity of these menu elements.
I want to create a menu in a fixed layout EPUB3 that mimics some of the elements seen in the video. There will be two buttons at the bottom of each page, one for the document index, and the other will be an XP calculator. I would like these two buttons to mimic the rollover effect on the "Primary" and "Secondary" buttons in the video. You can see how the buttons change colour from blue to orange on rollover, and the edge "cap" geometry expands inwards. I also want to mimic the on-click effect where the outside element expands in size and the whole button changes colour to teal.
Is it possible to have a button like this in a fixed layout EPUB3? Would the animations work on a mobile device (what will happen to the rollover state)? I have created the geometries in Illustrator already, and I have watched some tutorials on how to create animated rollover / click states for buttons in Animate (so I already have some idea of how to make elements appear to move and expand with masks and keyframes, etc), but none of the tutorials show how to make a button gradually change colour while its elements are moving around at the same time.
Also, once I animate the buttons in Animate, how do I output them from Animate into the InDesign file? All of the tutorials I've seen show everything but that part.
Copy link to clipboard
Copied
I've been working on this for a few days. I've created the elements and their animations, and here is the cycle for the "highlight" sequence:
It may be hard to make out so I will explain the cycle. There are two layers in the movie clip symbol mvc_IndexButton3_Combined, one for the BaseShape and one for the EndCap. I created a shape tween for both shapes to change their colours and to expand the End Cap inwards, and labelled the first frame on that tween "Over". Then I copied the tween animation and reversed the frames. I labelled the first frame of that tween "Out".
I have been trying to create "smart cursor on/off" effects, so that if the user takes the mouse cursor off the button while it is partway through the animation, the animation will reverse from whatever the current frame is back to what appears to be the initial state (but is actually the end of the reversed animation on frame 20). It seemed impossible to do this with a button symbol, so I am trying to make the movie clip act like a button with ActionScript code. These are all the things I have gleaned from other tutorials to get this far.
So back on the main timeline, I have applied an ActionScript to frame 1 to make this happen, but I am getting an output error:
mvc_IndexButton.addEventListener(MouseEvent.ROLL_OVER, SmartRollOver);
mvc_IndexButton.addEventListener(MouseEvent.ROLL_OUT, SmartRollOut);
function SmartRollOver(e:MouseEvent):void{
mvc_IndexButton.gotoAndPlay("Over")
}
function SmartRollOut(e:MouseEvent):void{
mvc_IndexButton.gotoAndPlay(20-(mvc_IndexButton.currentframe-5));
}
Causes:
ArgumentError: Error #2109: Frame label NaN not found in scene NaN.
at flash.display::MovieClip/gotoAndPlay()
at IndexButton_fla::MainTimeline/SmartRollOut()
I got this code from a YouTube video:

