Tutorial 6 Creating Special Effects with Graphics and Gradients.

Tutorial 6

Creating Special Effects with Graphics

and Gradients

XPXPObjectives• Import bitmap graphics into a document• Change a bitmap graphic’s properties• Convert a bitmap graphic to a vector graphic• Create a fade effect animation using bitmaps• Learn about gradients

New Perspectives on Adobe Flash CS4 2

XPXPObjectives• Create and save a new gradient• Use and transform a gradient• Explore the Flash publish settings• Publish a Flash movie• Create a publish profile• Export a Flash graphic• Insert a Flash movie into an existing Web page

XPXPWorking with Bitmaps• Bitmaps appear more natural than vector

graphics• A photograph is an example of a bitmap graphic• Bitmaps are stored as a matrix of pixels• Bitmaps must be imported into a Flash document• A bitmap may be converted into a vector graphic

XPXPImporting a Bitmap• On the Application bar, click File, point to Import,

and then click Import to Stage or Import to Library

• In the Import or Import to Library dialog box, navigate to the location of the bitmap file, and then select the bitmap file in the file list

• Click the Open button

XPXPBitmaps in the Library Panel

XPXPSetting a Bitmap’s Properties• Bitmap Properties dialog box• Properties: name, smoothing, compression, and quality

settings• Compression: Lossless (PNG/GIF), Photo (JPEG)• JPEG Quality range: 0 to 100• Setting bitmap properties in the banner– Apply additional compression to reduce file size– Loss in quality is not discernible due to small bitmap

XPXPBitmap Properties Dialog Box

XPXPAnimating Bitmaps• Instances of bitmaps can be animated – Instance on Stage must first be converted to a symbol

• Types of motion tweens applied to bitmaps:– Moving, rotation, scaling, and fading

• Fade effects are created by changing alpha amount• Alpha amounts controls image – 0% makes the object completely transparent– 100% makes the object completely opaque

XPXPFade Animation

XPXPMotion Tweens Complete

XPXPConverting a Bitmap to a Vector Graphic• Reasons to convert a bitmap to a vector graphic:– Bitmap is geometric in nature– Visual effects will be applied to the graphic

• Converting a bitmap to a vector graphic: – Go to Modify Bitmap Trace Bitmap– Specify values and set options– Caveat: some color and quality lost in conversion

XPXPConverting a Bitmap to a Vector Graphic

XPXPBitmap Converted to a Vector

XPXPUsing Gradients• Gradient: gradual blend or transition of colors• Gradients enhance the appearance of objects• Add gradients as fills the way solid colors are added• Linear gradient – Blends colors from one point to another in a straight

line• Radial gradient – Blends colors from a point outwards in a circular

pattern

XPXPGradient Examples

XPXPCreating, Editing, and Saving a Gradient• To create a gradient, open the Color panel, click the

Type button, and then click Linear or Radial (or click a preset gradient in the color palette or the Swatches panel)

• To edit a gradient, add or delete a color pointer• To specify a color for a color pointer, select the color

pointer, and then enter the color’s RGB values, hexadecimal value, or click the color picker in the Color panel

• To add a color pointer, click a spot on the gradient definition bar

XPXPCreating, Editing, and Saving a Gradient• To remove a color pointer, drag it down, away from the

gradient definition bar• To reposition a color pointer, drag it to the left or right

on the gradient definition bar• To save a gradient with the current document, click the

Color panel options menu, and then click Add Swatch

XPXPColor Panel with the Custom Gradient

XPXPNew Gradient in Swatches Panel

XPXPApplying a Gradient Fill• Follow the same process for applying a solid fill• Two options for applying gradient to single object:– Select gradient fill color and draw object on Stage– Use Paint Bucket tool for object already on the Stage

• Lock Fill modifier – Paints one gradient across several objects on the

XPXPEffect of Lock Fill Modifier on Gradients

XPXPGradient Background Added to the Banner

XPXPFilling Text with a Gradient• You can apply a gradient fill to text• Convert the text to a fill with the Break Apart command– Use command one time for text blocks consisting of

one letter– Use command two times for text blocks consisting of

multiple letters

XPXPFilling Text with a Gradient

XPXPTransforming Gradient Fills• Gradient Transform tool: modifies a gradient fill – Selected object with linear gradient has a bounding

box – Selected object with radial gradient has a bounding

circle• Modifiable gradient properties: center, size, direction • How to transform a gradient: – Drag the handles in the bounding box or circle

surrounding the center point

XPXPGradient’s Radius Increased

XPXPComparing Publishing Options• FLA format: native file format for Flash documents• SWF file: plays in Flash Player window or browser• Default – (HTML): creates an SWF and HTML file• Static publishing formats: JPEG, GIF, and PNG• Projector file: stand-alone file with .exe extension – Has the Flash Player incorporated into it – Plays the movie in its own window

• Publish Settings dialog box– Used to specify how FLA documents are published

XPXPPublish Settings• Default options: Flash (.swf) and HTML (.html)– Each file type has an options tab

• Select check box for different formats– New options tab appears for each new type selected– Example: JPEG tab appears if JPEG Image (.jpg)

chosen• New publishing profiles may be saved for later use• New banner will be published as an SWF file– Rationale: banner will be added to an existing Web

XPXPPublish Settings

XPXPFlash Publish Settings

XPXPExporting a Flash Document as an Image• Two common image file formats used in Web pages:– JPEG format: best for images that include many colors– GIF format: best for images with fewer colors

• Some export formats in Flash: JPEG, GIF, PNG• Two ways to export images in Flash:– Select options in Publish Settings dialog box– Use the Export Image command

• Logo will be exported as a GIF image

XPXPExport GIF Dialog Box

XPXPAdding Flash Graphics to a Web Page• Requirement for using Flash graphics in a Web page:– Graphic file must be incorporated into the page’s

HTML• One simple way to incorporate graphics in HTML:– Publish a movie with the HTML format option

selected• Adding the SWF file to an existing Web page: – Actual Web page must edited – Some editing tools: Adobe Dreamweaver, Notepad

• Use Notepad to edit page displaying banner and logo

XPXPSample Web Page HTML

XPXPSample Web Page With Flash Graphics

Tutorial 6 Creating Special Effects with Graphics and Gradients.

Documents

Transcript of Tutorial 6 Creating Special Effects with Graphics and Gradients.

Vector Math Tutorial for 3D Computer Graphics - …tomlr.free.fr/.../Vector%20Math%20for%203D%20Computer%20Graphics%20...Vector Math Tutorial for 3D Computer Graphics Vector Math for

Stat Graphics Tutorial

Matlab Graphics Tutorial

A Tutorial on Satellite Graphics Systems

The ImageMagick graphics library+/tutorial/Magick++_tutorial.pdf · 1 About this document This document is an introductory tutorial to the free-software Magick++ C++ graphics library,

Working with Fonts, Colors, and Graphics HTML: Tutorial 3.

Fluid Simulation For Computer Graphics: A Tutorial in Grid Based …users.encs.concordia.ca/~grogono/Graphics/fluid-5.pdf · Fluid Simulation For Computer Graphics: A Tutorial in

Tutorial “Creating Vector Graphics“ · Tutorial “Creating Vector Graphics“ ... object functions similarly in Adobe Illustrator as in Corel Draw. 2. There are rectangles, ellipses,

OpenVG Graphics Solutions Tutorial - NXP Semiconductors · OpenVG Graphics Solutions Tutorial June 2010 Michael Staudenmaier / Kabi Padhi Automotive Systems Engineer / FAE. TM Freescale,

Tutorial MPEG 3D Graphics

CSE528:Computer Graphics OpenGL Tutorial

Graphics Window Tutorial

Download Computer Graphics Tutorial

An Introduction on OpenGL With 2D Graphics - OpenGL Tutorial

INFOGR: Graphics Practical 1: OpenTK Tutorial · INFOGR: Graphics Practical 1: OpenTK Tutorial Author: Jacco ikker ased on the 2015 XNA tutorial. The assignment: The purpose of this

Mentor Graphics Tutorial: Schematic Capture, Simulation

CSE328:Computer Graphics OpenGL Tutorial

Visual Computing Groupvic.crs4.it/eg2017-tutorial-mobile-graphics/doc/eg2017-mobile-graphi… · Mobile Graphics Tutorial – EuroGraphics 2017 • Modern smartphones (tablets) are

ArrayFire Graphics A tutorial by Chris McClanahan, GPU Engineer · 2013. 8. 23. · A tutorial by Chris McClanahan, GPU Engineer . Overview ... –Graphics rendering completed in

Mentor Graphics Tutorial