Animation Action Buttons

Size: px
Start display at page:

Download "Animation Action Buttons"

Transcription

1 Animation Action Buttons You will learn techniques for drawing graphics and how to make an action button to start your movie. Click the Example link to see what your finished movie will look like: Example Renée Cole 2018

2 1. Open Animation 2. Open>New change size to 400 x 400 pixels and Action Script 3.0 NOTE: A drawing grid can be helpful when creating graphics. 3. Go to View>Grid>Edit Grid>Change the settings to those shown below and click OK

3 4. Select the OVAL>Choose a FILL and STROKE on the Properties panel (Any colors) 5. Change the Stroke to 3 6. Draw an OVAL anywhere on the Stage 7. Select the TEXT tool to name oval Start Button (Change the centering by clicking Paragraph) 8. Double click>group the FILL and STROKE

4 9. Select the OVAL>RIGHT CLICK>Convert to Symbol 10. Select BUTTON as the behavior (You should see it in your Library) 11. Click OK 12. Delete the oval from the Stage NOTE: The oval is in the library since it was converted to a symbol. 13. Save as (your initials) Ghost Town in your Animation folder

5 14. Draw a RECTANGLE anywhere on the stage 15. Delete the stroke of the rectangle 16. Open the Color panel and change to Linear Gradient (Window>Color>Select Linear Gradient) 17. Click the color selector and choose BLUE for one end of the gradient 18. The other end of the gradient and choose to WHITE click 19. If the rectangle does not fill automatically, use the paint bucket tool to fill your rectangle with the gradient color

6 20. Convert the rectangle to a symbol choosing Sky as the name and Graphic as the behavior (You should see in the Library) 21. Delete the rectangle from the stage 22. Save

7 23. Select the PENCIL tool>set the STROKE and FILL to BROWN 24. At the END OF THE TOOLS>Select the Smooth option to round the corners of your drawing 25. Draw the tree trunk 26. Select the Paint Bucket tool>click inside the trunk to fill the trunk with color. 27. Group the stroke and fill of the trunk Note: If your tree trunk does not fill with color, you might have gaps. To close the gaps, click on the Gap Size modifier and choose Close Small/Medium/Large Gaps (Found at the end of the Tools)

8 28. Move the trunk over 29. Change the stroke and fill colors to green 30. Draw a treetop (Do not connect it to the trunk yet) 31. Select the Paint Bucket tool and fill the tree top 32. Group the stroke and fill of the tree top 33. Drag the trunk under tree top 34. Group the trunk and the tree top 35. Convert it to a symbol choosing Tree as the name and Graphic as the behavior 36. Remember to save frequently! 37. Save and Delete the tree from the stage

9 38. Draw a car starting with the tires using the oval with a black fill and stroke 39. Draw one tire 40. Group the stroke and fill then copy the tire 41. Paste the tires side by side 42. Use the line tool set to size 3 to draw the body of the car

10 43. Fill your car with any color (If you have a problem filling use MODIFY>COMBINE OBJECTS>UNION) 44. Fill the headlight with white (Even though it looks white now it is really transparent and the stage color is showing!) 45. Add hubcaps to the tires 46. Group the car>convert to symbol with the name Car and Graphic as the behavior 47. Delete car from stage 48. Save!

11 NOTE: Check that your symbols are saving by opening up your Library. You should see all of your symbols. (Start button, Sky, Tree, Car) 49. Change the name of the current layer to Buildings 50. Go to VIEW>SNAPPING>SNAP TO GRID 51. Use the line tool size 2 and draw buildings in the middle of stage and to the left and right (See below) 52. Add fill color to the buildings (If a building will not fill, try clicking on the Gap Size modifier and choose Close Large Gaps)

12 53. Group the buildings and convert to them to a symbol choosing Buildings as the name and Graphic as the behavior 54. Lock the building layer and SAVE!

13 55. Insert a new layer and name it Sky 56. Open the Library panel if it is not already open Window >Library 57. Drag the sky onto the stage 58. Click on the Sky symbol if it is not already selected 59. Select the Free Transform Tool 60. Rotate the symbol so that the gradient is horizontal with the white at the bottom

14 61. Resize the sky so it covers the buildings 62. Drag the sky layer below the building layer 63. Lock the sky layer 64. SAVE!

15 65. Add a layer and name it Road (The road layer contains grass, road and an area for the start button.) 66. Draw grass 67. Add a gray road and ground below road 68. SAVE and Lock the Road layer

16 69. Insert a layer and name it Trees (Make sure all layers are locked except the Trees layer) 70. Open the library if it is not already open 71. Drag a tree to the stage 72. Resize the tree using the Free Transform tool and place it on the grass in front of a building 73. Add another tree using the same symbol from the library 74. SAVE

17 75. Insert a keyframe at Frame 60 of each layer so they will remain on the screen for 60 frames 76. Add a new layer for the car and Name it Car 77. Move the car layer above the Trees layer 78. Click in the first frame of the Car layer 79. Open the library and drag the car onto the stage

18 80. Resize the car to the appropriate size 81. Add a keyframe and motion tweening to move the car from off of one side of the stage to the other between frames 1 and Test your movie to make sure the motion tweening works before continuing

19 83. Go to File>Import to Library to add sound so the horn will honk as the car rolls through town 84. Click Desktop>Piner 112 Lab Share>Sounds and select a horn file

20 85. Add a layer for the sound>name it Car Horn 86. Choose a frame where you want the sound to start by dragging the playhead and watching the position of the car 87. Insert a keyframe and drag the sound file from the library to the stage

21 88. Make a NEW LAYER named START BUTTON 89. Drag out your button from your library to your stage 90. Select the button, on the right under PROPERTIES PANEL name the instance launch_button

22 91.Click on the BUTTON LAYER and DOUBLE-CLICK the button to get to Edit Symbol mode NOTE: The button should have four frames: UP, OVER, DOWN, & HIT. UP is the appearance of the button when the pointer is not over it. OVER is the appearance of the button when you place the pointer over it. DOWN is the appearance of the button when you click it. HIT defines the area that will respond to the click of the mouse.

23 92. Click in the Over frame and insert a KEYFRAME (F6) 93. Double-click on the button and CHANGE the fill COLOR 94. Click in the Down frame>insert a keyframe>change the button color 95. Click in the Hit frame>insert a keyframe>change the color (You want the whole oval to be your hit area so you will not change anything here.)

24 96. Click on Scene 1 to return to the NORMAL VIEW 97. SAVE 98. File>Publish to test your button

25 99. Add a layer and name it Text 100. Click on the layer name so that the whole timeline for the Text layer is selected 101. Use the TEXT tool>type a title for your movie on top of the button 102. Click somewhere on your scene>add the title Ghost Town

26 103. Insert a NEW LAYER and name it Stop Action 104. Click in frame 1 of the Stop Action layer 105. Go to the WINDOW>CODE SNIPPETS>ACTIONSCRIPT>TIMELINE NAVIGATION>STOP AT THIS FRAME (You should see a small a in frame 1 to indicate that an action has been applied to that frame)

27 SAVE Test the movie to make sure the stop action works before continuing Go to File>Publish Preview>HTML (The movie should NOT PLAY) Insert a NEW LAYER for the Play Action>Name Play Action Click in frame 1 of the layer Click in the ACTIONS PANEL Copy the following script launch_button.addeventlistener(mouseevent.click,launchcar) ; function launchcar(event:mouseevent) { gotoandplay(2); } Paste into the panel>use ENTER to make sure the lines are the same SAVE

28 114. File>Publish Preview>HTML to test your movie 115. Complete Rubric and TURN IT IN! POINT VALUE Animation 30 Action Button (Starts Movie, Text, and Roll Over) 25 All (8+) Layers Named Sound (Starts at point) 5 Symbols and Named Filename and Published 10 Total Points 100 Comments Student Evaluation POINTS EARNED

-Remember to always hit Command + S every time you make a change to your project going forward.

-Remember to always hit Command + S every time you make a change to your project going forward. -Open Animate -Under Create New - Select ActionScript 3.0 -Choose Classic as the Design type located in the upper right corner -Animate workspace shows a toolbar, timeline, stage, and window tabs -From

More information

Review Questions FL Chapter 3: Working With Symbols and Interactivity

Review Questions FL Chapter 3: Working With Symbols and Interactivity Review Questions FL Chapter 3: Working With Symbols and Interactivity TRUE/FALSE 1. One way to decrease file size is to create reusable graphics, buttons, and movie clips. 2. Flash allows you to create

More information

1. Multimedia authoring is the process of creating a multimedia production:

1. Multimedia authoring is the process of creating a multimedia production: Chapter 8 1. Multimedia authoring is the process of creating a multimedia production: Creating/assembling/sequencing media elements Adding interactivity Testing (Alpha/Beta) Packaging Distributing to end

More information

Drum Kit A. Setup to Trace Bitmap. Step 1. Click Window Menu > Other Panels > Common Libraries > Drumkit.

Drum Kit A. Setup to Trace Bitmap. Step 1. Click Window Menu > Other Panels > Common Libraries > Drumkit. Flash Chapter 20 Drum Kit A. Setup to Trace Bitmap. Step 1. Click Window Menu > Other Panels > Common Libraries > Drumkit. Find drum kit.jpg in the list of symbols in the Library Window. Drag the file

More information

Making ecards Can Be Fun!

Making ecards Can Be Fun! Making ecards Can Be Fun! A Macromedia Flash Tutorial By Mike Travis For ETEC 664 University of Hawaii Graduate Program in Educational Technology April 4, 2005 The Goal The goal of this project is to create

More information

Animation: Step Animation. You will use a Adobe Animate to create animated vector graphics with full screen navigation interfaces.

Animation: Step Animation. You will use a Adobe Animate to create animated vector graphics with full screen navigation interfaces. Animation: Step Animation You will use a Adobe Animate to create animated vector graphics with full screen navigation interfaces. Renée Cole 2018 1. Make an ANIMATION folder in your Tech Folder 2. Watch

More information

The Macromedia Flash Workspace

The Macromedia Flash Workspace Activity 5.1 Worksheet The Macromedia Flash Workspace Student Name: Date: Identify the Stage, workspace, Timeline, layers, panels, Tools panel, and Property inspector. The Macromedia Flash Workspace 5-35

More information

COMP : Practical 6 Buttons and First Script Instructions

COMP : Practical 6 Buttons and First Script Instructions COMP126-2006: Practical 6 Buttons and First Script Instructions In Flash, we are able to create movies. However, the Flash idea of movie is not quite the usual one. A normal movie is (technically) a series

More information

Introduction to Multimedia. Adobe Animate CC. Lab Manual

Introduction to Multimedia. Adobe Animate CC. Lab Manual Introduction to Multimedia Adobe Animate CC Lab Manual 2017-18 Semester 1 Table of Contents A. Introduction p. 1 About Animate Understanding the Workspace of Animate B. Getting Started with Animate....

More information

Using Flash Animation Basics

Using Flash Animation Basics Using Flash Contents Using Flash... 1 Animation Basics... 1 Exercise 1. Creating a Symbol... 2 Exercise 2. Working with Layers... 4 Exercise 3. Using the Timeline... 6 Exercise 4. Previewing an animation...

More information

Animating the Page IN THIS CHAPTER. Timelines and Frames

Animating the Page IN THIS CHAPTER. Timelines and Frames e r ch02.fm Page 41 Friday, September 17, 1999 10:45 AM c h a p t 2 Animating the Page IN THIS CHAPTER Timelines and Frames Movement Tweening Shape Tweening Fading Recap Advanced Projects You have totally

More information

chapter 1. Create symbols and instances 2. Work with Libraries 3. Create buttons 4. Assign actions to frames and buttons AND INTERACTIVITY

chapter 1. Create symbols and instances 2. Work with Libraries 3. Create buttons 4. Assign actions to frames and buttons AND INTERACTIVITY 1-4283-1963-8_03_Rev3.qxd 6/27/07 9:04 PM Page 1 chapter 3 WORKING WITH SYMBOLS AND INTERACTIVITY ADOBE FLASH CS3 1. Create symbols and instances 2. Work with Libraries 3. Create buttons 4. Assign actions

More information

Recipes4Success. Animate Plant Growth. Share 4 - Animation

Recipes4Success. Animate Plant Growth. Share 4 - Animation Recipes4Success In this Recipe, you will create an animated science diagram of plant growth. You will learn how to add images, draw shapes, use the animation options, preview, and publish your project.

More information

FLASH 5 PART II USER MANUAL

FLASH 5 PART II USER MANUAL Multimedia Module FLASH 5 PART II USER MANUAL For information and permission to use these training modules, please contact: Limell Lawson - limell@u.arizona.edu - 520.621.6576 or Joe Brabant - jbrabant@u.arizona.edu

More information

INSRUCTION SHEET. Flash Lab #1

INSRUCTION SHEET. Flash Lab #1 Advanced Web Page Design STANDARD 5 The student will use commercial animation software (for example: Flash, Alice, Anim8, Ulead) to create graphics/web page. Student Learning Objectives: Objective 1: Draw,

More information

In this lesson, you ll learn how to:

In this lesson, you ll learn how to: LESSON 5: ADVANCED DRAWING TECHNIQUES OBJECTIVES In this lesson, you ll learn how to: apply gradient fills modify graphics by smoothing, straightening, and optimizing understand the difference between

More information

animation, and what interface elements the Flash editor contains to help you create and control your animation.

animation, and what interface elements the Flash editor contains to help you create and control your animation. e r ch02.fm Page 43 Wednesday, November 15, 2000 8:52 AM c h a p t 2 Animating the Page IN THIS CHAPTER Timelines and Frames Movement Tweening Shape Tweening Fading Recap Advanced Projects You have totally

More information

Adobe Flash CS4 Part 1: Introduction to Flash

Adobe Flash CS4 Part 1: Introduction to Flash CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 1: Introduction to Flash Fall 2010, Version 1.0 Table of Contents Introduction...3 Downloading the Data Files...3

More information

Flash Domain 4: Building Rich Media Elements Using Flash CS5

Flash Domain 4: Building Rich Media Elements Using Flash CS5 Flash Domain 4: Building Rich Media Elements Using Flash CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Make rich media content development

More information

Adobe Flash CS4 Part 2: Working with Symbols

Adobe Flash CS4 Part 2: Working with Symbols CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 2: Working with Symbols Fall 2010, Version 1.0 Table of Contents Introduction...2 Downloading the Data Files...2

More information

How to create an animated face

How to create an animated face Adobe Flash CS4 Activity 5.1 guide How to create an animated face This activity walks you step by step through the process of creating a simple animation by using Adobe Flash CS4. You use drawing tools

More information

Adobe Flash CS3 Reference Flash CS3 Application Window

Adobe Flash CS3 Reference Flash CS3 Application Window Adobe Flash CS3 Reference Flash CS3 Application Window When you load up Flash CS3 and choose to create a new Flash document, the application window should look something like the screenshot below. Layers

More information

Animation is the illusion of motion created by the consecutive display of images of static elements. In film and video

Animation is the illusion of motion created by the consecutive display of images of static elements. In film and video Class: Name: Class Number: Date: Computer Animation Basis A. What is Animation? Animation is the illusion of motion created by the consecutive display of images of static elements. In film and video production,

More information

Recipes4Success. Draw and Animate a Rocket Ship. Frames 5 - Drawing Tools

Recipes4Success. Draw and Animate a Rocket Ship. Frames 5 - Drawing Tools Recipes4Success You can use the drawing tools and path animation tools in Frames to create illustrated cartoons. In this Recipe, you will draw and animate a rocket ship. 2012. All Rights Reserved. This

More information

GETTING AROUND STAGE:

GETTING AROUND STAGE: ASM FLASH INTRO FLASH CS3 is a 2D software that is used extensively for Internet animation. Its icon appears as a red square with a stylized Fl on it. It requires patience, because (like most computer

More information

Adobe Flash Course Syllabus

Adobe Flash Course Syllabus Adobe Flash Course Syllabus A Quick Flash Demo Introducing the Flash Interface Adding Elements to the Stage Duplicating Library Items Introducing Keyframes, the Transform Tool & Tweening Creating Animations

More information

Step 6: Create the butterfly body Repeat steps 4 and 5 to trace and create a butterfly body Convert the image into a graphic (F8), call it gr_body

Step 6: Create the butterfly body Repeat steps 4 and 5 to trace and create a butterfly body Convert the image into a graphic (F8), call it gr_body Tutorial 10: Tracing An Image And Animating A Butterfly Learn how to - Trace an image to create a realistic drawing - Create an animated and static butterfly Step 1: Set up the page Open Flash and resize

More information

Animatron Tutorial. Ronald Bourret

Animatron Tutorial. Ronald Bourret Animatron Tutorial Ronald Bourret http://www.rpbourret.com Table of Contents License... 2 Lesson 1: Getting Started... 3 1.1 Creating an Animatron account... 3 1.2 Animatron screen... 3 Lesson 2: Drawing...

More information

Basic Operation of Flash MX Professional 2004

Basic Operation of Flash MX Professional 2004 Basic Operation of Flash MX Professional 2004 (Main Tutorial) This Tutorial provides you Basic Operation for Flash MX Professional 2004. After this training, you will be able to create simple animation.

More information

Macromedia Flash. ( Macromedia Flash) : - - Flash. Flash. 10. ( Frame ) . Motion Tween. . Flash

Macromedia Flash.   ( Macromedia Flash) : - - Flash. Flash. 10. ( Frame ) . Motion Tween. . Flash Macromedia Flash ( Macromedia Flash).... : 233 - Ram - 16 64 600 - - Flash. Flash... Flash... Flash player Flash.. Flash Flash. Flash. Tweening 10. ( Frame ). Flash (10 1 ). Motion Tween :. Flash. Flash

More information

How to draw and create shapes

How to draw and create shapes Adobe Flash Professional Guide How to draw and create shapes You can add artwork to your Adobe Flash Professional documents in two ways: You can import images or draw original artwork in Flash by using

More information

The Disney Project in AS3

The Disney Project in AS3 The Disney Project in AS3 Intro: Save the Disney Kit Download the Disney Kit.fla from the website. It has all the graphics that you ll need in the Library. Double-click to open it in Flash. Immediately,

More information

ACTIVITY 5 WORKING IN TOON BOOM STUDIO. Select color for the background

ACTIVITY 5 WORKING IN TOON BOOM STUDIO. Select color for the background ACTIVITY 5 Select color for the background ACTIVITY 5 Click the green plus sign to add a new color The new color appears at the bottom of the Colour Palette ACTIVITY 5 Double-click and rename the new color

More information

Basics of Flash Animation

Basics of Flash Animation Basics of Flash Animation The Stage is where you do your main design work The timeline is where you animate your objects by setting keyframes The library is where you store all your assets things you use

More information

FLASH CS6 DIRECTIONS TO GET YOU STARTED!

FLASH CS6 DIRECTIONS TO GET YOU STARTED! FLASH CS6 DIRECTIONS TO GET YOU STARTED! SYMBOL A symbol is a reusable image, animation or button. You will see a plus sign + in the object once it s been converted to a symbol. Insert>Convert to symbol

More information

AO3. 1. Load Flash. 2. Under Create New click on Flash document a blank screen should appear:

AO3. 1. Load Flash. 2. Under Create New click on Flash document a blank screen should appear: AO3 This is where you use Flash to create your own Pizzalicious advert. Follow the instructions below to create a basic advert however, you ll need to change this to fit your own design! 1. Load Flash

More information

In this lesson you will learn how to:

In this lesson you will learn how to: LESSON 5: CREATING BUTTON STATES OBJECTIVES In this lesson you will learn how to: use FreeHand layers to create navigation buttons export layers from FreeHand to Flash create and edit symbols and instances

More information

Tutorial: Overview. CHAPTER 2 Tutorial

Tutorial: Overview. CHAPTER 2 Tutorial 2 CHAPTER 2 Tutorial... Tutorial: Overview This tutorial steps you through the creation of a simple banner for a web page and shows how to actually put the movie on the web. The tutorial explains how to

More information

Animated Gif - Illustrator /Text and Shapes

Animated Gif - Illustrator /Text and Shapes - Illustrator /Text and Shapes Use Adobe Illustrator to create an animated gif. Use a variety of shapes, outlined type, or live traced objects as your subjects. Apply all the skills that we have developed

More information

HYPERSTUDIO TOOLS. THE GRAPHIC TOOL Use this tool to select graphics to edit. SPRAY PAINT CAN Scatter lots of tiny dots with this tool.

HYPERSTUDIO TOOLS. THE GRAPHIC TOOL Use this tool to select graphics to edit. SPRAY PAINT CAN Scatter lots of tiny dots with this tool. THE BROWSE TOOL Us it to go through the stack and click on buttons THE BUTTON TOOL Use this tool to select buttons to edit.. RECTANGLE TOOL This tool lets you capture a rectangular area to copy, cut, move,

More information

Utah Education Network Web Animation Flash MX. Jessica Anderson (801)

Utah Education Network Web Animation Flash MX. Jessica Anderson (801) Web Animation Flash MX 12/30/03 2 Utah Education Network Web Animation Flash MX Jessica Anderson janderson@media.utah.edu (801) 585-6849 www.uen.org Flash, a powerful vector graphics program, allows you

More information

Name: Date: Multimedia Graphics and Web Publishing Mr. Dietzler. Flash Topics TWEENING AND MOTION GUIDES

Name: Date: Multimedia Graphics and Web Publishing Mr. Dietzler. Flash Topics TWEENING AND MOTION GUIDES Name: Date: Multimedia Graphics and Web Publishing Mr. Dietzler Flash Topics TWEENING AND MOTION GUIDES TWEENING: Motion Tweening: The most basic type of tweening is Motion Tweening in which you specify

More information

Corel Draw 11. What is Vector Graphics?

Corel Draw 11. What is Vector Graphics? Corel Draw 11 Corel Draw is a vector based drawing that program that makes it easy to create professional artwork from logos to intricate technical illustrations. Corel Draw 11's enhanced text handling

More information

Function Grapher Demystified Step 1

Function Grapher Demystified Step 1 Function Grapher Demystified Step 1 MathDL Flash Forum Learning Center Functions Grapher Demystified by Barbara Kaskosz and Doug Ensley In our MathDL Flash Forum article "Flash Tools for Developers: Function

More information

The playhead, shown as a vertical red beam, passes each frame when a movie plays back, much like movie fi lm passing in front of a projector bulb.

The playhead, shown as a vertical red beam, passes each frame when a movie plays back, much like movie fi lm passing in front of a projector bulb. The project: AIRPLANE I will show you a completed version of this project.. Introducing keyframes and the Timeline One of the most important panels in the Flash workspace is the Timeline, which is where

More information

Lesson 4: Add ActionScript to Your Movie

Lesson 4: Add ActionScript to Your Movie Page 1 of 7 CNET tech sites: Price comparisons Product reviews Tech news Downloads Site map Lesson 4: Add ActionScript to Your Movie Home Your Courses Your Profile Logout FAQ Contact Us About In this lesson,

More information

Valuable points from Lesson 6 Adobe Flash CS5 Professional Classroom in a Book

Valuable points from Lesson 6 Adobe Flash CS5 Professional Classroom in a Book Valuable points from Lesson 6 Adobe Flash CS5 Professional Classroom in a Book You are expected to understand and know how to use/do each of these tasks in Flash CS5, unless otherwise noted below. If you

More information

2. If a window pops up that asks if you want to customize your color settings, click No.

2. If a window pops up that asks if you want to customize your color settings, click No. Practice Activity: Adobe Photoshop 7.0 ATTENTION! Before doing this practice activity you must have all of the following materials saved to your USB: runningshoe.gif basketballshoe.gif soccershoe.gif baseballshoe.gif

More information

Adobe Flash CS4 Part 3: Animation

Adobe Flash CS4 Part 3: Animation CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 3: Animation Fall 2010, Version 1.0 Table of Contents Introduction...2 Downloading the Data Files...2 Understanding

More information

Airplane Propeller. Click Show All from the Zoom Control at the right end of the Timeline.

Airplane Propeller. Click Show All from the Zoom Control at the right end of the Timeline. Flash Chapter 10 A. Open your "airplane path" file. Step 1. Open your airplane path file. B. Move Propeller Off Fuselage. Airplane Propeller Step 1. Click Edit Symbols Button at the right end of the Timeline,

More information

BASICS OF MOTIONSTUDIO

BASICS OF MOTIONSTUDIO EXPERIMENT NO: 1 BASICS OF MOTIONSTUDIO User Interface MotionStudio combines draw, paint and animation in one easy easy-to-use program gram to save time and make work easy. Main Window Main Window is the

More information

Working with Symbols and Instances

Working with Symbols and Instances Chapter 3 Working with Symbols and Instances Learning Objectives After completing this chapter, you will be able to: Create new symbols Edit the symbols and instances Create and edit button symbols Import

More information

An Animated Scene. Pick a color for the street. Then use the Paint can to fill the lower part of the page with grass.

An Animated Scene. Pick a color for the street. Then use the Paint can to fill the lower part of the page with grass. An Animated Scene In this project, you create a simple animated scene with graphics, a bit of text, a simple animation and some music. Click on the Steps below and be creative! Remember: if you must leave

More information

Adobe Flash CS5. Creating a web banner. Garvin Ling Juan Santa Cruz Bruno Venegas

Adobe Flash CS5. Creating a web banner. Garvin Ling Juan Santa Cruz Bruno Venegas Adobe Flash CS5 Creating a web banner Garvin Ling Juan Santa Cruz Bruno Venegas Introduction In this tutorial, you will be guided through a step-by-step process on how to create your very own animated

More information

AppleWorks 6.1: What s New

AppleWorks 6.1: What s New AppleWorks 6.1: What s New AppleWorks still has word processing, database, and spreadsheet, but there are some changes in each one. A new presentation module takes the place of the old slide show feature

More information

Adobe Animate Basics

Adobe Animate Basics Adobe Animate Basics What is Adobe Animate? Adobe Animate, formerly known as Adobe Flash, is a multimedia authoring and computer animation program. Animate can be used to design vector graphics and animation,

More information

Creating a Text Frame. Create a Table and Type Text. Pointer Tool Text Tool Table Tool Word Art Tool

Creating a Text Frame. Create a Table and Type Text. Pointer Tool Text Tool Table Tool Word Art Tool Pointer Tool Text Tool Table Tool Word Art Tool Picture Tool Clipart Tool Creating a Text Frame Select the Text Tool with the Pointer Tool. Position the mouse pointer where you want one corner of the text

More information

Learning Flash CS4. Module 1 Contents. Chapter 1: Getting Started With Flash. Chapter 2: Drawing Tools

Learning Flash CS4. Module 1 Contents. Chapter 1: Getting Started With Flash. Chapter 2: Drawing Tools Learning Flash CS4 Module 1 Contents Chapter 1: Getting Started With Flash The Flash Start Page...1-1 The Flash Screen...1-2 The Flash Workspace...1-2 The Properties Panel...1-4 Other Panels...1-5 The

More information

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.

More information

2 SELECTING AND ALIGNING

2 SELECTING AND ALIGNING 2 SELECTING AND ALIGNING Lesson overview In this lesson, you ll learn how to do the following: Differentiate between the various selection tools and employ different selection techniques. Recognize Smart

More information

PART ONE. Getting Started

PART ONE. Getting Started PART ONE Getting Started Before you can create games, you must learn to program, but before you can program in Flash ActionScript, you must learn to use the Flash authoring tool. ActionScript is built

More information

Objectives: To create a Flash motion tween using the timeline and keyframes, and using pivot points to define object movement.

Objectives: To create a Flash motion tween using the timeline and keyframes, and using pivot points to define object movement. DM20 Assignment 4c Flash motion tween with pivot point adjustments screen shots from CS3 with CS4 differences described Objectives: To create a Flash motion tween using the timeline and keyframes, and

More information

Advice for How To Create a Film Project in Windows MovieMaker

Advice for How To Create a Film Project in Windows MovieMaker Advice for How To Create a Film Project in Windows MovieMaker This document was compiled to provide initial assistance to teachers and/or students to create a movie project using the Windows MovieMaker

More information

and 150 in the height text box, and then click OK. Flash automatically inserts the px (for pixel) after the number.

and 150 in the height text box, and then click OK. Flash automatically inserts the px (for pixel) after the number. 4. In the Document Properties dialog box, enter 700 in the width text box and 150 in the height text box, and then click OK. Flash automatically inserts the px (for pixel) after the number. The Document

More information

Animating Dialogue using the "Mouth Comp" method

Animating Dialogue using the Mouth Comp method Animating Dialogue using the "Mouth Comp" method Always use symbols There are many ways to go about animating dialogue in Flash. The most logical methods all take advantage of reusing symbols of different

More information

Multimedia Creation. for Kids

Multimedia Creation. for Kids Multimedia Creation for Kids 1 Lesson 1: Setting Up Your Project In this lesson you will be storyboarding your entire project. It is important to know exactly where you are going with your project before

More information

Adobe Flash CS4 Part 4: Interactivity

Adobe Flash CS4 Part 4: Interactivity CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 4: Interactivity Fall 2010, Version 1.0 Table of Contents Introduction... 2 Downloading the Data Files... 2

More information

Adobe Illustrator CS5 Part 2: Vector Graphic Effects

Adobe Illustrator CS5 Part 2: Vector Graphic Effects CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Illustrator CS5 Part 2: Vector Graphic Effects Summer 2011, Version 1.0 Table of Contents Introduction...2 Downloading the

More information

The Library is displayed as a window, and its contents are accessed by dragging and dropping onto the Stage.

The Library is displayed as a window, and its contents are accessed by dragging and dropping onto the Stage. FLASH FREQUENTLY ASKED QUESTIONS - What is the Library? The Library is an area in which you store all content used in a Flash movie. In Flash terminology, each piece of content stored in the Library is

More information

Director 8 - The basics

Director 8 - The basics Director 8 - The basics This tutorial covers the building blocks of Director, ignoring animation and interactive programming. These elements will be covered in the following tutorials. The idea is that

More information

To get a copy of this image you right click on the image with your mouse and you will get a menu. Scroll down the menu and select "Save Image As".

To get a copy of this image you right click on the image with your mouse and you will get a menu. Scroll down the menu and select Save Image As. The most popular lesson I teach is editing photographs. Everyone wants to put his or her brother's head on a monkey or something similar. This is also a lesson about "emphasis". You can cause more individuals

More information

Tutorial 4. Creating Special Animations

Tutorial 4. Creating Special Animations Tutorial 4 Creating Special Animations Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text blocks Animate individual letters within a text block

More information

Motion Guide Animations

Motion Guide Animations Motion Guide Animations Chapter 8 Animations that involve objects orbiting around a point can be done using fixed points, but better results can sometimes be achieved through the use of a circular motion

More information

Edge Television Advertisement. -Open the 3 images of TV characters and the network logo in Photoshop. Your images must be high resolution images!

Edge Television Advertisement. -Open the 3 images of TV characters and the network logo in Photoshop. Your images must be high resolution images! -Open the 3 images of TV characters and the network logo in Photoshop. Your images must be high resolution images! -Use Layer Styles to add a White Stroke of 5 pixels to each image you cut out. This will

More information

vinodsrivastava.com FLASH

vinodsrivastava.com FLASH vinodsrivastava.com FLASH 1. What is a Layer? Layer helps us to organize the artwork in your document. When we create a flash document it contain one layer but we can add more. Objects are placed in layer

More information

Animatron Tutorial. Ronald Bourret

Animatron Tutorial. Ronald Bourret Animatron Tutorial Ronald Bourret http://www.rpbourret.com Table of Contents License... 2 Lesson 1: Getting Started... 3 1.1 Create an Animatron Account... 3 1.2 Animatron Screen... 3 Lesson 2: Drawing...

More information

General Directions for Creating a Program with Flash

General Directions for Creating a Program with Flash General Directions for Creating a Program with Flash These directions are meant to serve as a starting point for a project in Flash. With them, you will create four screens or sections: 1) Title screen;

More information

Part 1: Basics. Page Sorter:

Part 1: Basics. Page Sorter: Part 1: Basics Page Sorter: The Page Sorter displays all the pages in an open file as thumbnails and automatically updates as you add content. The page sorter can do the following. Display Pages Create

More information

Introduction to Flash - Creating a Motion Tween

Introduction to Flash - Creating a Motion Tween Introduction to Flash - Creating a Motion Tween This tutorial will show you how to create basic motion with Flash, referred to as a motion tween. Download the files to see working examples or start by

More information

Lesson 2A Plants Versus Zombies01 Page 2A-1 Walking Zombies (ver 1)

Lesson 2A Plants Versus Zombies01 Page 2A-1 Walking Zombies (ver 1) Lesson 2A Plants Versus Zombies01 Page 2A-1 Start Adobe Flash Click on Create New>ActionScript 3 Click on File>Save. Open your PlantsVersusZombies01 folder. Name the file Lesson02-your name Click on the

More information

CREATING A MINI-LESSON MOVIE

CREATING A MINI-LESSON MOVIE PROJECT 4 CREATING A MINI-LEON MOVIE Upon completion of this project, you should be able to: Create a simple animation. Create a text animation. Create sound clips. Create Drag and Drop learning interactions.

More information

Creating a 3D bottle with a label in Adobe Illustrator CS6.

Creating a 3D bottle with a label in Adobe Illustrator CS6. Creating a 3D bottle with a label in Adobe Illustrator CS6. Step 1 Click on File and then New to begin a new document. Step 2 Set up the width and height of the new document so that there is enough room

More information

Adobe Illustrator A Hot Air Balloon Sky Scene In this tutorial, we'll explain how to create a fun sky scene with hot air balloons.

Adobe Illustrator A Hot Air Balloon Sky Scene In this tutorial, we'll explain how to create a fun sky scene with hot air balloons. Adobe Illustrator A Hot Air Balloon Sky Scene In this tutorial, we'll explain how to create a fun sky scene with hot air balloons. We will take advantage of the Blend Tool and the Symbol Sprayer Tool and

More information

Sample Hands-On-Training Chapter Review Copy Only Contact Information Notice of Rights Notice of Liability Trademarks

Sample Hands-On-Training Chapter Review Copy Only Contact Information Notice of Rights Notice of Liability Trademarks Sample Hands-On-Training Chapter Review Copy Only Copyright 2000-2003 by lynda.com, Inc. All Rights Reserved. Reproduction and Distribution Strictly Prohibited. This electronically distributed Hands-On-Training

More information

PLEASE NOTE THAT LECTURE NOTES ARE IN TRANSITION TO VERSION 8

PLEASE NOTE THAT LECTURE NOTES ARE IN TRANSITION TO VERSION 8 Flash MX Professional 2004/Flash 8 Introduction to Flash, Panels, Drawing tools Outline of lecture demo/hands on class practice (Reading Chapters Flash MX 2004 HOT CH 1-3) PLEASE NOTE THAT LECTURE NOTES

More information

Microsoft Word

Microsoft Word OBJECTS: Shapes (part 1) Shapes and the Drawing Tools Basic shapes can be used to graphically represent information or categories. The NOTE: Please read the Objects (add-on) document before continuing.

More information

HO-FL1: INTRODUCTION TO FLASH

HO-FL1: INTRODUCTION TO FLASH HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics,

More information

ITP 101 Project 2 - Photoshop

ITP 101 Project 2 - Photoshop ITP 101 Project 2 - Photoshop Project Objectives Learn how to use an image editing application to create digital images. We will use Adobe Photoshop for this project. Project Details To continue the development

More information

Creating Newsletters

Creating Newsletters Creating Newsletters You will create a one-page newsletter with columns. You will also practice using text wrapping, pull quotes, logos, rotating of graphics and review of the font families. Be creative

More information

Scene 2, Flash. STEP THREE: Same with the mouths, if you have it touching the ears or something, move it so there is clearance.

Scene 2, Flash. STEP THREE: Same with the mouths, if you have it touching the ears or something, move it so there is clearance. 1 Scene 2, Flash Export art from Illustrator to Flash. Animate scene 2 in Flash, frames 1 through 24 Spend a little time studying the wolf.fla file. Scrub the timeline on scene 2 and think about which

More information

Page 1. Fireworks Exercise

Page 1. Fireworks Exercise Page 1 Fireworks Exercise 1. Create a New Fireworks Document - File>New. For this exercise, choose 800 for width, 600 for height, resolution 72 pixels/inch, canvas color to Transparent, then choose OK.

More information

Cell Phone. Adobe Illustrator Lesson 16 Working with Gradients Transparency Menu 1. START>PROGRAMS>ADOBE ILLUSTRATOR CS3

Cell Phone. Adobe Illustrator Lesson 16 Working with Gradients Transparency Menu 1. START>PROGRAMS>ADOBE ILLUSTRATOR CS3 L e s s o n 1 6, P a g e 1 Adobe Illustrator Lesson 16 Working with Gradients Transparency Menu Cell Phone 1. START>PROGRAMS>ADOBE ILLUSTRATOR CS3 2. File>New and use these settings. Be sure to change

More information

The Timeline records the actions in each Frame. It also allows multiple independent images and actions through Layers.

The Timeline records the actions in each Frame. It also allows multiple independent images and actions through Layers. Using Flash to Create Animated Environments Objectives: Understand the capabilities of Flash Gain a general overview of features and tools Understand layers, text, graphics, animation and buttons Import

More information

ITEC185. Introduction to Digital Media

ITEC185. Introduction to Digital Media ITEC185 Introduction to Digital Media ADOBE ILLUSTRATOR CC 2015 What is Adobe Illustrator? Adobe Illustrator is a program used by both artists and graphic designers to create vector images. These images

More information

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! CS 1033 Multimedia and Communications Lab 8: Animation with Video Timeline REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! LAB #8 - Exercise 1 Objectives: Upon completion of Exercise 1 you should be

More information

Doing a flash animation for animb

Doing a flash animation for animb Doing a flash animation for animb Mathieu Clabaut May 22, 2008 Introduction This tutorial should provide the user with a tour through the most important functionalities allowing to build a flash animation

More information

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in

More information

Sample Hands-On-Training Chapter Review Copy Only Contact Information Notice of Rights Notice of Liability Trademarks

Sample Hands-On-Training Chapter Review Copy Only Contact Information Notice of Rights Notice of Liability Trademarks Sample Hands-On-Training Chapter Review Copy Only Copyright 2000-2003 by lynda.com, Inc. All Rights Reserved. Reproduction and Distribution Strictly Prohibited. This electronically distributed Hands-On-Training

More information

Adobe Flash Professional CS5.5

Adobe Flash Professional CS5.5 Adobe Flash Professional CS5.5 Creating Image thumbnail Niranjan Khadka Center for Teaching and Learning Adobe Flash Professional CS5.5 The Interface TOOL PANEL It appears on either side of screen and

More information

Flash offers a way to simplify your work, using symbols. A symbol can be

Flash offers a way to simplify your work, using symbols. A symbol can be Chapter 7 Heavy Symbolism In This Chapter Exploring types of symbols Making symbols Creating instances Flash offers a way to simplify your work, using symbols. A symbol can be any object or combination

More information