table of contents - dmxzone · 2015-04-29 · new: advanced mobile support - the dmxzone supersized...

DMXzone Supersized 2 DMXzone

Copyright © 2015 DMXzone.com All Rights Reserved

To get more go to DMXzone.com

of 36

Table of contents

Table of contents ............................................................................................................................................................................ 1 About DMXzone Supersized 2 ...................................................................................................................................................... 2 Features in Detail ............................................................................................................................................................................. 3 The Basics: Creating a Fullscreen Bakcground Slideshow ................................................................................................. 16 Advanced: Dynamic Fullscreen Background Slideshow ................................................................................................... 22 Advanced: Using DMXzone Supersized 2 Control Behaviors ............................................................................................ 30 Video: Creating a Fullscreen Bakcground Slideshow ......................................................................................................... 36 Video: Dynamic Fullscreen Background Slideshow ............................................................................................................ 36 Video: Using DMXzone Supersized 2 Control Behaviors ..................................................................................................... 36




of 36

About DMXzone Supersized 2

Create an awesome fullscreen background slideshow that will convey the right message better than any

text! The supersized images are displayed behind objects like menus, text fields or any other content that you

have on your site. DMXzone Supersized 2 is supplied with stylish navigation controls with keyboard support

and CSS skins that you can choose from or edit to fit any website perfectly. You shouldn’t worry about

resizing anymore! All your images will become browser specific so regardless of the window size or the monitor size of your device the background images will be perfectly matched up.

Along with the great HTML5 Data Bindings integration, you can also use DMXzone Database Connector PHP/ASP and create dynamic slideshows with ease.

http://www.dmxzone.com/go/23095/dmxzone-supersized-2/

http://www.dmxzone.com/go/21863/html5-data-bindings

http://www.dmxzone.com/go/22072/dmxzone-database-connector-php


http://www.dmxzone.com/go/22084/dmxzone-database-connector-asp




of 36

Features in Detail

*New marks features, not available in the older version

NEW: Great integration with HTML5 Data Bindings - Supply the images, titles, descriptions and links for

the DMXzone Supersized 2 from HTML5 Data Bindings local file or public feed.





of 36

NEW: DMXzone Supersized 2 directly from dynamic sources - Use HTML5 Data Bindings and DMXzone

Database Connector PHP/ASP to connect to your images, titles, descriptions and more.








of 36

NEW: 64bit Dreamweaver support - DMXzone Supersized 2 runs smoothly even on the latest 64bit

update of Dreamweaver CC 2014.




of 36

NEW: Advanced mobile support - The DMXzone Supersized 2 comes with awesome mobile support

and now your slideshow looks great and loads super-fast on any mobile device.

NEW: Super-smart image preloader - A super-smart image preloader loads only the necessary images

and not all of them at once. You can add as many images as you want and it will still load super-fast.




of 36

Live preview of the slideshow in Dreamweaver - You can simply switch from design to Live view and

experience the slideshow directly in Dreamweaver.




of 36

Fully responsive DMXzone Supersized 2 - It looks great on a desktop browser, phone or other mobile

device.




of 36

Integrated DMXzone Resizer - Resize all your images super-fast to a regular size for the DMXzone

Supersized. The DMXzone Supersized requires images with the same size for the best effects and the

built-in DMXzone Resizer slices and crops your images so they are just as required.




of 36

Preview of images, title and link - Awesome preview of your images, title and link directly in the User

Interface. The titles can be also HTML.

Automatically generated images names - Auto generate image titles from their file names.




of 36

Cool looking navigation control - Fully stylable with CSS.

o Show Next & Prev Navigation - Displays next & prev navigation buttons.

o Show Play/Pause button - Displays a show/pause button.

o Slides Counter - Displays the number of slides in the slideshow.

o Thumbnails Tray - Generates a list of thumbnails that jump to the corresponding slide.

o Progress Bar - It runs based on the slide interval.

o Thumbnail Navigation - Toggles forward/backward thumbnail navigation. When on,

thumbnails from the next/previous posts are generated and can be clicked to navigate. o Slides Titles - Displays the slides’ titles

o Enable Mouse Scrub - The thumbnail list navigates left or right based on the mouse location. o Allow Keyboard Navigation - Allows controls via keyboard.

Flexible background image positioning - You can specify the image position to fit your website

design. o Vertical Center - Centers image vertically. When unchecked, the images resize/display top

center if horizontal center is also unchecked. o Fit Always - Prevents the image from ever being cropped. Ignores minimum width and height.

o Horizontal Center - Centers image horizontally. When unchecked, the images resize/display

from the left of the page. o Fit Portrait - Prevents the image from being cropped by locking it at 100% height o Protect Image - Disables right clicking and image dragging using Javascript.




of 36

Timed transitions on slides - You can specify the duration of the slide and the transitions, and choose

between different transition for your slides, which are fully cross browser compatible and even run on iPhone/iPad.

Paging Controls - You can chose between different sets of paging controls.

Many CSS editable skins supplied - Select one of the added skins or edit them through the CSS to fit

your website perfectly.




of 36

Fully controllable by behaviors - You want to navigate to a specific slide, start or stop the slideshow

and even set prev and next actions - it can be easily done with the Control DMXzone Supersized

behavior.




of 36

Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions to

your slides.




of 36

Before you begin

Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that

please read this.

Installing the extension Read the tutorial at http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/

Login, download the product, and look up your serial at http://www.dmxzone.com/user/products

Get the latest DMXzone Extension Manager at

http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver

Open DMXzone Extension Manager and go to your Purchased products tab and click install. If you have a

subscription, the extension is to be found and installed in the Explore tab.

Get the latest extension manager from Adobe at

http://www.adobe.com/exchange/em_download/

Open the .zxp file if you’re using Dreamweaver CC or the .mxp file for Dreamweaver CS+ with Adobe

Extension manager and install the extension.

If you experience any problems contact our Live Support!

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/

http://www.dmxzone.com/user/products

http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver

http://www.adobe.com/exchange/em_download/




of 36

The Basics: Creating a Fullscreen Bakcground Slideshow In this tutorial we will show you how to create a fullscreen background slideshow, using DMXzone Supersized

2 *You can also check out the video.



http://www.dmxzone.com/go/23097/creating-a-fullscreen-background-slideshow




of 36

How to do it 1. From the insert panel (1) select DMXzone Supersized 2 (2).




of 36

2. First, select the static image source option (1). We want to resize the images that we import, into our

slideshow so we enable the DMXzone Image Resizer option (2). If you’ve already resized your images,

you can just turn this option off. Click the import a folder with images button (3).




of 36

3. Select the images source folder (1) and the destination folder (2). Enter the new size for the images

and the size of the thumbnails (3). And turn off the crop and sharpen options (4) as we do not need

them right now. When you’re done, click OK.




of 36

4. In the advanced tab (1), you can select one of the predefined design presets (2), enable or disable

the autoplay option and also you can select whether the slideshow should stop on the last slide or

not (3). Adjust the elements and navigation options (4), which we leave to their defaults, and setup

the slides and transitions options (5). Click OK, when you’re done.




of 36

5. Now you can save your project and preview the result.




of 36

Advanced: Dynamic Fullscreen Background Slideshow In this tutorial we will show you how to create a dynamic fullscreen background slideshow, using DMXzone

Supersized 2.

*You can also check out the video.



http://www.dmxzone.com/go/23098/dynamic-dmxzone-supersized-2




of 36

How to do it

1. We created a data source, using HTML5 Data Bindings and DMXzone Database Connector PHP/ASP.

In the database we stored the path, title, thumbnail and link for each of our images. Let’s add DMXzone Supersized 2 (2) from the insert panel (1).







of 36

2. Select dynamic source radio button (1) and select your data source from the data source menu (2).

Now, we select the repeating element of our data source. Click the HTML5 Data Bindings value icon

(3).




of 36

3. Expand the data source tree (1) and select the repeating element of your data source (2). The

repeating element is wrapped in square brackets. When you’re done, click OK.




of 36

4. Now let’s select the data element that stores the paths of our images. Click the HTML5 Data Bindings

value icon.




of 36

5. In our data source it is called: image. Select it (1) and click the OK button (2).




of 36

6. We do the same with for the titels (1) but select the data element that contains our thumbnails paths.

Do the same with the rest of the fields that you need to populate with dynamic data. When you’re done, you can customize the appearance of the slideshow from the advanced tab (2).




of 36

7. Now, you can save and preview the results.




of 36

Advanced: Using DMXzone Supersized 2 Control Behaviors In this tutorial we will show you how to use DMXzone Supersized 2 control behaviors. *You can also check out the video.


http://www.dmxzone.com/go/23099/custom-control-buttons-for-dmxzone-supersized-2




of 36

How to do it

1. We’ve added two simple buttons on our page - previous and next. We also inserted the DMXzone Supersized 2 on our page so let’s edit its settings. Click the DMXzone Supersized 2 icon (2) from the

insert panel (1).




of 36

2. Select the advanced tab (1) and disable the default next and previous buttons (2) that the extension

displays.




of 36

3. Select the next button (1) and from the behaviors panel (2), add a new behavior (3).




of 36

4. Open the action menu and select next (1). Click the OK button in order to apply the behavior (2).




of 36

5. We do the same with the previous button, by selecting the action called - previous. Now you can

save and preview the results.




of 36

Video: Creating a Fullscreen Bakcground Slideshow

With this movie we will show you how to create a fullscreen background slideshow, using

DMXzone Supersized 2.

Video: Dynamic Fullscreen Background Slideshow

With this movie we will show you how to create a dynamic fullscreen background slideshow,

using DMXzone Supersized 2.

Video: Using DMXzone Supersized 2 Control Behaviors

With this movie we will show you how to use DMXzone Supersized 2 control behaviors.

http://www.dmxzone.com/go/23097/creating-a-fullscreen-background-slideshow


http://www.dmxzone.com/go/23098/dynamic-dmxzone-supersized-2


http://www.dmxzone.com/go/23099/custom-control-buttons-for-dmxzone-supersized-2


table of contents - dmxzone · 2015-04-29 · new: advanced mobile support - the dmxzone supersized...

Documents