A

G e t th e mo s t o f yo ur digita l life

BANNERZEST
Getting Started
Cap Omega, Rond Point Benjamin Franklin 34960 Montpellier France w w w. b a n n e r z e s t . c o m

Table of Contents
Welcome ! Introduction
BannerZest vs BannerZest Pro Installing BannerZest Launching BannerZest Creating the rst banner Media Themes Settings Publishing Saving and loading your work. Understanding dependencies Publishing your banner

1 2 2 2 3 4 5 6 7 8 9 9 10 12 12

The User Interface

The Main Window

The Information Palette The Image editing mode The matrix view The Single Image View

13 13 15 16 21 21 24 26 29 31 32 32 32 33 34 34 36 36 36 37

Media Aspect Ratio

Theme handling of the media aspect ratio Case 1: the theme imposes a xed aspect ratio Case 2 : The theme does not impose a xed aspect ratio Case 3: the banner size imposes the media aspect ratio Summary

Choosing and preparing your media

Choosing the content of your banner A note on media conversion The Media Browser (PRO only) Adding new sources. Ofine sources

Customizing your banner

The need to update Media information Size

ii

Media Aspect ratio Border Loading Screen Title SubTitle

37 38 38 39 40 41 41 42 45 45 46 46 47 49 52 55 56 57

Publishing
Output format Output options Publishing via FTP - Conguration of your server What is FTP ? Can everyone use FTP? The le system and your web site Understanding BannerZest's FTP conguration dialog Publishing via .Mac - Conguration Integrate your banner Modifying a published banner

The not-so-important-but-nonetheless-very-cool other features Other ressources

iii

Welcome !
Creating an animation for your web site - how difficult can that be ?

Well, if you are not a Flash expert, this can be pretty hard and largely explains why personal web sites rarely include animated material. Even professional web sites often use animated GIFs that are rather tedious to build, but at least do not require advanced animation skills. The problem is that the end result is often not as slick and smooth as a vector based Flash animation. This is where BannerZest and BannerZest PRO come into the picture. BannerZest lets you put your ideas in motion and create stunning animations for your web site in a few clicks. You dont need to know Flash, or event possess it. BannerZest will offer customizable themes in which you simply need to add your media. BannerZest integrates easily into the digital life ecosystem, both for importing data (BannerZest talks natively to iPhoto, Aperture or iDive) and exporting (iWeb, .Mac support are included). This document will walk you through the functionalities of BannerZest and BannerZest Pro with the intend to give you a rich overview of the possibilities and original features of these tools.

Sit back and enjoy the ride !

Introduction
First, a few words to present the user interface and describe how you interact with it.

BannerZest vs BannerZest Pro

BannerZest comes in 2 avors: a Standard (STD) and Professional (PRO) version. This guide describes both versions: when dealing with a feature available in the PRO version alone, we will add a PRO icon in the margin.

Installing BannerZest
If you havent already done so, get BannerZest or BannerZest Pro from our web sites download page : http://www.aquafadas.com/download-video-software.html

Getting Started with BannerZest

Introduction

Upon download, a disk image should automatically mount on your desktop and the following window should open in your Finder:

Simply drag the BannerZest (or BannerZest Pro) icon to your Applications folder as indicated to install the software.

Launching BannerZest
When you launch BannerZest you will get the following window (left: STD version, right: PRO version) :

Getting Started with BannerZest

Introduction

This window lets you drop the initial set of media les into the application to create the rst banner. To get started, simply choose some images les from the Finder and drop them into the window. You can also choose a folder containing images, and BannerZest will add them all to the banner. You are not restricted to using les. You can also drag images from other applications such as iPhoto. BannerZest Pro includes a Media browser that can be invoked by clicking on the icon in the window status bar. This button is already present in the welcome window, which is great if you want to browse your media les right from the start. The Media Browser is described in details in this section.

Creating the rst banner

Once you have dropped some media in the drop zone, BannerZest will show you a preview of the banner using a default theme and open a new oating palette as illustrated below:

The oating palette lets you choose between 4 tabs:

Getting Started with BannerZest

Introduction

Media
The media tab lets you access all the media that you dropped into the banner. Choosing the media tab lets you : reorganize the media in the order that you like. Simply click on an image thumbnail and drag it around. change the title, subtitle of the media. Titles and subtitles are used in most themes : check the themes settings to see what additional effects can be applied to the title and subtitle. quickly access the media editing window to adjust the media crop rectangle by double clicking on the media thumbnail. remove a media from the list.

Assign a URL to every media. Assigning a URL means that your banner becomes interactive. If a viewer clicks on the media while it is showing in the banner, the browser will follow the URL link attached to the media and open the corresponding web page.

Getting Started with BannerZest

Introduction

Themes
The themes tab lets you switch the theme of the banner. BannerZest comes with a number of bundled themes and more will be added in the future 1. To change the theme, simply click on the desired theme thumbnail to see the preview window change accordingly. Please note that the size of the banner is not preserved between theme changes. You will also notice that the list of available settings will change since every thele has a specic list of settings. Note: You can switch from theme A to theme B and decide at a later time to come back to theme A. In that case, your previous settings (colors, size, borders, etc...) for theme A will be restored. The PRO version has a larger list of themes because the ability to attach URLs to the media makes it possible to create navigation themes (e.g the Accordeon theme) that would make less sense in the Standard Version.

A Theme Development Kit is available. Please contact themes@aquafadas.com for more info about the SDK and

the possibilities available to extend BannerZest. You can also visit: http://www.aquafadas.com/en/bannerzest/bannerzest_sdk.php
6

Getting Started with BannerZest

Introduction

Settings
The last tab lets you access the themes parameters. These let you fully customize the appearance of your banner. Some parameters are common to most banners: - loading screen: this group of parametes lets you preview the loading screen that appears when a banner loads its media. It lets you also customize the appearance of this loader. - size: this is the size of the banner in pixels. This group of parameters is described in detail here. - border including the ability to dene round corners for your banners border - colors, gradients, etc...

Getting Started with BannerZest

Introduction

Publishing
This tab lets you congure your publishing settings and publish your banner either locally (folder) or on a remote server using your .Mac account or an FTP account. All the publishing parameters are displayed on this panel and can easily be changed. BannerZest remembers the locations and dates where a banner has been published. You can therefore always use this panel to retrieve the HTML code for a published banner. The PRO version (image on left) has several extra options when it comes to publishing. In particular, it lets you associate a Media Viewer such as LightBox or ShadowBox to your banner so that each media can appear in full size when the user clicks on the banner.

Getting Started with BannerZest

Introduction

Saving and loading your work.

When you are editing a banner, it is a good idea to save your work regularily. Choose File > Save As... or File > Save as you would do with any other document based application Choose File>Open or File > Open Recent to load a previously saved banner. BannerZest les are given the .bnz extension by default. You can double-click on those les to lauch BannerZest and start editing your banner.

Understanding dependencies
A banner consists in the following data: the media information such as: media path, media title and subtitle, URLs, etc... the theme the banner size and loading screen options the theme specic settings such as colors, borders, timing options When you save a banner to disk, a bnz le is created with all that data. However, the media les themselves are not included in the banner le. Instead, BannerZest will store references to those les in the form of le aliases. This means that BannerZest will always nd your media les, even if you move them around on your disk, because the Finder s alias system will keep track of the original les. However, if the media les are stored on a volume that is not longer available, or if you delete the media from your disk, BannerZest will no longer be able to display your banner in its original form. You can nevertheless save a portable version of your banner called a standalone banner. Use the File>Save As Standalone... menu to achieve this.

Getting Started with BannerZest

Introduction

Publishing your banner

In order to integrate a banner in your web site, you need to put it online. Simply go to the Publish tab and click on the Publish button. This lets you choose between several options: - publishing to .Mac - publishing to FTP - publishing locally in a folder Once your banner is published, BannerZest will let you access a code snippet that can be integrated in any HTML editor as discussed in further details in the next chapters.

Previewing or getting the code of the latest version of your banner

The HTML code produced can easily be integrated in any web site editor, or blog system. BannerZest will often give you the choice between 2 or 3 versions of the HTML code:

10

Getting Started with BannerZest

Introduction

1. The javascript enabled version that has an inbuilt check for the Flash Player version and handles very gracefully non compatible versions on all browsers, including IE. This is the recommended way to integrate your banner. It works with all standalone editors and with some online publishing systems. 2. The Wordpress/Dotclear version: it is the same as the version above but has some additional formatting that makes it compatible with those online publishing systems. 3. The javascript-free version. This version should be used when publishing on some specic blog system, or on social networks such as MySpace or facebook.

The integration of a banner depends on the editor you are using. We discuss the most common options.on the bannerzest Wiki.

11

The User Interface

Getting familiar with the various parts of the User Interface.

The Main Window

The main window displays a preview of the banner, taking into account: - the media - the selected theme - the current settings

The Preview is a web view running the Flash Player which means that it displays the banner exactly as it will look like in your web page. The scale is 1:1 which means that the banner is displayed at the exact size that you specied in the Settings panel.

Standard Status Bar

Pro Status Bar

The bottom of the main window consists in the following elements:

12

Getting Started with BannerZest

The User Interface

The refresh button ; you can click on this button to apply changes to your banner or force the banner to restart playing from the beginning.

The Info button : clicking on this button will bring up (or hide) the information palette. the crop button: clicking on this button will switch to the media editing mode which lets you crop and adjust images. This is described later.

The Pro version has a media button from a media browser.

that lets you access your image media

The Information Palette

The information palette is a oatting palette that can be moved around your screen and hidden when required. As described earlier, it lets you access the 4 tabs that let you customize your banner: 1. the Media tab to control the Media 2. The Themes tab to select your theme 3. The Settings tab to control your theme specic settings. 4. The Publish tab to control publishing parameters and publish your banner

The Image editing mode

You can access the image editing mode by either:

13

Getting Started with BannerZest

The User Interface

- clicking on the Crop button

in the main window status bar,

- clicking on the crop button in the media inspector (see below)

- selecting Image Editing from the Media menu. - double-clicking on the media thumbnail.

The image editing mode lets you control the aspect ratio of your media as well as the portion of the media that is visible in the banner. Indeed, some banners will impose an aspect ratio for your media as discussed in the Media Aspect Ratio section. The image editing mode can give you two views of your media: the matrix view : where you can see 6 images at a time and quickly control how image crops will be applied. a single image view where the selected media is displayed in full in the window. This mode lets you edit the crop area in mode details. You can switch between the Single Image View and matrix image using the button at the bottom of the window:

: switch to Single Image View

: switch to Matrix View.

14

Getting Started with BannerZest

The User Interface

The matrix view

Use the arrows at the bottom of the window to move to the previous or next page of media (6 images displayed at a time).

15

Getting Started with BannerZest

The User Interface

The Single Image View

The selected media is displayed in the window. Use the arrows at the bottom of the window to move to the previous or next media.

A slider lets you change the scale of the of image in order to place a different portion of the image under the crop area, while the mouse lets you pan around to

16

Getting Started with BannerZest

The User Interface

position the image under the mask.

Adjusting the visible portion of the media

In addition, a oating palette gives you some tools that help you in adjusting the view:

Snap To Border : this option will activating snapping so that the border of the image will align automatically with the closest border of the crop area. Background Color: this is the color that will be applied to the background when the image does not ll the crop area

17

Getting Started with BannerZest

The User Interface

Center : this button lets you center the media under the crop mask, without changing the scale.

18

Getting Started with BannerZest

The User Interface

Fit To Rectangle: this button centers the media and adjusts the scale to t the media inside the crop rectangle.

Original Size: this button does not change the media position but set the scale to its original value.

19

Getting Started with BannerZest

The User Interface

Reset: this button centers the media and adjusts the scale to its original value.

20

Media Aspect Ratio

Theme handling of the media aspect ratio

Themes come in 3 categories: 1. those themes that assume a specic aspect ratio for the media. In the current version of BannerZest, some themes assume that the media is square. This is due to the fact that a particular design (e.g Exploda) works well with an imposed aspect ratio. Using a different aspect ratio would produce less convincing results. 2. those themes that do not assume a specic aspect ratio (e.g CoverFlow). The images are displayed in full without any crop. 3. those themes that apply a crop rectangle to the images that depends on the size of the banner. These are themes that display the media in the entire banner area (e.g simple slideshows) and are therefore required to crop the image so they ll the entire banner area.

In the rst case, the theme will crop the media to ensure that it ts in the largest box possible that has the imposed ratio.

21

Getting Started with BannerZest

Media Aspect Ratio

In the second case, the media will be displayed in its original aspect ratio (cf. CoverFlow example below).

In the last case, the size of the banner will drive the crop that is applied to all images (cf. Sliding Images below)

22

Getting Started with BannerZest

Media Aspect Ratio

We will now review each of these 3 scenarios below and explain how BannerZest lets you control what gets displayed in the output banner in every one of them.

23

Getting Started with BannerZest

Media Aspect Ratio

A Note on banner size As will be explained in this section, the size of the banner and the crop settings of the media are often linked. Some themes do not let you choose the banner size as you want, but impose an aspect ratio for the banner. This means that you will be able to choose the width or height, but not both of them at the same time. Why is that ? The answer has to do with the creation of themes: a number of themes are designed by Flash artists that are used to clever techniques that work well on the web, where the size of the animation is xed, but do not work well when the size of the animation becomes a parameter.

Case 1: the theme imposes a xed aspect ratio

In the case of Exploda for example, that imposes a square ratio, this means that a square box will be used to crop each of the media. The Image edition mode lets you control the way this box is positioned on your media. Entering the Image editing mode will display the following screen:

24

Getting Started with BannerZest

Media Aspect Ratio

This window shows the media in a 3x2 matrix. The square crop box is clearly visible and shows how the media will be cut to t the themes requirement. By default, the box is computed so it ts inside the original media bounding box and maximizes the visible part of the media. It is also centered. You can use your mouse to adjust the crop area by dragging the image underneath the box as described in the previous section (Image Editing Mode)

This part of the image is masked

The visible part of the media

Scale control

The final size of the media after the crop.

25

Getting Started with BannerZest

Media Aspect Ratio

Case 2 : The theme does not impose a xed aspect ratio

BannerZest has a number of themes that do not impose any restrictions on the media aspect ratio. However, this might not be the standard behaviour for the theme and needs to be set specically by selecting a dedicated option in the theme settings. Lets take the example of Water Apparition. By default, the theme uses square media.

However, by going into the settings for that theme, and by choosing a different scale mode for the media, you can switch the default behaviour to the theme and lift the constraint on media aspect ratio. With that setting, the media get displayed in their original format and aspect ratio:

26

Getting Started with BannerZest

Media Aspect Ratio

Switching to Image Editing mode shows the following:

27

Getting Started with BannerZest

Media Aspect Ratio

As can be seen, there are no more crop rectangles overlayed on the individual images, showing hereby that the images will be used without alteration. The original aspect ratio is clearly visible. But there is more. If you now click on an individual image (or double click to open it for edition), a free-form crop rectangle is displayed on top of the image. This rectangle has handles that let you control its position and aspect ratio. You can use this rectangle to create your own crop area.

28

Getting Started with BannerZest

Media Aspect Ratio

These themes let you fully control the crop area at the media levels, as can be seen in the following picture where we applied different crop rectangles for all the media in the page.

Once all the crop areas have been adjusted, you need to apply them to the media by clicking on the OK button.

Case 3: the banner size imposes the media aspect ratio

Some themes have been designed so that the media lls all the available space. In those themes (all the slideshow themes for example), you have the ability to set the banner size precisely in the Size section of the banner Settings panel.

29

Getting Started with BannerZest

Media Aspect Ratio

In the example above, we have set the banner to have a width of 500px while its height has been set to 200px. If we switch to the Image Editing mode, we can see that the banner size is driving the crop rectangle as can be seen below.

The Crop size indicated in the window is equal to the Banner Size:

30

Getting Started with BannerZest

Media Aspect Ratio

Summary
Different themes impose different constraints on the media, which in turn result in different behaviour when it comes to editing and adjusting your images (croping). The following table summarizes the different possibilities

CASE

SAMPLE THEMES

BANNER SIZE
Fixed aspect ratio (*)

CROP

The banner imposes the media aspect ratio The banner size imposes the media aspect ratio The theme does not impose any constraint on the media aspect ratio

Water Apparition, Exploda Simple Slideshows

Fixed aspect ratio

No constraint

Fixed aspect ratio

Water Apparition (**) Gallery (**)

Depends on the theme (***)

Freeform

(*) Usually, you cannot set the width and the height of the banner independently. (***) Some themes will let you choose the size in both directions, while some others will impose a xed aspect ratio.

31

Choosing and preparing your media

Choosing the content of your banner

Currently, BannerZest only supports media that are images. Most of the most common image formats are supported: JPG, TIFF, PNG, GIF, ICNS, RAW, PSD, ... Simply select pictures using the Finder and drop them either: - in the BannerZest welcome screen - in the Media tab of the BannerZest inspector.

Use the inbuilt media browser as described later in this section to access your images repositories.

A note on media conversion

When BannerZest prepares your images for publishing, it will perform 2 operations: - scale the original images in order to save space. If your banner is 200x200 pixels in size, it makes no sense to publish images in their original sizes. Instead, BannerZest will scale them down so they are not bigger than the banner. - convert them in a format that can be displayed on the web: JPG or PNG. By default, BannerZest will convert those formats that can have an alpha channel (PNG, ICNS,PSD, TIFF) in PNG, while all the others are converted in JPG. This default behavior can be overridden in the Preferences.

32

Getting Started with BannerZest

Choosing and preparing your media

The Media Browser (PRO only)

The Media browser lets you access your images from standard repositories: iPhoto : access all your photos as well as your events from the media browser. Apple Aperture: access all your Aperture libraries. BannerZest lets you add multiple libraries (see below). Adobe Lightroom: access all your Lightroom catalogs. BannerZest lets you add multiple catalogs (see below). iDive : if you own iDive, you can access all sample images from your video les as if they were individual MemoryMiner (www.memoryminer.com) : you can add any number of MemoryMiner catalogs to your media browser. Simply drag and drop a catalog or use the action button (see below) to select a catalog on disk. MemoryMiner lets you organize your photos and tag them with people and places. This information is directly accessible from the media browser. In addition, you can access the region of interest that you have created in MemoryMiner. Photo Booth: access all your Photo Booth images directly. Image folders: you can access any image folder from the media browser by simply dragging and dropping a folder of images inside the list of sources.

33

Getting Started with BannerZest

Choosing and preparing your media

Adding new sources.

You can add a new folder of images to the media browser by hitting the Add Folder..; button:

You can add other sources by selecting the appropriate menu from the Action menu (see below) Add iPhoto... : this lets you add multiple iPhoto libraries to your list. The Media Browser supports any number of iPhoto libraries in its list. Add MemoryMiner... : this lets you add a new MemoryMiner catalog to your list of sources. Add Aperture Library... : this lets you add an Apple Aperture catalog in the list of sources. BannerZest supports multiple Aperture libraries at once in the media browser. Add Lightroom Library... : this lets you add an Adobe Lightroom catalog in the list of sources. BannerZest supports multiple Lightroom catalogs at once in the media browser.

Offline sources
The Media browser gracefully handles offline sources and displays a little warning next to the unavailable sources.

34

Getting Started with BannerZest

Choosing and preparing your media

35

Customizing your banner

Making it look the way you want...

The Settings tab of the inspector panel lets you access all the settings available for the selected theme. It would be impossible to discuss all the possible options in this section. We simply want to highlight some of the key parameters that are available in most of the themes.

The need to update

Changing the values for some of the parameters will not always result in a real-time change in the preview. This is often the case when the parameter is a string (a title for example). If you nd that the parameter you are changing seems to have no effect on the preview, con-

sider clicking on the Refresh button and reapply all parameters.

: this will reload the banner, refresh the preview

Media information
The most obvious customization of the banner consists in giving a title and subtitle to your media. This is simply done by editing the Title and Subtitle elds in the Media tab. The subtitle eld defaults to the media date, but you can type any text in the eld.

36

Getting Started with BannerZest

Customizing your banner

Date format BannerZest lets you control the format used to display dates via the application Preferences

Size
As discussed earlier, all themes let you choose the size of the banner, but some themes will impose a banner aspect ratio. In the latter case, this means that you can choose either the banner width or height, but not both at the same time. The size parameter is usually the rst parameter available in the Settings panel.

Media Aspect ratio

As discussed earlier, some themes let you decide whether the media should be displayed using their natural aspect ratio, or using an imposed (often square) aspect ratio.

37

Getting Started with BannerZest

Customizing your banner

Border
All themes let you apply a border to the banner. You can choose: the border width (in pixels) the border color the corner radius to be applied. When a non-zero corner radius is used, the banner is made transparent in the corner so that it will integrate awlessly in your design.

Loading Screen
The loading screen is the screen that appears while the banner is loading all the assets (media les). BannerZest lets you choose the visual aspects of the loading screen from a list of presets. A Preview Mode is also available that will stop the banner animation and display a static loading screen : use this preview mode to maintain the loading screen in the view in order to customize it and check the effects of your settings.

38

Getting Started with BannerZest

Customizing your banner

Various loading screens available through presets.

In BannerZest Pro, you can fully customize the appearance of the loading screen by choosing colors, borders, etc...

Title
The title section of the settings panel lets you control the display of media titles. A checkbox lets you switch the visibility of all titles ON or OFF. The parameter screen lets you also choose the font size and color.

39

Getting Started with BannerZest

Customizing your banner

SubTitle
As with titles, the subtitle section of the settings panel lets you control the display of media subtitles. A checkbox lets you switch the visibility of all subtitles ON or OFF. The parameter screen lets you also choose the font size and color.

40

Publishing
Once the banner has been congured and you are satised with the preview, it is time to publish it.

Output format BannerZest publishes the banner as a SWF le named bzAnimation.swf and some auxiliary les. These les consist in: an XML le named bz.xml that contains all the banner parameters a javascript le named bz.js that congures the banner. Javascript is not used when publishing to facebook or myspace. Instead, we produce a somewhat different HTML code that does not use any javascript calls because it is not supported in those systems. reduced media les, usually published in a img folder. These are the images used inside the banner. BannerZest automatically computes the ideal size in pixels for these images from the size of the banner. The compression factor applied for JPEG images is set in the publishing tab. large image les, usually published in a folder named large. This are the large size images used when you select to use a Media Viewer (PRO version only). additional javascript and css les needed for the Media Viewers (PRO Version only).

In addition to these les needed by the banner, BannerZest publishes a sample html le named bz.html used to preview the banner.

41

Getting Started with BannerZest

Publishing

Output options When you choose to publish a banner, BannerZest will give you 3 choices: - publish to a folder: this option is useful when you want to create a local preview of your banner before you publish it online. - publish on the internet via FTP: this option lets you send your banner (the SWF le, the media les and all auxiliary les) to your server via FTP. - publish on the internet via .Mac: this option lets you send your banner (the SWF le, the media les and all auxiliary les) to your .Mac account.

About Flash and Security

Flash has a security model that prevents local content (SWF les on your le system) to be previewed in a browser, unless that content has been declared as safe for viewing. The security model is based on the location of the les on the le system and uses a list of authorized folders that are registered with the player. When a SWF le is found to be in one of these authorized folders, Flash Player will play it, otherwise it wont. When you publish your banner locally, BannerZest will modify the list of authorized folders to add the folder in which you publish. This will guarantee that Flash Player will play the local SWF le in the preview.

You can control the list of local folders that are trusted folders from Flashs point of view by going in the Preferences dialog and choosing the Security section. BannerZest automatically adds some standard folders there (for RapidWeaver and Freeway). If your web site editor is creating its previews in specic folders, you might want to add them there: this will ensure that youll be

42

Getting Started with BannerZest

Publishing

able to preview your banners while editing your site.

The PRO version lets you attach an additional MediaViewer such as Lightbox or ShadowBox to your banner. This means that a clic on a media will automatically open a larger version of the media in a popup window (see below).

43

Getting Started with BannerZest

Publishing

The size of the large images can be controlled via the Publishing dialog

The PRO version lets you also customize the hyperlinks attached to the URLs with the target URL setting:

44

Getting Started with BannerZest

Publishing

You can even use this setting to attach some custom javascript in the callback function that you will nd in the bz.js le to control precisely how you want to react to a user click. function navigateToURL(url) { //javascript popup => pb: may be blocked by browser //window.open(url); //open link in same window with javascript => pb: no "back" button in Safari //top.location=url; //let flash handle the opening of a new window return [url , "_top"]; }

Publishing via FTP - Conguration of your server

FTP can be somewhat intimidating. This section is aimed at explaining how FTP can be used to publish your banner, and how to make reference to this published banner in your web site.

What is FTP ?
FTP is a le transfer protocol that handles all the complicated things behind le transfer operations between your computer and any remote site.

45

Getting Started with BannerZest

Publishing

Can everyone use FTP?

In order to use FTP, you need to know a server and have some access rights (user/password) for it. Usually you get FTP access to a server when you subscribe to some web hosting or when you subscribe to a basic internet access via an ISP (Internet Service Provider). The amount of space you get and what you can do with it depends on your particular plan. For the rest, we will assume that you have some sort of basic hosting on a server, and that we have the following piece of information: a domain name: in our case www.mysite.com (replace mysite.com with your do-

main name). a FTP server: in our case, the server will be called: ftp.mysite.com. You will get the

correct FTP server name when you buy your web hosting plan or subscribe to a access plan with your ISP. a user/password: these let you connect to your server.

This is the most common case when you buy an domain (www.mysite.com) and some hosting. Your welcome mail will usually contain all information about the FTP server name, login and password.

The le system and your web site

Your web site is stored on disk, on some le system. When a web site URL contains '/', what comes after the '/' corresponds to a folder in this le system. It is crucial to understand this. There is therefore a very important concept: the root folder. This is the folder, on the le system that corresponds to the root of your web site. Often, this root folder is named www, and we will, in the following, assume that this is the case. What this means is that the folder www corresponds to the URL http://www.mysite.com. In other words, the root folder (e.g www) will contain all les that are accessible from the root URL. For example, the URL http://www.mysite.com/index.html points to a real le, named index.html, that lives in the folder www. Similarly, the URL http://www.mysite.com/products/index.html points to a real le, named index.html, that lives in the subfolder products, inside the root folder www.

46

Getting Started with BannerZest

Publishing

Understanding BannerZest's FTP conguration dialog

To congure a FTP server, you can either go to the Preferences dialog (BannerZest > Preferences...) or choose to Edit the Remote Servers list from the Publishing tab:

In both cases, this will open the Servers tab from the Preferences dialog. Click on the + button to add a server to the list. You can either choose a .Mac server or a FTP server. In this case, we choose FTP.

47

Getting Started with BannerZest

Publishing

The server conguration panel for FTP looks like this:

Nickname: this the name of your conguration. You will be able to reuse the

same conguration in several banners simply by choosing this nickname from the list of available servers. Server Address: the server address of your FTP server (ftp.mysite.com). User Name: the user name of your FTP server. Password: the password of your FTP server.

48

Getting Started with BannerZest

Publishing

Port: the port of your FTP server (21 by default). URL of your website: the URL of your website. Site folder: the root folder of your website (www, htdocs, html, public_html, or

mainwebsite_html). You'll usually nd a folder with one of these names in your home directory. It's called the document root, Web root or website directory, and it's the folder that corresponds to the top level of your website. For example, if you place a le called mypage.html in this folder, and your website's URL is www.example.com, you can view that le on the Web using the URL www.example.com/mypage.html. Subfolders: because this conguration is generic for all banners that are to be published using this server, you dont specify any subfolder at this level. Instead, you will specify a subfolder for your banners in the Publish tab itself (see later). For example, /banners/mybanner will be the subfolder containing the banner. The address of the folder containing the banner will be http://www.mysite.com/banners/mybanner/.

Publishing via .Mac - Conguration

BannerZest includes built-in support to publish your banner on your account on .Mac. If you already have .Mac setup correctly in the System Preferences, BannerZest will automatically use these when publishing. To congure a .Mac account, you can either go to the Preferences dialog (BannerZest > Preferences...) or choose to Edit the Remote Servers list from the Publishing tab:

49

Getting Started with BannerZest

Publishing

In both cases, this will open the Servers tab from the Preferences dialog. Click on the + button to add a server to the list. You can either choose a .Mac server or a FTP server. In this case, we choose .Mac. The .Mac conguration dialog looks like this:

50

Getting Started with BannerZest

Publishing

When accessing or setting up your .Mac account, you will often see the following dialog pop up. Click the Allow Once button or Always Allow button to authorize BannerZest to acces to

your Keychain.

If you have .Mac setup correctly, BannerZest show Your .Mac account is valid. If not, click the Open .Mac Preferences:

and setup your .Mac account:

51

Getting Started with BannerZest

Publishing

Integrate your banner

Once your banner has been published, it can easily be integrated on a web page or a blog. The bottom of the Publishing panel lets you view the publishing date and access the important information about your published banner.

Previewing or getting the code of the latest version of your banner

You can use the Show HTML button to open the HTML dialog that will let you access various versions of the HTML code for your published banner. The HTML code produced can eas-

52

Getting Started with BannerZest

Publishing

ily be integrated in any web site editor, or blog system. BannerZest will often give you the choice between 2 or 3 versions of the HTML code: 1. The javascript enabled version that has an inbuilt check for the Flash Player version and handles very gracefully non compatible versions on all browsers, including IE. This is the recommended way to integrate your banner. It works with all standalone editors and with some online publishing systems. 2. The Wordpress/Dotclear version: it is the same as the version above but has some additional formatting that makes it compatible with those online publishing systems. 3. The javascript-free version. This version should be used when publishing on some specic blog system, or on social networks such as MySpace or facebook.

The integration of a banner depends on the editor you are using. We discuss the most common options.on the bannerzest Wiki.

Use the Show Banner button to open a preview page in the navigator that integrates your banner.

53

Getting Started with BannerZest

Publishing

This page shows the banner and lets you access the code snippets that you will use in your HTML editor or blog editor. For a complete discussion of the integration steps, please visit the BannerZest Wiki: http://www.aquafadas.eu/wiki/BannerZest:How_to The following web site editors iWeb RapidWeaver Sandvox

54

Getting Started with BannerZest

Publishing

Dreamweaver Freeway

and blogs Wordpress Dotclear Blogger TypePad

are discussed in great detail. The integration with facebook and mySpace are also discussed.

Modifying a published banner

Once your banner has been published, it is very easy to modify it. Simply reopen the banner project le (.bnz le), make you changes and publish it again. Because BannerZest remembers the publishing settings for the project, you wont have to congure your FTP or .Mac options. Simply hit the Publish button in the publishing panel. BannerZest will detect that the banner already exists at the target location and will prompt you to conrm that you really want to overwrite it. Once re-published, you wont have to change anything in the web page or blog page that includes the banner because nothing has changed from the HTML side of things.

55

The not-so-important-but-nonetheless-very-cool other features

- all media are referenced via aliases. You can move your les around, BannerZest will always nd them. However, if you move your media to an external drive and disconnect that drive, BannerZest will have lost the reference on the media. In that case, it will display the media with a warning. The same happens if you accidentally delete a media le in the Finder that is currently being used by BannerZest - BannerZest lets you create standalone copies of your banner project les. These project les contain a copy of all the media at the time of saving. You can use these standalone copies to share your projects with others. - you can create borders for your media, by adjusting the scale so that they do not entirely

ll the crop rectangle and choose a non transparent background color.

56

Other ressources
Where to nd other important information about BannerZest...

The most up-to-date information about BannerZest can be found on the Aquafadas web site: www.aquafadas.com A Wiki is also available with tips and tricks, FAQs and tutorial-like pages that describe in length the various possibilities offered by BannerZest. You will also nd detailed information about the integration with web editors and blog tools. www.aquafadas.eu/wiki

A developer section will soon appear on the Wiki that describes how third party developers can developp themes for BannerZest.

57