9 Replies Latest reply on Oct 2, 2012 12:17 PM by dhosford

    101: explanation of panel tools?

    Anita Adamski Level 1

      I'm going through the tutorials but seem to be missing where I can find an explanation of the tool panel(s) and their functions. The tutorials don't necessarily explain it (sometimes they do).

        • 1. Re: 101: explanation of panel tools?
          dhosford Employee Moderator

          Hi there and welcome,

           

            Is there any specific tool you would like an explanation on? I'd be happy to help clarify on any of the tools.

           

          Thanks!

          • 2. Re: 101: explanation of panel tools?
            Anita Adamski Level 1

            Hi dhosford,

             

            I'm just looking for an overview. Am going through the beginning tutorials, saw the videos. Major confused.

             

            The functions of the blue pin and the gold in timeline would help.

             

            Also auto key-frame and auto-transition icons. Tutorials aren't turning out well.

            • 3. Re: 101: explanation of panel tools?
              dhosford Employee Moderator

              Hi there,

               

                Okay! So let's start with the gold Playhead in the timeline. This is different from the Pin tool as this is literally what you can use to set where you want keyframes to be in your timeline manually. You can also use this to navigate back and forth through the timeline by clicking the gold playhead and dragging through the timeline. This is also known as scrubbing. The best way to think of the playhead is to think of it as a "bookmark" in your timeline.

              playhead.jpg

               

              The Pin tool is an awesome little tool that is unique to Edge Animate. It greatly enhances your productivity while animating, and eliminates the need to keyframe by hand.

               

                pin.jpg

                With the pin tool selected, you will notice a blue pin in your timeline. You can click and drag this pin forward and backward to set a literal "pin" in your timeline. When you do this, you will notice that your playhead stays put. This is because what the pin tool does is it literally "remembers" where your playhead is and will then act as a second playhead for you so that you can keyframe with ease.

               

                So, for instance, say you have a rectangle with 100% opacity at 0 seconds. If you click the pin tool and drag it forward in the timeline to 1 second, and then change the opacity to 0%, the Pin tool will keyframe the Opacity for you at both 0 seconds and 1 second making the task of animating that transition easier. The rectangle will fade from 0% to 100% opacity over 1 second.

               

              pin_timeline2.jpg

               

                Another point to remember about the pin tool is that you'll notice little chevrons in the blue bar that stretches out from the point where you dragged your pin tool. The chevrons help to explain where your animation is transitioning from. They also point to wherever your playhead is. You can move the playhead in front of the pin tool to have your keyframe be the starting change.

               

                So, as with our example before, if you have your rectangle at 100% opacity, and you have the pin tool selected and you move the playhead forward. You can change the opacity to 0% and the rectangle will now fade from 100% to 0% over 1 second.

               

              pin_timeline.jpg

               

              I'll explain the auto keyframe and auto transition tools in a second post. I hope this helps to explain the pin tool and playhead better!

              • 4. Re: 101: explanation of panel tools?
                Anita Adamski Level 1

                Thanks! I like your tutorial much better!!  I will play with this for a while. Then re-do the tutorial, should get the right results this time.

                • 5. Re: 101: explanation of panel tools?
                  dhosford Employee Moderator

                  Screen Shot 2012-10-02 at 3.01.34 PM.jpg The Auto Keyframe tool will create keyframes for you when you change properties of an object in the timeline. So, when the auto keyframe button is turned on, you can drag your playhead to any point in time, and then navigate to the Properties panel and change any property (let's say we're changing opacity). If you click and drag the opacity slider down to 0%, the auto keyframe tool will automatically create a keyframe for you on the timeline for 0%.

                   

                  autotrans.jpg The Auto Transition tool will create transitions of change in your keyframes. A good way to understand it is to think of what it would be like without the transition tool turned on. If you have the transition tool turned off and you make keyframes on the timeline (let's say there's one at 0 seconds and 1 second), the change between these two keyframes would not be gradual, it would be instant.

                   

                    If you had a keyframe at 0 seconds for 0% opacity, and then a keyframe at 1 second for 100% opacity with no transition, at 0 seconds the image would have 0% opacity, and over a period of 1 second would stay at 0% opacity. Once the timeline reached 1 second, it would instantly change to 100% opacity.

                   

                  I can make samples of these tools in actions if it helps to understand it better. I hope this helps to explain them both better!

                  1 person found this helpful
                  • 6. Re: 101: explanation of panel tools?
                    dhosford Employee Moderator

                    Great! I'm so glad this helped! Your feedback was an eye opener, and I may just have to develop a tutorial that explains these tools throughly for our users. Thanks again and let me know if you need any more help! Have fun with Edge Animate!!

                    • 7. Re: 101: explanation of panel tools?
                      dhosford Employee Moderator

                        I'll also provide a general explanation of the tools in the toolbar just for anyone else that may need assistance. : )

                       

                      toolbar.jpg

                      I'll outline each tool starting from left to right on the toolbar in Edge Animate.

                       

                      selection_tool.jpg Selection Tool

                      The selection tool is the default tool in Edge Animate. It allows you to interact with the elements and symbols on the stage by clicking and dragging and being able to move your elements and symbols.

                       

                      transform_tool.jpg Transform Tool

                      The Transform tool allows you to transform an object's width and height, rotation, and center point. When selected, you can select an element or symbol and then use the handles that appear on the outside of the image to adjust the element or symbol as needed.

                       

                      clipping_tool.jpg Clipping Tool

                      The Clipping tool behaves very similarly as the Clipping tool in InDesign. You can adjust where the image is placed inside it's container by clicking and dragging the circular handle in the middle of the image. You can also "clip" the edges of your image to only see a portion of the image.

                       

                      rectangle.jpg Rectangle Tool

                      The rectangle tool allows you to draw rectangles on your stage that have adjustable properties much like you would in Photoshop or Illustrator. Simply click and drag with the rectangle tool selected anywhere on the stage to draw a rectangle.

                       

                      rounded_rectangle.jpg Rounded Rectangle Tool

                      The rectangle tool allows you to draw rectangles with rounded corners on your stage that have adjustable properties. Simply click and drag with the rounded rectangle tool selected anywhere on the stage to draw a rounded rectangle.

                       

                      ellipse_tool.jpg Ellipse Tool

                       

                      The Ellipse tool allows you to draw circles and ellipses on your stage that also have adjustable properties. Simply click and drag with the Ellipse tool selected anywhere on the stage to draw an ellipse.

                       

                      type_tool.jpg Type Tool

                      The Type tool allows you to create type in your Edge Animate project. Simply click anywhere on the stage and start typing! You can also draw text boxes by clicking and dragging on the stage to create a text box.

                       

                      color.jpg  Fill and Stroke

                      The Fill and Stroke tools allow you to adjust the fill color and stroke properties of a shape that you have created in the stage. Simply click the fill icon to choose a fill color, or click the stroke icon to adjust the stroke properties (such as color, width, and style).

                       

                      layoutDefaults.jpg Layout Defaults for New Elements

                      The Layout Defaults tool allows you to adjust properties such as choosing to use an "img" tag for images, changing from pixels to percents for width/height or x/y, or choosing to use "auto" for width/height. This is primarily used when creating responsive layouts.

                      1 person found this helpful
                      • 8. Re: 101: explanation of panel tools?
                        Anita Adamski Level 1

                        Outstanding!  I can actually make progress today. Many thanks.

                         

                        I'm familiar with AI, since it first came out, so some  tools/methods in Edge are intuitive.

                        • 9. Re: 101: explanation of panel tools?
                          dhosford Employee Moderator

                          Perfect! Yes I know the team is working hard to make the transition for users who are familiar with other Adobe products easier with the design of the interface. Thanks again for your feedback! : )