Tutorials

Page 1

FlashEff2
Tutorials

1.
Create
an
image
show
and
hide
effect
 
 1.
Create
a
new
ActionScript
3.0
Flash
file:
File
>
New,
select
Flash
File
(ActionScript
3.0).
In
the
 Properties
panel,
set
the
frame
rate
of
the
Flash
movie
to
30
fps.
 
 2.
Import
your
image
into
your
project:
File
>
Import
>
Import
to
Stage
and
select
the
image
from
 your
local
computer
that
you
wish
to
use
for
the
effect.
 
 3.
With
the
image
selected
on
the
stage,
transform
it
into
a
symbol
(press
F8
or
Modify
>
Convert
 to
symbol).
In
the
Convert
to
Symbol
dialog
box
give
your
clip
a
name,
set
the
type
to
Movie
Clip
 and
press
OK.
 
 4.
[optional]
If
it
isn't
already
selected,
select
the
new
movie
clip
on
the
stage
and
give
it
an
 instance
name
of
"myClip".
If
you
do
not
give
it
an
instance
name,
FlashEff2
will
automatically
 assign
it
one
in
the
form
of
"InstanceName_*",
where
"*"
represents
an
index
number
(starting
 from
0).
 
 5.
Open
the
Components
panel
(Window
>
Components
or
Ctrl+F7
for
Windows/Cmd+F7
for
Mac
 OS)
and
from
the
FlashEff2
folder
select
the
component
and
drag
it
over
the
image
clip
on
the
 stage.
 
 6.
Open
the
FlashEff2
Panel
(Window
>
Other
panels
>
FlashEff2
Panel)
and
sign
in
to
your
 JumpeyeComponents
account.
If
you
are
already
signed
in,
make
sure
that
the
FlashEff2
instance
 you
placed
on
the
stage
is
selected
so
that
the
panel
will
load
the
settings
controls.
 
 7.
In
the
FlashEff2
Panel
select
the
Show
tab
to
bring
up
the
list
of
available
patterns.
In
the
 Pattern
tab,
select
Symbol
(it
is
selected
by
default)
to
list
the
symbol
patterns
and
choose
the
 FESAlpha
pattern
to
apply
an
alpha
effect.
 
 8.
This
brings
up
the
list
of
available
presets
of
the
FESAlpha
pattern
(the
Free
FlashEff2
version
 will
only
have
one
preset
available).
You
can
choose
one
of
the
presets
that
you
would
like
to
 apply
on
the
image.
If
you
have
the
Premium
Plus
version,
you'll
be
able
to
further
customize
the
 effect
by
pressing
the
"Edit
settings"
button
that
opens
the
list
of
properties
for
the
chosen
 pattern.
 
 9.
Next,
select
the
Tween
tab
to
change
the
easing
type
from
easeInOut
to
easeOut
and
set
the
 length
of
the
show
effect
(tweenDuration)
to
3
seconds.
 
 10.
The
Options
tab
allows
you
to
specify
whether
the
show
effect
will
automatically
execute
or
 not
and
the
amount
of
time
the
component
should
wait
before
applying
the
show
effect.
For
this
 example
you
can
leave
the
settings
as
they
are.
 
 11.
The
hide
effect
can
be
set
up
exactly
the
same
way
as
the
show
effect.
So
select
the
Hide
tab
 to
open
the
list
of
patterns
and
then
choose
Symbol
to
list
the
symbol
patterns.

1

12.
Select
the
"FESChaoticMasks"
pattern
and
then
select
a
preset
that
you'd
like
to
be
applied.
 
 13.
In
the
Options
tab
set
the
delay
parameter
to
5
seconds
(the
time
from
the
end
of
the
show
 effect
to
the
beginning
of
the
hide
effect).
 
 14.
Once
you
set
the
show
and
hide
effects,
you
can
test
your
file
by
pressing
Ctrl+Enter
for
 Windows
or
Cmd+Enter
for
Mac
OS.

2.
Create
a
text
show
and
hide
effect

1.
Create
a
new
ActionScript
3.0
Flash
file:
File
>
New,
select
Flash
File
(ActionScript
3.0).
In
the
 Properties
panel,
set
the
frame
rate
of
the
Flash
movie
to
30
fps.
 
 2.
Select
the
Text
Tool,
place
a
text
field
on
the
stage
and
then
write
some
text
in
the
text
field.
 
 3.
With
the
text
field
selected,
set
it
up
for
the
effect:
in
the
Properties
panel
give
it
the
instance
 name
of
"myText",
set
the
type
to
be
"Dynamic
Text",
the
anti‐alias
setting
must
be
"Anti‐alias
for
 animation",
enable
the
"Render
text
as
HTML"
option
and
press
the
Embed
button
to
open
the
 Embed
Characters
dialog
box.
In
the
dialog
box
press
the
"Auto
fill"
button
to
embed
only
the
 characters
from
the
text
field.
 
 4.
Open
the
Components
panel
(Window
>
Components
or
Ctrl+F7
for
Windows/Cmd+F7
for
Mac
 OS)
and
from
the
FlashEff2
folder
select
the
component
and
drag
it
over
the
text
field
on
the
 stage.
 
 5.
Open
the
FlashEff2
Panel
(Window
>
Other
panels
>
FlashEff2
Panel)
and
sign
in
to
your
 JumpeyeComponents
account.
If
you
are
already
signed
in,
make
sure
that
the
FlashEff2
instance
 you
placed
on
the
stage
is
selected
so
that
the
panel
will
load
the
settings
controls.
 
 6.
In
the
FlashEff2
Panel
select
the
Show
tab
to
bring
up
the
list
of
available
patterns.
In
the
 Pattern
tab,
select
"Text",
which
lists
the
text
patterns,
and
choose
the
"FETBlur"
pattern
to
apply
 an
alpha
effect.
 
 7.
In
the
presets
list
that
opens
up
(the
Free
FlashEff2
version
has
only
one
preset
for
each
 pattern)
you
can
choose
any
pre‐configured
preset
that
you
like.
 
 8.
If
you
have
the
Premium
Plus
version,
select
the
"Edit
settings"
button
to
edit
the
properties
of
 the
blur
effect.
To
change
the
way
characters
are
displayed
from
the
"preset"
property
list,
select
 "random".
This
way
the
characters
will
be
displayed
in
a
random
order.
From
the
preview
area
in
 the
top‐left
corner
you
can
see
how
the
effect
will
look
like.
If
you
want
to
use
these
settings
later
 on,
you
can
save
your
preset
by
pressing
on
the
"Save
preset"
button
and
giving
it
a
name.
 
 9.
Select
the
Tween
tab
and
check
the
"Use
custom
tweening"
option
to
allow
you
to
customize
 the
tween.
From
the
tweenType
list
select
"Bounce".
 
 10.
The
Options
tab
allows
you
to
specify
whether
the
show
effect
will
automatically
execute
or

2

not
and
the
amount
of
time
the
component
should
wait
before
applying
the
show
effect.
For
this
 example
you
can
leave
the
settings
as
they
are.
 
 11.
The
hide
effect
can
be
set
up
exactly
the
same
way
as
the
show
effect.
Thus
select
the
Hide
tab
 that
opens
the
list
of
patterns
and
then
choose
"Text"
to
list
the
text
patterns.
 
 12.
Select
the
FETMagneticWind
pattern
and
select
a
preset
that
you'd
like
to
be
applied.
 
 13.
To
further
customize
the
effect,
press
on
the
"Edit
settings"
button
(feature
available
only
for
 the
Premium
Plus
version)
and
from
the
preset
list
select
"char:
random
(d1)".
This
will
apply
the
 effect
on
characters
in
a
random
order.
 
 14.
In
the
Options
tab
set
the
delay
parameter
to
5
seconds
(the
time
from
the
end
of
the
show
 effect
to
the
beginning
of
the
hide
effect).
 
 15.
Once
you
set
the
show
and
hide
effects,
you
can
test
your
file
by
pressing
Ctrl+Enter
for
 Windows
or
Cmd+Enter
for
Mac
OS.

3.
Apply
FlashEff2
filters

1.
Create
a
new
ActionScript
3.0
Flash
file:
File
>
New,
select
Flash
File
(ActionScript
3.0).
In
the
 Properties
panel,
set
the
frame
rate
of
the
Flash
movie
to
30
fps.
 
 2.
Import
your
image
into
your
project:
File
>
Import
>
Import
to
Stage
and
select
the
image
from
 your
local
computer
that
you
wish
to
use
for
the
effect.
 
 3.
With
the
image
selected
on
the
stage,
transform
it
into
a
symbol
(press
F8
or
Modify
>
Convert
 to
symbol).
In
the
Convert
to
Symbol
dialog
box
give
your
clip
a
name,
set
the
type
to
Movie
Clip
 and
press
OK.
 
 4.
[optional]
If
it
isn't
already
selected,
select
the
new
movie
clip
on
the
stage
and
give
it
an
 instance
name
of
"myClip".
If
you
do
not
give
it
an
instance
name,
FlashEff2
will
automatically
 assign
one
to
it
in
the
form
of
"InstanceName_*",
where
"*"
represents
an
index
number
(starting
 from
0).
 
 5.
Open
the
Components
panel
(Window
>
Components
or
Ctrl+F7
for
Windows/Cmd+F7
for
Mac
 OS)
and
from
the
FlashEff2
folder
select
the
FlashEff2
and
drag
it
over
the
image
clip
on
the
stage.
 
 6.
Open
the
FlashEff2
Panel
(Window
>
Other
panels
>
FlashEff2
Panel)
and
sign
in
to
your
 JumpeyeComponents
account.
If
you
are
already
signed
in,
make
sure
that
the
FlashEff2
instance
 you
placed
on
the
stage
is
selected
so
that
the
panel
will
load
the
controls
to
make
the
settings.
 
 7.
In
the
FlashEff2
Panel
select
the
Filters
tab
to
start
applying
filters.
You'll
see
that
the
Filter
tab
 has
three
more
tabs
available:
"Select
1st
filter",
"Select
2nd
filter"
and
"Select
3rd
filter".
This
is
 because
the
panel
allows
you
to
apply
up
to
three
filters
on
the
same
target
object.
 
 8.
Select
the
first
tab
to
apply
one
filter
on
the
image.
This
will
open
the
list
of
filter
patterns

3

available.
 
 9.
From
that
list,
select
"WaterReflection"
to
apply
the
WaterReflection
filter.
 
 10.
In
the
presets
list
that
opens
up
(the
Free
FlashEff2
version
has
only
one
preset
for
each
 pattern)
you
can
choose
any
pre‐configured
preset
that
you
like.
 
 11.
To
further
customize
the
filter,
press
on
the
"Edit
settings"
button
(feature
available
only
for
 the
Premium
Plus
version),
set
the
"reflectionAlpha"
property
to
1
and
the
"reflectionRatio"
to
 127.
 
 12.
If
you
test
your
clip
now
(Ctrl+Enter
for
Windows
or
Cmd+Enter
for
Mac
OS)
you'll
see
that
 your
image
will
have
a
water
reflection.

4.
Create
buttons
and
apply
commands
with
FlashEff2

1.
Create
a
new
ActionScript
3.0
Flash
file:
File
>
New,
select
Flash
File
(ActionScript
3.0).
In
the
 Properties
panel,
set
the
frame
rate
of
the
Flash
movie
to
30
fps.
 
 2.
You
can
turn
your
images,
shapes
and
text
into
buttons
using
FlashEff2.
 
 3.
To
create
a
button
from
an
image
import
your
image
into
your
project:
File
>
Import
>
Import
to
 Stage
and
select
the
image
from
your
local
computer
that
you
wish
to
use
for
the
effect.
 
 4.
With
the
image
selected
on
the
stage,
transform
it
into
a
symbol
(press
F8
or
Modify
>
Convert
 to
symbol).
In
the
Convert
to
Symbol
dialog
box
give
your
clip
a
name,
set
the
type
to
Movie
Clip
 and
press
OK.
 
 5.
[optional]
If
it
isn't
already
selected,
select
the
new
movie
clip
on
the
stage
and
give
it
an
 instance
name
of
"myButton".
If
you
do
not
give
it
an
instance
name,
FlashEff2
will
automatically
 assign
one
to
it
in
the
form
of
"InstanceName_*",
where
"*"
represents
an
index
number
(starting
 from
0).
 
 6.
Open
the
FlashEff2
Panel
(Window
>
Other
panels
>
FlashEff2
Panel)
and
sign
in
to
your
 JumpeyeComponents
account.
If
you
are
already
signed
in,
make
sure
that
the
FlashEff2
instance
 you
placed
on
the
stage
is
selected
so
that
the
panel
will
load
the
controls
to
make
the
settings.
 
 7.
In
the
FlashEff2
Panel
select
the
Presets
tab
to
open
the
list
of
button
presets.
If
you
have
the
 FlashEff2
Premium
version,
you
will
be
able
to
select
from
multiple
pre‐configured
presets,
 otherwise
there
will
be
only
one
available:
the
default
preset.
 
 8.
To
further
customize
the
button
states
(up,
over
and
down
states)
you
can
select
the
"Edit
 settings
and
states"
button
to
bring
up
the
settings
for
the
three
states
of
the
button
(this
feature
 is
available
only
for
the
FlashEff2
Premium
Plus
version).
 
 9.
To
continue,
open
the
Option
tab
and
check
the
"useHandCursor"
option
so
that
hand
cursor
is
 displayed
over
the
button.

4

10.
Now,
you
can
test
the
flash
clip
(Ctrl+Enter
for
Windows
or
Cmd+Enter
for
Mac
OS)
and
the
 button
will
be
working
(it
reacts
to
the
mouse
activities:
roll
over,
roll
out,
press
and
release).
 
 11.
The
final
step
is
to
apply
some
action
to
the
button.
You
can
either
do
it
by
using
ActionScript
 code
to
listen
to
the
button
events
and
execute
some
actions
on
the
appropriate
one
or
simply
by
 using
FlashEff2
commands.
With
the
FlashEff2
Panel
opened,
inside
the
Button
tab,
select
the
 Command
tab.
Here
you
will
be
able
to
add
a
set
of
commands
to
your
target
object.
 
 12.
Click
on
the
"Add"
button
and
from
the
opening
list
select
"FECNavigateToURL".
This
pattern
 opens
a
web
page
in
your
browser.
 
 13.
From
the
"evenType"
list
select
"release"
to
set
up
the
pattern
to
execute
on
the
mouse
 release
action
over
the
target
button.
Leave
the
"browserTarget"
property
to
open
the
web
page
 in
a
new
window
("_blank")
and
type
the
URL
to
the
desired
web
page
in
the
"url"
text
box.
 
 14.
Test
the
application
by
pressing
Ctrl+Enter
for
Windows
or
Cmd+Enter
for
Mac
OS
and
if
you
 click
on
the
button
you
have
previously
created,
you'll
see
that
now
it
also
opens
the
target
web
 page
into
your
browser.

5.
Create
a
looping
animation
with
FlashEff2

The
easiest
way
to
create
a
looping
animation
with
FlashEff2
is
to
create
the
timeline
animation
 spanned
across
multiple
frames
as
long
as
the
FlashEff2
animation
is
playing.
It
is
very
similar
to
 creating
a
symbol
or
text
show
and
hide
animation
presented
in
the
previous
tutorials.
 
 1.
The
simplest
way
to
create
a
show
and
hide
animation
on
the
target
object
is
to
use
a
single
 FlashEff2
Component
instance
(for
both,
the
show
and
the
hide
animations).
Once
you
managed
 to
create
such
an
animation
(please
refer
to
tutorials
1
and
2)
you
need
to
make
play
again
and
 again,
in
other
words,
to
loop.
 
 2.
For
this,
you
simply
need
to
expand
the
animation
to
as
many
frames
as
necessary
to
play
the
 entire
animation.
 
 3.
First
of
all,
we
recommend
that
for
such
timeline
animations,
you
start
FlashEff2
from
the
 second
frame
on,
so
that
the
FlashEff2
has
enough
time
to
initialize.
If
you
followed
the
tutorials
 on
how
to
create
show/hide
animations
for
images
and
texts,
then
from
the
timeline
select
the
 frame(s)
containing
the
target
object
and
the
FlashEff2
Component
instance
and
drag
them
to
the
 second
frame
(you
can
otherwise
create
the
show/hide
animation
directly
on
the
second
frame).
 
 4.
Next,
you
need
to
calculate
how
many
frames
should
the
animation
play
on
the
timeline.
You
 need
to
know
the
frame
rate
of
your
Flash
clip
(at
how
many
frames
per
second
it
is
set
to
play)
 and
the
total
time
of
your
FlashEff2
animation.

 
 The
FlashEff2
animation
contains
a
show
animation
that
is
set
to
play
for
an
amount
of
time
set
in
 the
Tween
sub‐tab
of
the
Show
tab
(tweenDuration
parameter)
which
by
default
is
2
seconds.
To
 that
time
you
need
to
add
the
delay
before
the
show
animation
starts,
which
is
given
by
the
delay

5

parameter
in
the
Options
sub‐tab
of
the
Show
tab.
This
one
is
usually
0
so
the
show
animation
 starts
as
soon
as
the
FlashEff2
Component
instance
is
placed
on
the
stage,
over
the
target
object.
 Next,
there
is
a
pause
between
the
show
and
hide
animations
which
is
set
through
the
delay
 parameter
in
the
Options
sub‐tab
of
the
Hide
tab
(this
one
is
also
2
seconds
by
default)
and
finally
 the
hide
animation
which
also
has
a
tweenDuration
parameter
(2
seconds
by
default).
If
you
add
 up
these
four
values
you
get
the
total
amount
of
time
that
the
FlashEff2
Component
instance
and
 the
target
object
should
be
on
the
stage,
in
case
of
a
timeline
animation.
In
this
particular
example
 (all
values
are
left
as
defaults)
the
total
time
would
be
6
seconds:
0
seconds
(delay
for
show)
+
2
 seconds
(show
animation)
+
2
seconds
(delay
for
hide)
+
2
seconds
(hide
animations).
 
 This
value
now
has
to
be
transformed
into
a
number
of
frames.
This
can
be
achieved
simply
by
 multiplying
the
time
in
seconds
with
the
frame
rate
of
your
clip.
In
this
case
6
seconds
*
30
fps
=
 180
frames.
So
the
FlashEff2
instance
and
the
image
should
span
across
180
frames,
from
the
 second
frame
to
the
181st
frame.
 
 5.
So,
on
your
timeline
navigate
to
frame
181,
select
it
and
press
F5
to
expand
the
frames
to
181.
If
 your
FlashEff2
and
image
are
placed
on
two
separate
layers
(like
the
attached
example),
than
you
 need
to
do
this
operation
for
both
frames.
 
 6.
If
you
test
your
clip
now
(Ctrl+Enter
for
Windows
or
Cmd+Enter
for
Mac
OS)
you'll
see
that
the
 show/hide
animation
of
your
target
object
is
looping.
Once
the
hide
animation
has
finished
the
 playhead
also
reaches
the
end
of
the
timeline
and
moves
back
to
the
first
frame
to
play
the
 contents
again
and
again.

6.
Timeline
animations
with
FlashEff2

Timeline
animations
are
made
exactly
the
same
as
in
the
previous
tutorial
(Create
a
looping
 animation
with
FlashEff2).
The
attached
example
contains
a
show/hide
animation
on
an
image
 and
two
more
show/hide
animations
on
text.
All
the
assets
(FlashEff2
Component
instances,
the
 image
and
text
fields)
are
placed
on
separate
layers
to
easily
access
them
later
on.
 
 Each
set
of
animations
starts
from
a
different
frame
so
that
the
animations
are
consecutive
and
 even
more,
the
two
text
effects
have
a
cross
fade‐like
sequence:
the
show
animation
on
the
 second
text
field
starts
at
the
same
frame
where
the
hide
animation
of
the
first
text
field
is
 supposed
to
start.
So
the
two
animations
(hide
and
show)
are
playing
at
the
same
time
to
 simulate
the
cross
fade‐like
effect
between
them.
 
 The
animations
stop
at
the
very
last
frame
because
of
the
stop()
command.
If
you
would
like
them
 to
loop
continuously,
simply
remove
the
stop()
command
from
the
last
frame.

6

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.