Page 5 - CC2017_AN_Look_Inside

Understanding the Animate View Options
Most Animate projects require some amount of zooming in and out, as well as navigating around the document within its
window. As we show you how to complete different stages of the workflow, we usually won’t tell you when to change your
view percentage because that’s largely a matter of personal preference. You should understand the different options for
navigating around an Animate file, however, so you can more easily get to what you want, when you want to get there.
ANIMATE FOUNDATIONS Zoom Tool Animate Foundations
You can click with the Zoom tool to increase the view percentage in specific, predefined intervals (the same intervals you
see in the View Percentage menu in the top-right corner of the document window). Pressing Option/Alt with the Zoom tool
allows you to zoom out in the same predefined percentages. If you drag a marquee with the Zoom tool, you can zoom into a
specific location; the area surrounded by the marquee fills the available space in the document window.
Additional functionality, related tools,
and underlying graphic design concepts
are included throughout the book.
Option/Alt-click with the Zoom tool to zoom out.
Click with the Zoom tool to zoom in.
...to fill the document window with the selected area. 4. In the General tab, make sure the first option — ActionScript 3.0 — is
Draw a marquee with the Zoom tool… View Percentage Field selected in the list, leave all other options at the default settings, and then Note: Advice and Warnings
click OK.
ages in the menu, you can also type a specific
View Menu In addition to the predefined view percent- When you create a new file, the Stage is automatically centered in the document We have arranged our Where appropriate, sidebars
The View>Magnification menu also provides options for
window. The Stage is essentially the workpace, or the digital “page” area; anything
workspace to make
percentage in the View Percentage field in the
changing the view percentage, including their associated
outside the Stage area will not be visible in the exported movie (although it will increase
the best possible use
top-right corner of the document window.
keyboard shortcuts. (The Zoom In and Zoom Out options
the file size, which affects its download time).
step through the same predefined view percentages you see
shots, including two
Hand Tool
by clicking with the Zoom tool.) If scroll bars appear in the document window, you can use of space in our screen provide shortcuts, warnings, or
docked and collapsed
the Hand tool to drag the file around within the document
Command/Control-equals (=)
panels that we will
Zoom In Command/Control-minus (–) window. The Hand tool changes the visible area in the expand when necessary.
Zoom Out Command/Control-1 document window; it has no effect on the actual content of Feel free to arrange the
100% Command/Control-2 the image. panels however you tips about the topic at hand.
Show Frame Command/Control-3 When using a different tool other than the Text tool, you can prefer; for this project,
Show All Command/Control-4 press the Spacebar to temporarily access the Hand tool. you will be using the
400% Command/Control-8 Double-clicking the Hand tool in the Tools panel fits the Tools, Properties, Align,
Timeline, and Color
800% Stage to the document window. panels.
16 The Animate CC User Interface
5. Choose File>Save. Note:
Because this is a new file that has not yet been saved, choosing the Save command Press Command/
automatically opens the Save dialog box, where you define the file name, save location, Control-S to save the
and format.
active file.
If a file has already been saved at some point, the Save command simply overwrites the
previously saved version of the file. If you want to save the new version and maintain the Press Command/Control-
original, you have to use the File>Save As command to define a new name and create a Shift-S to use the Save As
copy of the file. option.
6. In the resulting dialog box, navigate to your WIP>Car folder.
Project Review
Project Review 6. _______________ sounds are timeline 7. Change the file name to corvette.fla. Make sure Flash CS6 Document is
selected in the Format/Save As Type menu and click Save.
Native Flash files use the FLA extension. By default, the extension is included in the
After completing each project, you
1. In a Button symbol, the _______________ independent; they must download completely Save As/File Name field. You don’t need to type it again if you don’t delete the default
extension from the field.
before they play.
defi nes the area where a user can click to
fi ll in the blank 2. _______________ to edit a symbol in place on 7. _______________ sounds are timeline can complete these fill-in-the-blank and
trigger the button.
dependent; they play as soon as enough of the
data has downloaded to the user’s computer.
If necessary, you can use
short-answer questions to test your under-
the Stage.
this menu to save a file to
be compatible with the
8. The _______________ sync method prevents
3. The _______________ marks the location
previous version of Flash.
standing of the concepts in the project.
of the defi ned X and Y values of a placed
from playing at the same time.
instance. more than one instance of the same sound 8. Continue to the next exercise.
4. A(n) _______________ defi nes the point in 9. You can use the _______________ dialog box 20 Project 1: Corvette Artwork
to change the length of a specifi c sound fi le.
time when a change occurs. Portfolio Builder Projects
5. _______________ is the number of animation 10. Use the _______________ option to replace Portfolio Builder Project
one symbol with another at a specifi c frame.
frames that occur in a second.
Use what you learned in this project to complete the following freeform exercise.
Carefully read the art director and client comments, then create your own design to meet the needs of the project.
Use the space below to sketch ideas; when fi nished, write a brief explanation of your reasoning behind your fi nal design. Each step-by-step project is accompanied
Your client is a company that provides
We want to build a new introduction page to
by a freeform project, allowing you to
technical support for children’s online video
our video game site. We’re using a robot avatar
for that site similar to the kiosk interface, with
character to be featured on the intro page — I even
a talking character that identifi es the options.
recorded the intro message with a “mechanical”
1. Briefl y describe at least three uses of the Library panel. art director comments games. Th e owner wants an introduc tion page client comments throughout the video game site, and want that practice skills and creativity, resulting in an
sounding voice. (Feel free to re-record the audio if
To complete this project, you should:
you want to, as long as the message stays the same.)
short answer Review the client-supplied sound and I found a robot illustration that I like, but I’m not extensive and diverse portfolio of work.
Download the client’s supplied fi les in the
FL6_PB_Project2.zip archive on the
an artist; I’d be happy to review other artwork if
Student Files Web page.
you have a better idea. I also want you to develop
some kind of background artwork that makes the
artwork fi les.
piece look like a cohesive user interface.
2. Briefl y explain the difference between event sounds and stream sounds.
Develop a site intro page with a talking
robot and two diff erent buttons.
to online technical support and one that links to a
telephone support page.
If you use the client’s artwork, import the You need to include two buttons: one that links Project Summary
fi le into Flash and create movie clips as In the fi nal fi le, I want the robot to look like it’s e ability to control object shape and movement is one of the most important functions in designing
necessary from the diff erent elements. talking, but I also want the robot to point to the animations. In this project, you used a number of basic techniques for animating object properties,
If you don’t use the supplied fi le, create or related buttons when the appropriate part of the on the knowledge from this chapter, learning new ways to animate multiple properties at once. e
intro sound plays.
3. Briefl y explain the concept of lip syncing, as it relates to symbols and the Flash timeline. fi nd artwork as appropriate. involve some text, even if that text is eventually converted into drawing objects; you now know how to
including size, color, and position. As you complete the next projects in this book, you will expand
skills and knowledge from this project, however, apply to any animation — understanding frame rate,
keyframes, and timeline independence are essential to being a successful animator.
is project also introduced the concept of adding text to a movie. Many Flash projects will
project justifi cation di erent versions for various mobile device sizes.
create and format text to communicate a client’s message directly within a Flash le.
Finally, you learned techniques for creating multiple variations of the same le, using built-in
tools to automate as much of the work as possible. ese techniques and skills can be helpful whenever
115
Project 2: Talking Kiosk Interface Create a classic tween
Create a shape tween
you need multiple versions of a single le — whether you need to create multiple di erent-sized ads or
to animate a change
in object size
to animate a change in
object position
Use keyframes to control
Create a classic tween
animation timing
to animate a change in
object opacity
Use blank keyframes to
Place and format text
prevent an object from
on the Flash Stage
appearing too early
Define font embedding
for an SWF file
Create a shape tween Scale and adjust content
to match different file
to animate a change
dimensions
in object color
Use a project to manage
assets for multiple files
116
Visual Summary
Using an annotated version of the
finished project, you can quickly
identify the skills used to complete
different aspects of the job. Project 3: Animated Internet Ads 169
v