.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======== Flip it! ======== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2014-12-07T15:15:42 :Classification: flipit :Description: 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. See: http://typo3-flipit.de/ :Keywords: forDevelopers, forIntegrators, pdf, flip, pageflip, bookflip, flippingbook, pdf2flash, pdf2swf :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| extKey: flipit |img-3| .. _Flip-it: Flip it! ======== 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. See: http://typo3-flipit.de/ |img-4| Version: 6.0.0, 2014-12-06 Extension Key: flipit Language: en Keywords: forDevelopers, forIntegrators, pdf, flip, pageflip, bookflip, flippingbook, pdf2flash, pdf2swf Copyright 2012-2014, Dirk Wildt, Die Netzmacher, This document is published under the Open Content License available from `http://www.opencontent.org/opl.shtml `_ The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from `www.typo3.org `_ .. _Table-of-Contents: Table of Contents ----------------- `Flip it! 1 <#__RefHeading__12229_1904948122>`_ `Screenshots 3 <#__RefHeading__12239_1904948122>`_ `Frontend 3 <#__RefHeading__8110_547317899>`_ `Backend 5 <#__RefHeading__8112_547317899>`_ `Introduction 6 <#__RefHeading__839_1945474054>`_ `What does Flip it! do? 6 <#__RefHeading__12243_1904948122>`_ `What do you need? 6 <#__RefHeading__1087_888364954>`_ `TYPO3 from 4.5 to 6.2 6 <#__RefHeading__4833_1709913158>`_ `Forum 6 <#__RefHeading__11793_332808067>`_ `Quick Installation 7 <#__RefHeading__1089_888364954>`_ `Installation 8 <#__RefHeading__1091_888364954>`_ `Install SWFTOOLS (optional) 8 <#__RefHeading__4835_1709913158>`_ `Install this extension. 8 <#__RefHeading__4837_1709913158>`_ `Add a page, TypoScript template and a content element 10 <#__RefHeading__4839_1709913158>`_ `By the way: Page tree ids and icons 12 <#__RefHeading__4841_1709913158>`_ `Tutorial 13 <#__RefHeading__4843_1709913158>`_ `Upload a PDF file 13 <#__RefHeading__4845_1709913158>`_ `Enable Flip it! 13 <#__RefHeading__4847_1709913158>`_ `With download link 15 <#__RefHeading__11795_332808067>`_ `Without fancybox 16 <#__RefHeading__4849_1709913158>`_ `Workflow 17 <#__RefHeading__4851_1709913158>`_ `With SWFTOOLS 17 <#__RefHeading__3399_320291259>`_ `Without SWFTOOLS 17 <#__RefHeading__11797_332808067>`_ `Controlling 18 <#__RefHeading__4853_1709913158>`_ `Placement of Static Templates 18 <#__RefHeading__11811_332808067>`_ `Plugin / Flexform 19 <#__RefHeading__11813_332808067>`_ `Plugin versus Constant Editor 20 <#__RefHeading__8114_547317899>`_ `XML Configuration File 21 <#__RefHeading__4043_727746927>`_ `Fancybox 22 <#__RefHeading__6001_727746927>`_ `Cash 23 <#__RefHeading__4855_1709913158>`_ `Workflow 23 <#__RefHeading__11803_332808067>`_ `Updating 23 <#__RefHeading__11805_332808067>`_ `Protecting 23 <#__RefHeading__11807_332808067>`_ `Cleaning up 23 <#__RefHeading__11809_332808067>`_ `jQuery 24 <#__RefHeading__4863_1709913158>`_ `Library and fancybox by default 24 <#__RefHeading__11815_332808067>`_ `Possible conflict 24 <#__RefHeading__11817_332808067>`_ `Solve conflict 24 <#__RefHeading__11819_332808067>`_ `t3jquery 24 <#__RefHeading__4865_1709913158>`_ `Performance 25 <#__RefHeading__4867_1709913158>`_ `General solution 25 <#__RefHeading__4303_1691223225>`_ `Automatic Workaround 25 <#__RefHeading__4305_1691223225>`_ `Manual Workaround 25 <#__RefHeading__4307_1691223225>`_ `Debugging 26 <#__RefHeading__4309_1691223225>`_ `DRS – Development Reporting System 26 <#__RefHeading__11825_332808067>`_ `Firebug 28 <#__RefHeading__11827_332808067>`_ `Reference 29 <#__RefHeading__5025_91639442>`_ `Constant Editor 29 <#__RefHeading__11829_332808067>`_ `Setup 33 <#__RefHeading__3938_675939639>`_ `What's new 35 <#__RefHeading__5266_292900499>`_ `Version 6 35 <#__RefHeading__5989_381843603>`_ `Version 2 35 <#__RefHeading__7833_1635376753>`_ `SWFTOOLS 36 <#__RefHeading__5991_381843603>`_ `Installation supported by the TYPO3 repository 36 <#__RefHeading__4861_1709913158>`_ `Using the SWFTOOLS offline 37 <#__RefHeading__1602_676806413>`_ `Development 39 <#__RefHeading__937_753283029>`_ `Integrate Flip it! in your extension! 39 <#__RefHeading__11555_332808067>`_ `The Flash source code 39 <#__RefHeading__667_203744830>`_ `Credits 40 <#__RefHeading__14600_39746679>`_ `State Development Corporation of Thuringia 40 <#__RefHeading__4869_1709913158>`_ `Janis Skarnelis 40 <#__RefHeading__4871_1709913158>`_ `Rainer Böhme, De Clarke, Matthias Kramm 40 <#__RefHeading__4873_1709913158>`_ `Macc at IpariGrafika and Steve Palmer 40 <#__RefHeading__3940_675939639>`_ `codebox – webcoders in a box 40 <#__RefHeading__3950_675939639>`_ `Packages for Sponsors 41 <#__RefHeading__14565_1312001785>`_ `Fun – 50 EUR 41 <#__RefHeading__14975_1312001785>`_ `Logo – 150 EUR 41 <#__RefHeading__14977_1312001785>`_ `Patron – 500 EUR 41 <#__RefHeading__14979_1312001785>`_ `FAQ 42 <#__RefHeading__14569_1312001785>`_ `Is all open source? 42 <#__RefHeading__939_753283029>`_ `Why fancybox and not fancyBox 2? 42 <#__RefHeading__4879_1709913158>`_ `Further Information 43 <#__RefHeading__4881_1709913158>`_ `Other extensions published by Die Netzmacher 43 <#__RefHeading__2827_1005454631>`_ `Known Bugs 44 <#__RefHeading__2670_493732561>`_ `Delayed pages 44 <#__RefHeading__4885_1709913158>`_ `Fancyboy: unproper in TYPO3 6.1 and 6.2 44 <#__RefHeading__5993_381843603>`_ `Illustration Index 45 <#__RefHeading__3367_450683128>`_ `Change Log 46 <#__RefHeading__12317_1904948122>`_ .. _Screenshots: Screenshots ----------- .. _Frontend: Frontend ^^^^^^^^ |img-5| |img-5| |img-5| .. _Backend: Backend ^^^^^^^ |img-5| See detailed information about the plugin / flexform at "Plugin / Flexform" on page 19 below. .. _Introduction: Introduction ------------ .. _What-does-Flip-it-do: 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: 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: 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: 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. .. _Quick-Installation: Quick Installation ------------------ - Install SWFTOOLS, if Flip it! should generate SWF files automatically (this is recommended).See "What's new" on page 35 below. Note: Flip it! runs without SWFTOOLS too. - Install this extension. - Enable it. - Check requirements with the [EVALUATOR] within the extension manager. - Add a page "flipit" to your page tree. - Add a TypoScript template. - Include static (from extensions): [Flip it!: Base (obligate!)] - If TYPO3 below 4.7 is running, add the static template for TYPO3 < 4.7 - Add the content element [File Links] - Check requirements. See tab [Flip it!] area "Check Plugin". - Upload a PDF file. - If Flip it! runs without SWFTOOLS, upload the SWF files and the XML file by your own.See "Using the SWFTOOLS offline" on page 37 below.Or test it with the "Sample data" on page 13 below. - Select the tab [Flip it!] - Enable Flip it! by selecting a layout from [layout\_01] to [layout\_03] - Run the frontend Click on the Flip it! thumbnail. - If you get an unexpected result, please refer to the section "Performance" on page 25 below. .. _Installation: Installation ------------ .. _Install-SWFTOOLS-optional: 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. ^^^^^^^^^^^^^^^^^^^^^^^ - Install this extension. - Enable it. .. _Update-the-database: Update the database """"""""""""""""""" Update the database and create the update folder "uploads/tx\_flipit" |img-5| .. _Check-requirements: Check requirements """""""""""""""""" Check requirements with the [EVALUATOR] within the extension manager. |img-5| Modul Admin Tools > Extension Manager Edit area Select Flip it! (not illustrated above) Select the tab [Configuration] Select Category [EVALUATOR] The report. .. _The-report: The report """""""""" The evaluator checks - the operating system - the SWFTOOLS - and the TYPO3 version .. _Note-for-a-Windows-server-and-SWFTOOLS: Note for a Windows server and SWFTOOLS """""""""""""""""""""""""""""""""""""" If you have SWFTOOLS installed on a Windows server, you have to maintain the path to the SWFTOOLS. See Modul Admin Tools > Extension Manager Edit area Select Flip it! Select the tab [Configuration] Select Category [WINDOWS] Field Windows The path is by default: C:\Program Files (x86)\SWFTools .. _Add-a-page-TypoScript-template-and-a-content-element: Add a page, TypoScript template and a content element ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Add a page "Flipit" to your page tree. .. _TypoScript-Template: TypoScript Template """"""""""""""""""" Add to your page "Flipit" a TypoScript template. |img-5| Configure the template like in the illustration above. Modul Web > List Page tree Select the page Flipit Edit area Tab [General]Call your template +page\_flipit\_id, where the id is the id of the TypoScript `:sup:`0` <#sdfootnote1sym>`_ Tab [Includes] Field "Include static (from extension)": [Flip it!: Basis (obligate!) (flipit)] If TYPO3 below 4.7 is running, include [+Flip it!: Basis for TYPO3 < 4.7 (obligate!) (flipit)] .. _Content-element: Content element """"""""""""""" Add a content element [File Links] |img-5| And configure it like in the illustration above. Modul Web > List Page tree Select the page Flipit Edit area Content Element > Type: [File Links]Header > Header: "My first Flip it!" .. _Plugin-check: Plugin check """""""""""" |img-6| Illustration 9: The tab [Flip it!] checks the requirements Please check the plugin. Edit area Tab [Flip it!] Area / field: Plugin Check You will get a report like in the illustration on the right hand. If something isn't proper, follow the given instructions. The plugin checks, - if the TypoScript template is included - if TypoScript is proper - if SWFTOOLS are installed - which TYPO3 version is running - if the DRS `:sup:`0` <#sdfootnote2sym>`_ is enabled The plugin check offers direct links to: - the extension manager - the TypoScript Constant Editor - the online manual - the Flip it! forum .. _By-the-way-Page-tree-ids-and-icons: By the way: Page tree ids and icons ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Flip-it-icon: Flip it! icon """"""""""""" If you like the Flip it! icon in the page tree, please configure your page Flip it! Modul Web > List Page tree Select the page Flipit Edit area Edit the page properties tab [Appearance] area "Use as Container", field "Contains Plugin": [Flip it!] .. _Ids-and-other-icons: Ids and other icons """"""""""""""""""" If you like the page ids within the page tree and some other individual icons, please refer to TSconfig Pages and Users by extManager (tsconf) `http://typo3.org /extension-manuals/tsconf/current/ `_ .. _Tutorial: Tutorial -------- .. _Upload-a-PDF-file: 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] .. _Sample-data: Sample data """"""""""" If Flip it! runs without SWFTOOLS, the configuration file and the SWF files must uploaded manually. How to get the SWF files and the XML file, is explained in "Using the SWFTOOLS offline" on page 37 below. Flip it! offers sample data. Please upload this files: .. _PDF: PDF ~~~ Tab [General] >Files > Select Files `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit.pdf `_ .. _XML: XML ~~~ Tab [Flip it!] > Files > XML-configuration-file: `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit.xml `_ .. _SWF: SWF ~~~ Tab [Flip it!] > Files > Converted SWF files - `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit\_1.swf `_ - `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit\_2.swf `_ - `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit\_3.swf `_ - `http://forge.typo3.org/projects/extension- flipit/repository/changes/trunk/res/sampledata/sample\_flipit\_4.swf `_ .. _Enable-Flip-it: Enable Flip it! ^^^^^^^^^^^^^^^ Enable Flip it! within your content element [File Links]. Tab [Flip it!] > Layout: from [1: ...] to [3: ...] .. _Result-in-the-frontend: Result in the frontend """""""""""""""""""""" The result in the frontend should look like in the illustration below: |img-5| Please click on the thumbnail or the link beside the icon. A fancybox will open and will display the PDF file for flipping. |img-5| .. _With-download-link: With download link ^^^^^^^^^^^^^^^^^^ You can add a download link like in the illustration below. |img-5| |img-5| 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: 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. |img-5| .. _Result-in-the-frontend: Result in the frontend """""""""""""""""""""" The result in the frontend should look like in the illustration below. |img-5| .. _Width-and-height: Width and height """""""""""""""" You can control the values for width and height in the Constant Editor. See Category [Flip it! - HTML] Width and Height. .. _Workflow: Workflow -------- .. _With-SWFTOOLS: 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: 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. .. _Controlling: Controlling ----------- You can control Flip it! - by the user interface within the plugin (flexform) - by the user interface of the TypoScript Constant Editor - by TypoScript directly .. _Placement-of-Static-Templates: 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]. .. _Root-page: Root page """"""""" If you place the static templates of Flip it! within the TypoScript template of your root page, the properties of tt\_content.uploads.20 are changed website wide. .. _Advantage: Advantage ~~~~~~~~~ You can control Flip it! (and the content element [File Links]) centrally respectively website wide. .. _Disadvantage: Disadvantage ~~~~~~~~~~~~ If the changing of a property of the content element [File Links] causes a problem, you have this problem website wide. .. _Single-page-recommended: Single page (recommended) """"""""""""""""""""""""" If you place the static templates of Flip it! within the TypoScript template of a single page, the properties of tt\_content.uploads.20 is changed for this page and all subpages. .. _Advantage: Advantage ~~~~~~~~~ If the changing of a property of the content element [File Links] causes a problem, you haven't this problem website wide. .. _Disadvantage: Disadvantage ~~~~~~~~~~~~ If you are using Flip it! on another single page too, you have to include the static template twice and you have to configure Flip it! twice. .. _Plugin-Flexform: Plugin / Flexform ^^^^^^^^^^^^^^^^^ Flip it! extends the flexform of the content element "File Link" with the tab [Flip it!]. |img-7| 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: 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 .. _Restrictions: Restrictions """""""""""" The Constant Editor offers round about sixty properties. The plugin offers five properties. This effects: - A property in the Constant Editor controls all plugins of the current page and the subpages. - You can control a minimum of properties by the plugin directly. This causes configuration restrictions. For example: - The first PDF document should get a fancybox. - The second PDF document should run as Flip it! application directly. Probably you have to configure the HTML width and height for each content element in a different way. But you can't! You can solve this problem in this way: Place each PDF document on a different page. .. _XML-Configuration-File: XML Configuration File ^^^^^^^^^^^^^^^^^^^^^^ .. _Code-Snippet: Code Snippet """""""""""" ... .. _Content-Parameters: Content Parameters """""""""""""""""" You are controlling the content parameters (in the snippet above from line 2 to 9) by the Constant Editor (see page 32 below) or if it is needed by TypoScript. See the array plugin.tx\_flipit.constant\_editor.xml But be aware that you have to configure probably: **tt\_content.uploads.20.itemRendering.layout\_XX.userFunc.constant\_e ditor.xml** where XX is from 01 to 03. plugin.tx\_flipit { constant\_editor { xml { // Please inspect it with the TypoScript Object Browser } } } You can add new parameters to this array. Example plugin.tx\_flipit { constant\_editor { xml { myParam1 = Hallo World myParam2 = TEXT myParam2 { value = This is Englisch lang { de = Das ist Deutsch } } } } } The XML output will be (if the frontend is in German language) ... .. _Fancybox: Fancybox ^^^^^^^^ .. _Code-Snippet: Code Snippet """""""""""" .. _Parameters: Parameters """""""""" You are controlling the content parameters (in the snippet above from line 2 to 9) by the Constant Editor (see page 30 below) or if it is needed by TypoScript. See the array plugin.tx\_flipit.constant\_editor.fancybox But be aware that you have to configure probably: **tt\_content.uploads.20.itemRendering.layout\_XX.userFunc.constant\_e ditor.fancybox** where XX is from 01 to 03. plugin.tx\_flipit { constant\_editor { fancybox { // Please inspect it with the TypoScript Object Browser } } } You can add new parameters to this array. Example plugin.tx\_flipit { constant\_editor { xml { myParam1 = Hallo World myParam2 = TEXT myParam2 { value = This is Englisch lang { de = Das ist Deutsch } } } } } The JavaScript output will be (if the frontend is in German language) .. _Cash: Cash ---- Flip it! is running with a file cash only. The cash is the content of the directory uploads/tx\_flipit: the generated or uploaded XML files and SWF files. .. _Workflow: 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: Updating ^^^^^^^^ .. _Of-one-content-element-only: Of one content element only """"""""""""""""""""""""""" If you want to update the Flip it! cash of one content element only, please save this element once. .. _Off-all-content-elements: Off all content elements """""""""""""""""""""""" See "Cleaning up" below. .. _Protecting: Protecting ^^^^^^^^^^ .. _Of-one-content-element-only: Of one content element only """"""""""""""""""""""""""" You can protect the cash of each content element. Please configure within the flexform of the content element: Edit area tab [Flip it!] > Update SWF files and XML file automatically: [no (...)] Be aware: **This isn't any protection, if you remove all files in the cash directory uploads/tx\_flipit.** .. _Cleaning-up: 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.** .. _Possible-cause-for-removing-the-whole-cash: Possible cause for removing the whole cash """""""""""""""""""""""""""""""""""""""""" A possible cause for removing the whole cash can be a changing in the corporate design of the website. - The colours of the Flip it! background and navigation bar should changed website wide - The size of the HTML area should changed website wide. .. _jQuery: jQuery ------ You can control the Flip it! jQuery here: Constant Editor > Category [FLIP IT! - JQUERY] .. _Library-and-fancybox-by-default: Library and fancybox by default ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Flip it! is including the jQuery library and the fancybox library by default. .. _Possible-conflict: Possible conflict ^^^^^^^^^^^^^^^^^ If another jQuery library or another fancybox library is loaded, it can causes conflicts. .. _Solve-conflict: Solve conflict ^^^^^^^^^^^^^^ .. _1-Disable-Flip-it-libraries: 1. Disable Flip it! libraries """"""""""""""""""""""""""""" Disable the Flip it! jQuery library and the Flip it! fancybox. .. _Constant-Editor: Constant Editor ~~~~~~~~~~~~~~~ - Constant Editor > Category [FLIP IT! - JQUERY] - Fancybox: [disabled] - jQuery: [disabled] .. _2-Disable-the-other-libraries: 2. Disable the other libraries """""""""""""""""""""""""""""" If the 1st option doesn't help, please - disable the foreign jQuery library and the foreign fancybox library and - enable the Flip it! libraries. .. _t3jquery: 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] .. _Performance: Performance ----------- The SWFTOOLS supports PDF files in version 1.3. If you are using PDF files in higher versions and with some properties, you can get problems with the performance: All CPU can increase up to 100 per cent! .. _General-solution: 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: 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: 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 |img-5| |img-5| .. _Debugging: Debugging --------- If you have any unexpected result, you can inspect Flip it! in the TYPO3 backend with the DRS – the Development Reporting System – and in the TYPO3 frontend with Firebug. .. _DRS-Development-Reporting-System: DRS – Development Reporting System ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Inspect-work-flow-and-errors: Inspect work-flow and errors """""""""""""""""""""""""""" The DRS – Development Reporting System – enables you - to follow the work-flow of Flip it!, - to inspect alternate configuration possibilities, - to inspect unproper configuration and - it prompts warnings and errors .. _Enabling-the-DRS: Enabling the DRS """""""""""""""" |img-5| Module: Admin Tools > Extension Manager Edit Area: Select the Flip it! extension Tab [Configuration] Category: [Debugging] DRS – Development Reporting System: [Enabled] [Update] .. _The-DRS-report: The DRS report """""""""""""" .. _Precondition: Precondition ~~~~~~~~~~~~ You need the extension Extension Development Evaluator (extdeveval) .. _Report: Report ~~~~~~ |img-5| Module: Admin Tools > Development Log Edit Area: the report .. _Firebug: Firebug ^^^^^^^ Firebug is a very helpful tool, if you want to inspect JavaScript (jQuery) errors. You need - the Firefox browser - the plugin Firebug |img-5| Enable Firebug tab [Console] tab [Errors] Reload the page .. _Reference: Reference --------- It is recommended to configure Flip it! by the Constant Editor and not by the TypoScript Object Browser directly. .. _Constant-Editor: Constant Editor ^^^^^^^^^^^^^^^ All properties have the prefix plugin.tx\_flipit. Example: configuration.layout is plugin.tx\_flipit.configuration.layout. .. _CONFIGURATION: CONFIGURATION """"""""""""" .. ### BEGIN~OF~TABLE ### .. _configuration-layout: configuration.layout ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.layout Data type string Description - layout\_00: tt\_content default (without Flip it!) - layout\_01: Flip it! only - layout\_02: Flip it! and tt\_content default but download link - layout\_03: Flip it! and tt\_content default. .. _configuration-quality: configuration.quality ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.quality Data type string Description - high - low Quality: high: vector file (best quality). low: bitmap file (best performance) .. _configuration-dpi: configuration.dpi ~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.dpi Data type integer Description 144 (by default) DPI: dots per inch. Has an effect for bitmaps only. .. _configuration-enableFancybox: configuration.enableFancybox ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.enableFancybox Data type string Description - disabled - enabled Disable it, if you don't want to use Flip it! in a fancybox by default. .. _configuration-updateswfxml: configuration.updateswfxml ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.updateswfxml Data type string Description - disabled - enabled Update SWF files and XML file autmatically. If enabled and if SWFTOOLS are installed, Flip it! will render SWF files and XML file automatically. This is recommended. .. _configuration-filetypes: configuration.filetypes ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property configuration.filetypes Data type string Description - jpg - pdf - png Comma separated list of file types for SWF conversion. **Without any effect in the current version.** .. ###### END~OF~TABLE ###### .. _DATABASE: DATABASE """""""" If Flip it! is integrated in another extension, you have to map some fields. If you are interested in how to integrate Flip it!, please refer to "Integrate Flip it! in your extension!" on page 39 below. .. ### BEGIN~OF~TABLE ### .. _database-field-title: database.field.title ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property database.field.title Data type string Description Label of the field, which contains the title. Examples: header, tx\_org\_downloads.title .. _database-field-media: database.field.media ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property database.field.media Data type string Description Label of the field, which contains the files for converting to SWF / Flash. Examples: media, tx\_org\_downloads.documents .. _database-field-layout: database.field.layout ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property database.field.layout Data type Description Label of the field, which contains the number of the selected layout. Examples: layout, tx\_org\_downloads.documentslayout .. _database-field-filelink-size: database.field.filelink\_size ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property database.field.filelink\_size Data type Description Label of the field, which enables the displaying of the file size. Examples: filelink\_size, tx\_org\_downloads.documentssize .. ###### END~OF~TABLE ###### .. _FANCYBOX: FANCYBOX """""""" You can extend the fancybox properties by TypoScript. See 'Fancybox' on page 22 above. .. ### BEGIN~OF~TABLE ### .. _fancybox-padding: fancybox.padding ~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.padding Data type integer Description Space between FancyBox wrapper and content .. _fancybox-margin: fancybox.margin ~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.margin Data type integer Description Space between viewport and FancyBox wrapper .. _fancybox-opacity: fancybox.opacity ~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.opacity Data type string Description - true - false When true, transparency of content is changed for elastic transitions .. _fancybox-modal: fancybox.modal ~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.modal Data type string Description - true - false When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false' .. _fancybox-cyclic: fancybox.cyclic ~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.cyclic Data type string Description - true - false When true, galleries will be cyclic, allowing you to keep pressing next/back. .. _fancybox-scrolling: fancybox.scrolling ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.scrolling Data type string Description - auto - yes - no Set the overflow CSS property to create or hide scrollbars. .. _fancybox-width: fancybox.width ~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.width Data type string Description Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' .. _fancybox-height: fancybox.height ~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.height Data type string Description Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' .. _fancybox-autoScale: fancybox.autoScale ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.autoScale Data type string Description - true - false If true, FancyBox is scaled to fit in viewport .. _fancybox-autoDimensions: fancybox.autoDimensions ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.autoDimensions Data type string Description - true - false For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results .. _fancybox-centerOnScroll: fancybox.centerOnScroll ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.centerOnScroll Data type string Description - true - false When true, FancyBox is centered while scrolling page .. _fancybox-hideOnOverlayClick: fancybox.hideOnOverlayClick ~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.hideOnOverlayClick Data type string Description - true - false Toggle if clicking the overlay should close FancyBox .. _fancybox-hideOnContentClick: fancybox.hideOnContentClick ~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.hideOnContentClick Data type string Description - true - false Toggle if clicking the content should close FancyBox .. _fancybox-overlayShow: fancybox.overlayShow ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.overlayShow Data type string Description - true - false Toggle overlay .. _fancybox-overlayOpacity: fancybox.overlayOpacity ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.overlayOpacity Data type double Description Opacity of the overlay (from 0 to 1. default: 0.3) .. _fancybox-overlayColor: fancybox.overlayColor ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.overlayColor Data type string Description Color of the overlay. Example: #666 .. _fancybox-title: fancybox.title ~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.title Data type string Description Forces title. Take a field of the current record. .. _fancybox-titleShow: fancybox.titleShow ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.titleShow Data type string Description - true - false Toggle title .. _fancybox-titlePosition: fancybox.titlePosition ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.titlePosition Data type string Description - outside - inside - over The position of title .. _fancybox-transitionIn: fancybox.transitionIn ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.transitionIn Data type string Description - elastic - fade - none The transition type .. _fancybox-transitionOut: fancybox.transitionOut ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.transitionOut Data type string Description - elastic - fade - none The transition type .. _fancybox-speedIn: fancybox.speedIn ~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.speedIn Data type integer Description Speed of the fade and elastic transitions, in milliseconds .. _fancybox-speedOut: fancybox.speedOut ~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.speedOut Data type integer Description Speed of the fade and elastic transitions, in milliseconds .. _fancybox-showCloseButton: fancybox.showCloseButton ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.showCloseButton Data type string Description - true - false Toggle close button .. _fancybox-showNavArrows: fancybox.showNavArrows ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.showNavArrows Data type string Description - true - false Toggle navigation arrows .. _fancybox-enableEscapeButton: fancybox.enableEscapeButton ~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property fancybox.enableEscapeButton Data type string Description - true - false Toggle if pressing Esc button closes FancyBox .. _fancybox-type: fancybox.type ~~~~~~~~~~~~~ .. container:: table-row Property fancybox.type Data type string Description - image - ajax - iframe - swf - inline Forces content type .. ###### END~OF~TABLE ###### .. _HTML: HTML """" .. ### BEGIN~OF~TABLE ### .. _html-height: html.height ~~~~~~~~~~~ .. container:: table-row Property html.height Data type string Description Height with em, per cent or pixel .. _html-width: html.width ~~~~~~~~~~ .. container:: table-row Property html.width Data type string Description Width with em, per cent or pixel .. _html-color-background: html.color.background ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property html.color.background Data type string Description Background colour .. ###### END~OF~TABLE ###### .. _JQUERY: JQUERY """""" .. ### BEGIN~OF~TABLE ### .. _jquery-fancybox: jquery.fancybox ~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.fancybox Data type string Description - enabled - disabled Include the jQuery fancybox library (1.3.4) and CSS provided by Flip it! If you are using another fancybox library and CSS, please set this option to "disabled" .. _jquery-fancyboxPosition: jquery.fancyboxPosition ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.fancyboxPosition Data type string Description - top - bottom Place the jQuery fancybox library at the top of the page (HTML head) or at the bottom .. _jquery-fancyboxLibrary: jquery.fancyboxLibrary ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.fancyboxLibrary Data type string Description Path to the fancybox library .. _jquery-fancyboxCSS: jquery.fancyboxCSS ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.fancyboxCSS Data type string Description Path to the fancybox CSS .. _jquery-source: jquery.source ~~~~~~~~~~~~~ .. container:: table-row Property jquery.source Data type string Description - enabled - disabled Use the jQuery library (1.4.3) provided by Flip it! If you are using another jQuery library, please set this option to "disabled" .. _jquery-sourcePosition: jquery.sourcePosition ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.sourcePosition Data type string Description - top - bottom Place the jQuery library at the top of the page (HTML head) or at the bottom .. _jquery-sourceLibrary: jquery.sourceLibrary ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jquery.sourceLibrary Data type string Description Path to the jQuery library .. ###### END~OF~TABLE ###### .. _THUMBNAILS: THUMBNAILS """""""""" .. ### BEGIN~OF~TABLE ### .. _thumbnails-download-height: thumbnails.download.height ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.download.height Data type integer Description height of the thumbnail, which is linked with the file for download .. _thumbnails-download-width: thumbnails.download.width ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.download.width Data type integer Description width of the thumbnail, which is linked with the file for download .. _thumbnails-fancybox-height: thumbnails.fancybox.height ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.fancybox.height Data type integer Description height of the thumbnail, which is linked with the fancybox .. _thumbnails-fancybox-width: thumbnails.fancybox.width ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.fancybox.width Data type integer Description height of the thumbnail, which is linked with the fancybox .. _thumbnails-flipit-height: thumbnails.flipit.height ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.flipit.height Data type integer Description height of the icon at the right bottom corner of the Flip it! thumbnail .. _thumbnails-flipit-width: thumbnails.flipit.width ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.flipit.width Data type integer Description width of the icon at the right bottom corner of the Flip it! thumbnail .. _thumbnails-flipit-icon: thumbnails.flipit.icon ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbnails.flipit.icon Data type string Description The path to the Flip it! icon. The Flip it! icon is placed at the right bottom corner of a thumbnail. .. ###### END~OF~TABLE ###### .. _XML: XML """ You can extend the XML properties by TypoScript. See 'XML Configuration File' on page 21 above. .. ### BEGIN~OF~TABLE ### .. _xml-width: xml.width ~~~~~~~~~ .. container:: table-row Property xml.width Data type integer Description Width in points (if autodetection failes) .. _xml-height: xml.height ~~~~~~~~~~ .. container:: table-row Property xml.height Data type integer Description Height in points (if autodetection failes) .. _xml-buttoncolor: xml.buttoncolor ~~~~~~~~~~~~~~~ .. container:: table-row Property xml.buttoncolor Data type string Description Colour of buttons .. _xml-panelcolor: xml.panelcolor ~~~~~~~~~~~~~~ .. container:: table-row Property xml.panelcolor Data type string Description Colour of the panel .. _xml-textcolor: xml.textcolor ~~~~~~~~~~~~~ .. container:: table-row Property xml.textcolor Data type string Description Colour of the font .. _xml-backgroundcolor: xml.backgroundcolor ~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property xml.backgroundcolor Data type string Description Colour of the background .. _xml-hcover: xml.hcover ~~~~~~~~~~ .. container:: table-row Property xml.hcover Data type string Description Hardcover: If set to true, fist and last page are hard covered. .. _xml-gotolabel-default: xml.gotolabel.default ~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property xml.gotolabel.default Data type string Description Goto label: default language (English) .. _xml-gotolabel-de: xml.gotolabel.de ~~~~~~~~~~~~~~~~ .. container:: table-row Property xml.gotolabel.de Data type string Description Goto label: German language .. ###### END~OF~TABLE ###### .. _Setup: 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 .. _tx-flipit: tx\_flipit """""""""" Be aware: Changes in the configuration array of plugin.tx\_flipit may have not any effect, if configuration was copied before to tt\_content.uploads.20.itemRendering. **It is recommended to configure tt\_content.uploads.20.itemRendering directly.** .. ### BEGIN~OF~TABLE ### .. _constant-editor: constant\_editor ~~~~~~~~~~~~~~~~ .. container:: table-row Property constant\_editor Data type array Description Configuration taken from the constant editor. **Example:** :: 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 } } } .. _master-templates: master\_templates ~~~~~~~~~~~~~~~~~ .. container:: table-row Property master\_templates Data type array Description Sorry, no comment. **Example:** :: 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 } } } .. ###### END~OF~TABLE ###### .. _tt-content-uploads-20-itemRendering: tt\_content.uploads.20.itemRendering """""""""""""""""""""""""""""""""""" If you like to change TypoScript properties, please inspect tt\_content.uploads.20.itemRendering by the TypoScript Object Browser directly. .. ### BEGIN~OF~TABLE ### .. _itemRendering: itemRendering ~~~~~~~~~~~~~ .. container:: table-row Property itemRendering Data type array Description Global and local **Example:** :: tt_content.uploads { 20 { itemRendering < plugin.tx_flipit.master_templates.layout } } .. ###### END~OF~TABLE ###### .. _What-s-new: What's new ---------- .. _Version-6: Version 6 ^^^^^^^^^ .. _TYPO3-6-2: TYPO3 6.2 """"""""" [6.0.0] Flip it! runs in TYPO3 6.2. BEWARE! Fancybox doesn't work in TYPO3 6.1 proper. This bug isn't solved! .. _Version-2: Version 2 ^^^^^^^^^ .. _Localised-XML-file: Localised XML-file """""""""""""""""" [1.2.0] Localise Flip it! XML-configuration-file with timestamp. Flip it! versions below 1.2.0 doesn't support localisation, you can't used Flip it! in localised context. .. _TYPO3-6-1: TYPO3 6.1 """"""""" [2.0.0] Flip it! runs in TYPO3 6.1. BEWARE! Fancybox doesn't work in TYPO3 6.1 proper. This bug isn't solved! .. _SWFTOOLS: SWFTOOLS -------- SWFTOOLS itself aren't a TYPO3 extension. It is a software package depending on the operating system of your server. It is easy to install the SWFTOOLS, but you need root access on your server. Supported operating systems are Linux and Windows. .. _Installation-supported-by-the-TYPO3-repository: 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. .. _Linux: Linux """"" If you have a Linux server, please refer to the installation manual at `http://typo3.org/extension-manuals/swftools4linux/current/ `_ If you want download the extension, please use your extension manager or visit `http://typo3.org/extensions/repository/view/swftools4linux/ `_ .. _Windows: Windows """"""" If you have a Linux server, please refer to the installation manual at `http://typo3.org/extension-manuals/swftools4windows/current/ `_ If you want download the extension, please use your extension manager or visit `http://typo3.org/extensions/repository/view/swftools4windows/ `_ .. _Using-the-SWFTOOLS-offline: 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. .. _Installation: Installation """""""""""" You have the same workflow like with the installation online. See What's new on page 35 above. .. _Converting-with-Linux: Converting with Linux """"""""""""""""""""" You convert a PDF file to SWF files by a command in the console. Example code: pdf2swf --set zoom=144 /pathToYourFile/my\_file.pdf /pathToYourFile/my\_file\_%\_1304131327.swf You will receive files like - my\_file\_1\_1304131327.swf - my\_file\_2\_1304131327.swf - … - my\_file\_x\_1304131327.swf .. _Converting-with-Windows: Converting with Windows """"""""""""""""""""""" .. _Start-SWFTOOLS: Start SWFTOOLS ~~~~~~~~~~~~~~ Start the SWFTOOLS: - by click on the SWFTOOLS icon on your desktop or in your start menu or - by clicking C:\Program Files (x86)\SWFTools\gpdf2swf.exe .. _Configure-Properties: Configure Properties ~~~~~~~~~~~~~~~~~~~~ - File > Save SWF > [X] One Page Per File - Edit > Options - [Quality] > Quality > Resolution (in dpi): 144 - [Viewer] > [X] No Viewer .. _Open-the-PDF-file: Open the PDF file ~~~~~~~~~~~~~~~~~ File > Open PDF .. _Convert-to-SWF: Convert to SWF ~~~~~~~~~~~~~~ - File > Save SWF > All Pages - Use a unique filename like - syntax: my\_file\_yymmddhhmm.ext - example: my\_file\_1304131327.swf - You will receive files like - my\_file\_1304131327.01.swf - my\_file\_1304131327.02.swf - … - my\_file\_1304131327.xx.swf .. _Create-the-XML-file: Create the XML file """"""""""""""""""" .. _Draft: Draft ~~~~~ ... .. _Adapting: Adapting ~~~~~~~~ Paper Size - The unit for width and height is point. - DIN A/4 portrait is used in the example above. - 210 mm are 592 points - 297 mm are 842 points Label for Go to Please use a localised label for the go to button. SWF files - Please maintain the page items. - You have to replace the file name only. - Example for Linux with the files from the example above: - my\_file\_1.swf -> my\_file\_1\_1304131327.swf - my\_file\_2.swf -> my\_file\_2\_1304131327.swf - A page item will be Example for Windows with the files from the example above: - my\_file\_1.swf -> my\_file\_1304131327.01.swf - my\_file\_2.swf -> my\_file\_1304131327.02.swf - ... - A page item will be .. _Upload-the-XML-file-and-the-SWF-files: Upload the XML file and the SWF files """"""""""""""""""""""""""""""""""""" .. _XML: XML ~~~ Tab [Flip it!] > Files > XML-configuration-file .. _SWF: SWF ~~~ Tab [Flip it!] > Files > Converted SWF files .. _Development: Development ----------- .. _Integrate-Flip-it-in-your-extension: 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: 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. .. _Credits: Credits ------- .. _State-Development-Corporation-of-Thuringia: 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: Janis Skarnelis ^^^^^^^^^^^^^^^ Thanks Janis Skarnelis who has built the fancybox. See `http://fancybox.net/ `_ .. _Rainer-Bhme-De-Clarke-Matthias-Kramm: 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: 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: 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. .. _img-8-Packages-for-Sponsors: |img-8| Packages for Sponsors ----------------------------- Your donation and sponsoring is welcome. Please order a package for sponsors at - English: `http://typo3-flipit.de/en/sponsoring/ `_ - German: `http://typo3-flipit.de/sponsoring/ `_ .. _Fun-50-EUR: Fun – 50 EUR ^^^^^^^^^^^^ |img-9| 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: Logo – 150 EUR ^^^^^^^^^^^^^^ |img-9| 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: Patron – 500 EUR ^^^^^^^^^^^^^^^^ |img-9| 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. .. _FAQ: FAQ --- .. _Is-all-open-source: Is all open source? ^^^^^^^^^^^^^^^^^^^ Nearby. .. _book-swf-isn-t-open-source: book.swf isn't open source """""""""""""""""""""""""" Nearby means: Flip it! is based on Flash. Flip it! is using book.swf. book.swf enables all catalogue features. book.swf is delivered by codebox `:sup:`0` <#sdfootnote4sym>`_ . codebox delivers book.swf only, so Flip it! doesn't contain the editable book.fla. It isn't possible to edit book.swf and it isn't possible to develop the used catalogue software. But it is possible to develop the used page flipping engine. See "The Flash source code" on page 39 above. .. _Why-fancybox-and-not-fancyBox-2: Why fancybox and not fancyBox 2? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _fancybox: fancybox """""""" The fancybox is licensed under both MIT and GPL licenses. You may use it without any restriction nearby. .. _fancyBox-2: fancyBox 2 """""""""" The fancybox 2 is licensed under the Creative Commons Attribution- NonCommercial 3.0 license. You are free to use the fancyBox 2 for - your personal or - non-profit website projects. For a commercial use you have to pay a fee. See `http://sites.fastspring.com/fancyapps/product/store `_ If you like, you can use Flip it! with the fancyBox 2 too. But it would be your job, to include the library. .. _Further-Information: Further Information ------------------- .. _Other-extensions-published-by-Die-Netzmacher: Other extensions published by Die Netzmacher ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - |img-10| +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/ `_ - |img-11| 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/ `_ - |img-12| 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/ `_ - |img-13| 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/ `_ - |img-13| 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/ `_ - |img-14| Duty – collection of helpful scheduler tasks. Here: remove deprecated files from directories. `http://typo3.org/extensions/repository/view/duty/ `_ - |img-15| 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/ `_ - |img-16| 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/ `_ - |img-17| 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/ `_ - |img-13| 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/ `_ - |img-18| 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/ `_ - |img-19| 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/ `_ - |img-19| 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/ `_ - |img-20| 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/ `_ - |img-21| 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/ `_ - |img-22| 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/ `_ .. _Known-Bugs: Known Bugs ---------- .. _Delayed-pages: 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: 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. .. _Illustration-Index: Illustration Index ------------------ Illustration 1: Thumbnail 3 Illustration 2: Run over pages like in a real magazine. Flip it! application in the fancybox. 3 Illustration 3: Run over pages like in a real magazine. Flip it! application without a fancybox. 4 Illustration 4: Flip it! extends the content element "File Link" with a new tab [Flip it!] 5 Illustration 5: Flip it! extends the tt\_content table with some fields 8 Illustration 6: Flip it! evaluates needed and optional requirements 9 Illustration 7: Page Flip it! with the TypoScript template 10 Illustration 8: Page Flip it! with a content element [File Links] 11 Illustration 9: The tab [Flip it!] checks the requirements 11 Illustration 10: Thumbnail 14 Illustration 11: Flip it! within the fancybox 14 Illustration 12: Download link 15 Illustration 13: Layout 3 15 Illustration 14: TypoScript template for a case without a fancybox 16 Illustration 15: Flip it! without the fancybox 16 Illustration 16: The tab [Flip it!] 19 Illustration 17: Render all PDF pages as bitmap 25 Illustration 18: Render selected pages as bitmap. Here page 7 and 35 25 Illustration 19: Enabling the Development Reporting System 26 Illustration 20: The DRS report enables you to follow the work-flow of Flip it! 27 Illustration 21: In case of JavaScript errors, Firebug will prompt it 28 .. _Change-Log: Change Log ---------- 6.0.0 **Major Feature** \* #61643: Upgrade TYPO3 6.2 2.0.0 **Feature** \* #51909: Upgrade for TYPO3 6.1\* Bug: Fancybox doesn't work. This bug isn't solved! 1.2.0 **Feature** \* #46991: Localise Flip it! XML-configuration-file with timestamp 1.1.2 **Update Manual** \* #i0012: New section "Using the SWFTOOLS offline"codebox.es stopped the online service for converting PDF to SWF 1.1.1 **Update Manual** \* #i0011: New section packages for sponsors 1.1.0 **Publishing** \* #i0010: Finishing the manualPublishing in the TYPO3 TER 1.0.10 **Features** \* #45763: File names with timestamp\* #45712: Handle PDF > 1.3Pages with shaded fills only should rendered as bitmap 1.0.9 **Feature** \* #45712: Handle PDF > 1.3Pages with forms, shaded fills or transparency groups should rendered as bitmap 1.0.8 **Feature** \* #45471: Property: Rendering a PDF as a bitmap 1.0.7 **Bugfix** \* #45470: SWF files had wrong order in case of a Windows server 1.0.6 **Bugfix** \* #i0009: TYPO3 < 4.7 1.0.5 **Feature** \* #i0008: Wrap cObjData fields **Bugfix** \* #i0007: Don't take field labels from Constant Editot in case of tt\_content 1.0.4 **Features** \* #45174: Debugtrail for the DRS\* #45170: Autodetection of the size of the biggest SWF file\* #i0006: Manual is updated 1.0.3 **Manual** \* #i0003: Initial release of the manual 1.0.2 **Feature** \* #i0002: Include static template for "without fancybox" **Improvements** \* #i0001: Don't offer an include static template for TYPO3 < 4.7 1.0.1 **Improvement** \* #i0005: Porperty enabled is removed **Features** \* #i0004: Flexform got property "Plugin check"\* #i0003: Palettes for the flexform 1.0.0 **Feature** \* #44896: Interface for third party extensions **Improvement** \* #44395: AJAX page object for fancybox is removed 0.0.5 **Bugfix** \* #i0002: includeLibs.tx\_browser\_cssstyledcontent -> includeLibs.tx\_flipit\_cssstyledcontent 0.0.4 **Improvement** \* #i0001: Windows-Server 0.0.3 **Development** \* #44395: AJAX page object for fancybox 0.0.1: **Initial release** `0 <#sdfootnote1anc>`_ This syntax isn't obligate, but it simplifies the maintaining of TypoScript in the TypoScript Object Browser in principle. `0 <#sdfootnote2anc>`_ DRS – Development Reporting System (see page 25) `0 <#sdfootnote3anc>`_ Layout 1: with an mime-type icon. Layout 2: with a thumbnail. `0 <#sdfootnote4anc>`_ `http://www.codebox.es/ `_ 47 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: graphics4 .. :name: graphics4 .. :width: 69 .. |img-3| image:: img-3.png .. :align: middle .. :border: 0 .. :height: 16 .. :id: graphics16 .. :name: graphics16 .. :width: 16 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics17 .. :name: graphics17 .. :width: 268 .. |img-5| image:: data: :alt: Frame18 .. :align: bottom .. :id: Frame18 .. :name: Frame18 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 391 .. :id: graphics9 .. :name: graphics9 .. :width: 302 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 551 .. :id: graphics26 .. :name: graphics26 .. :width: 378 .. |img-8| image:: img-8.jpeg .. :align: right .. :border: 0 .. :height: 76 .. :id: graphics27 .. :name: graphics27 .. :width: 76 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 191 .. :id: graphics38 .. :name: graphics38 .. :width: 151 .. |img-10| image:: img-10.png .. :border: 0 .. :height: 16 .. :id: graphics33 .. :name: graphics33 .. :width: 18 .. |img-11| image:: img-11.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics37 .. :name: graphics37 .. :width: 18 .. |img-12| image:: img-12.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics34 .. :name: graphics34 .. :width: 18 .. |img-13| image:: img-13.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics44 .. :name: graphics44 .. :width: 16 .. |img-14| image:: img-14.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics46 .. :name: graphics46 .. :width: 16 .. |img-15| image:: img-15.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics48 .. :name: graphics48 .. :width: 18 .. |img-16| image:: img-16.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: Grafik5 .. :name: Grafik5 .. :width: 18 .. |img-17| image:: img-17.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics47 .. :name: graphics47 .. :width: 16 .. |img-18| image:: img-18.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics55 .. :name: graphics55 .. :width: 18 .. |img-19| image:: img-19.png .. :align: bottom .. :border: 0 .. :height: 18 .. :id: graphics50 .. :name: graphics50 .. :width: 18 .. |img-20| image:: img-20.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics52 .. :name: graphics52 .. :width: 16 .. |img-21| image:: img-21.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics53 .. :name: graphics53 .. :width: 16 .. |img-22| image:: img-22.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics54 .. :name: graphics54 .. :width: 16