Introduction

The “Flash Image Rotator“ displays selected images and then rotates between the images. Several extended and optional features allow you to:

· select the time to rotate each image

· fade between images

· display the images in either sequential or random order, etc.

This document is a detailed guide for using the “Flash Image Rotator” module. Each of the tasks available are described in the appropriate sections of this document.

Note: this manual assumes prior experience with DotNetNuke application. For further information about DotNetNuke, please consult the DotNetNuke manual.


Installation Procedure

Included in your download are either one (If you only purchased the PA) or two (If you purchased the PA and Source Code) zip files. One zip file is the source code to the application, and the other zip file is the module which you can upload to your site.

When you extract the files, you will notice that it extracts two zip files (note: only one if you just purchased the PA).

  • DataSprings_FlashImageRotator_Module.zip - file for installing “Flash Image Rotator” with your DNN

· DataSprings_FlashImageRotator_Source.zip - source zip file you can use in order to make any changes to the application (note: meant for advanced users)

In order to install your “Flash Image Rotator” module, login with an account to your DNN site as a host or administrator account. Once logged in, Navigate to the Admin or Host menu item, and click on the “Module Definition”.

Figure 1: Installation procedure (step 1/7)

The following screen will be displayed.

Figure 2: Installation procedure (step 2/7)

Click on the “Upload New Module” to continue installing “Flash Image Rotator” and the following screen will be displayed.

Figure 3: Installation procedure (step 3/7)

Click on the “Browse” button and the dialog window for locating the installation file “DataSprings_FlashImageRotator_Module.zip” will be displayed.

Figure 4: Installation procedure (step 4/7)

Locate the “DataSprings_FlashImageRotator_Module.zip” and click on the “Open” button. The following screen will be displayed.

Figure 5: Installation procedure (step 5/7)

Click on the “Add” link inside this screen in order to add the module and it will be added to the list.

Figure 6: Installation procedure (step 6/7)

Select the “DataSprings_FlashImageRotator_Module.zip” file and click on the “Upload New File” link. The installation will begin and in couple of moments the screen informing you on successful completion will be displayed.

Figure 7: Installation procedure (step 7/7)

Note: please keep track of any errors that appear during the installation. These errors can be helpful if your module has problems.


Adding Flash Image Rotator module to a page

In order to add “Image Flash Rotator” module to a desired page follow these steps:

1. Select the “Add New Module” radio button

2. Choose “Flash Image Rotator” from the “Module” pull down menu

3. Click on the “Add” link (or the arrow icon [image]).

Figure 8: Adding a module to a page

The “Flash Image Rotator” module will be added to the page. Click on the arrow next to the title of the module in order to open the main menu.

Figure 9: Opening the module main menu

Note: see section Flash Image Rotator Main Menu for further information on main menu options.


Flash Image Rotator Main Menu

This section of the document will give the definition of the “Flash Image Rotator” main menu. In order to start using the main menu, click on the arrow next to the title “Flash image Rotator”.

Figure 10: Opening the settings menu

The main menu will be displayed.

Figure 11: Image Rotator Main Menu

The following options are available inside this screen:

  • Manage Settings – option for managing “Flash Image Rotator” display settings (see section Managing Module Display Settings)

  • Help – option for accessing this manual

  • Online Help - option for accessing this manual

  • Print – option for printing the page

  • Settings – option for managing “Flash Image Rotator” general settings (see section Flash Image Rotator General Settings)

  • Delete – option for deleting a module (see section Deleting a module)

  • Move – option for placing the module in the desired part of the page:

    • Move Down

    • Move Bottom

    • Move To LeftPane

    • Move To RightPane


Managing Module Display Settings

In order to start managing “Flash Image Rotator” display settings, choose option “Manage Settings” from the main menu.

Figure 12: Choosing option "Manage Settings"

The following screen will be displayed (note: the page is presented with 2 screenshots).

Figure 13: Managing settings (screen 1/2)

The following parameters are available inside the first part of the screen:

  • Select the display order – use this pull down menu to define the display order for the images

    • Random – if you choose “Random”, images you set will be displayed randomly

    • Sequential – if you choose “Sequential” images will be displayed by the order they have been uploaded

  • Timing per image – enter the amount of time (in seconds) one image will be displayed; e.g. 7 seconds

  • Fading speed per image – enter the amount of time (in seconds) for fading the image;

  • Loop Image Rotations – choose “Yes” if you want the images to rotate indefinitely or “No” if you only want to rotate the set of images once

  • Flash Object Width – field for setting the desired width of the flash object containing the images (e.g. 200 pixels)

  • Flash Object Height - field for setting the desired height of the flash object containing the images (e.g. 200 pixels)

    • Note: you should adjust the dimensions of images according to the flash object width and height in order to avoid image distortion

  • Object Transparent – tick this checkbox if you want the flash object to be transparent

  • Flash Object Quality – pull down menu for choosing the desired quality of flash object between the following options:

    • High

    • Medium

    • Low

    • Note: the higher the quality, the more time it will take for flash object to be loaded in end user’s browser

  • HTML Background Color – field for defining background color of the flash object; the colors are defined as hexadecimal values (e.g. #ffffff)

    • Note: see http://www.w3schools.com/html/html_colors.asp for further information on colors

  • Display Image Descriptions – choose one of the options for displaying image descriptions

    • No description – choose this option if you do not want to display image descriptions

    • Tooltips – choose this option if you want the description to be displayed as a tooltip once the user places the mouse over the image

    • Under Image – choose this option if you want the description to be displayed under the image

  • Pause Rotations on Mouse Hover – choose “yes” to enable the users to pause the rotations and keep on one image when they place the mouse over that image; choose “no” to disable this option

  • Image URL Target – the following options are available if you choose to set an URL the use will visit if they click on the image

    • _Self (Same Page) - once the user clicks on the image, he will be redirected to the URL in the same browser window

    • _Blank (New Page) - once the user clicks on the image, he will be redirected to the URL in a new browser window (i.e. popup window)

    • _Parent (Parent Page) - once the user clicks on the image, he will be redirected to the URL in the parent browser window

  • Effects Type – pull down menu for choosing the desired method of applying effects

    • Random – effects will be used randomly (the transitions between images)

    • Linear – effects will be used in the predefined order and always in the same way

  • Image Effects – choose the desired effects that will be applied to images i.e. transitions between images

      • Note: at least one effect should be applied

    • Image Fade – choose this effect to have the images fade out and into a new image (see section Fade Effect Example)

    • Checkered Blocks – choose this effect to have checkered blocks displayed as a transition between images (see section Checkered Blocks Effect Example)

    • Circular Warp – choose this effect to have a circular warp displayed as a transition between images (see section Circular Warp Effect Example)

    • Rectangle Close – choose this effect to have a rectangle effect transition between the images (see section Rectangle Close Effect Example)

Figure 14: Managing settings (screen 2/2)

The second part of the screen contains the following parameters:

  • File Location

  • File Name

  • - option for adding a new image (see section Adding a new image)

  • - option for removing an image (see section Removing an image)

  • - arrows for moving the files in the list up and down and therefore setting the desired order of appearance for the images (note: the “Sequential” order of appearance should be chosen from the “Select the display order” pull down menu)

After setting the desired parameters, click on the “Update” button and the changes will be saved.


Fade Effect Example

The following screenshot demonstrates the “Fade” effect.

Figure 15: Fade Effect Example


Checkered Blocks Effect Example

The following screenshot demonstrates the “Checkered Blocks” effect.

Figure 16: Checkered Blocks Effect Example


Circular Warp Effect Example

The following screenshot demonstrates the “Circular Warp” effect.

Figure 17: Circular Warp Effect Example


Rectangle Close Effect Example

The following screenshot demonstrates the “Rectangle Close” effect.

Figure 18: Rectangle Close Effect Example


Adding a new image

In order to add a new image, choose option “Manage Settings” from the main menu (see Figure 12). Once the “Manage Settings” page is loaded, use the “File Name” menu to choose the desired file and then click on the green cross icon [image] .

Figure 19: Adding a new image (step 1/2)

The following screen will be displayed.

Figure 20: Adding a new image (step 2/2)

The “File ID” label will be displayed. Select the “File ID” label to maintain the image URL and description and click on the “Update” button.


Removing an image

In order to remove an image from “Flash Image Rotator” module, select the desired image and click on the X symbol.

Figure 21: Removing an image

After selecting the desired image and clicking on the “X” symbol, the page will be refreshed and the image will be deleted.


Deleting a module

In order to delete a module, choose option “Delete” from the main menu.

Figure 22: Deleting a module (step 1/2)

The dialog for confirming deletion of the module will be displayed.

Figure 23: Deleting a module (step 2/2)

Click on the “Ok” button and the module will be deleted.


Flash Image Rotator General Settings

In order to start managing general settings for “Flash Image Rotator” general settings, choose option “Settings” from the main menu.

Figure 24: Choosing option "Settings" from the main menu

The following screen will be displayed.

Figure 25: General Module Settings

The following options are available inside this screen:

  • Basic Settings – see section Managing Basic Settings

  • Advanced Settings – see section Managing Advanced Settings


Managing Basic Settings

This screen is displayed by default when you choose the “Settings” option from the main menu.

Figure 26: Managing basic settings

The following parameters are available inside this screen:

· Module Title – input field for setting the title of the module

· Permissions – part of the screen used for setting the desired permissions based on user type between the following two actions:

o View Module – checked users types will only be able to view the module

o Edit Module – checked user types will be able to edit the module

· Inherit View permissions from page – check this option if you want the module to inherit the permissions set for the page the module is placed in

After setting the desired parameters, click on the “Update” button in order to save the changes.


Managing Advanced Settings

In order to start managing advanced settings, choose option “Settings” from the main menu. Inside the “Settings” page click on the “+” symbol next to “Advanced Settings” and the following screen will be displayed.

Figure 27: Managing Advanced Settings

The following parameters are available inside this screen:

· Display Module On All Pages – tick this checkbox if you want the module to be displayed on all of the pages

· Header – text area for entering the text for the header

· Footer - text area for entering the text for the footer

· Start Date – if you would like this module not to be displayed until a particular day, set the starting data inside this input field (note: for example in case you want to introduce this module to the users starting Monday but you are getting it ready that Friday)

· End Date – use this option to automatically stop displaying the module on a specific date

After setting the desired parameters, click on the “Update” button in order to save the changes.