1.

1.1


..
..
..

1 _ Photoshop..
2 _Photoshop Retouch.
3 _Web Layout Design.
4 _Premiere
5 _SoundForge..
6 _ Flash Animation..
Frame by Frame Animation..
Shape Tween...
Motion Tween..
Motion Guides..
Text Animation.
7 _Flash Buttons.
Standard Button..
Rollover Button
Rollover With Down Button
Invisible Button.
Buttons.......................................................................................................

8 _Flash Action Script

Action Get Url..
Slideshow.

9 _Flash Action Script Loop..

Slideshow Loop

10 _Flash Video
Flash _Extra Fun with Masks




.


,
video.
,
Adobe Photoshop.

vide Sound Forge Adobe Premiere
.
,

.


Adobe
Photoshop

.
Photoshop Retouch

. ,

Retouch Photoshop.

.

Web Layout Photoshop

Photoshop. 2 Web
Layouts .


Premiere

Adobe Premiere Video
Background.
Video.
SoundForge

SoundForge
.

.

Flash Buttons
Macromedia
Flash
buttons.
button.


Flash Animation
animation
Macromedia Flash
.
Flash - Action Script
Action Script Flash
Slideshow.
Flash Action Script Loop URLs
Action Script Loops
URLs . ,

.
Flash Video
video
Premiere Flash.

 Photoshop
To Photoshop .
Mac, Windows, Unix
Photoshop?
, photoshp
.
, , , ,
.
, ,

, Photoshop
web layout.
photoshop
. ,
-
pixels- .
.

 Photoshop

 Photoshop

Toolbox: .
.

Options Bar: .
Menu Bar: Photoshop
Image Window: .
Floating Palettes:
project. default : navigator, info, histogram,
color, swatches, styles, history, actions, layers, channels, paths.
,
window->
.

 Photoshop - Menu
Photoshop (
word). , ,
alt+F File.

 Photoshop Image Window

Zoom

Mode

 Photoshop - Menu

.
Photoshop
(File- New)

.

Image Image Size.

 Image Size

pixels
pixels
document

document

Constraint Proportions

,
.

Image Window

Image window

:
File->New

,

.
,
Layout

width=1024, height=768

 Photoshop - Toolbox
To Toolbox ,
, .
, .

 Toolbox
Toolbox,

,

.
Rectangular
Marquee Tool,

.
eliptical Marquee Tool
.
Single Row Marquee Tool
Pixels
Single Row Marquee Tool
Pixels.

 Toolbox
move tool,

lasso tool,
.
Polygonal lasso tool,
.
Magnetic lasso tool,
.
Magnetic lasso
tool,
.

 Toolbox
magic wand tool,
.
crop tool, .

slice tool

site
spot healing brush tool,

.
healing brush tool,
,

alt.

 Toolbox
patch tool,
,

.
red eye tool,

flash.

brush tool
, Pencil tool
.
color replacement tool,

.

 Toolbox
clone stamp tool,

Pattern.
pattern stamp tool,

patterns.
pattern( ),
Patterns.

History brush tool,

.

art history brush,

.

 Toolbox
eraser tool,

.
background eraser tool,
Background,
Layer.
Magic eraser tool,
.
Gradient tool,
.
Paint bucket tool, ,
.

 Toolbox

Blur tool, .
sharpen tool,
blur Tool, ,
Pixels.
smudge tool,

 Toolbox

dodge tool,
.( )
Burn tool,
sponge tool,
contrast.

 Toolbox

Horizontal Type Tool,

.
Vertical Type Tool,

Horizontal Type Mask Tool,

.
Vertical Type Mask Tool,

.

 Toolbox
Pen tool,

. Freeform pen tool

.

 Toolbox

eyedropper tool color sampler tool

.
Measure tool,
.

Hand tool,
Zoom tool
zoom

 Toolbox
,
.
Brush Tool
, ,
.

Floating Palettes

Floating Palettes,
.
,
button
.

floating palettes
:
Window.
.
default : navigator, info, histogram, color, swatches,
styles, history, actions, layers, channels, paths.

Floating Palettes
Navigator

zoom in
zoom out
.
Info
tab info
,
,
.

Histogram
tab Histogram
pixels .

Floating Palettes
Color
color RGB
.
:
Red=0,Green =173, Blue=239
Swatches
toolbox
,
swatches.H swatches

swatches. swatches

.
styles x standar
styles

Floating Palettes

puzzle image
Puzzle

Floating Palettes
history
,
History

.
, rasterize
layer
, type tool
.
actions

play

. ,
slideshow 100 site

,

actions
Play.

Floating Palettes
Layers .
Layers ,
.
designers :

Layer!.

.
Opacity
, Layer

. Layer
Layers
. layers

. 2 layer

,
.
= Layers
drag and drop .

Floating Palettes
: 100

:
Opacity fill
opacity
Layer (
).
fill

T


Layers,

,

Layer

drag n drop.
Layers

,

Layers

blending
options layer
layer
adjustment fill layer

layer

Layers.

Layers.


Retouch

Retouch Lab

1. before.jpg
2. K duplicate layer. Layer - Duplicate Layer
3. Healing Brush Tool .
alt
.
4. (, Lifting)
Rectangular Marquee Tool
dit-ransform-Distort
.
5.
Filter Liquify - Forward Warp Tool .
Reconstruct tool.
6. Filter -> Noise -> Add noise
1,5.

Retouch Lab

7. duplicate layer Median Layer.

8. Filter-Noise-Median ( 12)
blend mode overlay .
.
9. , ,
Eraser Tool () opacity (10)
layer
10. , layer
lips. brush tool
. blend mode : Color Burn
11.
Dodge Tool Range: Highlights. ,

: Filter Render Lighting Effects.

Before

After..

After With Lighting Effects

Web Layout Design

:
.

.

:
, target group.

Internet
., buttons
. video games

development animation.

minimal .

Web Layout Design

.
navy blue
.( navy blue

. ;
. web layouts

.
extra Logos .
extra .
...

Web Layout Design

.
, 45 min
.


:
www.lipsum.com
,
dummy text.

Web Layout 1

Web Layout 1 -

Web Layout 2

Web Layout 2 -


Adobe Premiere

Adobe Premiere Video

Adobe Premiere montage

video.
Project Settings

Project Settings.
video ,
.
NTSC PAL
.
Real Time Preview
effects
,
Preview.

Adobe Premiere Video

Ok.

Adobe Premiere Video

Workspace
Ok
workspace premiere.

, .
1. Project
2. Monitor
3. Effect Controls
4. Navigator History Commands
5. Transitions Video Audio
6. Timeline

Adobe Premiere Workspace

Adobe Premiere Menu Bar,

Menu Bar

File
File
project,
project,
project, project,
, export

Adobe Premiere Project Window

project
To Project
Bin 1

,

. premiere
, video .
bins

.
,
bin.
bin , video
audio.

Adobe Premiere

,
Import. ,
Ok.
,
video.

.

.
video
frame video.

Adobe Premiere

.

preview
Play

.

Adobe Premiere Monitor

Monitor
monitor

timeline

video,
,
Loop .
, Monitor


video


.

Adobe Premiere Timeline

Timeline
To timeline premiere
.

timeline, project
timeline.
toolbar,
.
toolbar
. transition effects
Video 1A Video 1B,
transition effect.
video, .

add video track.

Adobe Premiere Timeline

videos ,
.

Adobe Premiere Effects

effects
effects 3 Tabs: Transition, Video, Audio
transition effects effects
video .

effects. effects

.

Adobe Premiere Effects

effect ,

effect .
video .
effect.

Adobe Premiere Effects

effect, ok
transition
video.

Adobe Premiere Effects

To tab video
effects

video

video .
tab audio effects


audio

video effects.

Adobe Premiere

: video
compilation videos
,
background transition
effects .
1. import
2.

3. transition effects

4. export
. avi.
export e File Export
Timeline - Movie

Adobe Premiere

Sony Sound Forge

Sound Forge

Sound Forge
Sony Sound Forge Sonic Foundry Sound Forge

.

Workspace
Soundforge

workspace :

Sound Forge - Toolbar

Sound Forge

:
2 file:

(clip, song )

File New.
- open
toolbar File Open.
-

Sound Forge

:
1. File Save As
2. Save In.
3. Save As Type: .wav
4. Save

Sound Forge

.
.

Zoom in/out:
Level Zoom in/out:
Maximize Width: view
.
Playbar Buttons:
, ,
loop
stop.

Sound Forge

Sound Forge

play.

,

play.
.

Sound Forge

:
, ,
,
.

.


.

Sound Forge

:
Cut:
Copy:
Paste:
Paste Special:
Mix:

Crossfade:
Trim/Crop:
Clear/Delete:

Undo:

Sound Forge

:
1. Chicago.mp3
2.
3. delete
trim/crop. zoom
.

Sound Forge Effects

Effects

effects. To effects menu
effects.
Chorus:

Delay/Echo:

.
Distortion:
Dynamics:

Sound Forge Effects

...
Flange: wish washy effect
Noise Gate: extra
Pitch Bend:
Reverb:
,

Sound Forge Effects

Effects
effect
.

1.
2. effects menu bar
3.
ok
4.
effects

effects
Chicago.mp3 effect.
undo effects.

Sound Forge Process Menu

Process menu

.

Process:
Fade:
Graphic:
fades

In: (fade)
0% 100%.

.
Out: (fade)
100% 0%.

.

Sound Forge Process Menu

...
Graphic EQ:
Insert Silence: mute( )
Reverse:
Time Compress/Expand: /


Volume:

Sound Forge Process Menu

Process
Processes
.

1.
2. Process Menu Bar
3.
Ok
4.
Processes

chicago.mp3 process.
undo .

Macromedia Flash - Animation

 Macromedia Flash

flash:
.fla
.swf
.html
.flv video Flash

 Macromedia Flash

H flash Flash
shockwave flash.
flash flash
player - /,
, link,
free- , , animation ,
flash .

Bitmap VS Vector
Bitmap- , Pixel,
zoom in.
Vector-

 Group Target

:


:

:
LAN( )

 Flash

Tools
Timeline
Layers
Stage
Tabs- project(
- window )

 Flash - Tools

Tools: . 4
tools-
View-
colours- ()
()
options- properties

 Flash - Timeline

 Flash - Stage

.
( ) .

 Flash Keyframes

keyframes .

Keyframe.

frame f5

keyframe f6

Frames- shift f5

Keyframes- shift f6

insert - timeline

 Flash

Flash

, template
. Create New
Flash Document.

Properties

, tab properties
( , frame rate,
)

 Animation

animation :
1. Frame by Frame: , animation
keyframes
slides , slide
.
2. Tweens: tweens, frame by frame animation,
keyframes:
. H Flash
.
a)Shape: frame
.
b)Motion: frame
.

3. Motion Guides: ,

.

 Animation 1 Frame by Frame Animation

.
5 frames - Convert to Blank keyframes

 Animation 1 Frame by Frame Animation

.
., 1 Frame . 2
, .

.
frame
Button Onion skinning.
, Ctrl + Enter .

 Animation 2 Tween Animation - Shape

5 .
1. E keyframe frame
stage.
2. Keyframe (blank keyframe) 20 frame
5 .
3. Ctrl + Enter .
,
5 .

 Animation 2 Tween Animation - Shape

4. tween animation frames

properties tween shape. timeline frames
background
shape tweening.
H flash
. animation
frame frame .
5. Ctrl + Enter .

 Animation 3 Tween Animation - Motion

Stage .

1. frame keyframe
. symbol(f8).
20 frame keyframe 20 keyframe
Stage. Ctrl + Enter
.
,
.
2.

frames properties tween

Motion.

3. Ctrl + Enter .

 Animation 3 Tween Animation - Motion

, Tween
animation ,

fade out.
1. frame .
2. E transform tool .
3. Properties Colour Alpha 100%, .
4. Ctrl + Enter .

 Animation 4 Motion Guides

.
1. frame .
2. F8 . graphic
.
3. keyframe 20 frame Keyframe
.
4. Keyframe tweens motion. Ctrl +
Enter .M
.
() ,
Keyframes
,
.

 Animation 4 Motion Guides

5.
Motion guides. layer.

6.

Layer (Layer1)

7. Layer.

8. Tools Options Smooth.

: (object drawing)

 Animation 4 Motion Guides

9.
.

10. selection tool . options

smooth.
.
11. Layer ball path ball.
12. Ball ball path playhead
1 Frame.
13. Flash guide layer
Layer ball path,
.

 Animation 4 Motion Guides

14. guide ok

 Animation 4 Motion Guides

15.
Guide Drag layer ball ball path. !
Drag Ball
.

 Animation 4 Motion Guides

:

 Animation 4 Motion Guides

16.
. ( Playhead frame 1)

playhead Frame
. Ctrl+enter.
BUGS!!
I Flash
( ball Ball path,
, .
ball path, ball ,

( )
, .

 Animation 5 Text Animation

1. text tool
2. Properties text type static.
, font size .
3. stage flash 8.
4. esc typing mode.
5. modify break apart.
Text block, F
.

 Animation 5 Text Animation

6. animation ,
Layer .
.

 Animation 5 Text Animation

7. modify-timeline-distribute to layers.
Layer .
Layer 1 (blanc keyframe)
layers. O .
8. 1 Layer f8
. .

,
animation Keyframes F
R,
.
9. layer ,
,
10. Ctrl + Enter

Project - Animation

animation comic,

.


Buttons

uttons
1. Standard:
button
image.
2. Invisible:
Images text button.
3. Rollover:
, ,
, Image .
4. Rollover w-down: rollover

.
5. Animated:
, animation.

Standard utton
1. rectangle tool .
2. selection tool(
, )
f8.
3. type Button . library
,
.
4. Ctrl + Enter.
,
.
.

Standard utton
,
.

up,
.
keyframe hit
.
transform tool info
window-info. .

Standard utton
,
Onion skin
. , resize
alignment info, Flash
default
.

Rollover button
rollover button
over keyframe (.
properties, ).
,
over.

Rollover button with down

.
keyframe down
.

Invisible button

animation . .

action.
.
1. (
)
2. f8 .
Button .
3. Ctrl +Enter .
.

Invisible button
4.
.

5. up, over, down , .

hit.
frame Keyframe hit.

.
6. Ctrl + Enter.
, .

Invisible button 2
1. Layer 2 Layer 1.
2. Layer 2
Layer1
3.
free transform tool
.
4. Ctrl + Enter

 buttons
1. File - Import - To Stage
2.
.
3. Layer

4. keyframe, frame
5.
stage.
6. Ctrl + Enter


Action Script

Action script
script flash:
1. User based action. (.
)
2. Time based action.
Timeline(. 5 Frame, playhead

)

Actions Panel
Actions Panel panel .
actions panel, Actions
Stage.

Script Assist
Script Assist Flash
action
script Flash.
Script Assist actions panel.

Script Assist
action script Layer,

.
Action keyframes Buttons.
frame action keyframe
actions panel button
actions panel .

Action get-URL (user based action)

URL ,
action .

Action get-URL (user based action)

1. .
, flash.

2. : Window - Common Libraries - Buttons

. library
.

Action get-URL (user based action)

3. actions script assist
.

Action get-URL (user based action)

:

On release: action .
getURL: , . http://epp.teicrete.gr

Action get-URL (user based action)

Script Assist,
properties
. , Onrelease

action

Action get-URL (user based action)

4. getURL .
.
5. Ctrl + Enter

Action get-URL (user based action)

web browser
:

1. File - Publish Preview - Default(html) f12.

Settings
web
browser.

Action get-URL (user based action)

2. add location, browse
for folder .

Action get-URL (user based action)

3. web browser.
f12
.
. f12
.

Action Script - Loop

Slide show
slideshow, .
2 Button
( button)
( button) .

Import 1.jpg, 2.jpg, 3.jpg, 4.jpg.

2. B keyframe .

3. button . ,

.
4. Ctrl + Enter

Slide show

slideshow .
(. Button)
:

Slide show
1. Layer .
2. frame stop() actions panel,
.

Slide show
3. Ctrl + Enter.
, , playhead 1 Frame
stop .
4. Layers actions
slides .

Slide show
5. actions panels.
playhead Frame
. Global Functions Timeline Control - Go To.
, Go - To and Stop

Slide show - Next

5. frame . ,
type Next Frame.
button, frame
.

Slide show - Back

6.
. ( )
actions panel.
7. , Global Functions - Timeline Control - Goto. type
Previous frame
Next.

Slide show - Loop

Playhead
. loop

.
1. action script.
2. on release Statements Conditions/loops-if.

Slide show - Loop

3.
: Actionscript classes Movie - Movie Clip Properties _Current Frame

Slide show - Loop

4. current frame this.. ==

actionscript classes-movie-movie clip-properties-_total frames
total frames this,
.

Slide show - Loop

.

Slide show - Loop

. if.

Slide show - Loop

.
copy paste actions panel
: type
expression goto and stop
next frame previous frame
.
Script Assist
2 .

Slide show - Loop

Slide show - Loop

Scenes - Slide show

.

Window - Other Panels Scene, panel

+.
, frame
Scene. . Nextframe nextscene.

Scenes - Slide show

,
frame ,
:

10

Video

 Video

1. File Import Import Video.

2.
video Video web server.
.
3. browse, Video Open.
Path file path. next.
4.
video. progressive download from a web server Next.

 Video

5. .
show advanced settings
.
Frame rate, quality,
video resize video.
video checkbox encode
audio. 96kbps(stereo)
.
6. tab crop and trim video
(crop)
,
timeline video .
Next.

 Video

7. skinning
player video, .
(play, stop ),
. skin
players.
Player ,
Next.

 Video
8.
Finish.
Finish . save
.

flash video
frame . video
frame stage delete
Library Frame .
8. Ctrl + Enter

Extra Fun Mask Animation

Mask Animation

1. .
Line

2. (
shift),
stage.
snapped objects.

Mask Animation
3. .
selection tool
alt ,

:

( alt)
.
.

Mask Animation
4. alt selection tool,
.

5. ,

. ,


.

Mask Animation
6.
. ,
Ctrl + C Ctrl + Shift +V
. .

Mask Animation
7. Modify(
) -> Transform -> Flip Vertical.
. .

Properties.

Mask Animation
8.
Ctrl +C CTRL + Shif+V Modify->
Transform->Flip Horizontal .
9. Modify>Transform->Flip Horizontaly .

Mask Animation
9 : animation
Ctrl +A
free
transform tool (1) (2)
(3).

Mask Animation
10. ,
stage.

Mask Animation
11.
.
layer 1 (1), Layer(2) Mask(3).
To layer 1 Lines(
Mask )

Mask Animation
12. layer mask,
stroke.

No stroke

Mask Animation
13. 5 sec( frame rate
12fps) 5*12=60. frame 60 Layer Lines
frame F5.
60 Frames.

14. Layer mask, Keyframe F6

animation .

Mask Animation
15. , keyframe ,

free transform tool
.

Mask Animation
16. keyframe (
Layer mask), 40, properties tween
None, shape.

17. ctrl +enter .

, . ,
Layer mask mask. Ctrl
+Enter.

Mask Animation
18. .
frames.

19. Ctrl +Alt+X frames.

layer
. Insert ->New Symbol graphic
Lines.

Mask Animation

20. Frame paste frames(1).

layers(2)
1

Mask Animation
21.

, scene.

22.
Libraries.
Layer
Lines stage.

Mask Animation
23. 15 frame view->rulers

.

24. Frame 15 Keyframe(F6).

Frame 60 keyframe.

25.
.

Mask Animation
26. Tween animation
frame 35 create motion tween.
ctrl + Enter animation . Voila!
.