Question

HINTS:

Create your shape(s) first.

Select all shape(s).

Convert group to a Movie Clip (Modify - Convert to Symbol - Name it - Select "Movie Clip" from the drop down)

Double-click the symbol to enter the symbol's timeline and make changes accordingy

Test movie to ensure your movie clip moves as expected.



PART 2

Add the following content to your personal landscape design:

1. Motion Tween using your newly created movie clip

2. At least THREE camera animations (Zoom In, Zoom Out, and a change in X and/or Y coordinates)

(Refer to the "Nighttime Thoughts" landscape for reference

Answer 1

Below is a clear step‑by‑step procedure you can follow to satisfy PART 2 (motion tween with your movie clip and at least three camera animations: Zoom In, Zoom Out, and a pan/change in X/Y). I also include alternatives if you are using HTML5 Canvas (Animate CC differences).

Before you begin — choose document type
- If you are using ActionScript 3.0 (classic Flash / Animate AS3): use the Camera layer (built‑in) for camera animations.
- If you are using HTML5 Canvas: there is no built‑in Camera layer. Simulate camera moves by placing your scene in a parent/movieClip/container symbol and tweening that container’s scale (zoom) and position (pan).

A. Create your shapes and convert to a Movie Clip (your hint steps)
1. Draw your object(s) on the Stage (e.g., tree, cloud, house).
2. Select all shapes that make that object.
3. Modify → Convert to Symbol (or F8). Name it, choose Type = Movie Clip, click OK.
4. Double‑click the movie clip to enter its timeline. Add whatever nested animation you want inside (e.g., cloud moves across, flickering light, etc.). Use frame span + motion tween inside the symbol if you want independent looping motion.
5. Test the nested clip by returning to main timeline and Control → Test Movie (Ctrl+Enter).

B. Add a Motion Tween using your movie clip on the main timeline
1. Back on the main timeline, drag your Movie Clip symbol instance to layer where it should appear.
2. Right‑click the frame span on that layer → Create Motion Tween (or Insert → Classic Motion Tween in older versions). Move the symbol to a different frame and change its position/rotation/scale at the second keyframe — Animate will create the in‑between motion.
3. Use easing, rotation, or alpha changes in the Properties panel or Motion Editor to refine the motion.

C. Add Camera animations (ActionScript 3.0 / Animate Camera layer)
1. Insert a Camera layer: Insert → Timeline → Camera (or click the camera icon in timeline toolbar).
2. On the Camera layer create three camera keyframes at different frame numbers depending on desired timing (example timeline below).
- Example layout:
- Frame 1: Camera initial view (keyframe)
- Frame 60: Zoom In (keyframe)
- Frame 120: Zoom Out (keyframe)
- Frame 180: Pan (change X and/or Y) (keyframe)
3. To set a camera keyframe: select the frame and use the Camera Tool (W) OR select the Camera layer keyframe and in the Properties panel set Camera Position X, Y and Zoom value.
- Zoom In: reduce Zoom value (e.g., change from 1.0 to 1.5 — depending on units your version uses, you can drag the camera handle to enlarge view).
- Zoom Out: increase Zoom value (or move back to 1.0 or lower).
- Pan/Pan+Tilt: change X and/or Y values of camera for that keyframe (drag the stage while Camera tool is active).
4. Animate will interpolate the camera’s position and zoom between keyframes, creating smooth camera animations.
5. Use Motion Editor (Window → Motion Editor) for easing and fine control of zoom and position curves for each camera keyframe.
6. Test Movie (Ctrl+Enter) to preview.

D. If using HTML5 Canvas (simulate Camera)
1. Create a parent container movie clip: Select all scene layers/art and Convert to Symbol → Type: Movie Clip (call it “SceneContainer”).
2. On the main timeline, put SceneContainer on its own layer.
3. Create motion tweens on SceneContainer to simulate camera:
- Zoom in: create a keyframe at frame 1 with Scale X/Y = 100%, and at frame 60 set scale to 150% (tween will scale up).
- Zoom out: at frame 120 set scale to 80% (or back to 100%).
- Pan (X/Y change): at frame 180 set X and Y coordinates changed so the container moves opposite the intended camera movement (move container left to simulate camera panning right).
4. Easing: use Properties or the Motion Editor to smooth motion.

E. Example concrete settings (ActionScript camera) — adapt frames to your project length
- Frame 1 (keyframe): Position X=0, Y=0, Zoom=1.0 (starting view)
- Frame 60 (keyframe): Zoom=1.6 (Zoom In), easing = ease out (0.25)
- Frame 120 (keyframe): Zoom=0.7 (Zoom Out), easing = ease in/out
- Frame 180 (keyframe): Position X = -200, Y = 50 (pan diagonally), Zoom = 1.0
- Create a keyframe at the end to return to original if you want a loop.

F. Tips and troubleshooting
- Lock layers you aren’t editing to avoid accidental moves.
- Camera layer must be the topmost layer to affect everything beneath it.
- If camera keyframes don’t respond visually on stage, open the Camera tool and make sure “Show Camera” is enabled.
- For HTML5, animate will export JS; test in browser to verify timing.
- Use nested movie clips for repeated/continuous animations (e.g., moving clouds) so they run while the camera moves.
- Keep values manageable—extreme zooms can pixelate bitmaps; use vector art when possible.
- If you need precise numeric values, set them in Properties rather than dragging.

Would you like:
- A simple step‑by‑step example with exact frame numbers you can copy into your file?
- Screenshots or a GIF showing where to click in Animate?
- A small sample timeline file (.fla) structure suggestion?

Tell me which document type you’re using (ActionScript 3.0 or HTML5 Canvas) and I’ll give exact frame numbers and a short timeline plan ready for your project.