Example: step by step

PREV
NEXT

For example you have bought this extension, and don’t know what to do next, it isn’t a problem, you can use our example as a basis!

Installing Adobe Dreamweaver extension

Unzip package ImageScroller.zip. Flash Image Scroller is distributed as a Adobe Dreamweaver 8 (or later) extension, packed as a file named ImageScroller.mxp. To install it, you'll just need to execute that file or use the Adobe Extension Manager.

Inserting

Flash object can be inserted in the web page through the menu option "Insert -> Media ->Flash Image Scroller" or the Insert Bar.

Inserting flash object in the page through the menu option.

  1. Open Adobe Dreamweaver.
  2. In the Dreamweaver authoring tool, select File -> New.
  3. In the New Document dialog box, select HTML file, and click OK.
  4. Select File -> Save. Select a folder to contain your application, name the HTML file, and then click OK.
  5. Select Insert -> Media -> Flash Image Scroller.

  6. You have to define the destination folder (you can choose or create any folder you want) where the following files: folder with scripts 'js', imageScroller.swf, config.xml, gallery.xml will be created. For example, let’s take 'Example'.

  7. Then just press OK.

Note: Before you insert Flash Object into new web page, save the HTML file.

Note: Flash Object can not be inserted into editable region or library.

Note: Take a note, that after Flash Object being inserted into page, Adobe Dreamweaver CS3 (or CS4) automatically inserts a special JavaScript (AC_RunActiveContent.js in Adobe Dreamweaver CS3, swfobject_modified.js in Adobe Dreamweaver СS4), which ensure the correct work of Flash Object in different web browsers. Make sure that in the tag <head> in the code of your HTML page the path to this file is correct and you’ve copied it onto FTP.

The path to the script file.

Adobe Dreamweaver CS3:
<script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>

Adobe Dreamweaver CS4:
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>

Note: Make sure that in the tag <head> in the code of your HTML page the path to these files are correct and you’ve copied them onto FTP.

The path to the important scripts files.

<script src="js/swfobject_modified.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/flashwindow.js" type="text/javascript"></script>

Copy files

You can put in your site folder a folder with your images, photos etc. Also if your server supports ASP.NET or PHP, you need to copy file thumb.aspx or thumb.php. For more detailed information on the use of these files see the topic 'Using server scripts'. For example, let’s create folder 'photos' (as in our example from the package ImageScroller.zip) and copy there some photos.

Setting paths

You need to set paths to the config.xml, gallery.xml. Also, if you use thumb.asxp (thumb.php) files, then set the paths to them, too.

Set paths to the files.

  1. Right click on the Flash Object in 'Design view' then choose FlashDevelopment24 Wizard -> Flash Image Scroller.

  2. Choose in the Category 'General' tab -> click Browse near the 'Configuration' field.
  3. In the dialog box, select file config.xml, and click OK.

  4. Choose in the Category 'General' tab -> click Browse near the 'Server script' field.
  5. In the dialog box, select file thumb.aspx (or thumb.php), and click OK.
  6. Choose in the Category 'General' tab -> click Browse near the 'Source' field.
  7. In the dialog box, select file gallery.xml, and click OK.
  8. Then just press OK and close window.

Note: If you didn’t use server script (thumb.aspx or thumb.php), so left the field 'Server script' empty.

Edit scroller content

The content of scroller is situated in gallery.xml (XML file). Open the gallery.xml file in Dreamweaver (File -> Open), to change the content of your scroller. Also, you can open the XML content file through FlashDevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Image Scroller).

Open gallery.xmlthrough the FlashDevlopment24 Wizard.

  1. Right click on the Flash Object in 'Design view' then choose FlashDevelopment24 Wizard -> Flash Image Scroller.
  2. In the Category list, select 'General' tab.
  3. Press the Edit button near the 'Source' field.
  4. Then just press OK and close window.

You can see a template of gallery.xml file. And the structure of your site (on the right). In the XML file you can see src="photos/photo01.jpg" so this is the path to your photo. You need to set them according your site structure. So if you have for example file myphoto.jpg, and the folder 'images' in the site folder, the path to the images will be following: src="images/myphoto.jpg".

Customizing appearance

Use FlashDevlopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Image Scroller) to adjust the component appearance by changing different attributes in different Categories. Also you can do this by changing the attributes of the tag <config> directly in the file config.xml.

After you've adjust the appearance of your scroller, you need to set the flash object width and height according to the real image gallery size (which appears in browser) by dragging the sizing handles or set width and height in the Properties.

Preview

To preview your page you’ll need to save your document Select File > Save, than Select File > Preview In Browser, and then select one of the listed browsers or press F12 (Windows) or Option+F12 (Macintosh) to display the current document in the primary browser. Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

Note: To interact your component with the page is using a Javscript, thats why set up global security settings.

That’s all!