📄 tutorial2.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">Loading External Images</span></p>
<P class="normal">In this tutorial we will create a Flash movie that loads external images to the BJC BlogScroller component. We will use the Macromedia Flash 2004 Loader component to load the images. If you have the Flashloaded imageLoader component then you may prefer to adapt the code to use this component instead. This example takes advantage of the fact that it is possible to pass parameters to the BlogScroller instance when calling the addElement method.</P>
<P class="normal"><B>Setting up the project</B></P>
<P class="normal"> First create an empty Flash movie. Resize the movie to the size of your choice, mine is 320x240. Drag the BlogScroller component from the Components Panel to the stage. Assign the BlogScroller an instance name, I named mine to myBS. Resize the BlogScroller to match the stage size. </P>
<HR size="1">
<h2 class="normal"><B>Creating the loader clip</B></h2>
<P class="normal"> Now we need to create a movie clip that can load the external image files to the BlogScroller. Start by selecting Insert -> New symbol. A popup dialog box will appear. Type 'imageLoader' to the 'name', check the 'Export for ActionScript' and then press the OK button. <br>
<br>
Now you have an empty symbol. Drag the Loader component to the symbol, assign it an instance name (loader) and position it so that the top left corner is in the zero point. Now resize the Loader component to the same size with the BlogScroller component (320x240). Select the first frame and open the ActionScript panel. Insert the following code to the frame: <br>
<br>
<font color="#009933">loader.load( imageURL ); </font><br>
<br>
The 'imageURL' variable is the one that we pass from the main movie to the imageLoader. Now the imageLoader symbol is ready. Click the 'Scene1' button to go back to the main movie. </P>
<HR size="1">
<h2 class="normal"><B>Adding the clips to the BlogScroller</B></h2>
<P class="normal"> Select the first frame of your movie and open the ActionScript panel. Add the following code: <br>
<br>
<font color="#009933">myBS.addElement( "imageLoader", "imageURL:images/1.jpg" );<br>
myBS.addElement( "imageLoader", "imageURL:images/2.jpg" );<br>
myBS.addElement( "imageLoader", "imageURL:images/3.jpg" ); </font><br>
<br>
The first parameter tells that the imageLoader symbol (that e just created) should be added to the BlogScroller. The second parameter is the variable that tells the imageLoader which image to load to the Loader component. You could use any external image or swf files, I have three images: 1.jpg, 2.jpg and 3.jpg. </P>
<HR size="1">
<h2 class="normal"><B>Add buttons to control the BlogScroller</B></h2>
<P class="normal"> Now we need to add four buttons to control the BlogScroller. I added buttons 'but_previous', 'but_next', 'but_first' and 'but_last'. To connect the buttons to the BlogScroller, again select the first frame and open the ActionScript panel. Add the following code to scroll the BlogScroller: <br>
<br>
<font color="#009933">but_previous.onPress = function()<br>
{<br>
myBS.scrollPrevious();<br>
}<br>
<br>
but_next.onPress = function()<br>
{<br>
myBS.scrollNext();<br>
}<br>
<br>
but_first.onPress = function()<br>
{<br>
myBS.scrollToFirst();<br>
}<br>
<br>
but_last.onPress = function()<br>
{<br>
myBS.scrollToLast();<br>
}</font><br>
</P>
<HR size="1">
<h2 class="normal"><B>Ready to test!</B></h2>
<P class="normal"> Now the project can be tested. You could create much more attractive interface with an ease, add preloaders... The result is shown below. <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_tutorial2_movie" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="bs_tutorial2_movie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="bs_tutorial2_movie.swf" quality="high" bgcolor="#ffffff" width="320" height="240" name="bs_tutorial2_movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />
</object>
</P>
<P class="normal"> </P>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -