Adobe Edge Animate: Simple Nested Elements

Home → Blog → Adobe Edge Animate: Simple Nested Elements



Here is a simple example of element nesting now available in Adobe Edge Animate.

Click the above image to preview example.

Element Nesting:

  1. Select the Rectangle Tool (M) and draw a div shape. I called mine ‘Parent’.
  2. With the ‘Parent’ div element active, in the Properties Panel set it’s Overflow property to ‘auto’;
  3. Double-click it’s Background Color swatch and set the Alpha value to 0%;
  4. Optional: Set desired Border Color and Style;
  5. Then add (drag and drop) additional elements directly onto the ‘Parent’ div element in the Elements Panel;
    In my example I added an additonal graphic, background div and text div.

Sample Download file updated for Edge Animate 1.0

Download Sample file below.

Nested Elements
Title: Nested Elements
Downloaded: 249 times
File Type is zip, size of 604.29 kB.

Share and Enjoy

On January 19, 2012   /   Blog, Downloads, Edge Animate   /   13 Comments

Related Article(s):

  1. Adobe Edge Animate: Concentric Rings Demo Animation
  2. Adobe Edge Preview 4 Overview
  3. Adobe Edge Animate: Tip – Using $each method with Arrays
  4. Adobe Edge Animate: Tip – Wrapping Type Elements
  5. Adobe Edge Animate: Append() Youtube Video
  6. Adobe Edge Animate: Bokeh Blur Symbol Instance Effect
13 Comments
  1. Bos
    5:43 pm on January 21, 2012

    Thanks. This is good I will try it. Please can you do a tutorial to style the scrollbar with css/jquery/js? It will really make the solution look sexy. What do you think?

  2. marcel
    10:28 pm on January 22, 2012

    nice… but adobe promised also nested timelines. i cannot find this feature… maybe i’m stupid… maybe i’m blind…
    maybe it´s still not inside. any hint?

    • heathrowe
      11:20 pm on January 22, 2012

      Hey Marcel, yes it’s there, though I suspect it’s not in the way you expect it, at least in terms of the phrase ‘nested timelines’.

      Simply create a Symbol from selected Elements.
      – in this regard the symbol has its own timeline, exclusive of the main project timeline.

    • heathrowe
      3:17 pm on January 23, 2012

      I emailed you but it bounced back!

      Here is a quick sample. Mind you its shorter than your original, the general idea is there.
      http://www.heathrowe.com/edge/animate2/animate2.html

      Essentially the nesting can occur on a variety of levels.
      - Nested Divs
      - Main Timeline vs Symbol Timeline

      In my example I left the infoBox as nested divs.
      - bubbleDate is a symbol and clouds is a symbol.
      - both have the playback ‘stop’ at 0 so they don’t start immediately. We’ll trigger these when the X is clicked.

      When the X is clicked, then trigger the play for both the dateBubble and the clouds to animate (start). Right click on the X > Edit Actions and you’ll see the quick command actions to do this.

      Hope this helps. Download link is available in the sample – dissect it.

      PS: To avoid the vertical bar in the info popup, lessen the width of the text block (by at least the width of the horizontal scrollbar – I thinks its 20px). As per my example – it does not show the vertical bar.

  3. Matt
    9:59 pm on January 23, 2012

    I’m having a hard time keeping text and graphics from looking fuzzy.

  4. Kat
    7:14 pm on January 24, 2012

    All sounds good but your scrollable text box example doesn’t work on IOs and is having issues with IE8 too…
    Any thoughts?

    • heathrowe
      2:07 am on January 25, 2012

      Bummer, Kat. It works well on Android, and all modern/latest browser versions. Unfortunately I don’t have an iOs device to test it on.

      As for earlier IE versions, hopefully there are some fallback options available in the future.

  5. GJet
    1:50 pm on January 25, 2012

    The preview example works great in Firefox but doesn’t work in Google Chrome. Is there a fix for that?

    Thanks