Adobe Edge Preview 3 beginner's Guide (1)

BKJIA: This application has been downloaded for more than August 1 copies since the first preview of Adobe Edge was released in 150,000. From this point of view, Edge is no longer a beta version. It has experienced three major versions since then. It has won so much attention that we can imagine that Edge will certainly become an indispensable part of the Web Designer toolbox.

For some reason, this tutorial mainly introduces preview 3. Preview version 1 focuses on user interfaces, graphics, and actions. Preview version 2 is a direct result of feedback on preview version 1. It has made many practical enhancements and fixed errors. Preview version 3 is an interactive version introduced during the development of Edge, which makes this article an introduction tutorial to demonstrate how to apply and use various animations and interactive functions of the application. In fact, this tutorial aims to help you quickly get started with Edge in a very short time. Before:

· Download and install Edge for free, in English only ).

· Download and decompress the sample file.

Getting started

After downloading and opening the sample file, you will see an Exercise folder, which contains the ramen_rahko_begin.edge file and many other files, see Figure 1 ). These files should not be moved or changed unless you are required to do so. The reason is that, in simple terms, the. edge file is just a "shell" that points to and uses various JavaScript, HTML, and CSS files created when you use Edge. If you delete one of the files, you will encounter a fault.

With this in mind, you can go deep into Edge and have some fun.

Figure 1. edge files are a collection of files created during the creation phase of any Edge project.

Double-click the ramen_rahko_begin.edge file to start the Edge. When the file is opened, you will see the Edge interface, as shown in 2. Each area of the interface includes:

· Stage): This is where actions occur. If an item is visible on the stage at any time, the user will see it in the browser. Note that the stage is centered. This is a feature added in preview version 2 ).

· Properties) panel: Like its brother product Flash Professional, everything includes stage) has Properties. These attributes include basic attributes such as the width, height, and color of the stage. They also include complex attributes such as rounded rectangle, rotation, and proportional values of objects operated on the stage. This panel is also context sensitive. For example, if you select a piece of text, the panel displays text attributes. If you select stage, you will see stage properties.

· Timeline) panel: If you have used Flash Professional or After Effects, you must be familiar with Timeline panels. The buttons in the upper left corner determine how key frames, transitions, and even stage elements are displayed. The time code is "drag-and-drop scrubbable)", which means you can drag the time code to move the playback header on the stage. The timeline is time-based, not frame-based. If you slide the Zoom tool at the bottom of the timeline, your view will be scaled up from 1/4 seconds to a few milliseconds. This means you can strictly control the animation time.

You can also drag the playback header on the timeline, which is called "drag Scrubbing)") to go to a specific time point or preview the animation.

Next to the stream play header is another useful tool called "Mark )". If you are a Flash Professional or Video Producer, it is easy to initially treat the tag as a prompt point on the timeline that accurately shows the location of the change. However, the marker is slightly different because it is closely related to the playback header and can be used to set the duration from start to end of the animation.

· Element Elements) panel: This panel is used for two purposes at the same time. It exposes the DOM of the document and acts as a "library" for each item in your project ". The order in which elements are displayed in this panel is the order in which they appear on the timeline. If you move the timeline layer up or down in the order of layers, this change will be quickly reflected in the element panel, and vice versa.

Figure 2. Edge work zone.