Flash Full Text Search Component
This is a fully customizable Flash Full Text Search Component, built with support for multiple images and texts. Everything is customizable in the XML files, including the images, the texts, the colors, the sizes and much more.
This Flash Full Text Search Component contains a handful of features and settings.It is easy to use the search in your Flash projects or as an independent Flash Search Components on your html based website. If you want to use the search in Flash file, importing it , is as moving some actionscript files around, and dragging the movieclip containing the component in your Flash file.
Features
This search component contains a handful of features and settings.
- Customize search playlist through the XML file.
- Add unlimited images/texts.
- Customizable colors from the XML file.
- Size of images customizable from the XML file.
- Auto scrolling
It is easy to use the search in your Flash projects or as an independent Flash Search Component on your html based website. If you want to use the search in a Flash file, importing it , is as moving some actionscript files around, and dragging the movieclip containing the component in your Flash file.
Skinning
Skinning is very simple as well. To edit the file you don't need any Flash experience, as all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the speed of the effects, the size of the images, the size of search component and much more.
As an example, you can set the itemHeight from the XML file and the search component will automatically resize depending on the no of image items.
The playlist is also loaded from an external XML file, so you can add unlimited images and texts. The user can quickly change the icon color, the list that contains the images.
Coding style
The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Flash Full Text Search Component such as the fonts, the PSD source files, and the Flash source files.
Text Search Component - tips and tricks
This is a fully customizable Flash Full Text Search Component, built with support for multiple images and texts. Everything is customizable in the XML files, including the images, the texts, the colors, the sizes and much more.
This Flash Full Text Search Component contains a handful of features and settings.It is easy to use the search in your Flash projects or as an independent Flash Search Components on your html based website. If you want to use the search in Flash file, importing it , is as moving some actionscript files around, and dragging the movieclip containing the component in your Flash file.
Please check our general video tutorial to se how this is done. Please make sure you check the details page, the video tutorials tab, in this product details page – select the product in the archive, on Flabell.
Skinning is very simple as well. To edit the file you don't need any Flash experience, as all the settings are loaded from an external XML file, which you can edit with any text editor. You can change the colors of the elements, the speed of the effects, the size of the images, the size of search component and much more.
As an example, you can set the itemHeight from the XML file and the search component will automatically resize depending on the no of image items.
The playlist is also loaded from an external XML file, so you can add unlimited images and texts.
The user can quickly change the icon color, the list that contains the images.
The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Flash Full Text Search Component such as the fonts, the PSD source files, and the Flash source files.
Features:
Customize search playlist through the XML file.
Add unlimited images/texts.
Customizable colors from the XML file.
Size of images customizable from the XML file.
Auto scrolling.
Folder structure:
Please navigate to the deploy folder, inside project folder. This folder contains all the files you need to upload to your server to have the Full Text Search Component work.
search/xml/settings.xml - This is where you make all changes to the look and feel of your search component.
search/xml/content.xml - This is where you make all changes to the playlist images and texts, as well as add new images/texts.
js/swfobject.js Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.
js/expressInstall.swf SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.
content/images Put your images into this folder. You can choose another folder name in your XML settings file.
preview.swf This is the Flash Full Search Text Component file which is embedded in your website.
index.html HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file.
settings.xml structure:
Below you can see what each of the attributes in the XML file means.
1. <background color="0xEEEFEF" contentMargin="15"/>
Sets the main background color of the search component and the width of the margin.
2. <search backgroundHeight="50" backgroundColor="0x000000"
textBackgroundHeight="30" textBackgroundColor="0xffffff"
titleColor="0xffffff" titleFontSize="20"
textColor="0x333333" textFontSize="14"
iconBackgroundColor="0xAC2332" iconColor="0xffffff" deleteBackgroundColor="0xB0B2B5"><![CDATA[SEARCH:]]></search>
Sets the search background height, the background color, the text background height, text background color, the title color, the title font size, the search text color, the text font size, the icon background color, the icon color and the last, the title text inside the node value.
3. <list itemHeight="80"
distanceBetweenItems="10"
visibleTextCharacters="100"
itemStrokeColor="0xE1E2E3" itemFillColor="0xffffff"
itemTitleColor="0x000000" itemTitleFontSize="18"
itemTextColor="0x666666" itemTextFontSize="12"
itemButtonBackgroundColor="0xAC2332" itemButtonBackgroundOverColor = "0xdddddd" itemButtonTextColor="0xffffff" itemButtonOverTextColor="0x000000" itemButtonTextFontSize="12"
itemImageWidth="90" itemImageHeight="60"/>
Sets the item height, the distance between list items, maximum number of characters in the item info, item stroke color, item fill color, item title color, item title font size, item text color, item text font size, item button background color, item button background over color, item button text color, item button text over color, item button text font size, item image width, item image height.
4. <scroll backgroundWidth="16"
backgroundColor="0x000000"
offset="5"
scrollerColor="0xffffff"/>
Sets the scrollbar background width, the background color, the scrub offset(margin around scrub) and the scrub color.
content.xml structure:
This xml contains the search data. It has a number of item nodes like the next one:
<item image="content/images/1.jpg" title="Title one" buttonText="more" link="http://www.flabell.com">
<info>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</info>
</item>
Every item node has three attributes: image path, title, buttonText and link.
<item image="content/images/1.jpg" title="Title one" buttonText="more" link="http://www.flabell.com">
Also, every album node contains another sub node, which represent the text of the search.
<info>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</info>
Flashvars:
In the html file you can set some variables for the component like: dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder, the images dimensions (width and height), the xml settings file path and of course, the component xml file path.
flashvars.stageW = stageW;
flashvars.stageH = stageH;
flashvars.pathToFiles = "search/";
flashvars.xmlSettingsPath = "xml/settings.xml";
flashvars.xmlContentPath = "xml/content.xml";
Get a support ticket
127105 users
Products RSS Feed
Follow us on twitter
support@flabell.com
wingxtr3me
on 20/2/12
i was wondering if theres a way so that if you click on one of the result of the search, instead of leading me to a website, it will lead me into another page inside my flash file or change an image on the page corresponding to the search item i clicked
im currently doing an interactive cd, where i want to use the search to find people and display their image and information
thanks
on 22/2/12
This kind of interaction could be solved by changing some code in the Flash project. If you need our help we can do some custom work. Send us an email at [email protected], if you're interested. Thanks!
Mark R
on 7/3/12
There is code setting focus in the as file... Any help with why it's not seeming to work? Thanks!
on 8/3/12
You'll need to set the focus on the flash movie too, in order to get the effect. This can be done by adding an onLoad handler under the "body" HTML tag:
<body onLoad="window.document.FlabellComponent.focus();" >If your Flash movie doesn't have the id/name set to "FlabellComponent" add your ID/name instead.
This should make it work.
Mark R
on 9/3/12
If I may ask another question: Is there a way to modify the actionscript so that if there are no results found, it displays a "no results" message, rather than it being completely blank in the results field? I think this would make the module even more useful. I've been trying to figure out a way "cheat" it but I can't seem to figure it out... :)
on 10/3/12
If you need this right away, please contact us for custom work at [email protected]
sasasa
on 13/4/12
on 13/4/12
www.giusispadolapittrice.it/deploy.rar
ma con delusione il programma si inceppa nella ricerca dopo aver inserito 1000 radioamatori
Grazie
I recreated the xml file see the link
www.giusispadolapittrice.it / deploy.rar
but disappointment with the program gets stuck in the search after entering 1000 amateur
thanks
1 month ago
The component can start working more slowly after entering such a big number of entries. It's not optimized for a big number of entries. If you need some optimization we could do it as custom work. Please send us an email at [email protected], if you need our help on this task. Thanks!
roberto caroleo
3 weeks, 1 day ago
In this moment I can not get it to work gives me error:
TypeError: Error # 1009: Can not access a property or method of a null object reference.
at com.vuzum.search :: Search () [/ Users / etc / Directory Name / com / vuzum / search / Search.as: 130]
at flash.display :: MovieClip / gotoAndPlay ()
preview_fla Symbol1_1/button4 :: at () [preview_fla.Symbol1_1 :: frame88: 40]
Give me a hand??
thanks Roby
2 weeks, 6 days ago
Please check out our tutorial about embedding the component in a Flash project:
http://www.flabell.com/blog/1641/embed...
It should help in this regard. The component needs to be instantiated on the stage. The tutorial explains the process.
Let me know, if you need more help. I'll be glad to help you.
headhunter007
3 days, 3 hours ago
this is an awesome component..
is it possible to remove the pictures and "more" buttons completely and increase the visible area of the description?
3 days, 2 hours ago
You can remove the button, by setting the button text to blank, like this:
<moreButton link="" target = "_blank"></moreButton>This will do it :)
yacostac
1 day, 9 hours ago
I am using this application, I am holding in my flash cs3 with as3 project, the folder structure of the load as shown in your tutorial but the truth has not been possible to load.
I need urgent application call these search within a movie clip that is inside another movie clip.
please help this application to download it from adobe link to this page I need help ....
thanks
1 day, 2 hours ago
It doesn't matter where you put the component. You just need to put the right code in the project. I'm not sure what tutorial you have watched, but this one should help you:
http://www.flabell.com/blog/1641/embed...
If you need our help embedding the component in your project, please buy a support ticket and send us your project at [email protected] We'll embed to component into your project, but we'll not make it communicate with it. That might require some custom coding made for your project.
Thanks!