Text Area Control To let the visitor enter more than one line of text, you need a multiple-line text input control called text area using <textarea> tag. It has two major attributes rows and cols. Rows attribute sets the number of rows and cols attribute sets the number of columns in the text area control. Example: Tell us briefly about yourself:<br><textarea name=\"vname\" rows=5 cols=50></textarea> Drop Down List Control Drop down list is also known as the combo box. It is used to select single option at a time. Drop down list box is used when we have many options available to be selected but only one will be selected. Example: Select Lanaguage: <select name=\"language\"> <option value=\"english\">English </option> <option value=\"hindi\">Hindi </option> <option value=\"urdu\">Urdu </option> <option value=\"spanish\">Spanish </option> <option value=\"german\">German </option> <option value=\"french\">French </option> </select> 51
File Upload Control If you want to allow a user to upload a file on your web site, you will need to use a file upload box, also known as the file select box. File upload control is used to browse files from the user's computer and upload them on the web server. This is also created using the <input> element. Example: Upload your picture:<input type=\"file\" name=”vpic”> Glossary Cellpadding : Space between cell border and cell content. Colspan : Merging adjacent columns into one. Rowspan : Merging adjacent rows into one. Quick Review <form> tag is used to design a form on the web page. The <input> element of <form> tag is used to select user information using different types of control. The three types of buttons are Submit, Reset and Push button and the two types of textboxes are Single Line and Password. Checkbox is used to select multiple options while radio button is used to select single option. Dropdown List control and ListBox control are used to display the values in the form of list. 52
A. Choose the correct answer. 1. Table heading can be defined using _________ element. a) <caption> b) <head> c) <table head> d) <th> 2. ________ hyperlinks take you to another part of the same web page. a) Internal b) External c) Anchor d) Image 3. HREF attribute of anchor tag takes the _______ of the link as value. a) address b) name c) number d) hyperlink 4. _____________ attribute of <form> tag is used to define the name of a form. a) Check Box b) Name c) Action d) None of these B. Fill in the blanks. Colspan, Internal, forms, Cellspacing body 1. Table rows may be grouped into head, foot and _______ sections. 2. ___________ attribute gives the amount of space between the cells. 3. _____________ merges cells across the columns in a table. 4. _______ hyperlinks require name attribute in the anchor tag. 5. Users interact with _____ through named controls. . C. Tick () the correct statement and cross out (X) the incorrect one. 1. ‘Bgcolor’ attribute of <td> tag is used to define background colour of entire table on a web page. 2. ‘Rowspan’ attribute is used to merge the rows in a table on a web page. 3. In HTML, a user is not allowed to align the table. 4. External link in a web page is used to connect one page with another. 5. Radio buttons are used to accept multiple choices from the user. 53
D. Answer the following questions. 1. What is the use of rowspan attribute? ___________________________________________________________________ ___________________________________________________________________ 2. Differentiate between radio button and check box control. ___________________________________________________________________ ___________________________________________________________________ 3. What is the significance of a form in HTML? ___________________________________________________________________ ___________________________________________________________________ 4. Differentiate between ‘textbox’ and ‘textarea’ control in a form, in HTML. ___________________________________________________________________ ___________________________________________________________________ Design the following table and form. Teacher's Signature : __________________ Teacher's Remark : WEB https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics https://www.w3.org/TR/html401/interact/forms.html LINKS Teacher’s Corner Dear Teacher, some common examples from daily life can be taken to present data in tabular format like school time table and to capture data in a form like filling registration details for admission. 54
5 Creating Interactive Web Pages Dear Students, Yes Teacher, Nature of Internet is We think that would interactive. Would be very exciting! you like to learn how Sure, we would love to make web pages to learn that. interactive? When you visit a website, you must have noticed that the web pages respond to our actions. They display content and change appearance according to the choices made by us. Such web pages are called interactive web pages. This is possible by scripts written for them. A script is a program that runs embedded in a web page to perform a particular task. For example, when you click a button on the web page a message is displayed. JavaScript is a programming language to write scripts that run in a web page. A web browser that supports JavaScript can execute scripts written using JavaScript. My First JavaScript Program Let us try a simple program that displays a greeting when the user visits the web page. The code is given below: <html> <head><title>Interactive Web</title></head> <body> <script language=\"JavaScript\"> alert(\"hello\") </script> </body> </html> Did you notice something familiar? Yes, the HTML and BODY tags. What is new here is the SCRIPT tag. Within script tags is written: alert(\"hello\") 55
This is a JavaScript statement. It is using a Remember Javasript function alert() to display JavaScript is a case sensitive message hello. When this web page loads programming language. in the browser, script tags are read by the browser. Notice language attribute of script tag. It tells the browser which language is used in writing the script. Then alert() function is executed. alert() function is used to display text strings on the screen. Here, the text string is hello enclosed in double quotes. How to Save and Run a JavaScript program? There are several advanced software applications that are used to design web pages with JavaScript but here we shall use notepad to create our interactive web pages. Open Notepad and type the above code. Click on File menu > Save option. In the Save as... dialog box, open the Save as type dropdown and select All Files. Type the file name as first.html (Note that it is not a .txt file). Double click on this file to view in browser. Variables – the value holders Variables are storehouses for values. Variables store one value at a time. If a new value is stored in a variable, the earlier value stored in it is lost forever. Variable of a particular type can store a particular type of value. In JavaScript, there are basically 3 fundamental types of variable. Variables to store numbers, strings and Boolean values. Every variable has a unique name and it is declared using the keyword var. For example: var m = 1 var city = “Mumbai” var age = 10 JavaScript needs the strings to be mentioned within double quotes. To store a value in a variable, mention the keyword var, then the name of the variable followed by = sign and then mention the value. Taking Input There are many ways to take inputs from the user in JavaScript. One of them is to use prompt(). It is a built-in function of JavaScript library. Let us see how to use prompt(): 56
<html> <head><title>Interactive Web</title></head> <body> <script language=\"JavaScript\"> var age age = prompt(\"Enter your age:\") alert(age) </script> </body> </html> prompt() displays a message to the users to tell them what input is required from the user. Here the message is Enter your age: Since it is a string, it is in double quotes. When user enters the value, prompt() returns that value to be stored in a variable. Notice that variable age is storing the value returned by prompt(). In next statement, alert() is displaying that value back to the user. How? To alert(), the same variable age is passed. Run the program and check for yourself. Comments Comments are a great way to document the programs or to mark desired part of a program as non-executable. Any part of the program that is commented is ignored by the computer and not considered for execution. The double forward slash (//) is used to comment a single line and a pair of /* and */ is used to mark multiple lines as comment. Let us use comments to document our previous example in detail: <script language=\"JavaScript\"> /* This is my first javascript program. It accepts your age and displays it back */ var age //variable age is declared age = prompt(\"Enter your age:\") //age accepted as input from the user alert(age) //value of variable age is displayed //end of program </script> 57
Simple Arithmetic Javasript allows arithmetic operations with the help of following symbols. These symbols are called arithmetic operators. OPERATOR OPERATION EXAMPLE + – Addition 15 + 20 / a=5+7 * Subtraction 20 – 6 % a=6–5 Division 20/5 ++ a = 12/3 –– Multiplication 20 * 5 a = 12 * 3 Modulus a = 13 % 3 Unary increment (here value of a will be 1, the remainder of the division) operator Unary decrement a=5 operator a++ (here value of a becomes 6) a=5 a- - (here value of a becomes 4) Let us accept a number from the user and display its square. <html> <body> <script language=\"JavaScript\"> var n, a n = prompt(\"Enter a number:\") a=n*n alert(a) </script> </body> </html> In the first statement of the script, two variables n and a are declared. Notice that multiple variables can be declared as comma separated list. prompt() asks the user to enter a number. The number entered by the user is stored in variable n. Let us assume that user enters 3. So, value 3 is 58
stored in variable n. Third statement is showing the use of multiplication (*) operator. Value in variable n is multiplied by itself (n * n). Then, the result of multiplication is stored in variable a. So, a stores 9. Finally, alert() displays the value of variable a that is the square of 3. Run this program and enter 5. Check if you get the result as 25. Can you figure out the output of the following program? <script language=\"JavaScript\"> var a, b, r a = prompt(\"Enter a number:\") b = prompt(\"Enter another number:\") r=a+b alert(r) </script> Converting Strings to Integers prompt() always returns the values as strings. Numbers entered through prompt() are treated as strings but if we apply arithmetic operators *, /, - and % to them, they are auto converted to number types. But in case of + operator the handling of values returned by prompt() is different. Since + functions as addition as well as concatenation operator when prompt() returns any numbers entered by the user, the numbers are concatenated instead of getting added. In such case, numbers need to be explicitly converted into their numeric equivalents. This is done by a Javascript function parseInt(). See the modified version of above program to add two numbers returned by prompt: <script language=\"JavaScript\"> var a, b, r a = prompt(\"Enter a number:\") b = prompt(\"Enter another number:\") a = parseInt(a) b = parseInt(b) r=a+b alert(r) </script> parseInt() takes the value to be converted into integer as parameter and returns its 59
numeric equivalent. Numbers returned by prompt() as strings are converted into integers by parseInt function. Now, instead of concatenation, addition operation will occur and numbers will be added. Converting Integers to Strings Numbers can be converted into their string equivalent by using toString(). For example: var a = 100; var b = a.toString(); Here, variable b is string type since value 100 is converted into string type 100. Concatenation in JavaScript We have seen that + operator is used for addition. + operator can also be used with strings to concatenate them. This helps in designing user output. For example: <html> <body> <script language=\"JavaScript\"> var a, b, r a = prompt(\"Enter a number:\") b = prompt(\"Enter another number:\") a = parseInt(a) b = parseInt(b) r=a+b r = r.toString() alert(\"The answer is \" + r) </script> </body> </html> Writing Simple Functions We have seen two functions – alert() and prompt() – which are the part of JavaScript library. We can define our own functions to perform a particular task. Functions which are not the part of JavaScript library but defined by the user are called user defined functions. 60
Let us look at the modified version of an earlier example to understand the concept: Version-1 Version-2 <html> <html> <body> <script language=\"JavaScript\"> <body> alert(\"hello\") <script language=\"JavaScript\"> </script> function greet() </body> </html> { Function alert(“Hello!”) defined } greet() Function </script> called </body> </html> In the revised version, the responsibility of displaying Hello is given to the function greet() defined by user. Notice that a function needs to have a unique name preceded by the keyword function. function greet() functions definition has its own block defined by the pair of { and } function greet() { } Within its block, function contains all the statements which need to be executed by that function. function greet() { alert(“Hello!”) } Functions do not execute until they are called by their name. Once defined, functions can be called to execute as many times as and whenever required anywhere in the program. Did you notice how greet() is called after its definition? Yes, by its name followed by the pair of parentheses. Simple Event Handling Imagine you are busy reading a book and suddenly the phone rings. Phone rings is an event. There are 2 possible responses to it – you will answer the call or you do not. These responses are called event handling. 61
Event: An event is an interrupt that occurs due to user action or software application. For example, button click, mouse click, key pressed on the keyboard etc. JavaScript helps in adding interactivity to the web pages using event handling. Event Handler: When an event occurs, JavaScript calls a function in response to it. For example, when user clicks on a button, JavaScript would call a function that would display a message. Event Handling: To handle an event you need to identify the event you desire to handle and write a function to run in response to that event. Most common events in JavaScript are related to mouse and keyboard. Then the event is bound with a function to run when that event is raised. To bind an event with a function, following is the syntax: Event_name = “function_name()” All the events are available as attributes of various tags in HTML. Handling Mouse Events JavaScript mouse events are listed as follows: onMouseEnter: When mouse pointer comes over an object like button, text, web page etc. onMouseOut: Reverse of onMouseEnter i.e. when mouse goes away from an object. onMouseDown: When mouse button is pressed. onMouseUp: When mouse button is released. Activity 1: Change text colour when mouse pointer comes over it & goes away. Let us write some text in FONT tag. <FONT ID=mytext size=7 color=green onmouseenter=\"do_enter()\" onmouseout=\"do_out()\">Welcome</FONT> Notice how the events are mentioned as attributes of FONT tag. The value of each attribute is the name of a function you need to code in JavaScript later. You can give any valid name to the functions. Here, for example, when mouse will enter the text WELCOME, a function named do_enter() will run. Let us assume that when mouse pointer comes over the text, it will turn red and when mouse pointer goes away, it will turn back to green colour. How will JavaScript access FONT tag to change its colour? The ID attribute in FONT tag. ID identifies the FONT tag uniquely. Here, the ID of FONT tag is mytext. ID attribute should have unique values through out your HTML code. No two tags should have same ID unless you want to manipulate them together. Let us write function do_enter(). function do_enter() { mytext.color=\"red\" } 62
Here, mytext is the ID of FONT tag. Using . (dot) operator of JavaScript, we are accessing the color property(attribute) of FONT tag and setting its value to red. red is a string hence it must be enclosed in double quotes. Below is function do_out() resetting the font colour to green. function do_out() { mytext.color=\"green” } The Complete Code: For the ease of understanding, the Javascript part is kept in HEAD and HTML markup is in BODY. <html> <head> <script language=”JavaScript”> function do_enter() { mytext.color=\"red\" } function do_out() { mytext.color=\"green\" } </script> </head> <body> <FONT ID=mytext size=7 color=green onmouseenter=\"do_enter()\" onmouseout=\"do_out()\">Welcome </FONT> </body> </html> 63
Activity 2: Change text colour when mouse button is pressed and released. Consider the previous activity where we changed the colour of the text in FONT tag by handling onMouseEnter and onMouseOut events. The same can be achieved by handling onMouseDown and onMouseUp events. You just need to change the event names. The remaining code is not changed. <FONT ID=mytext size=7 color=green onmousedown=\"do_enter()\" onmouseup=\"do_out()\">Welcome </FONT> Activity 3: Manipulating Image We can manipulate images also using mouse interaction such as changing the dimensions of an image. Let us shrink an image in size with onMouseDown. For this, you need to do the following: Display an image using <IMG> Give an ID to IMG tag. Mention onMouseDown attribute in IMG tag and assign it the function shrink(). Write function shrink to decrease the height and width of IMG. The code is given here: <html> <head> <script language=”JavaScript”> function shrink() { logo.height = logo.height - 5 logo.width = logo.width - 5 } </script> </head> <body> <IMG id=\"logo\" src=\"logo.png\" height=100 width=200 onmousedown=\"shrink()\"> </body> </html> 64
Here, when mouse is clicked on the image with ID logo, shrink() is called. In shrink(), the ID logo of IMG tag is used to access height and width attributes of IMG and they are decreased by 5. This way, on every mouse down, the dimensions of the image will decrease and image will shrink in size. Handling Keyboard Events Following are the keyboard events: onKeyDown: It occurs when key is pressed on the keyboard. onKeyUp: Reverse of onKeyDown. It Occurs when key is released on the keyboard. onKeyPress: It is the combination of the above two events. It occurs when a key is typed on the keyboard. Let us try some examples. Activity 1: Display the text typed in the textbox onto the web page. Let us assume that we have a text box. When user keys in the text in it, the same text appears on the web page. Here, we shall handle onKeyUp event so that when user has typed the key, the desired action will occur. <html> <head> <script language=”JavaScript”> function display() { mytext.innerHTML=mytextbox.value } </script> </head> <body> <INPUT ID=mytextbox onkeyup=\"display()\"> <FONT id=mytext size=7></FONT> </body> </html> Here, the event onKeyUp is mentioned as attribute of INPUT tag and it is assigned the value, the name of the function display(). The ID of the INPUT tag is mytextbox. To display the text on web page, we have arranged for a FONT tag with no text in it presently. Its ID is mytext. When user types in the textbox, onKeyUp event will occur 65
for each key typed. As a result, for each such key, function display() will run. Let us see what function display() is doing. Consider the statement in display(): mytext.innerHTML=mytextbox.value innerHTML is that area in web page which lies between any start tag and its matching end tag. Here, innerHTML is referred to for mytext which is the ID of FONT tag. So, innerHTML here means the space between <FONT> and </FONT>. The text typed in the textbox mytextbox is accessed from the value attribute of INPUT tag. This way, text typed in the textbox mytextbox is assigned to the innerHTML of FONT. Activity 2: Creating a dynamic Marquee. Previous activity can be modified to display typed text as a marquee on the web page. We just need to replace FONT tag with MARQUEE tag. <html> <head> <script language=”JavaScript”> function display() { mymarquee.innerHTML= mytextbox.value } </script> </head> <body> <INPUT ID=mytextbox onkeyup=\"display()\"> <MARQUEE ID=mymarquee width=50% bgcolor=orange style=\"font- size:100px;color:white\"> <MARQUEE> </body> </html> Handling Button Click A button is displayed using INPUT tag type as button. When user clicks on the button then onclick event is raised. We can capture this event to respond in various ways. 66
Activity 1: Display alert message on button click. <html> <head> <script language=”JavaScript”> function show_msg() { alert(“Welcome”) } </script> </head> <body> <INPUT type=button onclick=\"show_msg()\"> </body> </html> Here, when user clicks on the button, event onclick is generated. In response to it, function show_msg() is displaying the message Welcome. Activity 2: Display message on the webpage on button click. <html> <head> <script language=”JavaScript”> function welcome() { mytext.innerHTML=\"WELCOME TO THE WEB SITE.\" } </script> </head> <body> <INPUT type=button value=\"Please click on me\" onclick=\"welcome()\"> <hr> <FONT id=mytext size=7> </FONT> </body> </html> Handling List Selection On selecting any value in the SELECT list of HTML, onchange event occurs. Activity 1: Apply web page background colour selected in a list. Let us set the BGCOLOR of BODY as the colour selected by the user from a SELECT list. 67
<html> <head> <script language=”JavaScript”> function set_colour() { mywebpage.bgColor = mylist.value } </script> </head> <body id=\"mywebpage\"> <select id=\"mylist\"onchange=\"set_colour()\"> <option value=\"#ff0000\">RED</option> <option value=\"#00ff00\">GREEN</option> <option value=\"#0000ff\">BLUE</option> </select> </body> </html> JavaScript provides the property bgColor which is used here for BODY tag. The ID of BODY tag is mywebpage. In set_colour(), ID mywebpage is referring to the BODY tag and its bgColor property is set to the value which is selected in the SELECT list with ID mylist. This way, using various events and JavaScript properties you can add a variety of interactive responses to your web page. Glossary Script : A program that runs embedded within a webpage. Unary operator : An operator that performs operation on single operand, like ++. Quick Review JavaScript is a programming language to write programs that run in a webpage. alert() display text strings and prompt() accepts user input. parseInt() converts strings to integers. Functions defined by the user are called user defined functions. An event is any interrupt raised by user action or software like mouse click, keypress on the keyboard etc. 68
A. Choose the correct answer. 1. Which of the following statements are true about scripts? a) Scripts are compiled and run on individual computers. b) Scripts are complex software applications. c) Scripts make the web page interactive. d) Scripts run after installation. 2. Which of the following keywords is used to declare a variable in Javascript? a) variable b) declare c) create d) var 3. What is wrong with the statement: 5 ++ 7? a) ++ is a unary operator b) ++ is a binary operator c) ++ is a not an arithmetic operator d) Statement is correct 4. Which of the following statements is not correct about prompt()? a) prompt() returns the input value. b) prompt() accepts arguments. c) prompt() returns numeric values. d) prompt() returns string type values. 5. Onclick event refers to which of the following events? a) Mouse click b) Button click c) Webpage click d) Keyboard keypress B. Fill in the blanks. concatenation, ID, function, onchange, . (dot) 1. JavaScript identifies the HTML tags by their unique _________. 2. When user makes a selection in the HTML select list, _________ event is raised. 3. The property for an ID is referred to by __________ operator. 4. JavaScript functions are defined by the keyword __________. 5. + operator is used for addition as well as __________. C. Answer the following questions. 1. Describe the use of parseInt() and toString() with an example. _____________________________________________________________________ _____________________________________________________________________ 69
2. Explain the terms event and event handler with a small example. _____________________________________________________________________ _____________________________________________________________________ 3. What do the operators /, %, ++ do? Give examples. ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ 4. Describe any 2 mouse related events with example. ____________________________________________________________________ ____________________________________________________________________ ____________________________________________________________________ 5. What is the use of innerHTML property? Give example. _____________________________________________________________________ _____________________________________________________________________ 1. Write a script that accepts price of 3 items one by one using prompt() and then displays the actual total price and total price after 12.5% discount. Modify this program to use three textboxes instead of prompt() and display the result as innerHTML of an H2 tag. 2. Write a user defined function enlarge() that enlarges the dimensions of an image by 10 pixels when user clicks on a button labelled ENLARGE. Write complete HTML coding also. Teacher's Signature : __________________ Teacher's Remark : WEB https://developer.mozilla.org/en- US/docs/Learn/Getting_started_with_the_web/JavaScript_basics LINKS Teacher’s Corner Encourage the students to explore more about JavaScript on Internet. 70
6 Introduction to Flash CS6 Dear Students, Wow Teacher, You know that This sounds really computers help us in great to learn about making animations. creating animation using Flash. Flash is such a computer application to make exciting animations. An animation is the simulation of movement Note created by displaying a series of pictures or frames. For example, cartoons. An animation is There is a difference between one of the chief ingredients of multimedia animation and video. Whereas video presentations. There are many software takes continuous motion and breaks it applications that enable you to create animations up into discrete frames, animation that you can display on a computer monitor. starts with independent pictures and puts them together to form the illusion of continuous motion. Intoduction to Flash Adobe Flash, popularly known as Flash, is a multimedia graphic software that is used to create interactive animated vector graphics for the web as well as for desktop presentations, movies, games, etc. Starting Flash 1. Click on Start 2. Click on All Programs 3. Click on Adobe Flash Professional CS6. Figure 1: Selecting the type of file 71
4. In Create New section, click ActionScript 3.0 option. The Flash window appears with by default name ‘Untitled-1’ (figure-2). Title Bar Menu Bar Tools Panel Library Panel Color Panel Stage or Movie Area Time Line Property Inspector Figure 2: New Flash Document Main Components of the Flash Menu Bar Lists the Menu options such as File, Edit, View, Insert, and Help. These menu options include commands to access most of the features of the Flash Edit Bar program. Toolbar Displays the current scene number, the Edit scene button, the edit Symbol Work Area button, and the Zoom control. Timeline Contains the Flash tools; the toolbar includes tools for drawing and painting Panels lines and shapes, selecting objects, changing the views of the Stage, and Property choosing colors. Inspector Stage Located in the document window and is used to place objects that are not part of the viewable stage, also used to position objects that move on or off the stage as part of an animation. Located at the document window, displays and contains the layers and frames that make up an animation and organizes the objects that are part of the document. Contain controls for viewing and changing the properties of objects. Provides easy access to the most common attributes of the currently selected tool or object. The Stage is the white area at the center of the window. It is where the Flash movies are created. 72
Saving a Flash File The steps to save a flash file are: 1. Click on File menu → Save As. The Save As dialog box appears. 2. Give the file name, select the location to save the file and click Save button. Tool Box Overview Flash provides various tools to draw graphic, fill colour, gradient colour and modify the shape drawn by the tools (figure 3). Figure 3: Adobe Flash Professional CS6 Toolbox Selection Tool The Selection tool is used most commonly to select and move an item or multiple items on the Stage. It is also used to edit lines and shapes, in a way that is familiar to users who have worked in other vector graphic applications (figure 4). Figure 4: Use of Selection Tool 73
Sub Selection Tool The Sub Selection is the companion for the Pen and is found in the Tools panel to the right of the Selection tool. The Sub Selection tool has two purposes (figure 5): To either move or edit individual anchor points and tangents on lines and outlines. When you position the Sub Selection tool over a line or point, the hollow cursor displays one of the two states: When over a line, it displays a small, filled square next to it, indicating that the whole selected shape or line can be moved. When over a point, it displays a small, hollow square, indicating that the point will be moved to change the shape of the line. Figure 5: Use of Sub Selection Tool Lasso Tool The Lasso tool is used to select a non-regular shaped portion of an object like tree outline (figure 6). 1. Click on Lasso tool on the toolbox. 2. Click and drag the mouse on the image to select the part. 12 Figure 6: Use of Lasso Tool 74
Line Tool / The Line tool is used to draw straight lines. The steps to draw straight lines are: 1. Select the Line tool on 1 3 the toolbox. 2 2. Select the properties of stroke from Property Inspector. 3. Click and drag on the Stage to draw straight lines (figure 7). Figure 7: Use of Line Tool Pencil Tool The Pencil tool lets you draw free form strokes on the Stage, similar to the way you draw using a regular pencil on a regular sheet of paper. The steps to use Pencil tool are: 12 1. Select the Pencil tool on 3 the toolbox and select the line's type from Options. 2. Select the proprieties of stroke from Property Inspector. 3. Click and drag on the Stage to draw lines (figure 8). Figure 8: Use of Pencil Tool 75
Pen Tool Pen tool is used to create a complex shape consisting of a lot of perfect arcs and a lot of perfect straight lines. To create curved or straight lines with the Pen tool, follow these steps: 1. Select the Pen tool on the 1 toolbox. 2. Select the properties of stroke from Property Inspector. 3. Click and drag on the Stage 32 to draw line with perfect curves (figure 9). Figure 9: Use of Pen Tool Oval Tool Drawing with the Oval tool creates a perfectly smooth ovals and circles. The steps to use Oval tool are: 1 1. Click Oval tool on the 3 toolbox. 2 2. Set line colour, style and fill style from Property Inspector. 3. Drag over the Stage to draw oval or circular shapes (figure 10). Note To draw a circle, press Shift key, click and drag mouse over the Stage, while keeping Shift key pressed. Figure 10: Use of Oval Tool 76
Rectangle Tool The Rectangle tool creates rectangles and squares. The steps to use Rectangle tool are: 1 2 3 1. Click Rectangle tool on the toolbox. 2. Set line colour, style and fill style from Property Inspector. 3. Drag over the Stage to draw rectangle or square shapes (figure 11). Note To draw a square, press Shift key, click and drag mouse over the Stage, while keeping Shift key pressed. Figure 11: Use of Rectangle Tool Brush Tool Brush tool is used to create smooth or tapered marks. Unlike the Pencil tool, which creates marks with a single row of anchor points, the Brush tool actually creates marks by using filled shapes. The fills can be solid colours, gradients, or 2 fills derived from 1 bitmaps (figure 12). The steps to use Brush tool are: 1. Click Brush tool on toolbox. 2. Select brush size, 3 shape and colour. 3. Drag over the Stage to draw oval or circular shapes. Figure 12: Use of Brush Tool 77
Eraser Tool The Erase tool works similar to a classic eraser. Simply select the tool and drag on the Stage to erase things. Double-click Eraser Tool To erase all, you can double-click 1 the Eraser tool to delete everything on the stage. (If it is done by mistake you can use shortcut Ctrl+Z to undo). Using the Eraser Mode Option In the options listed at the bottom 2 3 of the toolbox you can specify the Eraser Mode: Erase Normal: Erases strokes and fills on the same layer (figure 13). Erase Fills: Erases only fills; strokes Figure 13: Erase Normal are not affected (Figure 14). Erase Lines: Erases only lines; fills are not affected (Figure 15). Erase Selected Fills: Erases only the Figure 14: Erase Fill Figure 15: Erase Line currently selected fills and does not affect strokes, selected or not. (Select the fills you want to erase before using the Eraser tool in this mode.) Erase Inside: Erases only the fill on which you begin the eraser stroke. If you erase from an empty point, nothing will be erased. Strokes are unaffected by the eraser in this mode. Using the Faucet Option To remove stroke segments or filled areas: 1. Select the Eraser tool and then click the Faucet modifier. 2. Click the stroke segment or filled area that you want to delete. Using the Eraser Shape Option In the options listed at the bottom of the toolbox there is a drop down that lets you specify the Eraser shape and size. Use this option to customize the size and look of the eraser. 78
Ink Bottle Tool The Ink Bottle tool lets you change the stroke colour, line width and style of lines or shape outlines. Using the Ink Bottle tool, rather than selecting individual lines and objects, makes it easier to change the stroke attributes of multiple objects at one time (figure 16). The steps to use the Ink Bottle tool are: 1. Select the Ink Bottle tool. 2. Choose a stroke colour as described in using the Stroke and Fill controls in the toolbox. 3. Choose line style and line width from the Stroke panel. 1 2 3 Figure 16: Use of Ink Bottle Tool Paint Bucket Tool The Paint Bucket tool fills enclosed areas with colour. It can both fill empty areas and change the colour of already painted areas. You can paint with solid colours, gradient fills, and bitmap fills (figure 17). You can also use the Paint Bucket tool to adjust the size, direction, and center of gradient and bitmap fills. The steps to use Paint Bucket tool to fill an area are: 1. Select the Paint Bucket tool. 2. Choose a fill colour from the Color tool box. 3. Click the Gap Size modifier and choose a gap size option (figure 17b): • Don’t Close Gaps: If you want to close the gaps manually before filling the shape. Closing gaps manually can be faster for complex drawings. • Choose one of the Close options to have Flash fill a shape that has gaps. 79
4. Click the shape or enclosed area that you want to fill. 1 3 2 Figure 17a: Use of Paint Bucket Tool The steps to adjust a gradient or bitmap fill with the Paint Bucket tool are: 1. Select the Paint Bucket tool. 2. Click the Transform Fill. 3. Click an area filled with a gradient or bitmap fill. Figure 17b: Options available in 'Gap Size' The Timeline The Timeline is the area where we organize and control time based animation in Flash. Flash documents divide lengths of time into frames. In our document, we can set how many frames are shown per second. This is known as the frame rate. When the frames are shown in a sequential order, our brain interprets changes between frames as animation. When an animation has a slow frame rate we are able to see each frame individually and the movement appears choppy. When the frame rate is high our brain can no longer pick out individual frames and the animation looks clean. To give you a reference for what typical frame rates are, keep these numbers in mind. The default fps (frames per second) setting in Flash is 12fps. A typical Hollywood movie uses 24fps and TV movies are usually around 30fps. It is not necessary for a 80
Flash document to have a frame rate of 24 or 30 fps since animations are typically used on the Web and a higher frame rate dramatically increases the size of the document. 12 fps gives us a smooth animation without a large file size. The timeline layout Different components of the timeline (figure 18). Toggle lock layer Timeline header Toggle layer visibility Playhead Frame Layer Frame-by-frame Create new layer Animation Elapsed Time indicator Delete Layer Create Frame Rate indicator Create frame button Current Frame indicator new folder Onion- Skinning Buttons Figure 18: Timeline Layout Layer Layers are used to determine which elements appear in the foreground and which appear in the background, creating a visual stacking order for objects on the Stage. While a single layer is sufficient for static graphics, computer-assisted animations require their own layers. To create multiple animations, you need multiple layers. Layers appear above the Stage in the main Flash document window, in a timeline. The timeline actually resides in its own panel, which is anchored at the top of the main document window by default. Working with Layers The standard view of a layer is the one that shows the image. Let's see the different buttons available in the Layers panel and how to use them. Adding layers New layers can be added as needed when working with a particular scene in the Flash movie. 81
The steps to add an additional layer are: 1. In the Timeline, left-click one of the existing Layers to select it (figure 19). 2. Select the Insert menu → Timeline → Layer. A new layer will be created on top of the selected layer. The layer will be given a default name (figure 20). Right-click here Insert layer button Figure 19: Selecting a Layer Figure 20: The Insert Layer Button Note Another way to add a layer is by clicking the Insert Layer button (figure 20). Renaming Layers By default, each layer is named in numeric sequence such as ‘Layer 1’, ‘Layer 2’, ‘Layer 3’ and so on. It is always more useful to assign meaningful names to each layer so that their function within the Flash project is understood. Meaningful names can be assigned to a layer by renaming it. The steps to rename a layer are: Figure 21: Renaming a Layer 1. In the Timeline, double-click on the layer name (figure 21). The layer name will appear in a text box with the entire name selected. 2. Enter the desired name of the layer. 3. Press the Enter key. Working with multiple layers As previously discussed, layers provide a means to manage and control specific elements of a Flash project. In the coming sections, we will illustrate the use of multiple layers in a project. The steps to create a circle layer are: 1. Open a new Flash document. 82
3 5 2. In the Timeline, double-click on the default layer name and rename the 4 layer: ‘Circle’. 2 3. In the Tools panel, select the Oval Tool ( ). 4. In the Colors panel, set the fill color as required. 5. Draw a circle in the middle of the stage (figure 22). Figure 22: Circle Layer 1 The steps to create a rectangle layer are: 3 5 1. Insert a new layer from Insert menu → Timeline →Layer. 4 2. A new layer is added above the ‘Circle’ Figure 23: Rectangle on Top of a Circle layer in the Timeline. Double-click on it and rename it to ‘Rectangle’. 3. In the toolbox panel, select the Rectangle tool ( ). 4. In the Colors panel, set the fill colour as 2 required. 5. Draw a rectangle on top of the circle on the Stage (figure 23). 1 The steps to create a polygon Layer are: 3 1. Insert a new layer from Insert menu → 4 Timeline →Layer. 5 2. A new layer is added above the 2 ‘Rectangle’ Layer in the Timeline and Figure 24: Polygon on Top of a Rectangle rename it to ‘Polygon’. 3. Right-click on Rectangle tool in the toolbox panel and select the PolyStar tool. 4. In the Colors panel, set the fill colour as required. 5. Draw a polygon on top of the rectangle on the Stage (figure 24). 83
Note Notice how the graphics are distributed on the different layers. The layer on the top will always have priority over the lower levels. This priority ordering can be modified by changing the order of the layers. At present the “Polygon” Layer is on the top. By putting the “Polygon” Layer below the “Rectangle” Layer, the “Rectangle” Layer will have priority over the “Polygon” Layer. The steps to change the layer order are: On the Timeline, left-click and drag ‘Polygon’ Layer below the ‘Rectangle’ Layer (figure 25). The ‘Rectangle’ Layer will now be on top of the ‘Polygon’ Layer (figure 26). Figure 25: Changing Figure 26: Rectangle on the top of Polygon the Layer Order Advanced Layer Techniques In addition to adding, renaming and changing the order of layers, there are additional features that make it easier to work with layers. These include locking and hiding layers. Locking and Unlocking a Layer Locking layers is particularly useful when many layers are used and the user does not want a particular layer or layers to be modified. To lock a layer: In the Timeline, click the Bullet button below the Lock/Unlock All Layers button of the Layer to be locked. Once clicked, the Bullet will change to the Lock/Unlock button. To unlock a layer: Click the Lock/Unlock button. Hiding and Displaying a Layer Hidden layers are useful when working with multiple layers. Instead of viewing all the layers at once, layers can be hidden from view to make the work easier. 84
To hide a layer In the Timeline, click the Bullet button below the Show/Hide All Layers button of the layer that will be hidden. Once clicked, the Bullet will change to the Cross button. To display a hidden layer Click the Cross button. Frames Animation is the rapid display of sequential still images that, when displayed fast enough give the illusion of motion. In Flash we call each of these still images a Frame. Frame(s): Refer to the still images that when shown sequentially, create the illusion of animation. FPS: It stands for Frames Per Second. When the FPS number is between 16 and 24, the human brain can perceive motion. Keyframe: Keyframes are the drawings which define a movement. In the workflow of traditional hand-drawn animation, the senior or key artist would draw the keyframes. After testing and approval of the rough animation, the scene would be handed over to their assistant. In Flash, the keyframes represent the starting and ending points for tweens. Creating a Simple Animation Let us now learn to create simple actions in Flash with an example. 1. Click the initial frame on timeline. Insert a Keyframe on frame 1 2. Choose the Oval Tool from the toolbox and make a ball at the middle left corner of the stage. 3. Select the Arrow Tool to get the mouse pointer. Right-click on frame 1 and select Insert Keyframe (figure 27). Insert a Keyframe Figure 27: on frame 15 Insert Keyframe on frame 1 4. Select the 15th frame from timeline and select Insert Frames option. The grey frames appear on timeline. (figure 28). 5. Now click on frame 8. Right-click and select Figure 28: Insert key Frame on frame 15 Insert Keyframe. A black dot appears on this 85
frame on the timeline (figure 29). 6. Click the ball and drag it to the center bottom of the stage. 7. Now select frame 15. Right click and select Insert Keyframe as done earlier at frame 15. 8. Select and drag the ball from middle left corner to top right corner of the stage (figure 30). 9. Now you have the ball at three positions as indicated by frames 1, 8, 15. Insert Keyframe on Frame 8 Figure 29 : Insert Keyframe on frame 8 Figure 30: Drag to top right corner 10. Click on Control menu → Play option. The ball will appear to bounce once. 11. To repeat the bouncing, click Control menu → Stop option. Glossary Keyframe : A keyframe in animation and film making is a drawing which defines the starting and ending points of any smooth transition. Frame : Frames are rectangular areas meant for inserting graphics and text. They allow users to place objects wherever they want to appear on the stage. Pen Tool : Allows you to draw precise paths as straight lines or smooth, flowing curves. Panels : Panels allow you to change related items in a document. Stage : The Stage is the area in a Flash Movie that will become visible in the final published Movie. Layer : It refers to the transparent sheet to perform tasks such as composing multiple images, adding text to an image, or adding vector graphics and shapes. 86
Quick Review Flash CS6 is a multimedia platform that is used to create stand-alone and web animations and applications that are interactive. The menu bar is aimed to make easier access to different program features. The Flash toolbox helps you to create and modify shapes for the network in movies. Hand tool is used to move document on any side or just hold down the spacebar and move the file with the help of a mouse. The Oval tool is used to make circular objects. The Pencil tool is used in the same way that you would use a real pencil to draw. Eyedropper tool is used to copy fill and stroke attributes from objects. Pen tool is used to allow you to draw precise paths as straight lines or smooth, flowing curves. Animation is the rapid display of sequential still images that when displayed fast enough give the illusion of motion. The Timeline is the area where we organize and control time based animation in Flash. A. Choose the correct answer. 1. Which of the following tools is used to select a nonregular region of an image? a) Pen b) Lasso c) Selection d) None of these 2. Which of the following tools is used to complex shapes? a) Line b) Hand c) Oval d) Pen 3. In Flash, to create a striaght line, __________ tool can be used. a) Eraser b) Pencil c) Pen d) Line 4. Which of the following tools works as a classic eraser on the Stage. a) Selection b) Lasso c) Paint Bucket d) Eraser 5. To draw a circle, click on ____, press ___ key and drag the mouse over the stage. a) Hand, Alt b) Circle, Ctrl c) Paint, Tab d) Oval, Shift 87
B. Fill in the blanks. Ink Bottle, Layers, Keyframes, Panels, 12 1. ___________ contain controls for viewing and changing the properties of objects. 2. ________________ provide a means to manage and control specific elements of a Flash project. 3. ___________________ are the drawings which define a movement.. 4. The _________ tool allows changing stroke colour, shape outlines, line width etc. 5. The default frame rate in Flash is _________________ fps. C. Answer the following questions. 1. List salient features of Flash. ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 2. What is the use of Sub-selection tool? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 3. What is the significance of Timeline in managing frames and layers? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 4. Why do we need to take multiple layers in a Flash document? How a layer is identified uniquely in an animation? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 5. How will you change the sequence of layers in an animation? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 6. Explain the statement: “An animation is a series of Frames”. ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 88
7. What is the use of Keyframe in a Flash Document? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 1. Draw 3 boxes and apply suitable tweening to make them move from one point to other. 2. Create a simple drawing to show sea, sky, sun and clouds. Apply animation for showing sunset until sun sets completely and darkness befalls. 3. Draw a simple helicopter and make it fly from left to right with its fan rotating. 4. Draw two simple flying saucers that should fly on the stage and hit each other. 5. Create an animation to simulate a progress bar from 1% to 100%. After it reaches 100%, display the message: Download complete. Teacher's Signature : __________________ Teacher's Remark : WEB https://www.adobe.com/devnet/flash/articles/create-first-flash-document.html https://helpx.adobe.com/flash/archive.html LINKS Teacher’s Corner Teachers are advised to provide a simple assignment to the students to make a picture story about their school, family or hobby in Flash with simple animation. 89
7 Flash CS6: Advanced Features Dear Teacher, Yes Students, We have already In this chapter we learnt the basics in shall learn about the Flash. We are keen concepts related to make effective to explore powerful animations in Flash. animation features of Flash. Symbol In addition to the texts and shapes, your movies can include symbols. You can create new symbols or convert existing objects such as texts or shapes. You can easily change attributes such as brightness, tint and alpha transparency (the opacity of the object). Symbols are stored in the library for the current document. To use a symbol in your movie: 1. Drag in an instance of the symbol from the Library panel to the Stage. 2. When the dialog box appears, enter a name for your new symbol. 3. Select its behaviour. Let us see which behaviour is used for what purpose. A graphic symbol is used for creating a static image. You can use a graphic symbol multiple times on your stage. When you create a motion Tween, it automatically converts the object you are Tweening into a graphic symbol. A button symbol is used to create interactive buttons that can have rollover effects and animation applied to them. Buttons are used to trigger events by the user. A Movie Clip is used to create a reusable piece of animation. Movie clips have their own timeline that is independent of the main timeline. Movie clips can be used to create animated buttons. To convert a shape into a symbol The steps to convert a shape into a symbol are: 1. Draw a circle using Oval tool. 90
2. Use the Selection tool and select 3 the circle. 2 3. Select Modify →Convert to Symbol on the menu bar (Figure 1). The Convert to Symbol dialog box opens. 4 1 Figure 2: Convert to Symbol dialog box Figure 1 4. Name the symbol Circle graphic, select Graphic as the option and click on OK button (Figure 2). A blue outline and small circle in the middle of the circle appears and it indicates that the shape is converted into is a symbol. Figure 3 The Property Inspector shows that it is an instance of the circle Library graphic symbol (Figure 3). The actual symbol is stored in the memory. All symbols used in Flash movie are stored in the Library from where you can drag and drop the new instances of symbols into your movie. When a symbol is used outside the library it is called an instance. The instance refers to the symbol. There is no limit to how many instances that can be created from a symbol. When the symbol is edited, all the instances referring to the symbol will change accordingly. The steps to create a symbol are: 1. Insert a new Flash Document from File menu →New. 2. Click on Insert menu →New Symbol. The Create New Symbol dialog box appears. 3. Type ‘Circle’ in Name: text box, select Graphic option in the Type: section and click on OK button. 91
4. The symbol definition scene appears. Click 4 on Oval Tool ( ) in the toolbox and draw a circle anywhere in the first frame. A symbol is created on the frame. 2 3 Figure 4: Creating a symbol Sound Sound is soul of animation. Flash can import a variety of standard file formats, including AIFF (Mac only), WAV (Window only), and MP3 (both Platforms). The steps to import a sound are: 1. Insert a new layer by clicking on Insert menu → Timeline → Layer. 2. Click on File menu → Import → Import to Library (figure 5). 3. The Import to Library dialog box appears. 4. Browse the location and find the required sound file. Click on Open button. Note: If your current Flash installation does not support required sound formats then reopen your animation in Flash by selecting ActionScript 2.0 option in Create New section. 3 2 4 Figure 5: Import Library 92
The sound will be ready to use, you can find it in the Library (Window menu → Library). Sounds Properties To set the sound properties, click the frame of the movie. After doing this, the Properties panel takes the following appearance (figure 6). Let’s see the parts of this panel. Sound : In this list box, the imported songs will be displayed. Select the song which is to be added to your movie (in the next item we will learn about inserting other sound to a movie). Effect : From here we will be able to add some effects to our sound, for example, the sound passes from the left canal to the right one. Sync : This option allows us to determine at which event/ moment our sound will start acting. Repeat : It specifies the number of times the sound is played. To play it indefinitely, calculate the possible time of the movie duration and the time of the sound, and then Figure 6: Sound Properties repeat it as many times as necessary (that is better than to set 99999 times). Tweening Tween is the short form of “in-between”, which is the process of generating intermediate frames between two images to give the appearance that the first image evolves from the second image. Classic Tween Classic Tween is used to create animation between two Keyframes. It requires that the object being “tweened” be converted to a graphic and that the physical parameters of the shape are not changed throughout the process. This is a less memory-intensive method of tweening. While using classic tween in Flash, all that needs to be Figure 7: Flash Fills in done is defining two keyframes. Flash fills in the gaps the Extra Frames Using between the two frames (see figure 7). With classic tween, the user is able to animate the following Classic Tweening. properties: location, scale, rotation, tint and alpha. 93
The following example will demonstrate how to create an animation of a circle moving from the left side of the screen to the right side. The steps to perform a simple classic tween are: 1. Select the File menu →New. The New Document dialog box opens up. 2. Select Flash Document in the Type: list box. 4 5 7 3. Click the OK button. A 8 6 blank Flash file will be created. 4. Select the Insert menu →New Symbol. The Create New Symbol dialog box appears. 5. Type ‘Circle’ in the Name: text box. Figure 8: Defining a New Symbol 6. Click the Graphic option button in the Type: section. 7. Click the OK button. The symbol definition scene opens. 8. Using the Oval Tool (O), draw a circle anywhere in the first frame (figure 8). 9. Click on Scene1 button on the 9 timeline (see figure 9). Figure 9: Buttons on the Timeline 10. Click on Window menu and select Library option. Click and drag the newly created ‘Circle’ symbol from the Library panel to the stage of the first frame in Scene1 (figure 10). 11. Right-click inside frame 12 and 10 select Insert Keyframe. 12. With the Selection tool, move the circle in frame 12 to the right side on the stage (see figure 12). 13. In the timeline, left-click the Figure 10: Creating an Instance of a Symbol frame 1, then hold down the [Shift] key on keyboard and left- click on frame 12. Frames 1 to 12 will be selected (see figure 12). 94
14. In the Insert menu, select Classic Tween option. 15. The animation is applied. To play the animation, hold down the [Ctrl] key while pressing the [Enter] key on the keyboard. 11 14 Figure 11: 12 Right-click inside frame 12 13 Figure 12 Shape Tween Shape tween is used to create a morph effect. Morphing Figure 13: Flash Fills in is an animation style that describes one shape turning the Extra Frames Using into another shape. In shape tween, the user only needs to define the first and the last frame (see Figure 13). Shape Tweening. Flash fills in the rest of the frames. Shape tween increases the file size, since the flash library and symbols are not available for this tween type. This following example will demonstrate how to create an animation of a circle changing its shape. The steps to perform a simple shape tween are: 4 1. Select the File menu →New. The New Document Figure 14: A Simple Circle dialog box opens. 2. Select Flash Document in the Type: list box. 3. Click the OK button. A blank Flash file will be created. 4. Using the Oval Tool (O), draw a circle as shown in figure 14. 95
Right-click inside frame 12 and select Insert Keyframe. 5. Deselect the circle in frame 12 by clicking anywhere 7 outside the circle. 6. Select the Selection Tool (V) from the Toolbox. Figure 15: Using the Selection Tool 7. Place cursor near the outer edge of the circle as shown Next to a Shape in figure 15. 8. Left-click and hold the mouse button and drag to change the shape of the circle into something like shown in 8 figure 16. 9. Left-click in frame 1 on the timelie. Figure 16: Changing the Shape of the Circle 10 10. In the Insert menu, select Shape Tween option (see figure 17). 11. To play the animation, hold down the [Ctrl] key while pressing [Enter] key on the keyboard. Figure 17: Adding Shape Tween to Frames Animating Text Text animations are no different from regular animations using motion tween. The first step is to create the necessary symbols containing the text. After the symbols are created, they can be easily added to the keyframes. The steps to add animation to text are: 1. Select the File menu → New. The New Document dialog box opens. 2. Select Flash Document in the Type: list box. 3. Click the OK button. A blank Flash file will be created. 4. Select the Insert menu → New Symbol. The Create New Symbol dialog box opens. 5. Type [Text] in the Name: text box. 6. Click the Graphic option button in the Type: section. 96
7. Click OK button. The symbol definition scene opens. 8. Using the Text Tool (T) add some text in the first frame (see figure 18). Format the text as required. 9. Click the Scene 1 button on the timeline to go back to Scene 1. 10. Add the newly created symbol to top- left corner of the stage in frame 1 by left-clicking and dragging it from the Library panel. 11. Insert a new keyframe in frame 24. 12. With the Selection Tool (V), move the text to middle of the stage in frame 24. 13. Enlarge the text in frame 24 using Free Transform tool 14. Left-click in frame 1 on the timeline. 15. Select Classic Tween from Insert menu. Figure 18: Adding Text to the Graphic Symbol 16. To play the animation, hold down the [Ctrl] key while pressing the [Enter] Glossary key on the keyboard. Instance : It refers to a copy of a Flash symbol, whether it’s a movie clip, a graphic or Tween a button. : It is a short form of “in-between”, and refers to the creation of computer animation. Quick Review You can create new symbols or convert existing objects such as texts or shapes into symbols. Soundtracks give a touch of realism to an animation or a bit of life to an interface. Tween is a short form of “in-between” which is the process of generating intermediate frames between two images. Motion Tween is used to create animation between two Keyframes. Morphing is an animation style that describes one shape turning into another shape. 97
A. Choose the correct answer. 1. Which of the following helps in managing layers as well as frames. a) Normal b) Graphic c) Time line d) None of these 2. A _____________ symbol is used to create interactive buttons that can have rollover effects and animation applied on them. a) Graphic b) Button c) Movie Clip d) None of these 3. A collection of symbols is called ________. a) Tween b) Sound c) Library d) None of these 4. Classic tween is used to create animation between two _________. a) Frames b) Layers c) Symbols d) Keyframes 5. Morph effect can be created using _____________. a) Shape Tween b) Motion Tween c) Property Tween d) Morph B. Fill in the blanks. Shape Tween, Instance, WAV, Morphing, Sound 1. _______________ automatically converts the object to be Tweened into a graphic symbol. 2. When a symbol is used outside the library, it is called _________________. 3. ____________ is an animation style in which one shape turns into another shape. 4. ________________ is soul of animation. 5. ________________ is a Windows-only sound file format. C. Answer the following questions. 1. What do you mean by shape tween? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 98
2. How will you change the sequence of layers in your animation? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 3. What is the significance of sound in animation? How will you add sound in an animation? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 4. How will you apply classic tween on Text? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ 1. Using suitable tween type, create an animation to show an airplane take off. 2. Using suitable tween type, show a sad smiley face that turns into happy smiley face 3. Animate the following: Flash Fun The blue coloured text Flash on the left side slowly changes from Frame 1 to red coloured text Fun in Frame 25 Teacher's Signature : __________________ Teacher's Remark : WEB https://gcctech.org/cmm/cmm21g/flash/tweenalongapath/CS6-flash_tween- on_path.html LINKS https://ruvideos.org/Zl475-vS1oU-shape-tween-in-flash-cs6.html Teacher’s Corner Provide small, simple exercises to students to consolidate the concept of tween and morphing. 99
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
