BZProGettingStarted

B A N N E R Z E S TG e t t i n g S t a r t e d

A Q U A F A D A SGet the most o f your digital l i fe

C a p O m e g a , R o n d P o i n t B e n j a m i n F r a n k l i n 3 4 9 6 0 M o n t p e l l i e r F r a n c e

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

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

BannerZest vs BannerZest ProBannerZest 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 BannerZestIf 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

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 BannerZestWhen you launch BannerZest you will get the following window (left: STD version, right: PRO version) :

Getting Started with BannerZest Introduction

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 bannerOnce 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:

Getting Started with BannerZest Introduction

4

MediaThe 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.

Getting Started with BannerZest Introduction

5

ThemesThe 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.

Getting Started with BannerZest Introduction

6

1 A Theme Development Kit is available. Please contact [email protected] 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

SettingsThe 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...

Getting Started with BannerZest Introduction

7

PublishingThis 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.

Getting Started with BannerZest Introduction

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 dependenciesA 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.

Getting Started with BannerZest Introduction

9

Publishing your bannerIn 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:

Getting Started with BannerZest Introduction

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.

Getting Started with BannerZest Introduction

11

The User InterfaceGetting familiar with the various parts of the User Interface.

The Main WindowThe 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

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 PaletteThe 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 modeYou can access the image editing mode by either:

Getting Started with BannerZest The User Interface

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.

Getting Started with BannerZest The User Interface

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).

Getting Started with BannerZest The User Interface

15

The Single Image ViewThe 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

Getting Started with BannerZest The User Interface

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

Getting Started with BannerZest The User Interface

17

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

•

Getting Started with BannerZest The User Interface

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.

Getting Started with BannerZest The User Interface

19

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

Getting Started with BannerZest The User Interface

20

Media Aspect Ratio

Theme handling of the media aspect ratioThemes 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

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)

Getting Started with BannerZest Media Aspect Ratio

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.

Getting Started with BannerZest Media Aspect Ratio

23

A Note on banner sizeAs 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 ratioIn 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:

Getting Started with BannerZest Media Aspect Ratio

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)

The visible part of the media

This part of the image is masked

Scale control

The final size of the media after the crop.

Getting Started with BannerZest Media Aspect Ratio

25

Case 2 : The theme does not impose a fixed aspect ratioBannerZest 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:

Getting Started with BannerZest Media Aspect Ratio

26

Switching to Image Editing mode shows the following:

Getting Started with BannerZest Media Aspect Ratio

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.

Getting Started with BannerZest Media Aspect Ratio

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 ratioSome 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.

Getting Started with BannerZest Media Aspect Ratio

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:

Getting Started with BannerZest Media Aspect Ratio

30

SummaryDifferent 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

CROP

The banner imposes the media aspect ratio

Water Apparition,

Exploda

Fixed aspect ratio (*) Fixed aspect ratio

The banner size im-poses the media as-pect ratio

Simple Slideshows No constraint Fixed aspect ratio

The theme does not impose any con-straint on the media 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 im-pose a fixed aspect ratio.

Getting Started with BannerZest Media Aspect Ratio

31

Choosing and preparing your media

Choosing the content of your bannerCurrently, 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 conversionWhen 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

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.

Getting Started with BannerZest Choosing and preparing your media

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 sourcesThe Media browser gracefully handles offline sources and displays a little warning next to the unavailable sources.

Getting Started with BannerZest Choosing and preparing your media

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 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 updateChanging 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

Date formatBannerZest lets you control the format used to display dates via the application Pref-erences

SizeAs 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 ratioAs 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.

Getting Started with BannerZest Customizing your banner

37

BorderAll 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.

Getting Started with BannerZest Customizing your banner

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.

Getting Started with BannerZest Customizing your banner

39

SubTitleAs 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.

Getting Started with BannerZest Customizing your banner

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

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 SecurityFlash 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

Getting Started with BannerZest Publishing

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).

Getting Started with BannerZest Publishing

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:

Getting Started with BannerZest Publishing

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 serverFTP 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.

Getting Started with BannerZest Publishing

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 siteYour 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.

Getting Started with BannerZest Publishing

46

Understanding BannerZest's FTP configuration dialogTo 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.

Getting Started with BannerZest Publishing

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.

Getting Started with BannerZest Publishing

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 - ConfigurationBannerZest 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:

Getting Started with BannerZest Publishing

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:

Getting Started with BannerZest Publishing

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:

Getting Started with BannerZest Publishing

51

Integrate your bannerOnce 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-

Getting Started with BannerZest Publishing

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.

Getting Started with BannerZest Publishing

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

Getting Started with BannerZest Publishing

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 bannerOnce 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.

Getting Started with BannerZest Publishing

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 ressourcesWhere 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