Flash 4 Magic: Creating a Flash Product CatalogHome > Build >
Software > Flash
(1)
(2) (3) (4)
(5) (6) (7)
Page 7 of 7 - Project
11
Building The ActionScript Library
In this application, the ActionScript Library symbol contains three functions:
Initialize, AdjustView, and LoadView. You've already set up the Call statements
for these elsewhere in the movie, so type them in now - you 're nearly finished.
1. Select the ActionScript Library
layer,ensure that no objects are selected on the Stage, and create a new Movie
Clip symbol, naming it ActionScript Library.
 |
| Name the layer in the ActionScript Library
Movie Clip and add 29 frames to the layer. | |
2. In the symbol-editing mode of the ActionScript
Library Movie Clip, name the existing layer Control Actions and insert
an additional 29 frames, creating a total of 30.
3.
Select keyframe 1, label the frame Initialize, open the Properties dialog
box, and assign the ActionScript.
The Initialize script sets a number
of key variables, including the current product, feature, and variant. It also
loads the appropriate text and resets the text scroller before calling the LoadView
and AdjustView keyframes.
| Stop
FS Command ("AllowScale
",False)
Set Variable:"/:Product "="flashpack1 "
Set Variable:"/:Feature
"="interface "
Set Variable:"/:Variant "="1 "
Set Variable:"/:Text "=/:FlashPack1Text
Set Property ("/TextScroll/ScrollHandle ",X Position)=0
Call ("LoadView
")
Call ("AdjustView ") | |
4. Insert a blank keyframe at frame 11, label
the frame AdjustView, open the Properties dialog box, and, on the Actions
tab, assign the ActionScript.
AdjustView takes scroll-handle
positioning information from each of the four Scrollbars in turn and sets the
properties of View and Text accordingly. By getting the information
from all four each time, you eliminate the need for separate scripts.
The next step is the grand finale - LoadView. LoadView is the simplest
of the functions. It simply assembles a filename based on the current product,
feature,and variant values and then loads the file into the \ViewPort\View location,
thereby replacing the previous picture with the current one.
| If (GetProperty("/Zoom/ScrollHandle
",_x)>0)
Set Property ("/ViewPort/View ",X Scale)=
GetProperty("/Zoom/ScrollHandle
",_x)*2.5
Set Property ("/ViewPort/View ",Y Scale)=
GetProperty("/Zoom/ScrollHandle
",_x)*2.5
Else
Set Property ("/ViewPort/View
",X Scale)=5
Set Property ("/ViewPort/View ",Y Scale)=5
End If
Set Property ("/ViewPort/View ",X Position)=80 -((GetProperty("/ViewPort/View
", _xscale)/100)*(GetProperty("/ScrollX/ScrollHandle ",_x)*2))
Set Property ("/ViewPort/View ",Y Position)=80 -((GetProperty("/ViewPort/View
", _xscale)/100)*(GetProperty("/ScrollY/ScrollHandle ",_x)*2))
Set Variable:"/:Text.scroll "=Int((/:Text.maxscroll /80)*
GetProperty("/TextScroll/ScrollHandle
",_x)) | |
5.
Insert a blank keyframe at frame 21, label the frame LoadView, open the
Properties dialog box, and assign the ActionScript.
| Load Movie (/:Product &"_"&/:Feature
&/:Variant &".swf ","/ViewPort/View ") | |
How It Works
The Product Catalog
works in two ways. First, it has a series of buttons that set the current product,
feature, and variant. After storing this information in variables, the buttons
cause the appropriate file to be loaded into the main viewer.
The main
viewing area is simply a masked area containing the picture of the current product.
By using a mask layer, you make only a set area visible to the user.
Last, there are the scrollbars. Each of these acts as a trigger, causing the picture
and text views to be updated based on the positions of all four scroll handles.
By capturing the position data of the scroll handles, it 's possible to et the
zoom, horizontal, and vertical scroll of the picture and vertical scrolling of
the text.
Modifications
Well, that's the Product Catalog. But wait! There's one last thing left to explain:
the picture files. At the beginning of this project, you made copies of a bunch
of SwF files. These are the additional movies loaded by this particular example
of the Product Catalog. Notice the naming scheme: product_feature variant.swf.
To build your own custom catalog, create a similar set of files using product
and feature names appropriate to your situation. For example, if your first product
were named Eggs and its first feature named Color, your corresponding SwF filenames
for that product and feature would be:
Eggs_Color1.swf
Eggs_Color2.swf
Eggs_Color3.swf
This naming information is set by the product,
feature, and variant buttons and is a snap to change, making the Product Catalog
a very flexible and versatile application indeed. Plus, because the pictures are
downloaded "on demand "rather than all at once, the Product Catalog is perfect
for delivery over slower connections
|
