Scroll Pane component (with loaded images)

Name of the project: Scroll pane component

Program: Flash (AS2/AS3)

SCROLL PANE DESCRIPTION:

A Scroll Pane component that display objects (PNG or JPEG files) in their designated picture holders.

After the scroll pane has loaded, it shows its content (but only 4 rows of elements are visible).

In the scrolling area there are 12 rows of elements and each row consist of:

a) 1 Shelf that has:

-1 Name Panel and

-10 Holders with their input number;

b) The Name Panel holds:

- an auto-input number from 0-99 that shows the total number of images that are on that specific row;

- a name description (each Name Panel has 12 names to choose from: plants, cars, etc)

c) Picture Holders (10 Picture Holders on each row, 120 in total)

Each Picture Holder has an Input Number associated with it at the bottom of the holder.

d) An Input Number (from 0-99) that can be manually accesed and modified. That changes the auto-input number from the Name Panel.

ITEMS PANNEL DESCRIPTION:

A horizontal scroll pane located at the top of the scroll area, which has 12 operating tabs/buttons and each tab has its own set of 24 icons (representing the main pictures that will be loaded in the holders).

These icons can be accessed by a horizontal scroll.

The image holder can be loaded, either by dragging an item from this list in its chosen holder or by clicking the icon, followed by the holder.

Each tab has its own icons shown from the main file and not all the icons will be added in the scroll area but only the 1’st icon from the first 3 tabs. I will add them all later.

The tab icons will display their content in the Picture Holder like this:

a) Icons from 1'st tab: image is loaded in the holder from within the installed folder of the hosting server;

b) ) Icons from 2'nd tab: image is loaded in the holder from the external links (that has external WWW links associated with them);

c) Icons from 3'rd tab: image is loaded in the holder from the main file.

WINDOW PICTURE FRAME:

When the user clicks a holder (or hovers it with the mouse cursor-which one is better-should be discussed this aspect), its corresponding image is showed on a larger scale in a separate window (in the opposide side of the clicked holder-by default).

The window should be unobtrusive, showing only the loaded image without any additional frame.

There is a Window position button (on/off) that triggers the position of this window, allowing the user to view the loaded images in the center scrolling area, also.

BUTTONS:

a) Main buttons (for the scroll pane)

Located at the bottom of the scroll area, there are 12 buttons and each of them acts like a shortcut for its corresponding row (in addition to the scroll handle), showing up that specific row (ex: button nr. 12, shows up the row nr. 12).

b) Option button: that triggers all the elements on the page and activates their own "menu" that allows you to individually:

a) hide the Name Panels;

a) hide the holders (with their input number);

c) hide the shelf;

b) (optional) move the holder (with drag-and-drop) in another location on the row. In the moving process, the holder with its loaded image should remain visible;

d) Unloading-the unloading of a holder should be done manually here (in options menu) or normally, by picking another item from the Items Pannel and placing it over the previous one.

c) Save as button: for saving the working area as a PNG or JPEG in the PC.

d) Window position: for centering the picture window or by default.

-Attached image for suggestion-

Others:
-Smooth scrolling (easing) with the scrolling handle;
-Scrolling area can also be achieved with mouse scrolling (optional-only if its possible);
-The number of items in each of the 12 tabs of the item pannel or the number of picture holders will be slightly increased in the future.
-When the main scroll loads, the 1'st holder of the first 3 rows, shows an image already loaded from:
a) 1'st row: image is already loaded in the 1’st holder from within the installed folder of the hosting server (corrresponding with the 1’st icon of the 1’st tab);
b) 2'nd row: image is already loaded in the 1’st holder from the external links that has external WWW links associated with them (corresponding with the 1’st icon of the 2’nd tab);
c) 3'rd row: image is already loaded in the 1’st holder from the main file (corrresponding with the 1’st icon of the 3’rd tab). And the rest of the holders are empty (ready to be loaded by the user from the item pannel);

ActionScript Adobe Flash

Project ID: #13228796

About the project