Multimedia application in business bcom 3301 3 2 2 5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 181

บทที่ 7 (ต่อ) การสร้าง Animation ด้วย โปรแกรม Adobe Flash PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: General

วิชา การประยุกต์ใช้งานด้านธุรกิจด้วยมัลติมีเดีย ( Multimedia Application in Business) รหัสวิชา BCOM 3301 3(2-2-5).

Download Presentation

บทที่ 7 (ต่อ) การสร้าง Animation ด้วย โปรแกรม Adobe Flash

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Multimedia application in business bcom 3301 3 2 2 5

(Multimedia Application in Business) BCOM3301 3(2-2-5)

1 2555 . . (085)138-6677 925/1E-mail :[email protected] : http://msci.chandra.ac.th/lrk/


7 animation adobe flash

7 () Animation Adobe Flash


7 animation adobe flash

Flash CS3

Pentium 4,Core Duo 1 GHz

Windows XP ServicePack2 Windows Vista

(RAM) 512 MB ( 1 GB)

2.5 GB

1024 x 768 pixels (32 bit)

3


7 animation adobe flash

: .


7 animation adobe flash

Flash Document

Flash Slide Presentation

Flash Form Application

ActionScript File

ActionScriptCommunication File

Flash JavaScriptFile JavaScript API

Flash Project Project


7 animation adobe flash

  • Flash Vector Graphic

  • Flash (SWF )

: .


7 animation adobe flash

  • Bitmap

    Pixel

: .


7 animation adobe flash

()

  • Vector

: .


Flash

Flash

1

3

Animation

Script

2

Symbol

4

Publish

: .


Flash1

Flash

  • *.fla (Flash Movie)

    • Flash

  • *.swf (Shockwave Flash)

    • Flash

    • Flash

  • Publish .html *.swf

: .


Flash8

Flash8

  • Start

    • Programs

      • Adobe Master Collection CS5

        • Adobe Flash Professional CS5

: .


7 animation adobe flash

: .


Toolbox

/ Toolbox

  • Window Tools

: .


Panels

/ Panels

  • Window Panels

  • F4

: .


Toolbox1

Selection :

Subselection :

Line :

Lasso :

Pen :

(Toolbox)

: .


Toolbox2

Text :

Oval :

Rectangle:

Pencil :

Brush :

(Toolbox)

: .


Toolbox3

Free Transform :

Fill Transform :

Ink Bottle :

Paint Bucket :

Eyedropper :

(Toolbox)

: .


Toolbox4

Eraser :

Hend :

Zoom :

Option :

(Toolbox)

: .


7 animation adobe flash

  • File New

  • Ctrl + N

: .


7 animation adobe flash

  • Modify Document

    • Dimensions :

    • Background Color :

    • Frame Rate : Frame

: .


7 animation adobe flash

()

  • Ruler units :

  • Make Default :

: .


7 animation adobe flash

  • Show Frame :

: .


7 animation adobe flash

View > Rulers

: .


Hand tool h

Hand Tool (H)

Tool Hand Tool

Space bar

: .


Zoom tool

Zoom Tool

Option

Alt Zoom Tool

Zoom 100% double click Zoom

Zoom double click Hand

: .


7 animation adobe flash

  • Line :

  • Oval : ,

  • Rectangle :

  • Pen :

: .


Oval tool

Oval Tool

  • Properties

Shift

: .


Rectangle tool

Rectangle Tool

Shift

: .


Line tool

Line Tool

  • Properties

Shift

: .


Arrow tool

Arrow Tool

  • -

  • -

  • ( Alt )

: .


Arrow tool1

Snap

Smooth

Straighten

Arrow Tool ()

  • Option Bar

: .


Rectangle tool1

Rectangle Tool

: .


Free transform tool

Free Transform Tool

: .


Free transform tool1

Rotate

Distort

Scale

Envelope

Free Transform Tool

: .


7 animation adobe flash

  • Modify Transform Scale

: .


7 animation adobe flash

  • Modify Transform Rotate

Rotate 90 CW

Rotate 90 CCW

: .


7 animation adobe flash

  • Modify Transform

    • Flip Vertical :

    • Flip Horizontal :

: .


7 animation adobe flash

Default

: .


Workshop

Workshop

: .


7 animation adobe flash

  • File Save as

  • OK

** .fla **

: .


7 animation adobe flash

  • File Open

: .


Pencil tool

Pencil Tool

Shift

: .


Brush tool

Lock

Brush

Brush

Brush Tool

: .


Brush tool1

Brush Tool

: .


Eraser tool

Eraser

Eraser Tool

: .


Ink bottle tool

Ink Bottle Tool

  • Click

: .


Paint bucket tool

Lock

Paint Bucket Tool

: .


Dropper tool

Stroke Color

Fill Color

Dropper Tool

: .


7 animation adobe flash

  • Window > Color Mixer

  • Linear

  • Radial

  • ( 8 )

  • Bitmap

: .


7 animation adobe flash

()

  • Add Swatch

: .


Fill transform tool

Fill Transform Tool

: .


7 animation adobe flash

: .


Pen tool

point

point

.

Pen Tool

: .


Subselection tool

Subselection Tool

  • Path

Alt

Shift 45

Alt

: .


7 animation adobe flash

  • Edit Copy , Edit Paste

  • Ctrl

: .


7 animation adobe flash

  • Window Design Panels Align

: .


7 animation adobe flash

  • Modify Group

  • Ctrl + G

: .


Text tool

Text Tool

: .


7 animation adobe flash

  • Properties

: .


7 animation adobe flash

  • Modify Break Apart

  • Ctrl + B

: .


7 animation adobe flash

  • File Import Import to stage

  • Open

: .


Lasso tool

Lasso Tool

  • ()

: .


7 animation adobe flash

Timeline Frame Key Frame

: .


Timeline

Timeline

  • Timeline Animation

: .


Keyframe

Keyframe

  • Keyframe Frame

    Keyframe

  • Frame

  • Insert Timeline Keyframe

  • F6

: .


Keyframe1

Keyframe

  • Keyframe

  • Clear Keyframe

  • Shift + F6

: .


Frame

Frame

  • Frame Keyfarme

    Frame

  • Insert Timeline Frame

  • F5

: .


Frame1

Frame

  • Frame

  • Remove Frames

  • Shift + F5

: .


Blank keyframe

Blank Keyframe

  • keyframe

  • Insert Timeline Blank Keyframe

: .


7 animation adobe flash

Animation Flash

  • Frame by Frame

  • Motion Tween

  • Shape Tween

: .


Frame by frame

Frame By Frame

  • Keyframe (F6)

  • 1 Step

: .


7 animation adobe flash

  • Enter

  • Control Loop playback

: .


Motion tween

Motion Tween

  • Move

  • Scale -

  • Rotate

  • Effect

: .


Motion tween move

Motion Tween Move

  • 1

  • Insert Timeline Create Motion Tween Create Motion Tween

: .


7 animation adobe flash

Motion Tween Move ()

  • ( 15)

  • F6 (Insert Timeline Key Frame)

: .


Motion tween move1

Motion Tween Move ()

: .


Motion tween scale

Motion Tween Scale

  • 1

  • Insert Timeline Create Motion Tween Create Motion Tween

: .


Motion tween scale1

Motion Tween Scale

  • ( 15)

  • F6 (Insert Timeline Key Frame)

: .


Motion tween scale2

Motion Tween Scale

: .


7 animation adobe flash

: .


Motion tween rotate

Motion Tween Rotate

  • 1

  • Insert Timeline Create Motion Tween Create Motion Tween

: .


Motion tween rotate1

Motion Tween Rotate

  • ( 15)

  • F6 (Insert Timeline Key Frame)

: .


Motion tween rotate2

Motion Tween Rotate

: .


Motion tween1

Motion Tween

  • Click Frame

: .


Motion tween2

Motion Tween ()

  • Keyframe ()

  • Properties

  • Ease :

    • :

    • :

: .


Motion tween3

Motion Tween ()

  • Rotate :

    • CW :

    • CCW :

: .


Motion tween4

Motion Tween ()

  • Times :

  • Orient to path : path

  • Synchronize :

  • Snap : path

: .


Motion tween effect

Motion Tween Effect

  • Effect

  • Frame

  • Properties

/

: .


7 animation adobe flash

: .


7 animation adobe flash

Shape Tweening

: .


Shape tween

Shape Tween

  • 1

  • ( 15)

  • F6 (Insert Timeline Key Frame)

: .


7 animation adobe flash

  • Frame

  • Properties Shape

: .


7 animation adobe flash

  • Tool

Onion Skin

: .


7 animation adobe flash

  • Tool

Onion Skin Outlines

: .


7 animation adobe flash

Markers

Modify Onion Markers

Markers

Markers Playhead

: .


Keyframe2

Keyframe

1.

Onion All

2. Edit Multiple Frames

: .


7 animation adobe flash

Layer

: .


Layer

Layer

  • Layer Layer

  • Layer Motion Tween Motion Tween

: .


Layer1

Layer

  • Insert Layer

: .


Layer2

Layer

  • Layer

  • Layer

  • Enter

: .


Layer3

Layer

  • Layer

  • Delete Layer

: .


7 animation adobe flash

: .


Layer4

Layer

  • Layer

  • / Layer

  • Lock Layer

  • Outline

: .


7 animation adobe flash

: .


Guide layer

Guide Layer

  • Insert >> Motion Guide

  • Guide Layer

  • Pen Tool Path

: .


Guide layer1

Guide Layer ()

  • Path

: .


7 animation adobe flash

(Mask Layer)

: .


Layer mask

Layer Mask ?

  • Layer Layer Mask Layer Mask

: .


Layer mask1

LayerMask

  • New

  • Modify Movie

  • Width = 510 Height = 200

  • OK

: .


Layer mask2

LayerMask ()

  • Layer 1

    • Rectangle Tool Stage

    • 30 F5

: .


Layer mask3

LayerMask ()

  • Insert Layer (Layer 2)

  • ( )

: .


Layer mask4

LayerMask ()

  • Insert Layer (Layer 3)

  • Double Click

  • Modify >> Group (Ctrl + G)

  • 15 F6

: .


Layer mask5

LayerMask ()

  • Create Motion Tween

  • 30

: .


Layer mask6

LayerMask ()

Layer 3

Mask

Enter

: .


Mask layer

Mask Layer

  • File Import Import to Stage

  • Stage

  • Modify Convert to Symbol

: .


Mask layer1

Symbol

Graphic OK

Window Panels Effect

Brightness

30 F5

Mask Layer ()

: .


7 animation adobe flash

  • Layer Insert Layer 1

: .


7 animation adobe flash

  • 10>> F6

  • Insert >> Motion Tween

: .


7 animation adobe flash

  • 20 >> F6

: .


7 animation adobe flash

  • 30 >> F6

: .


7 animation adobe flash

  • Layer 3 Mask

Enter

Movie

: .


7 animation adobe flash

Symbol & Instance

: .


Symbol

Symbol

(Graphic)

(Movie)

(Button)

: .


Instance

Instance

Symbol

( Symbol)

: .


Symbols

Symbols

  • Graphic

  • Movie Clip

  • Button

: .


Graphic

Ctrl + F8

Graphic

Insert New Symbol

  • Symbol

  • Graphic

  • OK

: .


Scene

Scene

Scene

: .


Symbol1

Ctrl + L

Symbol

  • Scene

  • Window Library

  • Scene

: .


Movie clip

Movie Clip

Insert New Symbol

  • Symbol (Rec)

  • Movie Clip

  • OK

: .


7 animation adobe flash

  • ( 20) F6

  • Shape Tween

: .


7 animation adobe flash

  • ( 25) F6

  • Shape Tween

: .


7 animation adobe flash

  • Scene

  • Window Library (Ctrl + L)

  • Movie Clip Scene

  • Control Test Movie

: .


Movie

Ctrl + Enter

Movie

Control

Test Movie

Shock Wave File

Test Movie (.swf)

( Flash )

: .


Button symbol

Button Symbol

Insert New Symbol

  • Symbol (Next Button)

  • Button

  • OK

: .


Button

Button

  • Up

  • Over

  • Down

  • Hit

: .


7 animation adobe flash

  • ( frame Up)

  • Time line Over

  • F6

: .


7 animation adobe flash

Action

: .


Actions play

Actions Play

Movie

Actions Stop

Movie

: .


Event button

Event Button

  • Press

  • Release

  • Release Outside

  • Key Press [ ]

: .


Event button1

Event Button ()

Event Button

  • Roll Over

  • Roll Out

  • Drag Over

  • Drag Out

: .


Actions go to

Actions Go To

Scene Frame

  • Scene : scene

  • Type :

  • Frame : label

  • gotoAndPlay gotoAndStop

: .


Actions get url

Actions Get URL

  • URL :

  • Window :

: .


7 animation adobe flash

: .


7 animation adobe flash

Ctrl + F8

  • Insert New Symbol

  • Symbol (Move Mouse)

  • Movie Clip

  • OK

: .


7 animation adobe flash

  • (+)

  • 1 Actions

: .


Actions startdrag

Actions >> startDrag

Drag Mouse

  • Target :

  • Constrain to rectangle :

  • Lock mouse to center : +

: .


7 animation adobe flash

  • + Actions Movie Clip Control

    start Drag

: .


7 animation adobe flash

  • Scene

  • Window Library (Ctrl + L)

  • Movie Clip Scene

  • Control Test Movie

: .


7 animation adobe flash

Ctrl + F8

  • Insert New Symbol

  • Symbol (Move Area)

  • Movie Clip

  • OK

: .


7 animation adobe flash

  • (+)

  • Scene

  • Window Library (Ctrl + L)

  • Movie Clip Scene

: .


Instance1

Instance

  • Movie Clip

  • Properties

ball

: .


7 animation adobe flash

  • 1 Actions

  • + Actions Movie Clip Control

    startDrag

: .


7 animation adobe flash

Top

Left

Right

Bottom

startDrag (ball, true, 0, 0, 200, 200) ;

  • Control Test Movie

: .


Symbol2

Symbol

  • Window Common Libraries

    Buttons

    Graphics

: .


7 animation adobe flash

Keyframe

Actions

: .


7 animation adobe flash

Ctrl + F8

  • Insert New Symbol

  • Symbol (Rec Button)

  • Button

  • OK

: .


7 animation adobe flash

  • (+)

  • Alpha 0%

: .


7 animation adobe flash

  • Insert New Symbol

  • Symbol (Rec Movie)

  • Movie Clip

  • OK

  • Window Library (Ctrl + L)

: .


7 animation adobe flash

  • Rec Button +

  • 2 F6

  • Button

: .


7 animation adobe flash

  • 20 F6

  • Shape Tween

: .


7 animation adobe flash

  • 25 F6

  • Alpha = 0%

  • Shape Tween

: .


7 animation adobe flash

Double Click

  • 1 Actions

: .


7 animation adobe flash

  • Button 1 Actions

  • + Movie Control goto

2

: .


7 animation adobe flash

  • Event Mouse

: .


7 animation adobe flash

  • Scene

  • Window Library (Ctrl + L)

  • Rec Movie Scene

  • Control Test Movie

: .


Movie1

Movie

  • Insert>> New Symbol

  • Symbol (eye1)

  • Button

  • OK

: .


7 animation adobe flash

  • Scene

  • eye1 Scene

  • Instance

Pic1

Control >> Test Movie

: .


7 animation adobe flash

  • + Movie Clip Control startDrag

  • Target Instance

  • Event Mouse Press

: .


7 animation adobe flash

  • + Movie Clip Control stopDrag

  • Event Mouse Release

: .


7 animation adobe flash

  • Import (.wav,.mp3) Library

  • Window Library (Ctrl + L)

  • layer

  • Properties

: .


7 animation adobe flash

: .


7 animation adobe flash

  • Sound :

  • Effect

    • None :

    • Left Channel :

    • Right Channel :

    • Fade Left to Right :

: .


7 animation adobe flash

  • Fade Right to Left :

  • Fade In :

  • Fade Out :

  • Custom : [ Edit ]

: .


7 animation adobe flash

  • Sync

    • Event :

    • Start :

    • Stop :

    • Stream :

  • Loop :

: .


7 animation adobe flash

: .


Scene1

Scene

  • Insert Scene

: .


Scene2

Scene

  • Modify Scene

: .


Scene3

Scene

  • Control Test Scene

: .


Movie web

F12

Movie Web

  • File Publish Preview

    HTML

.swf .html

: .


Exe file

exe file

  • File Publish Settings

  • Windows Projector (.exe)

  • Publish

  • OK

: .


Export image

Export Image

  • File Export Image

  • Save

: .


  • Login