WEEK 2: Button Symbols, Filter and Blend Modes

(FOURTH QUARTER)
 Gen. Vicente Alvarez St., Zamboanga City
Junior High School Unit
Local nos. (062) 991 – 4277, (062) 991 – 1676, Telefax: 992 – 3045

Learning Plan in COMPUTER 7

Grade Level Grade 7 Consultation schedule 2:00 – 4:00 PM
Activity Sheet no. 2 Week no.2 FOURTH QUARTER
Topic: Button Symbols, Filter and Blend Modes

I. LEARNING INTENT
At the end of the lesson, the students can:
a. discuss what the button symbol is;
b. identify the four states of a button symbol;
c. enumerate the steps creating a button;
d. discuss how filters are used in animation;
e. execute the steps in using a filter for animation effects;
f. explain blend mode;
g. identify the different blend modes available in Flash.

II. LEARNING ACTIVITIES

A. Engaging Activity
1. Priming (Mindful Activities)

2. Activation of Prior Knowledge

Simple recall of the previous lesson.

3. Guided Instruction
1. Concept Digest:

Working with button symbol

Aside from animation, Flash provides the ability for user interaction. Interactivity offers options that
allow the user to choose what or how an animation would be. Button symbols provide this type of
interaction for the user. Button symbols can be clicked, dragged or allow characters to be typed on the
screen to provide a reply or an answer.
Example of mouse events:
Single click (left-click) Double Click Right-Click Drag
Point Select
The Button Symbol
The button symbol is the third type of symbol in Flash. The button symbol is often chosen for its flexibility.
This symbol type contains a specialized internal timeline for button states. Buttons which create visually
different Up, Down, and Over states can easily be created. Button symbols also change their state
automatically as they react to the action of a user.

The Four States of a Button Symbol:

a. Up state indicates the appearance of the button when there is no interaction with the user.
b. Over state indicates the appearance of the button as the user is about to select it.
c. Down state indicates the appearance of the button when it is selected.
d. Hit state indicates the responsive area clicked by the user. Defining the Hit frame is optional.
 Filters and Blend Modes

Each time a new filter is added to an object, it is included in

the list of applied filters for the same object in the Property
inspector. Multiple filters can be applied to a single object.
Applied filters can also be removed. Filters can only be
applied to text, buttons, and movie clip objects.

A user may create a filter settings library wherein the same

filter or sets of filters can be applied to an object.
Filter presets created in the Property inspector are stored on
the Filters tab in the Filters > Presets menu.
How to apply or remove a filter
1. Select the graphic symbol, button symbol, movie clip symbol, or text to apply or remove a filter from.
2. In the Filters section of the Property inspector, do any of the following actions:
• To add a filter, click the Add Filter button and select a filter. Adjust the settings until the desired look is
achieved.
• To remove a filter, select the filter to remove from the list of applied filters then click the Remove Filter
button. A preset can also be deleted or renamed.

How to use a filter for animation effects:

1. Create a new document.
2. From the File menu, click Import to Library.
3. Select or download an image to which the filter will be applied to.
4. From the Insert menu, click New Symbol.
5. In the Create New Symbol dialog box, enter a name for the symbol and select Movie Clip as the symbol
type.
6. Drag the image to the center of the stage.
7. Right-click frame 2 and select Insert keyframe.
8. Apply the following settings for the symbol's properties: Filter > Blur > Quality = Low
9. Drag the symbol a little to the right from its current position on the stage.
10. Repeat the following steps for keyframes 3 and 4.
11. Apply the following settings as shown in the figures below:
12. Move the symbol a little to the right.
13. Right-click frame 5 and select Insert Keyframe, then move the symbol further to the right side of the stage.
14. Remove all the filters that were applied to the movie clip symbol.
15. Press Enter to play the animation. Notice that the image appears blurred as it moves across the stage.

Blending Modes
The blend mode lets the user create composite images. The composite process allows the variation of the
transparency or color interaction for two or more overlapping objects. Blending can be used to create distinct
effects. It can also be used to blend the colors for overlapping movie clips.
The following elements are contained in a blending mode:
• Blend color refers to the color applied to the blend mode.
• Opacity is the degree of transparency applied to the blend mode.
• Base color is the color of pixels underneath the blend color.
• Result color is the outcome of the blend's effect on the base color.

Blend modes depend on the color of the object to which the blend is applied to and the underlying color. It
is recommended that a user try out the different blend modes in order to achieve the desired effect.
• Normal: Color is applied normally with no interaction with
the base colors.
• Layer: Allows movie clips to be stacked on top of each other
without affecting the color.
• Darken: Only areas that are lighter than the blend color are
replaced. Darker areas than the blend color are not changed.
• Multiply: Augments the base color by the blend color, thus
creating darker colors.
• Lighten: Only the pixels that are darker than the blend color
are replaced; lighter areas than the blend color are not
changed.
• Screen: Magnifies the opposite of the blend color by the base
color creating a bleaching effect.
• Overlay: Multiplies or screens the colors depending on the
base colors.
• Hard Light: Multiplies or screens the colors, depending on
the blend mode color; its effect is similar to a spotlight on
object.
• Difference: Subtracts either the blend color from the base
color or the base color from the blend color based on which
has the greater brightness value; the effect is the same as a
color negative.
• Add: Often used to generate an animated lightening dissolved effect among two images.
• Subtract: Often used to make an animated darkening dissolved effect among two images.
• Invert: Reverses the base color.
• Alpha: Applies an alpha mask.
• Erase: Eliminates all base color pixels including those in the background image.
Note: The Erase and Alpha blend modes call for the application of a Layer blend mode to the parent movie
clip. The background clip cannot be changed to Erase and apply it as the object would appear invisible.

Example of blend modes

 Applying a blend mode

Use the Property inspector to apply blends to selected movie clips.

1. Select the movie clip instance (on the Stage) to which the blend mode will be applied to.
2. Use the Color pop-up in the Properties panel to adjust the color and transparency of the movie clip
instance.
3. Select a blend mode from the Blending dropdown menu in the Properties panel. The blend mode is
applied to the selected movie clip instance.

4. Check that the selected blend mode is appropriate to the desired effect.
Try out the color and transparency settings for the movie clip as well as the different blend modes to attain
the preferred effect.
Note: Different blend modes cannot be applied to different graphic symbols because multiple graphic
symbols are merged as a single shape when the SWF file published.

2. Checking for Understanding

Match Column A with Column B

Column A Column B
______1. It provides interaction for the user. A. Up State
______2. It indicates the appearance of the button when there is no interaction B. Down State
with the user. C. Over State
______3. It indicates the appearance of the button as the user is about to select it. D. Button
______4. It indicates the responsive area clicked by the user E. Hit state
______5. It indicates the appearance of the button when it is selected. F. Blend Modes
______6. It creates distinct effects for overlapping movie clips. G. Blend Color
______7. It refers to the color applied to the blend mode. H. Result Color
______8. It is the degree of transparency applied to the blend mode. I. Base Color
______9. It is the color of pixels underneath the blend color. J. Opacity
______10. It is the outcome of the blend's effect on the base color.

A. Guided Practice
Identify the type of blend modes.
________________1. Multiplies or screens the colors depending on the base colors.
________________2. Often used to generate an animated lightening dissolved effect among two images.
________________3. Color is applied normally with no interaction with the base colors.
________________4. Magnifies the opposite of the blend color by the base color creating a bleaching effect.
________________5. Often used to make an animated darkening dissolved effect among two images.
________________6. Eliminates all base color pixels including those in the background image.
________________7. Reverses the base color.
________________8. Allows movie clips to be stacked on top of each other without affecting the color.
________________9. Only the pixels that are darker than the blend color are replaced; lighter areas than the
blend color are not changed.
________________10. Only areas that are lighter than the blend color are replaced.

B. Analysis Question(s)
Which type of frame is usually involved in the animation?

C. Synthesis/ Closure:
1. Write three significant ideas of what you have learned today.
III. ASSESSMENT (HANDS-ON ACTIVITY)

A. Create the following buttons.

1. Home Button
2. Links Button
3. Products Button

B. Create a logo. Use the blur effect to create an effect that makes the logo image blurred one moment then
cleared again.

C. Apply different blending modes to create the desired effect.

“Educating the mind without educating the heart is no education at all”

Aristotle

Keep up the good works! Till’ next module.

Prepared by: Checked by: Approved by:

Girlie L. Andas, LPT Simon L. Chua, D.T. Jomar S. Ejedio, LPT

Subject teacher Subject Coordinator Department Head, JHS