by Elaine

Created

September 5, 2013

In the first two tutorials of the series, I covered the code solution for the automatic colorization of our flowers and the way I got the ornaments to swing naturally.  For this tutorial, I wanted to focus on how to combine responsive and traditional layouts to expand and shrink the stage.  If you view the live example and mouse over the panel, you’ll notice that the game board pops out to the left, over the text of the webpage.  Once the mouse leaves the confines of the stage, the stage closes back to its original dimensions.  Some of our users think of this as “expanding and shrinking the stage,” and go through extensive code solutions to actually change the size of the Stage.

t3-shot0

When the game board is open, it covers existing text.

 

I decided to approach this problem in a different manner; instead of resizing the stage, I decided I would resize the container and let Animate’s scalable content handle the rest.

This article is intended for intermediate users of Adobe Edge Animate who have a light coding background.

Topics covered in this article:

  • scalable layout
  • direction anchors
  • gradients
  • HTML iframes
  • jQuery’s animate() function

The screen shots and project files from this post are based on Edge Animate CC, which is available for a free 30 day trial via the Adobe Creative Cloud and is included in any paid subscription to the Adobe Creative Cloud.

Download the finished project files
See a live example

 

Resizable Content and iFrames

Animate’s resizable content settings allows you to change the dimensions of your objects based on percentage instead of pixels.  This is commonly used to create content that will fit on multiple platforms, such as content that should take the full size of the browser on multiple mobile devices, each of which has similar but not identical form factors.

Stepping back to a more conceptual level, I wanted my match-two game to slide in and out from behind the informational half of my advertisement.  At first, I thought (like many others) I should resize the stage using jQuery.  But after taking a look at what might be involved, I realized that I was thinking of the Stage as the container, when in reality my advertisement would actually live within an iframe.  If my iframe didn’t resize, all I’d get would be an iframe with a horizontal scrollbar on the side of a webpage.

I realized I should be focusing on changing the iframe’s size, not the stage size.  Knowing that we had a scalable layout feature made it all that much easier for me to make my content change with the size of the iframe.

 

Step 1: Resize the Background

Since I knew that my advertisement would stay 600px high, I only had to resize the width of the Stage.

  • Click on the Stage in the Elements panel, or click on an empty part of the Stage in the main Stage panel
  • Select the toggle button next to the W (width) selection in the properties panel to change it from px to %
  • Preview in browser and change the browser size

Scalable Stage setting

Notice that the previewed project takes up the entire width of the browser.  This is expected until you place the Animate file in its parent iframe.

You can also preview what this looks like by changing the size of the stage by adjusting the preview marks.  Once you select the % property for the Stage, you can drag the slider in the ruler left and right to see the Stage resize.

t3-shot2

 

Step 2: Set the Reference of the Major Objects to Different Sides

Default Reference PointsBy default, all of the objects take their references from the top and left sides.  This means that any X or Y value you set references 0,0 in the upper left hand corner of the Stage, and move the object based on a point defined in its upper left hand corner.  However, in order to make the expansion and shrinking to work, I needed to have objects pinned to both left and right of my Stage.

Animate makes this easy by providing a four-square selection box in the properties panel for every object.  Since the main part of the advertisement would stay pinned to the right hand side, I decided to pin my cascadingFlowers object and the associated text to the right side of the Stage.

  • Select the first four objects in the Elements panel (“playGame”, “sfflowerexpo”, “decorateTheOutdoorsText”, and “cascadingFlowers”)
  • In the properties panel, select the top-right rectangle
  • Preview in browser and change the browser size, or adjust the preview marks to see how the objects flow

Orientation

 

Step 3: Place the Project in an iframe

Many times, an Animate project is placed within the context of another HTML file, like as a menu, an animated header, or content rotator.  In this case, our skyscraper advertisement lives on a news site and will pop over existing text when the user mouses over the project.

  • Start with an HTML file with some text in it.  In this case, I used the following as my container:
    <div align="left" style="width:700px; position: absolute; top: 0px; left: 0px; border: none; font-family: Verdana, Geneva, sans-serif; font-size: small">
       INSERT MY TEXT HERE
    </div>
  • Add jQuery to the parent page by adding a <script> tag in the header of the file:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    This allows us to use jQuery within the parent page.  Even though Animate has jQuery in it, we’re not allowed to use it in the parent unless we reference it properly due to scope.

  • Create an iframe and load the Animate project into it
    <iframe id="advertisement" src="skyscraper.html" height="600" frameborder="0" style="position:absolute; top: 50px; right: 10px; width: 160px"></iframe>

As you can see from the iframe statement, the default width of the iframe is 160 pixels.

 

Step 4: Opening and Closing the iFrame

We can now use jQuery to open and close the iFrame by adding the following script to the body of the parent HTML file:

<script>
   $('#advertisement').mouseenter(function() {
      $('#advertisement').animate({width: "600px"}, 500);
   });

   $('#advertisement').mouseleave(function() {
      $('#advertisement').animate({width: "160px"}, 500);
   });
</script>

This is jQuery that says: “When the mouse enters the ‘advertisement’ object, resize the width of that object to 600px.  When the mouse leaves the ‘advertisement’ object, resize the width of that object to 160px.”  Both resizing functions (using the jQuery animate() API) will animate over the course of 500ms, or half a second.

Note that we’re using the mouseenter and mouseleave events and not the mouseover and mouseout events.  Many new users will confuse the two, but mouseover and mouseout will fire whenever the mouse moves, which means that your animation will oftentimes flicker as you move your mouse.  Instead, use mouseenter and mouseleave – it’s what you want 90% of the time.

 

Step 5: The Need for a Background Object

At this point of development, I noticed I had a problem.  To see the problem in the project:

  • Click on the eyeball next to the “background” element in the Elements Panel
  • Resize the Stage width to 160px using the preview slider in the ruler

t3-shot4

The text with the game (and really, the game board itself) displayed behind my flower wind chimes.  But the animation trigger for opening and closing the advertisement lives within the parent HTML, and I didn’t want to call back into the project if I could help it.  Instead of doing the complicated code solution, I realized I could just create an object that would live below the wind chime flowers but on top of the game board and all of its associated text.

Since I had a gradient as the background, I used color swatches to save my gradient.Gradient swatches

  • Click on the Stage in the elements panel
  • Click on the gradients icon in the properties panel to load the gradients color selector
  • Click on the + next to the vertical gradient bar to add it to the color swatch
  • Draw a rectangle and set it to 160px wide by 600px high
  • Click on the gradient selector in the properties panel
  • Click on the saved gradient in the color swatch to reload it
  • (optional) Convert to symbol (notice that background is a symbol, though it isn’t required in this case)
  • Drag the background object in the Elements Panel until it’s below the cascadingFlowers
  • Change the reference point of background to top-right and align it with the right side of the project

Gradient swatches and color swatches are saved with your Animate project, so you can reuse them over and over again through the lifetime of your project.

 

Summary

By inserting Animate into an iframe, you can easily add independent animated content to existing HTML projects.  You can use a little bit of jQuery in the parent HTML to take advantage of Animate’s scalable layout feature and adjust the size based on whatever you’d like, including mouse events and media queries, to name a few options.  And, finally, the color and gradient swatches feature is a great little time saver for when you’re working with the same colors over and over again.

Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.