When working with a layout, designers have many things to think about. Responsive design is one of the most important challenges facing web designers because it’s often necessary to design a site which displays properly on desktops/laptops, tablets and mobile devices.
Edge reflow tutorials code#
From here on out, you’ll be pasting code snippets into the Actions panel.Ĭ.In this article we’re going to look at the process of creating simple website mockups with Adobe Edge Reflow CC. You can use the Actions panel editor to guide you through adding actions, or you can type code directly into the text editor. You can also access the TimelineTrigger actions by choosing Window > Code to launch the Code panel.)ī. (Note that this step assumes that you’re still editing inside the TimelineTrigger timeline. Click on the Open Actions button next to the TimelineTrigger element in the Elements panel, and choose the creationComplete event. Click on the Playback button under the Pick an action section, and then click the Stop button (see Figure 10).įigure 11: The completed timeline of the TimelineTrigger widget Add code to the symbol to control the states.Ī. Notice that a Trigger icon appears on the timeline, and the Actions panel opens.ī. Drag the timeline marker to the 1.5 second mark, and click on the Insert Trigger button. Add stop action triggers along the timeline.Ī. Select the new animation spans, and click on the Easing button. Change the ellipse’s width and height scale back to 100%, and change the text’s font size back to the original size in the Properties panel. Select the Toggle Pin Tool again, and drag the timeline marker to the 2.5 second mark. Deselect the Toggle Pin Tool and move the timeline marker to the 2 second mark.ī. Select the animation spans, and click on the Easing button. Position the scaled graphics so they appear centered inside the symbol, Notice that colored animation spans appear on the timeline between the pinned points.Ĭ. 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).
Edge reflow tutorials download#
Download the supplied files from the article, and unzip them to your Desktop.Ĭ.
Edge reflow tutorials 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)
