Video: Grouping Elements in Adobe Captivate 7

Video: Grouping Elements in Adobe Captivate 7

This tutorial teaches how to group elements in Adobe Captivate 7.

Specifically, we’ll be creating this piece of the design you see on your screen.

First off, what’s a group.  A group is a unified collection of two or more elements (e.g., shapes, images, buttons, etc.)  You will often group objects when you want them to remain in a particular formation, and would like to be able to edit them as a single object.

Grouping objects also helps remove some clutter from your timeline when you have a lot of elements on a single page.  It creates a sort of file folder for the grouped elements.

So let’s create the group. To do this, we need to create two rectangle shapes, and then group them together.  Originally, this design called for a 2px wide line with a blue to gray color gradient.  However, Captivate will not let you apply color gradients to lines, and rectangle shapes can’t be used because they cannot be smaller than 4px wide. So I used a group to achieve the same affect by creating a gradient rectangle, and then layering another rectangle on tope to hide 2px worth of the gradient rectangle.

  1. First, click the “Insert Shape” button in the toolbar.
  2. Select the rectangle shape.
  3. Your cursor will now appear as a crosshair.  Click and drag the cursor to create the rectangle.
  4. With the shape still highlighted, go into the “Properties” panel under the “Fill & Stroke” section.
  5. Click and drag the “Width” slide to the left so the number changes to “0”.  This will remove the border of the shape.
  6. Click the number beside the Transparency icon, type 100, and press enter.
  7. Click the fill icon, and the fill popup will appear.
  8. Click the leftmost color in the gradient, and a color palette will appear.
  9. Click the eyedropper icon, and then select the Light Gray color from the color guide on the stage.
  10. Click the rightmost color in the gradient, and a color palette will appear.
  11. Click the eyedropper icon, and then select the same Light Gray color from the color guide on the stage.
  12. Next, click just beneath the color gradient, in the middle of the color.  This will add a new color to your gradient.
  13. Click this new color, and a color palette will appear.
  14. Click the eyedropper icon, and then select the LightBlue color from the color guide on the stage.

This completes the color gradient, now we need to place this shape where it needs to be.

  1. In the “Properties” panel under the “Transform” section set X to 873, and Y to 555,
  2. Make sure the “Constrain proportions” checkbox is unchecked.
  3. Set the Width to 4, and the Height to 28.

That finished the first shape in our group, now we need a second one.

  1. Select the shape you just created and press CTRL+C on your keyboard to copy it.
  2. Press CTRL+V to paste a copy.

Whenever you copy and paste an object in Flash, the copied object is placed 10px down and 10px to the right of the original object.  We want our second shape to hide half the width of the first shape so the first shape appears as a 2px wide line.  So we’re going to place the second shape 2px to the right of the first shape.

  1. With the second shape still highlighted, in the “Properties” panel under the “Transform” section set X to 875, and Y to 555,
  2. Then, under the “Fill & Stroke” section, click the number beside the Transparency icon, type 100, and press enter.
  3. Click the “Fill” icon.
  4. Remove the middle color from the gradient by clicking the center color in the gradient, and dragging it down until the color disappears from the gradient. Release your mouse button and the color will be removed from the gradient.
  5. Click the leftmost color in the gradient, and a color palette will appear.
  6. Click the eyedropper icon, and then select the color from the background just to the right of the bottom of the second shape.
  7. Click the rightmost color in the gradient, and a color palette will appear.
  8. Click the eyedropper icon, and then select the color from the background just to the right of the top of the second shape.

Lastly, we need to group these two elements so they remain in the same position relative to each other.

Click and drag a highlight box over the two objects, in doing this you’re going to highlight background too, which we don’t want in the group, so hold down CTRL on your keyboard and click on the background.  This will remove it from our selection.

Now, in the menubar, click Edit > Group to group the two elements.

Now you can click and drag them around as a single object, and they’ll remain at the same position relative to each other.

One last thing of note, looking at these shapes you might have noticed that the shapes appear to have a border around them, which we don’t want.  However, in fact, this border will not appear in the final published project.  It is only visible while you’re developing the course.  There are many things that may look a certain way when you’re developing on the stage, but will look different when you publish the course.  So it’s important to preview your course from time to time to see how the final product will actually look and function.

Let’s do that now to show you that these borders do in fact go away.

Click the Publish button and select “Next 5 Slides”.

And voila, the border isn’t there.  You’ll also notice that our second shape is completely invisible, making it seem like we simply have a 2px wide line with a linear gradient applied.

Thanks for your time and have a great day!

Click the buttons to learn more about the Adobe Captivate 7 eLearning Template.

Learn More Preview HTML5 Version Preview Flash Version

 

No Comments

Post a Reply

$0.000 items