Select the text and change its font size to a larger number. Drag the timeline marker to the 1.5 second mark, and select the ellipse graphic and change its width and height amounts to 150% in the Properties panel. Notice that a blue pin icon appears on the timeline marker.ī.
Drag the timeline marker to the 1 second mark, and click the Toggle Pin button to select it. You’ll navigate to the labels to play specific states of the animation. Add a label named “rollover” at the 1 second mark, and add another label named “rollout” at the 2 second mark. Type the text “default” into the label.Ĭ. Drag the timeline marker to the 0 mark, and click on the Insert Label button to add a label. Take a look at Figure 9 to get familiar with the tool names and locations on the Timeline panel.ī. In the next steps, you’ll work with the timeline tools to add animated states to the widget. Add labels to split the timeline into sections.Ī. You can navigate back to the Stage using the Stage link on the top left of the Stage area. At this point, you’ve left the main Stage timeline, and are now working in the TimelineTrigger symbol timeline. Double-click on the instance to enter its timeline.ĭ. Notice that the circle and text element now appear as a single grouped object. In the Create Symbol dialog box, name the symbol TimelineTrigger, uncheck the Autoplay timeline option, and press OK.Ĭ. Select both the circle and the text, right-click, and choose Convert to Symbol. Make sure the name of the text element layer is “Text”.ī. Select the Text Tool and add a text element above the circle. Select the Ellipse Tool and draw a circle about 30 pixels in diameter. This file contains the mockup for the design, and the vector graphics you’ll use for your background in Edge Animate.įigure 8: Instances of the TimelineTrigger widget along the timelineįollow these steps to build the TimelineTrigger widget: 1. Take a look at the infographic-design.ai file in the assets folder. You’ll use this folder as your project folder as you work (see Figure 2).
#Add fonts to adobe edge cc download#
Download the supplied files from the article, and unzip them to your Desktop.Ĭ.
#Add fonts to adobe edge cc install#
Download and install Adobe Illustrator CC 2014 and Adobe Edge Animate CC 2014 from the Creative Cloud.ī. As the name would suggest, SVG files are scalable, and will work well with the responsive layout you’ll build in Edge Animate.įollow these steps to create the background graphic: 1.
Later, you’ll convert the vector graphics to SVG (Scalable Vector Graphics) format by copying and pasting them in Edge Animate CC 2014. In this case, you’ll produce the background graphic in Illustrator. When you’re ready to move from concept to design, Adobe Photoshop CC 2014 or Adobe Illustrator CC 2014 is a good place to start. The tutorial assumes that you’ve already done the important work of collecting data, text, and a story or message for your infographic. Step 1: Create the background graphic in Illustrator CC 2014
0 kommentar(er)
