Embracing the Workspace - Adopting Tools and Techniques - Adobe Edge Animate CC For Dummies (2013)

Adobe Edge Animate CC For Dummies (2013)

Part II

Adopting Tools and Techniques

Chapter 6

Embracing the Workspace

In This Chapter

arrow Customizing the workspace to your liking

arrow Saving your custom workspace or reverting to the default

Adobe Edge Animate CC is a dynamic software tool. The flexibility of the tool provides you the means to configure the interface to your choosing. You can close all the panels if you prefer to view only the Stage and the Timeline. Or you may want to maximize the Assets panel so that it takes up the entire screen. You can tab panels, stack them side by side, or place one on top of the other. And if the screen becomes entirely too cluttered, all you have to do is revert to the default view. However, if you finally get all the panels arranged in the manner best suited for you, you can save that view as a custom workspace.

The settings in the Properties panel constantly update as you click from one type of element to the next. Each different type of element — drawn rectangle, imported image, or text box — has its own unique set of properties. Not all properties are completely unique; some remain consistent no matter their type.

Clicking and Dragging the Panels

The Adobe Edge Animate interface consists of a main menu along the top and a series of panels and frames border the Stage. The panels contain the buttons, toggles, and switches that enable you to design. The frames contain the panels — and you can configure those as well, moving and resizing them as you see fit. You can even revert to the default view or create several different types of views:

check.png Stacked

check.png Tabbed

check.png Default

check.png Side by side

You can customize the location and size for the Properties panel, the Elements panel, and the Library. Each of these panels has two small icons in the top-right corner:

check.png Drop-down arrow (shown in Figure 6-9): Use this icon to undock or close panels and frames. You can also use it to maximize frames.

check.png Click and Drag: Use this icon to move panels around the workspace.

You can click and drag the panel by placing the cursor over the Click and Drag icon at the far right, as indicated in Figure 6-1.

image

Figure 6-1: The Click and Drag icon for panels.

tip.epsYou can move each panel into any onscreen position and location, whether by clicking and dragging the name of each panel or clicking and dragging its icon.

Creating a stacked view

You can stack panels on top of each other. For example, you can click and drag the Properties panel to the top portion of the Timeline. While you click and drag, Edge Animate highlights — using a purple shade — where you are dragging the panel. Figure 6-2 shows the purple shade.

image

Figure 6-2: The purple area shows where the dragged panel will appear.

If you drag the Properties panel to the top portion of the Timeline (refer to Figure 6-2), the Properties panel appears stacked on top of the Timeline (as shown in Figure 6-3).

image

Figure 6-3: Properties panel now stacked on top of the Timeline.

Creating a tabbed view

If the stacked view appears too cluttered for your taste, then you may prefer a tabbed view for the panels. You can drag a panel so that it’s tabbed with another panel: The dragged panel becomes a tab; the panel it’s dragged to becomes another tab. To make this happen, you can drag (for example) the Properties panel so that the purple shade is inside the Timeline, as shown in Figure 6-4.

image

Figure 6-4: Creating tabbed panels.

By dragging one panel into the center of another panel, you create a tabbed view (as shown in Figure 6-5).

When the panels are tabbed, you can click the different tabs to see the different panels.

image

Figure 6-5: Tabbed panels for the Timeline and for Properties.

Moving a panel back to its original position

After you move a panel around, you may decide you liked it better where it was before. In that case, you can simply click and drag that panel back to its original position.

If you move the Properties panel to a tabbed view with the Timeline, and want to revert the positioning, then click and drag the Properties panel (you can drag it from the name of the panel) over to the far-left side of the screen. A thin green shade appears, along with a hollow image of the panel, when you’ve dragged the Properties panel far enough over (Figure 6-6).

image

Figure 6-6: A green line and a hollow image of a panel show where the panel will appear.

Stacking panels side by side

The options are nearly endless as to where and how you can arrange the workspace. Another option besides stacked or tabbed is to place the panels side by side, as shown in Figure 6-7.

image

Figure 6-7: Side-by-side placement of panels.

This side-by-side stacking was done by dragging the Properties panel onto the left side of the Library panel, as shown in Figure 6-8.

image

Figure 6-8: Purple shading shows where the panels will appear when stacked side by side.

Manipulating the Panels and Frames

Adobe Edge Animate CC is a flexible and customizable tool that enables you to work the way you want. You configure the panels and frames in various ways that include these:

check.png Undock panels and frames so they can float about the interface.

check.png Maximize the frame so you can see much more information.

check.png Save customized views tailored to your preference.

Undocking panels

If stacking or creating tabs isn’t your style, then you can undock the panels, which allows them to float around your workspace. In each case, you can undock either the panel or the frame, as shown in Figure 6-9.

image

Figure 6-9: When you want to undock, click the drop-down arrow to open the menu.

Undocking a panel separates it from the workspace so you can freely move the panel around onscreen (as shown in Figure 6-10).

image

Figure 6-10: An undocked panel.

If you click the red X in the top corner, the panel closes.

To reopen an undocked panel, from the main menu click Window and then choose which panel you wish to open. Any panels currently open have a check mark next to them. Closed panels don’t have a check mark (as shown in Figure 6-11).

image

Figure 6-11: Opening or closing panels from the Window menu.

Undocking frames

Each frame can hold multiple panels when you’ve grouped the panels in a tabbed view. If you have panels tabbed together and you choose Undock Frame from the menu shown in Figure 6-9, then all the tabbed panels undock from the workspace and you can float them around the interface at will (as shown in Figure 6-12).

image

Figure 6-12: Undocking a frame in tabbed view.

You can close the frame (and all of the panels with it) by clicking the X.

Maximizing the frame

Another option for viewing frames and panels is to expand to maximum view. You can do this by choosing Maximize Frame from the menu shown in Figure 6-9. When you click Maximize Frame, your chosen panel fills the entire workspace.

tip.epsThe shortcut key to maximize a frame is one you may find especially useful. Simply place the cursor over the panel and press the ` key, which is located in the top-left corner of your keyboard, just to the left of the 1, showing the tilde (~) above the ` character. You can restore the frame size by choosing Restore Frame Size from the menu, as shown in Figure 6-13.

image

Figure 6-13: The Restore Frame Size menu option.

When you choose the Restore Frame Size option, the frame reverts to the way it appeared before you chose to Maximize Frame.

Saving a custom workspace view

When you get your workspace customized to exactly the way you want it, you can save that view and use it again on future compositions or the next time you open Adobe Edge Animate CC.

To save your custom workspace, from the main menu, choose Window→Workspace→New Workspace (as shown in Figure 6-14).

When you choose New Workspace, a dialog box appears. You can then name your customized workspace in that dialog box, as shown in Figure 6-15.

After you name your workspace and click OK, your newly named workspace appears in the Workspace menu (Figure 6-16). In this example, the custom workspace was named My Workspace.

image

Figure 6-14: Saving a new workspace.

image

Figure 6-15: Naming your new workspace.

image

Figure 6-16: Your custom workspace appears in the Workspace menu.

From the Workspace menu shown in Figure 6-16, you can choose your custom workspace or you can revert back to the default workspace by clicking Default. If, during the course of animating, your custom workspace gets moved around and you want to reset it, then you can click Reset “My Workspace.”

You can also Delete Workspace and create even more New Workspaces.

tip.epsWhen you close Edge Animate after customizing your workspace, the software shows the same customized workspace the next time you open Edge Animate, regardless of whether you saved that view. If you were hoping the interface would revert to the default view, you can reset (go back to) the default by clicking Window→Reset “Default” (as shown in Figure 6-17). See the next section for more details.

Reverting to the default view

It’s fun to move and resize the different panels and frames around the interface. However, if you get carried away and you start to think you broke something or you can’t figure out how to undo what you just did, don’t worry: You can always revert your workspace to the way you want it to be.

tip.epsSorry, but pressing Ctrl+Z on your keyboard doesn’t undo moving panels around the workspace.

To revert your workspace to the default view, from the main menu choose Window→Workspace→Reset “Default”.

If you’re working from a custom saved view, the Workspace menu appears a bit differently. In Figure 6-17, the top arrow shows how to revert to the default view; the bottom arrow shows how to revert to the saved custom view.

image

Figure 6-17: Resetting the workspace to the default view.

Choosing Window→Workspace→Reset “Default” restores your workspace to looking the way it did the first time you opened Edge Animate.

The Constantly Changing Properties Panel

The Properties panel (found along the left column) constantly updates itself depending on which type of element is selected. If you select a drawn element such as a rectangle, Edge Animate displays different configurations in the Properties panel than if you select a text box or an image. This keeps the clutter down in that you only see what you need, or can, work with for a certain type of element. Some properties are consistent, and appear no matter what type of element you select; other properties are specific to certain types of elements. Examples of consistent properties include: ID, Class, Actions, Display block, and Position and Size. All of these are discussed in detail in the following pages.

In addition to formatting and animating from the Properties panel, you can also:

check.png Edit the Title tag

check.png Set the class name

check.png Add actions

check.png Enable your audience to tab through elements

Specific properties for the Stage

Your first view of the Properties panel occurs when you start a new composition (Figure 6-18). This initial view shows properties for the Stage, including:

check.png Title tag: You can edit the title tag for the HTML page from the Properties panel.

check.png Actions: You can add actions to the Stage from the Properties panel.

check.png Size dimensions: You can edit the size of the Stage from the Properties panel.

check.png Overflow: These attributes include Visible, Hidden Scroll, and Auto. You can find more information on Overflow in Chapter 8.

check.png Toggle Autoplay: If you don’t want your animation to automatically start playing when the page loads, make sure this check box isn’t checked. If you do uncheck the box, then make sure to add an action to an element — such as a Play button — so your audience can start the animation.

check.png Composition ID: I recommend leaving the Composition ID alone. Edge Animate uses this ID in the HTML file for reference.

check.png Down-level Stage: This simpler version of the Stage accommodates browsers that don’t support HTML5 or CSS3. Chapter 14 provides details of the down-level Stage.

check.png Poster: Used with the down-level Stage. Chapter 14 contains additional information.

check.png Preloader: Used for setting what your audience first sees while your animation is loading to the screen.

tip.epsThis is best used for large compositions that may not load immediately upon launch. Chapter 14 contains additional information.

image

Figure 6-18: The Properties panel for the Stage.

You can find more information on Stage properties in Chapter 3, where I discuss resizing the Stage by pixel or by percent. Chapter 13 also provides additional information on configuring the Stage for a responsive web design; Chapter 20 provides a sample project on creating a responsive web animation.

imageYou can edit the Title tag not only from the HTML file, but also from the Properties panel. The Title tag is important because, if your animation is a standalone web page, the text used for the Title tag appears in the tab of your web browser. (Figure 6-19 shows the Title tag in the Firefox browser.) Therefore it’s good practice to give the Title tag a name relevant to your content.

image

Figure 6-19: Name your title tag something appropriate.

If you open the HTML file, you can edit the Title tag (shown in bold in the lines of code presented here). Saved changes appear in Edge Animate when you reopen the file.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<title>Page Title</title>

<!--Adobe Edge Runtime-->

<script type="text/javascript" charset="utf-8"

src="properties-panel_edgePreload.js"></script>

<style>

.edgeLoad-EDGE-10260726 { visibility:hidden; }

</style>

<!--Adobe Edge Runtime End-->

</head>

<body style="margin:0;padding:0;">

<div id="Stage" class="EDGE-10260726">

</div>

</body>

</html>

Consistent properties for all elements

The Properties panel appears in the left column of the default view of the interface. This is where you can configure, toggle, set, animate, etc. all of your different elements, including the Stage (see the previous section).

Depending on the type of element that you select, different properties appear in the Properties panel, but some of them remain consistent (as shown in Figure 6-20):

check.png ID: Name an element in this box, which then appears in the Timeline.

check.png Class: You can specify the user class for a specific element. If you aren't a developer and see yourself strictly as a designer, you may not use this box; if you do know JavaScript and CSS, you may use this feature. When you type a name into the Class box, and then open the .js file from the folder structure, you should see that your content elements now have a user class assigned.

check.png Actions: You can assign actions to elements from the Properties panel. See Chapter 5 for more information.

check.png Display block: This is where you can set when an element is Always On, On, or Off. If an element is On, you can see it; if it’s Off, it’s hidden from view. You can also set the Overflow properties to Visible, Hidden, Scroll, or Auto. Opacity is another property that you can set from this block. See Chapter 8 for more information.

check.png Position and Size: You can use these settings in association with building a responsive web design. Here you can set an element’s anchor point (which determines the point of an element that Edge Animate considers the center, thus affecting how certain animations display the element). You can also position the element on the Stage and change its actual size. You can even use Layout Presets. For more information, see Chapter 8.

check.png Transform: In this block, you can skew and rotate elements. You can also change the scale of the element and move the origin point. Additional information is found in Chapter 7.

check.png Cursor: If you want a specific type of cursor to appear when your audience hovers the mouse pointer over an element, you can set that from here. See Chapter 5.

check.png Shadow: Whether your element is a rectangle, ellipses, a text box, or an image, you can add a shadow to make it stand out. You can even animate that shadow. Chapter 9 contains additional information.

check.png Clip: You can use clip to cover or uncover portions of an element. For example, you can animate an image so that parts of the element slowly appear or disappear. Chapter 9 has the details.

check.png Accessibility: Refers to setting a tab index for elements. This allows your audience to use the Tab key on the keyboard to select different elements (as discussed in Chapter 5).

tip.epsYou can assign a title to images, rectangles, and other drawn elements, including text boxes. These titles appear when your audience hovers their mouse over the element, or if they use Tab to select an element or elements. To assign a title to an element, simply type in the box as indicated by the red rectangle in Figure 6-20.

image

Figure 6-20: Consistent properties for all types of elements.

Specific properties for specific elements

You use properties in Edge Animate to format and add style to elements. Elements can be anything from a drawn box to images to text. When you select one of these types of elements from the Stage, different properties appear in the Properties panel.

Each different element type has different properties that you can configure from the Properties panel. The element types include:

check.png Drawn: Objects you create, such as rectangles, rounded rectangles, and ellipses.

check.png Images: Pictures you insert, which have their own sets of properties.

check.png Text: The text boxes that you create, which have their own unique properties as well.

Drawn elements

When you select a drawn element — rectangle, rounded rectangle, or an ellipse — new properties appear in the Properties panel. Although text boxes are considered drawn elements, they have their own special properties, detailed in the next couple of sections.

Color section

In the Color section, you can set the background color of the element (refer to Figure 3-7), the border color, the border type, and the thickness of the border (as shown in Figure 6-21).

image

Figure 6-21: Setting the drawn element’s background color, border color, type, and thickness.

Corners section

The Corners section is where you can set the roundness of the corners — or even animate the corners so that a square box turns into a circle. (In Chapter 9, I discuss how to set up that animation sequence.)

In Figure 6-22, you can see that you can configure up to eight different corners of an element. If you click the 4, then you can configure four corners. If you want to set all of the corners at once, then choose 1.

You can set the Corner settings as either px or percentage.

image

Figure 6-22: Set the roundness of the corners.

Image elements

You can set images as either img or div.

check.png As an img: Edge Animate treats the element as an image using the image tag in HTML.

check.png As a div: Edge Animate treats your image as a background image.

You can set the image to either img or div from the Properties panel, near the top, as shown in Figure 6-23. Use the image tag (img) when the image includes actual content (for example, a graph); use a div tag with a background image when the image is only decorative.

image

Figure 6-23: Setting specific properties for div background images.

tip.epsAlso shown in Figure 6-23 is the capability to swap out one image for another, as indicated by the red arrow. This is useful if you don’t have the final art ready, but you do want to start animating. The next subsection details how to do this extremely handy trick.

Swapping images in your animation

In this case, you can use filler art to get started; when the final art is ready, all you have to do is follow these steps:

1. Make sure that your replacement image is added to the Library panel. If it is not, add it as follows: From the Library panel, click the + icon (as shown in Figure 6-24).

Your chosen replacement image is added to the Assets section of the Library panel.

image

Figure 6-24: Adding an image to the Asset Library so you can use it to replace another image.

2. Select the image element you want to replace from the Stage.

The image becomes highlighted.

3. Click the arrows in the Image section of the Properties panel.

A box with a list of images from the Library panel appears.

4. Choose a replacement image.

The replacement image becomes highlighted.

5. Insert the replacement image into your animation by clicking anywhere on the interface, besides the box.

The new image replaces the old image.

6. Test your animation with the new image by previewing in a browser.

The new image does its thing in your animation.

Background image

If you choose div to set the image as a background image, then the Properties panel appears (refer to Figure 6-23), and you have the opportunity to set the location and size of the image as indicated by the orange rectangle.

Image tag

If you choose img instead of div, then Edge Animate assigns an image tag to that element. When this happens, the Properties panel updates and appears as shown in Figure 6-25.

If you designated your image as an img, you can now name an ALT tag for your image. The ALT tag appears in place of the image if your audience has images turned off in their browsers. A typical ALT tag would show Cute Kitten in place of an image showing, say, a cute kitten.

imageAlt tags are also good for search engine optimization (SEO). SEO is a marketing term for web developers, which basically translates into best practices for the best search results. Search engines can’t read images, but they can read ALT tags, so by adding an ALT tag to your image you provide a way for search engines to index your content.

image

Figure 6-25: Add an ALT tag to your images as best practice.

imageThere is a difference between ALT tags for images and the accessibility title — text that appears as a pop-up when you hover your mouse pointer over an element (refer to Figure 6-20, #10) — for all different types of elements:

check.png ALT tags provide a way for search engines to index your images for search results. The text assigned to an ALT tag appears in place of the image if the image cannot be displayed.

check.png Accessibility titles provide a way to add pop-up text that appears when someone hovers the mouse pointer over an element.

Text box elements

Edge Animate is very font-friendly. When you select a text box, the Text properties appear in the Properties panel, as shown in Figure 6-26. You can set many text properties:

check.png Font style (refer to Figure 2-7)

check.png Font size

check.png Font weight

check.png Font decoration

check.png Left, center, or right alignment

You can animate the font size, as when you make text appear to shrink or grow. You can also animate the font color if (say) you want to have your text slowly (or quickly) change from one color to another. See Chapter 10 for more information on animating text.

tip.epsUnfortunately, you can’t animate a change from one font style to another.

To add new fonts, see Chapter 11.

image

Figure 6-26: Set such Font properties as size, color, type, and justification.