Vertical Projects Scroller With Tooltip

Full Screen Preview

This vertical project viewer is controlled by scroll bar. When mouse over each thumbnail, the tooltip can display title and date for it. You can

show a lot of projects that contain title, date, description and multiple large pictures with link. You can also edit link, url, target,

show time for each large picture. They can be played or paused.

Features:

- xml driven.
- use caurina tweener class for all the tween, smooth.
- use tooltip to show project name and date.
- use scroll bar to scroll all projects.
- Support SWF , JPG, PNG , GIF.
- can set width, height, corner radius, alpha, color, border width, border color and padding for background.
- can set width, height, corner radius, color and roll over color for scroll button and scroll bar.
- can set up width, height, space and mask corner radius for thumbnails.
- can set up color, alpha, corner radius and text padding for tooltip.
- can set up show time, link(link can be empty), url and target(‘_self’ or ‘_blank’

for each item
- can set up button color, hover color, text color, button corner radius
- Pause/Play large picture rotator
- instruction for every variable and every function
- include html file and swfobject.js, can publish easily.
- clean library, just drag mainMc to stage.

How to set up:

step 1:
(method one),if you want to put this to your own swf, just copy all the elements in the library panel to your own library panel, then drag ‘mainMc’ to your stage and make it invisible.
(method two),if you want it show in html, just view index.html in download.zip

step 2:
edit xml setting file, modify background parameters.
step 3:
modify scroll button and scroll bar parameters.
step 3:
modify image url, link, target and delaytime.
step 4:
modify thumbnails parameters.
step 5:
modify tooltip parameters.
step 6:
modify large picture control buttons parameters.
step 7:
modify title, description, date, thumb and large image url, link, target and show time.
step 8:
if you need, open preview.fla, edit ‘singPicTooltip’ and ‘singlePicMc’ movieclip in the library, change font color, size and face for all the embeded textfields.

XML File Structure:

<?xml version="1.0" encoding="UTF-8"?>
<portfolio
pageBorder='5'
pageBorderColor='#1D1D1D'
pageBgColor='#222222'
pageBgAlpha='0.8'
pageBgWidth='800'
pageBgHeight='480'
pageBgCornerRadius='10'
padding='20'

scrollBarCornerRadius='10'
scrollBarBgHeight='6'
scrollBarBgColor='#1D1D1D'
scrollBarBtnWidth='100'
scrollBarBtnHeight='15'
scrollBarBtnColor='#4B2969'
scrollBarBtnOverColor='#ff6600'
scrollBarBtnTime='1'

picWidth='120'
picHeight='120'
picCornerRadius='15'
picSpace='15'

toolTipBgColor='#ffffff'
tooltipBgAlpha='0.9'
tooltipPading='10'
tooltipCornerRadius='10'

numBtnSize='20'
numBtnCornerRadius='5'
numBtnSpace='10'
numBtnColor='#4B2969'
numBtnMouseOverColor='#ff6600'
numColor='#ffffff' >
<projects>
<work>
<title>Adfish Rose</title>
<date>December 4th, 2007</date>
<thumb>images/thumbs/flower1.jpg</thumb>
<largeImgs>
<item src='images/largeImgs/flower1_L.jpg' href='flashden.net/user/mx9580' target='_blank' showTime='3' />
<item src='images/largeImgs/flower2_L.jpg' href='' target='_blank' showTime='3' />
</largeImgs>
<description><![CDATA[DESCRIPTION TEXT]]></description>
</work>
</projects>
</portfolio>