LiveArt Mini Demo and Tutorial

LiveArt Mini Example

About LiveArt Mini

This is a Flash WYSIWYG component for rich visualization of texts. Your clients will be able to preview their custom designed texts and graphics on various products you offer: t-shirts, towels, boat signs, greeting cards and other.

No Flash programming knowledge is required! You should only use HTML and JavaScript to preview the product or visualize the previously saved templates. A little knowledge of XML is needed to configure your LiveArt.

How to Insert LiveArt Into the Page

Follow these 3 easy steps to get LiveArt working for your website or shopping cart:

Insert Flash object into your page
Set up config file
Configure your server-side for accepting orders

1. Insert Flash object into your page

You may insert Flash into page as you like. We recommend use Adobe method (as in this file) or a well-known SWFObject, but you are free to choose method you like. If you wish to move focus directly to start typing text after page load, we'd recommend to enable flash content (works in IE only):

<body onLoad="document.LiveArtMini.focus();">

2. Set up config file

LiveArtMini is configured using config.xml, which should be in the same directory as LiveArtMini.swf file. Example:


				<config>

				   <form>

				      <colorMain url="xml/letteringColors.xml"/>

				      <colorShadow url="xml/letteringColors.xml"/>

				      <colorStroke url="xml/letteringColors.xml"/>

				      <font url="xml/fonts.xml"/>

				      <price previewFontSize="40" url="xml/form1sizes.xml"/>

				   </form>


				     
				   <backgroundControl url="xml/bgColors.xml"/>


				     
				   <order>

				   <send url="http://yourwebsite.com/designService?action=SaveDesign"/>

				   <cart url="http://yourwebsite.com/shoppingCart"/>

				   </order>


				     
				</config>

Tag <form> contains all the information about own content:

<colorMain url="file.xml"/> – xml with color set for lettering

<colorShadow url="file.xml"/> – xml with color set for shadow

<colorStroke url="file.xml"/> – xml with color set for outline

<font url="file.xml"/> – xml with font list. Also you will need the font files

<price url="file.xml"/> – xml with sizes and pricing options per size. We employ simple calculating algorythm that counts total on per-symbol price. An optional attribute previewFontSize – can be used for text size (in points) of text preview. Default size is 40.

Tag <backgroundControl> has only one attribute – url – xml file with color set for background

Tag <order> is descibed in step 3.

Color XML structure:


				<list>


				   <item title="Black" hexValue="#000000" />

				   <item title="Pink" hexValue="#FFC0CB" />

				   <item title="Gold" hexValue="#FFD700" />


				</list>

title – color name

hexValue – hex color code. Acceptable values are HTML format (e.g. #112233) and as hex number (e.g. 0x112233)

Price XML:


				<list>


				   <item title="2''" price_per_letter="4" />

				   <item title="4''" price_per_letter="5" />

				   <item title="6''" price_per_letter="11" />


				</list>

title – text shown as label in size drop-down menu.

price_per_letter – price for 1 letter of text entered by user.

fontSize (optional) – size (in points) of text preview. You may use this attribute to enable preview of the chosen size; alternatively, preview calculates size automatically as user types in more and more text.

Font XML:


				<root>


				   <font name="Arial" className="Arial" url="fonts/arial.swf"/>

				   <font name="Comic Sans" className="ComicSans" url="fonts/comicSans.swf"/>

				   <font name="Times New Roman" className="TimesNewRoman" url="fonts/times.swf"/>


				</root>

name – font name in drop-down menu for font selection.

className – class name of embedded font.

url – generated .swf file with embedded font.

3. Configure your server-side for accepting orders

<order> – node with everything connected with order

sent – service URL for sending design specification as POST variables that contain design description (XML document). XML document can then be either transformed or stored to your back-end.

Example of design specification:


				<design>

				<form letteringText="Simple Text" letteringType="Arc Lettering" font="Arial" size="4''" colorName="Black" shadow="true" shadowColorName="Black" stroke="true" strokeColorName="Black" backgroundColor="White" price="30"/>

				</design>

cart – after sending the browser is redirected to url (in same window)

HOME License Purchase FAQ Contact Us