HO-FL1: INTRODUCTION TO FLASH

Size: px
Start display at page:

Download "HO-FL1: INTRODUCTION TO FLASH"

Transcription

1 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, page banners and logos, web-site navigation bars and even entire web-sites. Flash movies are compact, vector based graphics, so they download rapidly and scale to the viewer's screen size. Flash contains a variety of media to help you learn the program and become proficient at creating your own Flash movies. This includes on-line help that appears in your web browser, interactive lessons, a tutorial, a printed manual (which you can download in pdf format) and a regularly updated web-site. There are also a multitude of web-sites providing useful tips, hints, tutorials and examples of Flash Movies. This aim of this Hands-On exercise is to introduce you to the main features of Flash, its menu commands, panels (also a feature of Fireworks), the stage, timelines and the Library. The Flash Screen and Tools Panels 1. Click on Start All Programmes Adobe Web Standard CS4 and open Flash. 2. When Flash opens you see the opening screen. This provides 3 options for you to chose from: (i) Open a Recent Item, (ii) Create New file, etc and (ii) Create a new file from a Template (Note: the opening screen should be similar to that shown below): 3. Select Create Flash File (ActionScript 2.0) to create a new file. (Note: in this module when we come to use ActionScript, we will focus on AS 2.0 as this is simpler for beginners to use and understand. The follow-on module, Building Web Applications using Flash and ActionScript, will introduce and use ActionScript 3.0). 4. Whenever a new document opens in Flash a number of panels and toolbars are displayed (most are similar to those in Fireworks). These include: the MENU bar: along the top of the screen contains groupings of key menu commands. the TOOLS panel: on the left hand side of the screen contains tools for creating and editing objects on the stage. the STAGE: the white area at the centre of the screen, which is where you do all the work: create graphics, add images, sound, text and navigation buttons. All objects placed on the stage visible to the user. mmfl-0010.doc Page 1 of 9

2 the TIMELINE: just below the main menu, which is what you use to control your Flash movies/animations (i.e. how your graphics change over time). Can contain different LAYERS of animation made up of a series of FRAMES. several multi-tab PANELS: which can be organised on the right hand side of the screen or made to 'float'. the PROPERTIES PANEL: can be positioned anywhere on screen, e.g. along the side or the bottom, enables you to adjust the properties of objects on the stage. 5. When you open Flash it creates a blank STAGE (the Flash work area), which is where you will do all your work, adding text and graphics, editing your images and movies. 6. The stage initially contains one scene (Scene 1) comprising a single layer (Layer 1). Sometimes you will create an animation that begins off stage. The OFF-STAGE area is the gray area around the white area of the stage. 7. Select File Save and save your file as mmflho1.fla in your ho folder (I:\myfiles\mm\mmhofl1\). Don't forget to save your files regularly during the exercises! Note: the default format that Flash uses to save files is.fla. But when you want to save/publish your work for use on the web you need to export it in the Flash Movie/Shockwave (.swf) format. You should never publish your original fla files on the web. 8. The TOOLS PANEL, shown down the left-hand side of the above diagram, contains a number of tools which you will explore in the following ho exercises (these are very similar to those available in Fireworks). If the Tools panel is not visible, select Window Tools (Ctrl+F2) and position in your preferred location. 9. Select the RECTANGLE TOOL and draw out a small rectangle in the top left-hand corner of the stage. Note: To create a square, hold the shift key down as you drag out the rectangle tool. 10. Select the SELECTION TOOL (the solid arrow in the top left hand corner of the Tools panel) and select the rectangle you have just created by dragging the arrow tool out around it. In the Properties panel, use the Fill and Stroke buttons to change the border and fill colour of your rectangle. mmfl-0010.doc Page 2 of 9

3 11. As in Fireworks, the Properties Panel also displays other properties of the active object, e.g. its position on the stage (X,Y coordinates, where the top left hand corner of the stage is X = 0 and Y =0) and its size (W = width and H = height, in pixels). Just as you did with Fireworks you should always use Properties Panel (in this case the Position and Size) to accurately size and position objects on the Stage: 12. All objects that you draw or place on the canvas can be edited. To edit an object you first need to select it with the SELECTION TOOL. 13. As you may already have discovered, selecting an object in Flash is different than in Fireworks. When an object is selected for editing you will see a dashed border or fill (not blue handles at the edges of the object as in Fireworks), depending on how you click on the object, for example: 14. Flash also contains different tools, which you can use to adjust the shape of your object, depending on where you position the SELECTION TOOL. Select the Selection Tool and move it over different areas of the rectangle. You should notice that the cursor changes shape? For example, if you select the edge or corner of the rectangle you can drag out the mouse pointer to adjust the object s shape: Displaying and Using Panels Just as in Fireworks, Flash contains a series of Panels, which are controls that you use to edit and optimise different aspects of your graphics. For example: the INFO, TRANSFORM and COLOR panels control a range of the object s properties. the ACTIONS panel is used for adding ActionScript commands to control the behaviour of your movies, or objects that make up the movie, such as buttons and images, allow for user interactivity, e.g. the actions that take place when the user moves their mouse over a button or other object in your movie. the LIBRARY panel contains graphics, buttons, movies, symbols, etc that you have previously created. If a particular panel is not displayed you can activate it by selecting Window on the Main Menu. A tick to the left of the panel name means that the panel is already displayed. mmfl-0010.doc Page 3 of 9

4 Library Objects, Symbols and Instances As in other Adobe packages, such as Dreamweaver and Fireworks, the Library is where you store objects that you have created. This is particularly useful if you want to reuse the same object elsewhere in your movie. As with Fireworks, to add an object to the Library you must first convert it to a SYMBOL. As you will soon discover all symbols used in a flash movie are stored in the Library. There are three types of symbols: GRAPHICS, BUTTONS and MOVIECLIPS, which can be reused throughout your movie or imported and used in other movies. A copy of a symbol used in the movie is called an Instance. Note: (i) all instances have the same properties (colour, size, etc.) as the original symbol, (ii) to create similar symbols with different properties it is necessary to DUPLICATE the object in the Library. 1. Select your rectangle so that it is the active object (remember this is indicated by the dashed fill and border). You select an object either by double clicking on the object or by dragging the Selection Tool arrow around it. 2. Select Modify Convert to Symbol on the Main Menu (or press F8) and create a graphic symbol called myrectangle1: 3. You should note three things: (i) Your Library now contains an item called myrectangle1, (ii) the instance of myrectangle1 on the canvas is indicated by a light blue border with a circle at its centre, (iii) the Properties Panel indicates that the object is a Graphic symbol. 4. The advantage of the library is that it enables you to create a reusable library of objects that you can use in your movies. The Timeline The timeline - which is where you create sequences of images that will make up your animation - is at the heart of Flash movies and usually comprises a number of layers which contain the different components that make up your movie: Animation is created by changing the appearance of an object or graphic along the timeline (or by using the Motion Editor, which is a new feature in Flash CS4). Don't worry if all this seems a little confusing at first, it will become much clearer and easier to understand as you use the timeline and motion editor to create your own animations and movies. Note: To find out more about the timeline and how it used, select F1 (Flash Help) and so a search using the keywords: 'Timeline' and 'Frames'. Creating a Simple Flash Movie You are going to create a simple movie, in which a rectangle changes colour: 1. Click on the Insert New Layer button on the timeline and insert a new layer. mmfl-0010.doc Page 4 of 9

5 2. Click on the layer names in turn and rename layer 1 = myrectangle1 and layer 2 = movie1: 3. Delete any symbols that you may already have placed on the movie1 or myrectangle1 layers. 4. Select Frame 1 in your myrectangle1 layer and drag a copy of the myrectangle1 symbol from the Library onto the stage. Use the Properties Panel to accurately position the instance of myrectangle1 on the stage, setting its position to x=30, y=20 (pixels): 5. Right click on the myrectangle1 symbol in the Library and select Duplicate from the pop-up menu that appears. Name the new symbol myrectangle2. 6. Double click on the myrectangle2 symbol in the Library. This should open the myrectangle2 symbol in the editing window. Use the Properties Panel to change the fill and border colours. 7. Close the myrectangle2 window by clicking on Scene1 (top left hand corner of the mmhofl1.fla tab). 8. Click in frame 1 of the movie1 layer to make it the active frame: 9. Drag a copy of myrectangle2 onto frame1 of the movie1 layer. Use the Properties Panel to position this next to the instance of myrectangle1 in frame 1 of the myrectangle1 layer. Set the properties so that both rectangles are 30 pixels from the top border (the y-location). 10. Your stage should now contain 2 rectangles: (i) an instance of myrectangle1 (pink) on frame 1 of the myrectangle1 layer and (ii) an instance of myrectangle2 (green in this example) on frame 1 on the movie1 layer. Your stage should now look similar to that shown below: mmfl-0010.doc Page 5 of 9

6 11. Right click on frame 20 in the movie1 layer and select Insert Blank Keyframe: Note: (i) Keyframes mark the start and end points of a transition in Flash. You can find more information about Keyframes on: (ii) when you insert a keyframe, flash copies up the contents that were on the previous keyframe, (iii) when you insert a blank key frame, flash insert an empty keyframe to which you can add new objects/content. 12. Drag a copy of myrectangle1 from the Library into frame 20 of the movie1 layer: 13. Note: when you first drag myrectangle1 onto the stage ONLY the object in Frame 20 of the timeline are visible. To "see" the positions of objects on other frames and layers you need to activate ONION SKINNIG. 14. To do this (i) click on the Modify Onion Markers button (1) and select 'Always Show Markers', (ii) Click on the 'Edit Multiple Frames' button (2), which should reveal the mmfl-0010.doc Page 6 of 9

7 objects on the different layers? If not (iii) drag out the Onion Skin Markers so that Onion Skinning starts at frame 1 and ends at frame 20 (3): 15. Onion skinning can help you position the instance of myrectangle1 in frame 20 of the movie1 layer in exactly the same position as myrectangle2 on frame1 of the movie1 layer. Alternatively (as you should already know!) you can use the Properties Panel to position the instance of myrectangle1 in frame 20 of the movie1 layer in exactly the same position as the instance of myrectangle2 in frame Select frame 1 of the movie1 layer, then right click on the myrectangle2 object and select BREAK APART from the dropdown menu. 17. Select frame 20 of the movie1 layer and repeat this process to break apart the myrectangle1 symbol 18. Next Right Click anywhere between frame 1 and 20 in the timeline of the movie1 layer and CREATE SHAPE TWEEN from the dropdown menu: 19. Press Ctrl+Enter (or select Control Publish Preview Flash on the Main Menu) to see your 1st movie in action. Note what happens? 20. You should see that the rectangle on the right undergoes a smooth transition in colour from green to pink. Note: the solid arrow between frames 1 and 20 on the movie1 layer - this indicates that you have successfully created a TWEEN effect: 21. Take another look at your movie! What else do you observe? You should see that the pink rectangle on the left simply disappears. Think about why this is happening? Hint: Look at the difference in the number of frames in each layer on the Timeline! i.e. the pink rectangle is only visible in fame 1 of the myrectangle1 layer. 22. What you need to do is make the pink rectangle on the myrectangle1 layer visible across all frames To do this, right click in frame 20 on the myrectangle1 layer and select Insert Keyframe: mmfl-0010.doc Page 7 of 9

8 23. Select Ctrl+Enter to test your movie. Make a note what happens. How is this related to the changes in the timeline? Do you understand what happened when you inserted a Keyframe at frame 20 of the myrectangle1 layer? Also note how this differs from what happened when you inserted a blank Keyframe. 24. Next insert a new layer and rename it: 'title'. Select frame1 of the title layer and insert some descriptive text, e.g. 'My first Flash movie': 25. Select Ctrl+Enter to test your movie. 26. Finally select Modify Document on the Main Menu and adjust the dimensions of the movie so that the stage is just slightly larger than the contents: 27. Save your movie. Then select File Publish Preview HTML to see the finished movie (which should open in a new browser window). 28. Note: when you save a movie Flash saves the file using its default.fla file format. Whenever you open.fla files in Flash you are able to edit the contents of the movie. In contrast, the streamlined movies that you load into web pages are in the Flash movie/shockwave format (.swf), pronounced 'swiff'. These files are compressed for mmfl-0010.doc Page 8 of 9

9 ease of download on the web and are non-editable, so once created they are fixed (the analogy is the same as between png files and jpeg/gif files in Fireworks): You should always save working Flash files in the.fla format (these fla files should NOT be published on your live website). You should export Flash files you intend to publish on the web in.swf format. 29. In order to create a.swf file for use in your webpages, you need to select File Publish on the main menu. This automatically creates two files: mmhofl1.html and mmhofl1.swf 30. Open Dreamweaver and create a new document called mmhofl1dw.html. Add a title, header and some explanatory text. Then select Insert Media Flash and add the mmflho1.swf file to your web page: 31. Resave the file and Preview in your web browser. Additional Exercises Now work through the following Abode TV exercises, which provide more background about the concepts/issues covered above: 32. Adobe TV: 01 Understanding Flash: Adobe TV: 02 Understanding Flash File Types: Adobe TV: 03 Exploring the Flash Interface: Adobe TV: 04 Setting up Workspaces: Adobe TV: 05 Using the Drawing Tools: Adobe TV: 06 Object Merge and Drawing: Adobe TV: 07 Understanding Symbols: ADDITIONAL READING AND RESOURCES Adobe Flash CS4: Adobe Flash CS4 User Guide: Flash CS4 Documentation and Resources: Adobe TV Flash CS4: FlashKit - A resource for Flash Developers: Adobe Flash Tutorials: Flash CS4 Tutorials: Flash Tutorials: W3Schools - Flash Tutorials: RNIB - Design and build accessible websites: Keyframes: mmfl-0010.doc Page 9 of 9

HO-1: INTRODUCTION TO FIREWORKS

HO-1: INTRODUCTION TO FIREWORKS HO-1: INTRODUCTION TO FIREWORKS The Fireworks Work Environment Adobe Fireworks CS4 is a hybrid vector and bitmap tool that provides an efficient design environment for rapidly prototyping websites and

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

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

-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

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

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

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 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

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

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

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 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

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

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

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

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

FLASH ANIMATION TUTORIAL

FLASH ANIMATION TUTORIAL FLASH ANIMATION TUTORIAL This tutorial will show you how to make a simple flash animation using basic graphic elements and sounds. It will also work as the display page for your Bullet Movie soundtrack

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

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

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

Flash Tutorial. Working With Text, Tween, Layers, Frames & Key Frames

Flash Tutorial. Working With Text, Tween, Layers, Frames & Key Frames Flash Tutorial Working With Text, Tween, Layers, Frames & Key Frames Opening the Software Open Adobe Flash CS3 Create a new Document Action Script 3 In the Property Inspector select the size to change

More information

WORLD FIRST. In our first ever Flash MX 2004 tutorial, we take a look at the new ease-of-use features that can turn anyone into a Flash guru.

WORLD FIRST. In our first ever Flash MX 2004 tutorial, we take a look at the new ease-of-use features that can turn anyone into a Flash guru. ART90.flash 14/10/03 3:27 pm Page 24 Tutorial WORLD FIRST In our first ever Flash MX 2004 tutorial, we take a look at the new ease-of-use features that can turn anyone into a Flash guru ILLUSTRATION BY

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

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

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

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

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

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

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

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

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

Lesson 6 Adding Graphics

Lesson 6 Adding Graphics Lesson 6 Adding Graphics Inserting Graphics Images Graphics files (pictures, drawings, and other images) can be inserted into documents, or into frames within documents. They can either be embedded or

More information

Using Adobe Contribute 4 A guide for new website authors

Using Adobe Contribute 4 A guide for new website authors Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute

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

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

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

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

How to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements?

How to...create a Video VBOX Gauge in Inkscape. So you want to create your own gauge? How about a transparent background for those text elements? BASIC GAUGE CREATION The Video VBox setup software is capable of using many different image formats for gauge backgrounds, static images, or logos, including Bitmaps, JPEGs, or PNG s. When the software

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

Interactive Tourist Map

Interactive Tourist Map Adobe Edge Animate Tutorial Mouse Events Interactive Tourist Map Lesson 1 Set up your project This lesson aims to teach you how to: Import images Set up the stage Place and size images Draw shapes Make

More information

OnPoint s Guide to MimioStudio 9

OnPoint s Guide to MimioStudio 9 1 OnPoint s Guide to MimioStudio 9 Getting started with MimioStudio 9 Mimio Studio 9 Notebook Overview.... 2 MimioStudio 9 Notebook...... 3 MimioStudio 9 ActivityWizard.. 4 MimioStudio 9 Tools Overview......

More information

3Using and Writing. Functions. Understanding Functions 41. In this chapter, I ll explain what functions are and how to use them.

3Using and Writing. Functions. Understanding Functions 41. In this chapter, I ll explain what functions are and how to use them. 3Using and Writing Functions Understanding Functions 41 Using Methods 42 Writing Custom Functions 46 Understanding Modular Functions 49 Making a Function Modular 50 Making a Function Return a Value 59

More information

RAVASMARTSOLUTIONS - TECH TIPS

RAVASMARTSOLUTIONS - TECH TIPS RAVASMARTSOLUTIONS - TECH TIPS Purpose CS5 - Flash - Build a Banner Animation This Tech Tip will illustrate how to build a basic banner animation using Flash. Please build your Flash Image library before

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

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

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

CHAPTER 1. Interface Overview 3 CHAPTER 2. Menus 17 CHAPTER 3. Toolbars and Tools 33 CHAPTER 4. Timelines and Screens 61 CHAPTER 5.

CHAPTER 1. Interface Overview 3 CHAPTER 2. Menus 17 CHAPTER 3. Toolbars and Tools 33 CHAPTER 4. Timelines and Screens 61 CHAPTER 5. FLASH WORKSPACE CHAPTER 1 Interface Overview 3 CHAPTER 2 Menus 17 CHAPTER 3 Toolbars and Tools 33 CHAPTER 4 Timelines and Screens 61 CHAPTER 5 Panels 69 CHAPTER 6 Preferences and Printing 93 COPYRIGHTED

More information

How to create interactive documents

How to create interactive documents Adobe InDesign Guide How to create interactive documents You can use Adobe InDesign to create dynamic web content or interactive documents. InDesign supports export to web-ready HTML or interactive PDF.

More information

Table of Contents. Preface...iii. INTRODUCTION 1. Introduction to M ultimedia and Web Design 1. ILLUSTRATOR CS6 1. Introducing Illustrator CS6 17

Table of Contents. Preface...iii. INTRODUCTION 1. Introduction to M ultimedia and Web Design 1. ILLUSTRATOR CS6 1. Introducing Illustrator CS6 17 Table of Contents Preface...........iii INTRODUCTION 1. Introduction to M ultimedia and Web Design 1 Introduction 2 Exploring the Applications of Multimedia 2 Understanding Web Design 3 Exploring the Scope

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

GIMP ANIMATION EFFECTS

GIMP ANIMATION EFFECTS GIMP ANIMATION EFFECTS Animation: Text Word by Word ANIMATION: TEXT WORD BY WORD GIMP is all about IT (Images and Text) BACKGROUND IMAGE Before you begin the text animation, you will download a public

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

Adobe Fireworks CS Essential Techniques

Adobe Fireworks CS Essential Techniques Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally

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

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-2004 by lynda.com, Inc. All Rights Reserved. Reproduction and Distribution Strictly Prohibited. This electronically distributed Hands-On-Training

More information

INTRODUCTION TO FLASH MX

INTRODUCTION TO FLASH MX INTRODUCTION TO FLASH MX The purpose of this handout is to introduce and briefly explore several functions within Flash MX. Step-bystep instructions for the different ways to animate are also included.

More information

Creating Buttons and Pop-up Menus

Creating Buttons and Pop-up Menus Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about

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

Adobe Dreamweaver CS5 Tutorial

Adobe Dreamweaver CS5 Tutorial Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

More information

2Understanding the. Interface. The Document Window 13. If you are new to Flash 8, don t skip this chapter. Although you might be

2Understanding the. Interface. The Document Window 13. If you are new to Flash 8, don t skip this chapter. Although you might be 2Understanding the Interface The Document Window 13 The Timeline 14 The Layer Controls 15 If you are new to Flash 8, don t skip this chapter. Although you might be tempted to jump right in with the hands-on

More information

Keynote 08 Basics Website:

Keynote 08 Basics Website: Website: http://etc.usf.edu/te/ Keynote is Apple's presentation application. Keynote is installed as part of the iwork suite, which also includes the word processing program Pages and the spreadsheet program

More information

HO-FL6: ADDING SOUND TO FLASH

HO-FL6: ADDING SOUND TO FLASH 1 of 12 HO-FL6: ADDING SOUND TO FLASH Sound on the Web Sound can add a further dimension to your webpages. It can add mood, meaning, tone, and understanding. However, you need to take care to ensure that

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

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

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

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

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

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

PUBLISHING FLASH. Lesson Overview

PUBLISHING FLASH. Lesson Overview PUBLISHING FLASH Lesson Overview In this lesson, you ll learn how to do the following: Test a Flash document Understand the Bandwidth Profiler Change publish settings for a document Understand the difference

More information

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

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

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

GETTING STARTED WITH. chapter

GETTING STARTED WITH. chapter 1-4283-1963-8_01_Rev4.qxd 6/27/07 1:39 PM Page 1 chapter 1 GETTING STARTED WITH ADOBE FLASH CS3 1. Understand the Adobe Flash CS3 workspace 2. Open a document and play a movie 3. Create and save a movie

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 2 In this section we ll look at some essential things you need to know in order to use Photoshop effectively. First of all, we ll take a look at customising Photoshop s settings and

More information

Adobe Dreamweaver CC 17 Tutorial

Adobe Dreamweaver CC 17 Tutorial Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

A Dreamweaver Tutorial. Contents Page

A Dreamweaver Tutorial. Contents Page A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating

More information

DOING MORE WITH WORD: MICROSOFT OFFICE 2013

DOING MORE WITH WORD: MICROSOFT OFFICE 2013 DOING MORE WITH WORD: MICROSOFT OFFICE 2013 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT WORD PAGE 03 Viewing Toolbars Adding and Removing Buttons MORE TASKS IN MICROSOFT WORD

More information

Working with Images and Multimedia

Working with Images and Multimedia CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.

More information

Word 2003: Flowcharts Learning guide

Word 2003: Flowcharts Learning guide Word 2003: Flowcharts Learning guide How can I use a flowchart? As you plan a project or consider a new procedure in your department, a good diagram can help you determine whether the project or procedure

More information

Camtasia Studio 5.0 PART I. The Basics

Camtasia Studio 5.0 PART I. The Basics Camtasia Studio 5.0 Techsmith s Camtasia Studio software is a video screenshot creation utility that makes it easy to create video tutorials of an on screen action. This handout is designed to get you

More information

How to create a prototype

How to create a prototype Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a

More information

Unit 21 - Creating a Button in Macromedia Flash (simplified)

Unit 21 - Creating a Button in Macromedia Flash (simplified) Unit 21 - Creating a Button in Macromedia Flash (simplified) Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

More information

BBFlashBack Training for Library Staff

BBFlashBack Training for Library Staff BBFlashBack Training for Library Staff Learning outcomes: By the end of the course you will be able to: record a screencast insert/import text, images, audio & video edit text, audio & video files produce

More information

Interface. 2. Interface Adobe InDesign CS2 H O T

Interface. 2. Interface Adobe InDesign CS2 H O T 2. Interface Adobe InDesign CS2 H O T 2 Interface The Welcome Screen Interface Overview The Toolbox Toolbox Fly-Out Menus InDesign Palettes Collapsing and Grouping Palettes Moving and Resizing Docked or

More information

Creating Visually Appealing Documents. Word Module 2. Diocese of St. Petersburg Office of Training

Creating Visually Appealing Documents. Word Module 2. Diocese of St. Petersburg Office of Training Creating Visually Appealing Documents Word 2010 Module 2 Diocese of St. Petersburg Office of Training Training@dosp.org Diocese of St. Petersburg 0 9/5/2014 This Page Left Intentionally Blank Diocese of

More information

Introduction to Dreamweaver CS3

Introduction to Dreamweaver CS3 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout

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

Creating Multimedia SWF Products

Creating Multimedia SWF Products Chapter InDesign can be used to create multimedia products that combine movie clips, sounds, images and animations into professional products that can be distributed on CD, DVD or as SWF files that can

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

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

2.2 - Layouts. Bforartists Reference Manual - Copyright - This page is Public Domain

2.2 - Layouts. Bforartists Reference Manual - Copyright - This page is Public Domain 2.2 - Layouts Introduction...2 Switching Layouts...2 Standard Layouts...3 3D View full...3 Animation...3 Compositing...3 Default...4 Motion Tracking...4 Scripting...4 UV Editing...5 Video Editing...5 Game

More information

Microsoft Office Word 2010

Microsoft Office Word 2010 Microsoft Office Word 2010 Content Microsoft Office... 0 A. Word Basics... 4 1.Getting Started with Word... 4 Introduction... 4 Getting to know Word 2010... 4 The Ribbon... 4 Backstage view... 7 The Quick

More information

Screen Designer. The Power of Ultimate Design. 43-TV GLO Issue 2 01/01 UK

Screen Designer. The Power of Ultimate Design. 43-TV GLO Issue 2 01/01 UK Screen Designer The Power of Ultimate Design 43-TV-25-13 GLO Issue 2 01/01 UK 43-TV-25-13 GLO Issue 2 01/01 UK Table of Contents Table of Contents Honeywell Screen Designer - The Power of Ultimate Design

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

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property

More information

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the

More information

Adobe illustrator Introduction

Adobe illustrator Introduction Adobe illustrator Introduction This document was prepared by Luke Easterbrook 2013 1 Summary This document is an introduction to using adobe illustrator for scientific illustration. The document is a filleable

More information

Session 7 MS Word. Graphics. Inserting Clipart, and Graphics Modify graphics Position graphics

Session 7 MS Word. Graphics. Inserting Clipart, and Graphics Modify graphics Position graphics Session 7 MS Word Graphics Inserting Clipart, and Graphics Modify graphics Position graphics Table of Contents Session 7 Working with Graphics... 1 The Toolbar... 1 Drawing Toolbar... 1 Picture Toolbar...

More information