Frame.sc - Managing Animation Frames

Flash Tutorials - Herong's Tutorial Examples

∟SWFC Script to Generate Flash SWF Files

∟Frame.sc - Managing Animation Frames

This section provides a tutorial example on create a simple Flash animation using SWFC script with '.frame' commands.

In the previous tutorial example circle.sc, only a static image is created. In order to create some animations, we need to understand how to manage frames with SWFC script:

1. Set the "fps", frame per second or frame rate, option on the ".flash" command. For example, ".flash fps=12" means 12 frames per second, which is the common frame rate for animations.
2. Use ".frame n" commands to specify changes on specified frames.
3. Objects on frame n are inherited from frame n-1 by default.
4. Specify Flash Player parameter "loop" as "true" to play all frames repeatedly.

Now let's use these rules to create a simple animation example, frame.sc:

#- frame.sc
#- Copyright (c) 2014, HerongYang.com, All Rights Reserved.
#
.flash bbox=150x350 background=gray fps=12
.circle greenLight r=50 line=5 color=black fill=green
.circle yellowLight r=50 line=5 color=black fill=yellow
.circle redLight r=50 line=5 color=black fill=red

#- Settig up the default frame which is frame 1
   .put greenLight x=25 y=225

#- Making changes on frame 25
.frame 25
   .del greenLight
   .put yellowLight x=25 y=125

#- Making changes on frame 37
.frame 37
   .del yellowLight
   .put redLight x=25 y=25

#- Making changes on frame 61
.frame 61
   .del redLight
   .put greenLight x=25 y=225
.end

Compile and generate the HTML code:

C:\herong>\local\SWFTools\swfc frame.sc -o frame.swf

C:\herong>\local\SWFTools\swfdump -E frame.swf > frame.html

Edit circle.html and delete the extra "loop" parameter (seems to be caused a bug in SWFC compiler). Then change the "loop" parameter value to "true":

<object type="application/x-shockwave-flash" data="frame.swf"
   width="150" height="350">
<param name="movie" value="frame.swf"/>
<param name="play" value="true"/>
<param name="loop" value="true"/>
<param name="quality" value="high"/>
</object>

I have included the above code here on this page. If you are reading the Web version of this book, you should be able to see the animation played. Otherwise, you will see a static image.