Saturday, July 13, 2013

Tutorial: Responsive Content Rotator #1

Recently, one of our users asked whether or not someone had written a "responsive" or scalable content rotator.  At first, I thought, "Of course," but then I realized that all of our samples (including Alice Ritter, which was the content rotator sample) worked with fixed widths.  At the same time, I realize that we don't really have anything that really describes the power of scalable content.  So, over the next number of posts, I'm planning to step through the process of creating a responsive content rotator.  Over time, my hope is that you'll see where I've made wrong turns and what assumptions I have for my development of this project, where I use Animate and where I jump wholeheartedly into jQuery and JavaScript.

Hopefully this will be a pretty deep dive into a couple of the awesome features we have available in Adobe Edge Animate.  All screenshots and sample files are created in Animate CC.

Download finished sample
View live files

A Modest Beginning

I never thought I would be one of those crazy cat people.  You know, the people who took adorable cat photos and posted them on Facebook.  Since adopting our two cats and, more importantly, since getting my first smartphone about nine months ago, I've discovered that 70% of all of my photos are (I'm sure you've guessed by now) of my two cats being excessively adorable.  The upshot of it all is that I don't really need model releases to use their images.  For the record, Pasha's the one with the white muzzle.

 I've begun with three images, which I've cropped to 900px by 550px.  It's not a common size for a content rotator, but the three images I made fit the cats, and hey, that's what's important, right?

Scaling the Composition

In order to make my image scale, I first have to have a composition that scales.
  1. Create a new composition
  2. In the properties panel, change the width and height from px to % by clicking on the toggle buttons to the right of the "px" text.  By default, this will go to 100%.

I also changed the background color so I can differentiate it from the default white background of most browsers.  When I preview in browser, the background extends to all sides of the browser's chrome, so 100% of the height and 100% of the width.

Images > Symbol

From here, we can import the images into the product by pressing Ctrl/Cmd-I and selecting our three images.  For now, the images will be bigger than the stage, and that's okay.  Since I'm already fairly sure that I want my images to all be in a symbol, I'll select all three of them and convert them to a symbol (Ctrl/Cmd-Y), and give the symbol the name "main".

Scaling the Symbol

From here, I want to make the symbol and the objects within them scalable.  In order to make the symbol scalable, I need to enter the symbol's substage by either clicking on the symbol on the stage or by clicking the icon next to the symbol's name in the Library panel.

By default, the symbol spans the left side of the leftmost object to the right side of the rightmost object, as well as the top side of the topmost object and the bottom side of the bottommost object.  Since all three of my images were on top of one another due to the import, I have a default height of 900px x 550px.  Flip these two switches to % as well.

Since the images were bigger than the stage, the width and height % will default to some large number.  Since I want my content rotator to only take a portion of the stage, I'm going to set the width and height to a fraction of the stage: 90% by 90%.  This should leave me some space around the image rotator so that I can see the page background.

Finally, I want all of the images to be scalable, but I want them to keep their relative sizes.  I can select them all and do this in one shot.

There are two different ways for me to approach this with images, both with similar results.  The first is to treat the images as a div tag, and then adjust the background-image, and the second is to treat the images as an img tag, and adjust the size of the image.  I've chosen the first one for my sample.
  1. Highlight all of the images and change the Width and Height to be 100% by using the toggle switches and setting the values in the properties panel
  2. In the Image section, the Background Image section defaults to 100% by 100%.  (Notice that the picture is stretched out vertically
  3. Select the Height label in the Background Image section (notice it has a little flyout triangle in the corner - see the rectangle in the screenshot) and drop it down.  Change it to auto.
 What is auto?  Auto is the selection that tells the browser: "scale the image to 100% of the width of the symbol's stage, but automatically keep the proportions of the image."  If you have an image that you want to keep in the correct proportions, this is a really important setting to play with.  You can have width, height, or both - for now, we're going to scale the width and keep the height proportional.

"Centering"

While there's no true centering (yet) when it comes to Animate, I'm going to fake it by using a simple trick - if the width and height of the browser is 100%, and my symbol is 90%, it'll more or less be centered if I set the X, Y to 5%.
  1. Return to the Stage (click on "Stage" at the top of the main stage panel).
  2. Select the "main" element in the Elements panel.
  3. In the properties panel, change the X, Y in the Position and Size section to %, then set the values to 5%, 5%

Now, if I preview in browser and change the size of the browser, the image resizes correctly.

#protip: Resizing the Stage in Responsive Compositions

As a final note, I want to point out that a quick way for you to preview what will happen in your content is to use the stage controls, which only pop up if you have a stage that is percentage-based.  You can adjust these to give yourself a good idea of what your composition will look like when you view it in a browser.

Have Questions?

Go to the forums.  As I mentioned in my introductory post, I make no promises about answering questions on this blog.

Friday, July 12, 2013

A Brief Introduction

I'm going to be brief, because it's 7pm on a Friday night and I'm about to go and have an epic weekend.  (For the record, almost every weekend is epic in my life, so don't get any ideas.)  This is the completely unofficial blog focused on bringing quick, casual tutorials on Adobe Edge Animate.  While I do work on Edge Animate, the stuff in these posts are created in my off-hours and are not representative of Adobe.  Posts will be sporadic and will try to address issues that I'm interested in or that the community seems to be struggling with.

Have questions?  Don't ask here - go to the Community Forum and you'll have great responses from community members.  I make no promises about responding to feedback or questions from this blog.  In fact, I don't even make promises about whether or not I'll post regularly.

With all of those caveats, let's get started with creating in Edge Animate...