Loading External Images
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.
Setting up the project
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.
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.
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:
loader.load( imageURL );
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.
Select the first frame of your movie and open the ActionScript panel. Add the following code:
myBS.addElement( "imageLoader", "imageURL:images/1.jpg" );
myBS.addElement( "imageLoader", "imageURL:images/2.jpg" );
myBS.addElement( "imageLoader", "imageURL:images/3.jpg" );
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.
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:
but_previous.onPress = function()
but_next.onPress = function()
but_first.onPress = function()
but_last.onPress = function()
Now the project can be tested. You could create much more attractive interface with an ease, add preloaders... The result is shown below.