advanced6.htm
来自「基于actionscript3.0的flashLoading控件」· HTM 代码 · 共 158 行
HTM
158 行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 { color: #003366;
font-weight: bold;
}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.underline { text-decoration: underline;
}
.style3 {
font-size: 24px;
font-weight: bold;
}
.mainlink { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000080;
}
a:link {
color: #0000FF;
}
.style8 {
color: #009933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</head>
<body>
<h2 class="style2 style3"><span style='font-family:Verdana'>How to create a box with two higher sides
</span></h2>
<p class="style2">1. Create a new fla and save it as <span class="style1">"toolbox.fla"</span>. Set the FPS to 30.</p>
<p class="style2"><span style=''>2. Draw a pattern similar to this:</span></p>
<p class="style2"><img src="images/image61.gif" width="532" height="281"></p>
<p class="style2"><span style=''><br>
3. Now create five movieclips as you did in the previous tutorials. Call them:
</span><span class="style1"> <span class="style1">"front"</span></span>,<span class="style1"> "left"</span>, <span class="style1">"right"</span>, <span class="style1">"bottom"</span>
and <span class="style1">"back"</span>. <br>
<br>
Note: There is no <span class="style1">"top"</span> for this box. Tip: Choose a centre point of registation for the <span class="style1">"bottom"</span> movieclip only. For all the other movieclips, use a bottom-center registration point:</p>
<p class="style2"><span style=""><img src="images/image62.gif" width="402" height="273"></span></p>
<p class="style2"><span style=""><br>
4. Now drop an instance of the <span class="style1">3D Box</span> component onto the stage. Test your movie to create the live preview file.<br>
</span></p>
<p class="style2"><span style="">5. Enter the following in the <span class="style1">content</span> text field: ",right,front,back,left,bottom".<br>
Note: the first clip name is omitted.</span></p>
<p class="style8">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300">
<param name="movie" value="images/image65.swf">
<param name="quality" value="high">
<embed src="images/image65.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</p>
<p class="style2"><span style=""> <br>
Try rotate the box in the above example. You'll notive that all the sides of toolbox have the same solid color which causes the inner surface
of toolbox to merge with the outer surface. Also the mirror image of the word "TOOLS" on the inner side of toolbox looks odd.<br>
<br>
We'll now create an underside for each plane, to make the inner surface of
the toolbox.</span></p>
<p class="style2">6. Open the <span class="style1">"front"</span> movieclip and
make the following change: Add a second keyframe. Remove
the"tools" texfield and change the filled color of the rectangle to grey in this keyframe.</p>
<p class="style2"><img src="images/image63.gif" width="225" height="299"> <img src="images/image64.gif" width="225" height="299"></p>
<p class="style2"><br>
<br>
7. Add
the following ActionScript code to the first frame of the <span class="style1">"front"</span> movieclip (you
can leave the comments out):</p>
<p class="style8">stop();<br>
// function "swap" is automatically called whenever this side turns
over<br>
function swap(a) {<br>
// parameter "a" is a flag ("0" is for face, "1" is for back)<br>
gotoAndStop(a+1);<br>
}<br>
// set the initial side<br>
swap(rootObject["front"+sideN]);<br>
// "sideN" is a side parameter indicating the axis number orthogonal to this side ("1","2"
or "3")<br>
// accordingly "front1", "front2", "front3" are flags indicating the axis directions
(pass to swap function, when it calls)</p>
<p class="style2"> <span style="">8. Change the other
movieclips in the same way that you changed the <span class="style1">"front"</span> movieclip. The ActionScript code is the same in all the instances. Note: half
of the clips have an inverse orientation, i.e. the first frame will the back and
the second will be the face. This depends on the axis direction.<br>
<br>
Use
the following table for this:</span></p>
<p class="style2">"front" - right orientation - first frame is
the face<br>
"left" - right orientation - first frame is
the face<br>
"bottom" - right orientation - first frame is
the face<br>
"back" - inverse orientation - first frame is
the back<br>
"right" - inverse orientation - first frame is
the back<br>
"top"
- inverse orientation - first frame is
the back</p>
<p class="style2">9. This is how it should now look:</p>
<p class="style2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300">
<param name="movie" value="images/image66.swf">
<param name="quality" value="high">
<embed src="images/image66.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</p>
<p class="style2"><span style=""> The inner surface of the <span class="style1">3D Box </span>has now been successfully
created.</span><br>
<br>
<br>
You'll notice that the connected facets still merge a little. You can correct this by applying a thin black line to each vector shape:</p>
<p class="style2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300">
<param name="movie" value="images/image67.swf">
<param name="quality" value="high">
<embed src="images/image67.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</p>
<p class="style2"><br>
<br>
Alternativelly, you can add a gradient to the inner surfaces:</p>
<p class="style2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300">
<param name="movie" value="images/image68.swf">
<param name="quality" value="high">
<embed src="images/image68.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</p>
<p class="style2"> </p>
<p class="style2"><span style="">You may also wish to use use bitmaps instead of vector elements to create something like this:</span></p>
<p class="style2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
<param name="movie" value="images/image69.swf">
<param name="quality" value="high">
<embed src="images/image69.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
</p>
<p class="style2"><br>
Experiment and have fun! :)</p>
<p class="style2"> </p>
<p class="style2"> </p>
</body>
</html>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?