BZPro Getting Started

A Q U A F A D A S
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 ! 1
Introduction 2
BannerZest vs BannerZest Pro 2
Installing BannerZest 2
Launching BannerZest 3
Creating the first banner 4
Media 5
Themes 6
Settings 7
Publishing 8
Saving and loading your work. 9
Understanding dependencies 9
Publishing your banner 10
The User Interface 12
The Main Window 12

i
The Information Palette 13
The Image editing mode 13
The matrix view 15
The Single Image View 16
Media Aspect Ratio 21
Theme handling of the media aspect ratio 21
Case 1: the theme imposes a fixed aspect ratio 24
Case 2 : The theme does not impose a fixed aspect ratio 26
Case 3: the banner size imposes the media aspect ratio 29
Summary 31
Choosing and preparing your media 32
Choosing the content of your banner 32
A note on media conversion 32
The Media Browser (PRO only) 33
Adding new sources. 34
Offline sources 34
Customizing your banner 36
The need to update 36
Media information 36
Size 37

ii
Media Aspect ratio 37
Border 38
Loading Screen 38
Title 39
SubTitle 40
Publishing 41
Output format 41
Output options 42
Publishing via FTP - Configuration of your server 45
What is FTP ? 45
Can everyone use FTP ? 46
The file system and your web site 46
Understanding BannerZest's FTP configuration dialog 47
Publishing via .Mac - Configuration 49
Integrate your banner 52
Modifying a published banner 55
The not-so-important-but-nonetheless-very-cool other features 56
Other ressources 57
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 don’t need to know Flash, or event pos-
sess 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 import-
ing data (BannerZest talks ‘natively’ to iPhoto, Aperture or iDive) and export-
ing (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 !
1
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 flavors: 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 haven’t already done so, get BannerZest or BannerZest Pro from our web site’s down-
load page : http://www.aquafadas.com/download-video-software.html
2
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) :
3
This window lets you drop the initial set of media files into the application to create the first
banner. To get started, simply choose some images files 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 files. 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 win-
dow, which is great if you want to browse your media files right from the start. The
Media Browser is described in details in this section.
Creating the first 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 floating palette as illustrated below:
The floating palette lets you choose between 4 tabs:
4
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 theme’s settings to
see what additional effects can be ap-
plied to the title and subtitle.
•quickly access the media editing win-

dow 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 in-
teractive. 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.
5
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 pre-
view 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 specific 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 set-
tings (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.
1 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
Settings
The last tab lets you access the theme’s
parameters. These let you fully custom-
ize the appearance of your banner. Some
parameters are common to most ban-
ners:
- loading screen: this group of pa-

rametes lets you preview the loading
screen that appears when a banner
loads its media. It lets you also cus-
tomize the appearance of this loader.
- size: this is the size of the banner in

pixels. This group of parameters is de-
scribed in detail here.
- border including the ability to define

round corners for your banner’s border
- colors, gradients, etc...
7
Publishing
This tab lets you configure your pub-
lishing settings and publish your
banner either locally (folder) or on a
remote server using your .Mac ac-
count or an FTP account.
All the publishing parameters are dis-

played on this panel and can easily be
changed. BannerZest remembers the
locations and dates where a banner
has been published. You can there-
fore always use this panel to retrieve
the HTML code for a published ban-
ner.
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.
8
Saving and loading your work.

When you are editing a banner, it is a good idea to save your work regular-
ily. 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 files are given the .bnz extension by default. You can
double-click on those files 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 specific settings such as colors, borders, timing options
When you save a banner to disk, a bnz file is created with all that data.
However, the media files themselves are not included in the banner file. Instead, Banner-
Zest will store references to those files in the form of file aliases. This means that Banner-
Zest will always find your media files, even if you move them around on your disk, because
the Finder ‘s alias system will keep track of the original files. However, if the media files 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.
9
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 in-
tegrated 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
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, includ-
ing 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 com-
patible with those online publish-
ing systems.
3. The javascript-free version. This

version should be used when
publishing on some specific 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 com-
mon 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 specified 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 that lets you access your image media
from a media browser.
The Information Palette

The information palette is a floatting palette that can be moved around your screen and hid-
den 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 specific 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
- 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 bot-
tom of the window:
: switch to Single Image View
: switch to Matrix View.
14
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
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
position the image under the mask.
Adjusting the visible portion of the media
In addition, a floating 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 fill the crop area
17
• Center : this button lets you center the media under the crop mask, without changing the
scale.
18
• Fit To Rectangle: this button centers the media and adjusts the scale to fit the media in-
side the crop rectangle.
• Original Size: this button does not change the media position but set the scale to its origi-
nal value.
19
• 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 specific 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 specific 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 fill the entire banner
area.
In the first case, the theme will crop the media to ensure that it fits in the largest box possi-
ble 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 ex-
ample 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
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
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 as-
pect 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 fixed, but do not work well when the size of the anima-
tion becomes a parameter.
Case 1: the theme imposes a fixed 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
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 fit the theme’s requirement. By default, the box is com-
puted so it fits 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
Case 2 : The theme does not impose a fixed 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
specifically by selecting a dedicated option in the theme settings.
Let’s take the example of Water Apparition. By default, the theme uses square media.
However, by going into the set-

tings 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
Switching to Image Editing mode shows the following:
27
As can be seen, there are no more crop rectangles overlayed on the individual images, show-
ing 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 han-
dles that let you control its position and aspect ratio.
You can use this rectangle to create your own crop area.
28
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 fills 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
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
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 BANNER CROP

THEMES
SIZE
The banner imposes Water Apparition, Fixed aspect ratio (*) Fixed aspect ratio
the media aspect
Exploda
ratio
The banner size im- Simple Slideshows No constraint Fixed aspect ratio
poses the media as-
pect ratio
The theme does not Water Apparition (**) Depends on the Freeform
impose any con- theme (***)
Gallery (**)
straint on the media
aspect ratio
(*) 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 im-
pose a fixed 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 im-
ages 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, Banner-
Zest 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 im-

ages 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 Light-

room catalogs. BannerZest lets you add
multiple catalogs (see below).
• iDive : if you own iDive, you can access all

sample images from your video files 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 accessi-
ble 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
Adding new sources.

You can add a new folder of images to the media browser by hitting the ‘Add Folder..;’ but-
ton:
You can add other sources by selecting the appropriate menu from the Action menu (see be-
low)
•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
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 se-
lected 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 find that the parameter you are changing seems to have no effect on the preview, con-
sider clicking on the Refresh button : this will reload the banner, refresh the preview
and reapply all parameters.
Media information
The most obvious customi-
zation of the banner con-
sists in giving a title and
subtitle to your media. This
is simply done by editing
the Title and Subtitle fields
in the Media tab.
The subtitle field defaults to

the media date, but you can
type any text in the field.
36
Getting Started with BannerZest Customizing your banner
Date format
BannerZest lets you control the format used to display dates via the application Pref-
erences
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 first parameter available in the Settings panel.
Media Aspect ratio

As discussed earlier, some themes let you decide whether the media should be displayed us-
ing their natural aspect ratio, or using an imposed (often square) aspect ratio.
37
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 flawlessly in your design.
Loading Screen
The loading screen is the screen that
appears while the banner is loading
all the assets (media files). Banner-
Zest lets you choose the visual as-
pects 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
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
SubTitle
As with titles, the subtitle section
of the settings panel lets you con-
trol 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 configured and you are satisfied with the preview, it is time
to publish it.
Output format
BannerZest publishes the banner as a SWF file named bzAnimation.swf and some
auxiliary files. These files consist in:
• an XML file named bz.xml that contains all the banner parameters
• a javascript file named bz.js that configures 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 files, 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 files, 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 files needed for the Media Viewers (PRO Version only).
In addition to these files needed by the banner, BannerZest publishes a sample html
file 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 file,
the media files and all auxiliary files) to your server via FTP.
- publish on the internet via .Mac: this option lets you send your banner (the SWF file,
the media files and all auxiliary files) to your .Mac account.
About Flash and Security

Flash has a security model that prevents local content (SWF files on your file
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 files on
the file system and uses a list of authorized folders that are registered with
the player. When a SWF file is found to be in one of these authorized folders,
Flash Player will play it, otherwise it wonʼt.
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 file in the preview.
You can control the list of local folders that are trusted folders from Flashʼs
point of view by going in the Preferences dialog and choosing the Security
section.
BannerZest automatically adds some standard folders there (for Rapid-

Weaver and Freeway). If your web site editor is creating its previews in spe-
cific folders, you might want to add them there: this will ensure that youʼll be
42
able to preview your banners while editing your site.
The PRO version lets you attach an additional MediaViewer such as Lightbox or Shad-
owBox 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
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
You can even use this setting to attach some custom javascript in the callback func-
tion that you will find in the bz.js file 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" but-
ton in Safari
//top.location=url;
//let flash handle the opening of a new window

return [url , "_top"];
}
Publishing via FTP - Configuration 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 file transfer protocol that handles all the complicated things behind file transfer op-
erations between your computer and any remote site.
45
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 host-
ing. Your welcome mail will usually contain all information about the FTP server name, login
and password.
The file system and your web site

Your web site is stored on disk, on some file system. When a web site URL contains '/', what
comes after the '/' corresponds to a folder in this file system. It is crucial to understand this.
There is therefore a very important concept: the root folder.
This is the folder, on the file 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 files that are accessible from the root
URL.
For example, the URL http://www.mysite.com/index.html points to a real file, named

index.html, that lives in the folder www. Similarly, the URL
http://www.mysite.com/products/index.html points to a real file, named index.html, that
lives in the subfolder products, inside the root folder www.
46
Understanding BannerZest's FTP configuration dialog

To configure a FTP server, you can either go to the Preferences dialog (BannerZest > Prefer-
ences...) 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 ‘+’ but-
ton 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
The server configuration panel for FTP looks like this:
• Nickname: this the name of your configuration. You will be able to reuse the
same configuration 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
• 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 find 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 file called mypage.html in this folder, and your website's URL is
www.example.com, you can view that file on the Web using the URL
www.example.com/mypage.html.
• Subfolders: because this configuration is generic for all banners that are to be
published using this server, you don’t 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 - Configuration

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 configure a .Mac account, you can either go to the Preferences dialog (BannerZest > Pref-
erences...) or choose to Edit the Remote Servers list from the Publishing tab:
49
In both cases, this will open the Servers tab from the Preferences dialog. Click on the ‘+’ but-
ton 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 configuration dialog looks like this:
50
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
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 impor-
tant 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 vari-
ous versions of the HTML code for your published banner. The HTML code produced can eas-
52
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, includ-
ing 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 com-
patible with those online publish-
ing systems.
3. The javascript-free version. This

version should be used when
publishing on some specific 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 com-
mon options.on the bannerzest Wiki.
Use the ‘Show Banner’ button to open a preview page in the navigator that integrates your
banner.
53
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
• 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 file (.bnz file), make you changes and publish it again. Be-
cause BannerZest remembers the publishing settings for the project, you won’t have to con-
figure 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 confirm that you really want to overwrite it.
Once re-published, you won’t have to change anything in the web page or blog page that in-
cludes 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 files around, BannerZest will always
find 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 file in the Finder that is currently be-
ing used by BannerZest
- BannerZest lets you create standalone copies of your banner project files. These project
files 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
fill the crop rectangle and choose a non transparent background color.
56
Other ressources
Where to find 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 find 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

BZPro Getting Started

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

BZPro Getting Started

Încărcat de

Drepturi de autor:

Formate disponibile

A Q U A F A D A S

Cap Omega, Rond Point Benjamin Franklin 34960 Montpellier France

BannerZest vs BannerZest Pro 2

Creating the first banner 4

Saving and loading your work. 9

Publishing your banner 10

The User Interface 12

The Main Window 12

The Image editing mode 13

The matrix view 15

The Single Image View 16

Media Aspect Ratio 21

Theme handling of the media aspect ratio 21

Case 1: the theme imposes a fixed aspect ratio 24

Case 2 : The theme does not impose a fixed aspect ratio 26

Case 3: the banner size imposes the media aspect ratio 29

Choosing and preparing your media 32

Choosing the content of your banner 32

A note on media conversion 32

The Media Browser (PRO only) 33

Adding new sources. 34

Customizing your banner 36

The need to update 36

Publishing via FTP - Configuration of your server 45

Can everyone use FTP ? 46

The file system and your web site 46

Understanding BannerZest's FTP configuration dialog 47

Publishing via .Mac - Configuration 49

Integrate your banner 52

Modifying a published banner 55

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

Sit back and enjoy the ride !

BannerZest vs BannerZest Pro

will add a PRO icon in the margin.

Creating the first banner

The floating palette lets you choose between 4 tabs:

•reorganize the media in the order that

•change the title, subtitle of the media.

•quickly access the media editing win-

•remove a media from the list.

To change the theme, simply click on the

You can switch from theme A to theme B

The PRO version has a larger list of

- loading screen: this group of pa-

- size: this is the size of the banner in

- border including the ability to define

- colors, gradients, etc...

All the publishing parameters are dis-

The PRO version (image on left)

Saving and loading your work.

Choose File>Open or File > Open Recent to load a previously

• the banner size and loading screen options

• the theme specific settings such as colors, borders, timing options

Publishing your banner

- publishing locally in a folder

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

1. The javascript enabled version

2. The Wordpress/Dotclear version:

3. The javascript-free version. This

The Main Window

- the selected theme

- the current settings