Flip it!¶

Frontend¶

Backend¶

See detailed information about the plugin / flexform at "Plugin / Flexform" on page 19 below.

What does Flip it! do?¶

• Flip it! enables you to run over pages in PDF documents like in a real magazine.
• Flip it! offers lovely and smooth page flip transitions.
• The visitor of your website does not need any PDF plugin but a Flash plugin.
• Flip it! can convert PDF documents to SWF files automatically.
• Flip it! is configurable by both user interfaces: by the plugin/flexform and by the TypoScript Constant Editor.
• You have round about sixty properties of configuration.
• The fancybox (lightbox) is integrated.
• Flip it! extends the TYPO3 content element "File Links" and doesn't have any own plugin.
• Flip it! evaluates requirements and your configuration.
• Flip it! is supported by the DRS – the Development Reporting System. It prompts the workflow while runtime.

What do you need?¶

• If you like an auto-converting of PDF documents to SWF files, you need the SWFTOOLS (see page 35).Note: Flip it! runs without SWFTOOLS too.
• Visitors of your website need a Flash plugin.

TYPO3 from 4.5 to 6.2¶

Flip should run in TYPO3 versions

• 4.5, 4.6 and 4.7
• 6.0, 6.1 and 6.2

Fancybox isn't proper from TYPO3 6.1. See "Fancyboy: unproper in TYPO3 6.1 and 6.2" on page 44.

The current version is tested with TYPO3 6.2.

Forum¶

Flip it! has a website and a forum. Please visit:

• English: http://typo3-flipit.de/en/ German: http://typo3-flipit.de/
• http://forum.typo3-flipit.de/ Posts are welcome in English in German. Sorry the user interface is in German only.

Install SWFTOOLS (optional)¶

If Flip it! should generate SWF files automatically (this is recommended), please install the SWFTOOLS.

See "What's new" on page 35 below.

Note: This in an option. Flip it! runs without SWFTOOLS too.

Install this extension.¶

• Install this extension.
• Enable it.

Add a page, TypoScript template and a content element¶

Add a page "Flipit" to your page tree.

By the way: Page tree ids and icons¶

Upload a PDF file¶

Upload a PDF file into your content element [File Links].

If you need a sample file, please take

http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample_flipit.pdf

Upload a PDF file (DIN A/4 portrait is recommended).

• Upload a PDF file.
• Select the tab [Flip it!]
• Enable Flip it! by selecting a layout from [layout_01] to [layout_03]

Enable Flip it!¶

Enable Flip it! within your content element [File Links].

Tab [Flip it!] > Layout: from [1: ...] to [3: ...]

With download link¶

You can add a download link like in the illustration below.

Edit area tab [General] > File Description: My first Flip it! application

tab [General] > Titles: Download My first Flip it!

tab [Flip it!] > Layout: [3: Flip it! and tt_content default]

tab [Appearance] > Layout: [Layout 1] :sup:`0 <#sdfootnote3sym>`_

tab [Appearance] > Display File Size Information: [X]

Without fancybox¶

If you don't want a fancybox, please add the TypoScript template [+Flip it!: Fancybox disbaled (flipit)] to your TypoScript like in the illustration below.

With SWFTOOLS¶

Flip it! does three jobs:

• It extends the content element with severals fields for controlling Flip it! and linking to the configuration file (XML) and the Flash files (SWF).
• It renders the XML file and the SWF files while the content element is called in the frontend and stores the rendered files in the directory uploads/tx_flipit.
• It takes care about the needed JavaScript code in the frontend.

Your job is

• enabling Flip it!
• controlling Flip it!

Without SWFTOOLS¶

If SWFTOOLS aren't installed

Flip it can't render the XML file and the SWF files.

Than your job is additionally

to upload the XML file and the SWF files by your own. See "Using the SWFTOOLS offline" on page 37 below.

Placement of Static Templates¶

Flip it! change some properties in the TypoScript of tt_content.uploads.20. tt_content.uploads.20 controls the content element [File Links].

Plugin / Flexform¶

Flip it! extends the flexform of the content element "File Link" with the tab [Flip it!].

Illustration 16: The tab [Flip it!]

Layout:You enable Flip it! by choosing a layout.If you like a website wide, you don't need to configure the plugin / flexform but the Constant Editor once.Quality and bitmap pages:Flip it converts pages with less performance to bitmap pages automatically. But if Flip it! doesn't detect pages successfully, you can set the quality to bitmap manually. Or you can list each page, which does not rendered as a vector file.See "Performance" on page 25 below.

Update SWF files and XML file automatically:If you update your PDF document (tab [General]), Flip it! will render new SWF files and a new XML file automatically.But if you like to update your XML configuration or SWF files by your own, you can disable the automatically file update.Flip it! will update the files automatically only, if SWF tools are installed.See "Using the SWFTOOLS offline" on page 37 below

XML:If you need your own XML configuration, you can upload an own XML file. The upload is needed too, if you don't have installed SWF tools and render your XML file online.See "Using the SWFTOOLS offline" on page 37 below.

SWF:If you need your own SWF files, you can upload your own SWF files. The upload is needed too, if you don't have installed SWF tools and render your SWF files online.See "Using the SWFTOOLS offline" on page 37 below.

Lightbox:You can enable and disable the lightbox.Be aware: Some other parameters depends on a enabled or disabled lightbox. See "Without fancybox" on page 16 above.

Plugin Check:Flip it! checks some properties of your configuration. If something isn't proper, you will get a prompt.

Plugin versus Constant Editor¶

It is recommended to control Flip it! by the Constant Editor. Because this controls all plugins of the current page and all subpages,

• you will have the minimum costs
• you will have the maximum transparency

XML Configuration File¶

Fancybox¶

Workflow¶

Flip it! generates or update all needed files while the content element [File Link] is called in the frontend.

A new XML file and new SWF files are generated or removed and updated,

• if there isn't any XML file or any SWF file or
• if the time stamp of the content element [File link] is newer than the oldest XML file or SWF file

Updating¶

Protecting¶

Cleaning up¶

If you like to clean up the whole cash, please empty (not remove!) the directory uploads/tx_flipit.

Be aware:

Any link in the content element to the XML files and the SWF files isn't removed.

But it doesn't matter in principle.

If a content element is called in the frontend, Flip it! realise, that there isn't any XML file and any SWF file and will render new files.

It does matter, if the cash of individually content elements are protected: The XML file and the SWF files are lost, but because of cash protection Flip it! won't render neither a new XML file nor new SWF files.

Library and fancybox by default¶

Flip it! is including the jQuery library and the fancybox library by default.

Possible conflict¶

If another jQuery library or another fancybox library is loaded, it can causes conflicts.

Solve conflict¶

t3jquery¶

If you are using t3jquery, please compile the jQuery library based on the used JavaScript files of Flip it!

This are the steps:

Modul: Admin Tools > T3 jQuery

Edit area: [Process & Analyze t3jquery.txt in extensions]

[Select all]

[Check]

[Merge & Use]

[Create jQuery Library]

General solution¶

The general solution is, to use PDF files in version 1.3.

If you can't convert your PDF file to version 1.3, there is a workaround. See below.

Automatic Workaround¶

There is an automatic workaround.

Flip it! inspects PDF files for forms, shaded fills or transparency groups. If a page contains some of this properties, the page will rendered as a bitmap.

Manual Workaround¶

But it seems, that there are other reasons for bad performance or unexpected results. If you have any problem, you can

• render the whole PDF file as a bitmap pages
• or render selected pages as bitmap pages

DRS – Development Reporting System¶

Firebug¶

Firebug is a very helpful tool, if you want to inspect JavaScript (jQuery) errors.

You need

• the Firefox browser
• the plugin Firebug

Enable Firebug

tab [Console]

tab [Errors]

Reload the page

Constant Editor¶

All properties have the prefix plugin.tx_flipit.

Example: configuration.layout is plugin.tx_flipit.configuration.layout.

Setup¶

It is recommended to configure Flip it! by the Constant Editor and not by the TypoScript Object Browser directly.

All properties have the prefix plugin.tx_flipit.

Example: constant_editor.configuration is plugin.tx_flipit.constant_editor.configuration

plugin.tx_flipit {
    // Configuration by the Constant Editor (extended)
  constant_editor {
      // Category configuration
    configuration {
      // Please inspect it with the TypoScript Object Browser
    }
      // Category database
    database {
      // Please inspect it with the TypoScript Object Browser
    }
      // Category fancybox
    fancybox {
      // Please inspect it with the TypoScript Object Browser
    }
      // Category html
    html {
      // Please inspect it with the TypoScript Object Browser
    }
      // Category jquery
    jquery {
      // Please inspect it with the TypoScript Object Browser
    }
      // Category xml
    xml {
      // See 'XML Configuration File' on page 21 above
    }
  }
}

plugin.tx_flipit {
    // For tt_content.uploads
  master_templates {
      // Javascript, A tag and DIV "display:none" for the fancybox.
    fancybox {
      // Please inspect it with the TypoScript Object Browser
    }
      // The swf code of Flip it!
    flipitSwf {
      // Please inspect it with the TypoScript Object Browser
    }
      // Please copy to tt_content.uploads.20.itemRendering
    layout {
      // Please inspect it with the TypoScript Object Browser
    }
  }
}

tt_content.uploads {
  20 {
    itemRendering < plugin.tx_flipit.master_templates.layout
  }
}

Version 6¶

Version 2¶

Installation supported by the TYPO3 repository¶

To avoid that you must browse the internet for the software package, we offers the software within two TYPO3 extensions.

Using the SWFTOOLS offline¶

You can install the SWFTOOLS on your workstation (Linux and Windows). The local installation enables you, to convert a PDF document to SWF files offline.

The offline installation makes sense, if you can't install the SWFTOOLS online but you need to convert PDF to SWF.

Integrate Flip it! in your extension!¶

Sorry, this isn't documented yet.

If you need an example, please inspect the Organiser (org). This extension has Flip it! integrated. Look for tx_flipit_.

The Flash source code¶

If you like to develop Flash, you will receive the editable Flash code of the page flipping engine here:

http://typo3.org/extensions/repository/view/flipitres/

The extension contains the page flip version 2.1.3.

Sorry, that this code isn't the code of the used book.swf file. We tried to get the book.fla file, but without any success.

book.swf is based on the page flip code. The difference seems to be, that the page flip code doesn't contain a navigation bar.

State Development Corporation of Thuringia¶

Thanks to the German State Development Corporation of Thuringia (Landesentwicklungsgesellschaft Thüringen).

It has contracted the initial release and the most features of Flip it!

http://www.leg-thueringen.de/

Janis Skarnelis¶

Thanks Janis Skarnelis who has built the fancybox. See http://fancybox.net/

Rainer Böhme, De Clarke, Matthias Kramm¶

Thanks to Rainer Böhme, De Clarke and Matthias Kramm (Maintainer) for developing and maintaining the SWFTOOLS.

See http://www.swftools.org /

Macc at IpariGrafika and Steve Palmer¶

Thanks to Macc at IpariGrafika and Steve Palmer for developing the page flipping engine.

See

• http://www.iparigrafika.hu/pageflip
• steve@76design.com

codebox – webcoders in a box¶

Thanks to the Spanish agency "codebox – webcoders in a box" http://www.codebox.es

They offer the book.swf file with a navigation bar.

Fun – 50 EUR¶

You like to treat the TYPO3 Flip it! project.

You don't expect any equivalent. No logo. No service.

Throw 50 EUR or any other old sum into the cash box.

You will get a receive. You can set the amount off against tax liability.

Logo – 150 EUR¶

You are treating the TYPO3 Flip it! project and you like to be a guide for others.

Your logo will appear in the manual, at the website and in the extension manager of the Flip it! – TYPO3 without PHP.

The period of validity is limited to one year.

You will get a receive. You can set the amount off against tax liability.

You can pay more than 150 EUR.

Patron – 500 EUR¶

You are the patron. You are treating TYPO3 Flip it! project and you like to pay the developer more than best for two hours service.

Your logo will appear in the manual, at the website and in the extension manager of Flip it!

You can book the developer of Flip it! for two hours.

The period of validity for both – the logo and the two hours – is limited to one year. If you don't use the two hours in this period, you will lost it.

You will get a receive. You can set the amount off against tax liability.

You can pay more than 500 EUR.

Is all open source?¶

Nearby.

Why fancybox and not fancyBox 2?¶

Other extensions published by Die Netzmacher¶

• +AOE Linkhandler Configurator: Configure the AOE linkhandler supported by userinterfaces. Out-of-the-box templates for cal, org, tt_news and tt_products. Don't edit page TSconfig any longer. http://typo3.org/extensions/repository/view/linkhandlerconf/
• autositemap: A smart site-map optimised for the footer. It groups menus in columns. Great menus will get two columns. Configuration is based on TypoScript HMENU. http://typo3.org/extensions/repository/view/autositemap/
• Browser – TYPO3 without PHP. Develop your TYPO3 extension 8 times faster! You need one line TypoScript for a result list with a search form, a record browser and an index browser. Images are wrapped self-acting. SEO, Search Engine Optimization, is integrated. http://typo3.org/extensions/repository/view/browser/
• Caddy – the TYPO3 shopping cart. You can use it for your own needs. You need a database with products or any other items only. You can install Caddy out of the box with one mouse click – see Quick Shop below. http://typo3.org/extensions/repository/view/caddy/
• Deal! – TYPO3 Quick Shop interface for the marketplace ebay. Manage all items with TYPO3 and publish it on ebay. Amazon is under construction. http://typo3.org/extensions/repository/view/deal/
• Duty – collection of helpful scheduler tasks. Here: remove deprecated files from directories. http://typo3.org/extensions/repository/view/duty/
• Flip it! offers lovely and smooth page flip transitions. It enables you to run over pages in PDF documents like in a real magazine. It is based on flash. Flipt it! can convert PDF documents to swf files automatically. http://typo3.org/extensions/repository/view/flipit/
• Jobmarket is a catalogue with job offers. Views, the a-z-browser, the page-browser, the search, social bookmarks and a lot of other stuff can configured by the Browser plugin with the mouse. Job Market hasn't any PHP code, it should be easy to adapt it to your needs. http://typo3.org/extensions/repository/view/job_market/
• Organiser – TYPO3 for the lobby and the organisers. Handle news, events, staff, headquarters, locations, workshops and a calendar with one extension. Sell online tickets! Install the Organiser with one mouse click! http://typo3-organiser.de/
• Quick Shop – the fastest shop in the history of TYPO3. Install it with one mouse click! Quick Shop is based on the browser (see above) and powermail. http://typo3-quick-shop.de/
• PDF Controller: Easy to install. Add to your HTML page the PDF-controller-button. Link from the button to the controller. Adjust the controller by mouseclicks. The PDF Controller supports CSS 3. http://typo3-pdfcontroller.de/
• Radial Search (Umkreissuche) – Enable the browsing through your data by geo location. 'Your data must have a latitude and a longitude. Address data can geocoded automatically by the Browser - TYPO3 without PHP. http://typo3.org/extensions/repository/view/radialsearch/
• Route – Publish your routes with GoogleMaps or OpenStreetMap. Routes have points of interest (POI). You can categorise and filter both: routes and POI. Address data can geocoded automatically. http://typo3.org/extensions/repository/view/route/
• seo_dynamic_tag: Search Engine Optimization for the title tag, the canonical tag and the meta tags author, description and keywords. Configuration by a user interface. http://typo3.org/extensions/repository/view/seo_dynamic_tag/
• Slick - jQuery Carousel: Fully responsive. Scales with its container. Separate settings per breakpoint. Uses CSS3 when available. Swipe enabled. Desktop mouse dragging. Infinite looping. Fully accessible. http://typo3.org/extensions/repository/view/slick/
• TSconfig Pages and Users by extManager (extkey: tsconf): Configure the the eight most commonly used TSconfig porperties with the mouse - like page tree uids, activated extended view, activated clipboard, ... http://typo3.org/extensions/repository/view/tsconf/

Delayed pages¶

Sometimes pages will displayed delayed. If you are waiting from one to three seconds, the pages will displayed and everything is proper.

It seems, that the delaying effect is caused by the performance of visitors computer and has nothing to do with the performance of the server.

Fancyboy: unproper in TYPO3 6.1 and 6.2¶

Fancybox seem's to be buggy in TYPO3 6.1 nad 6.2. You can use Flip it! without the fancybox too.