Building an Interactive Picture Gallery

Tutorial: Cool Crafts for Kids Picture Gallery with Edge Animate

Download Files

In this version of the Cool Crafts for Kids website, there are nine elements on the stage:

  • 4 menu buttons (with navigation actions already applied)
  • Cool Crafts logo
  • 4 thumbnail images
adobe edge animate interactive photo gallery

Set up the Stage

  1. In the Timeline, click on the Insert Trigger icon {} above the Stage row.
  2. On the button panel on the right side of the Trigger dialog box, click on Stop. This adds the sym.stop() command to the main timeline. Without this, all the image overlays would appear one at a time without having clicked any thumbnails.
  3. Close the Trigger dialog box.
adobe edge animate interactive photo gallery
  1. In the Timeline, click the Insert Label icon.
  2. Name the current position on the Timeline (0:00) begin. This gives us any easy target for jumping around in the Timeline using actions.
adobe edge animate interactive photo gallery

Add the Copter Overlay

  1. Move the playhead to 0:00.5 and label it copter. This is where the copter overlay will reveal with an animation.
adobe edge animate interactive photo gallery
  1. Drag a copy of the copter_overlay symbol onto the stage and center it.
  2. In the Elements panel, drag the copter_overlay bar to the top of the stack.
adobe edge animate interactive photo gallery
  1.  In the Properties panel, click to add a keyframe for opacity.
adobe edge animate interactive photo gallery
  1. Move the playhead to 0:01.
  2. Add a Stop trigger as before. This will stop the Timeline when the copter overlay has finished being revealed.
adobe edge animate interactive photo gallery
  1. Add another keyframe for Opacity.
adobe edge animate interactive photo gallery
  1. Move the playhead back to 0:00.5.
  2. Make sure that Auto-Keyframe Mode and Auto Transition Mode are both turned on.
  3. Change the Opacity to 0. A transition will appear. Slide your playhead across to view the animation.
adobe edge animate interactive photo gallery

Add Click Interactivity

  1. Move the playhead back to 0:00.
  2. In the Elements panel, select the craft-copters element.
  3. Click the Open Actions {} icon for this element to open the element’s actions panel.
adobe edge animate interactive photo gallery
  1. Select click.
  2. Click the Play button on the right.
  3. In the parentheses for the sym.play() command, type in “copter” (including the quotation marks). This will jump the playhead to the copter label at 0:00.5. Then the timeline will stop at the stop() command at 0:01.
adobe edge animate interactive photo gallery
  1. Close the Actions panel.
  2. Save the file.
  3. Go to File > Preview in Browser. You will find that nothing is clickable. This is because although the copter overlay is not visible, it is still covering everything else. We need to move it offstage until it is needed.
  4. Move the playhead to 0:00.5 and set keyframes for X and Y in the Position and Size section of the Properties panel.
adobe edge animate interactive photo gallery
  1. Move the playhead back to 0:00.
  2. Hold the shift key while dragging the copter_overlay element to the left so it is offstage.
adobe edge animate interactive photo gallery
  1. Save the file and preview again in the browser. The overlay should appear now when you click on the mini copters thumbnail.
adobe edge animate interactive photo gallery
  1. Return to Edge Animate.
  2. Open the Actions panel for the copter_overlay element and select click.
  3. Click the Play button and insert “begin” into the parentheses.
  4. Save the file and preview again. This time, you should be able to click the overlay when it appears, to return to the home page.

Now try making click overlays for the other three thumbnail images. Each one will need to inhabit a separate section of the timeline.

Tutorial: Responsive Web Layouts in Edge Animate

Complete the Responsive Web Layout lesson that comes with Adobe Edge Animate.

Window > Lessons > Resize