📄 tutorial1.html

📁 基于actionscript3.0的flashLoading控件
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.normal0 {	color: #FF00FF;
	font-weight: bold;
}
.normal1 {	color: #CC0033;
	font-weight: bold;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style3 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; }
.style5 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.style7 {	color: #FF0000;
	font-weight: bold;
}
.style8 {	color: #0000FF;
	font-weight: bold;
}
.style9 {	color: #009933;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<p class="title"> <span class="mainTitleStyle">Creating a photo slider </span></p>
<P class="normal">In this tutorial we will be creating a photo slider with the BJC Blog Scroller component. The component makes the job very easy as it handles all the scrolling for us. To create the photo slider, you will need at least one image or swf file. </P>
<h2 class="normal"><B>Starting the project</B></h2>
<P class="normal"> First create an empty Flash project. Set the size to what ever you wan't the size of the photo slider to be. Now we need to import at least one image to the library. This can be done by selecting File -> Import -> Import to library. <br>
    <br>
  We imported five images that are about 50k in size each. My images are not of the same size, so the BlogScroller will scale them to fit the area. </P>
<HR size="1">
<h2 class="normal"><B>Creating the movie clips</B></h2>
<P class="normal"> Next we need to create a movie clip (symbol) for each of our images. To create an empty movie clip symbol, select Insert -> New symbol. A dialog box will appear. Type the name of your clip to the 'Name' textfield. We named our first clip to 'clip1'. Then check the Export for ActionScript and click the OK button. <br>
    <br>
  Now you have an empty symbol. Now we need to drag one of our images to the stage. Open the library panel (CTRL+L), drag one of the imported images to the stage so that the top left corner is in the center of the symbol. Go back to the main movie by clicking the 'Scene 1' button. Repeat these steps to create more image clips. </P>
<HR size="1">
<h2 class="normal"><B>Putting it all together</B></h2>
<P class="normal"> Now we have to add an instance of the BlogScroller to the stage and give it an instance name. We named ours to 'myBS'. Drag it from the components panel. Set the component to the same size as the Flash movie. We set ours to 320x240. Also place the component to the zero point of the movie. <br>
    <br>
  Now add two MM buttons to the stage. One on the left and one on the right. Give the left one a name 'but_previous', and the right one 'but_next'. The button labels could be for example 'Previous' and 'Next'. <br>
    <br>
  Now we need to add the images to the BlogScroller. Select the first frame of the movie and open the ActionScript panel. Use the addElement( id:String ) method to add images to the BlogScroller. Below is the full code listing including the button actions: <br>
    <br>
    <font color="#009933">myBS.addElement( "clip1" );<br>
    myBS.addElement( "clip2" );<br>
    myBS.addElement( "clip3" );<br>
    myBS.addElement( "clip4" );<br>
    myBS.addElement( "clip5" );<br>
    <br>
    <br>
  but_previous.onPress = function()<br>
  {<br>
&nbsp;&nbsp;&nbsp;&nbsp;myBS.scrollPrevious();<br>
  }<br>
  <br>
  but_next.onPress = function()<br>
  {<br>
&nbsp;&nbsp;&nbsp;&nbsp;myBS.scrollNext();<br>
  }<br>
  <br>
  stop();</font><br>
</P>
<HR size="1">
<h2 class="normal"><B>Ready for a test</B></h2>
<P class="normal"> Now, if everything has been set up correctly, the photo slider works. You can also add buttons to go to the last and the first images. The BlogScroller properties can also be adjusted to make the scrolling look different. <br>
    <br>
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240" id="bs_tutorial1_movie" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="bs_tutorial1_movie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="bs_tutorial1_movie.swf" quality="high" bgcolor="#ffffff" width="320" height="240" name="bs_tutorial1_movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />        
  </object>
</P>
<P class="normal">&nbsp;</P>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -