在自己網站中引入CU3ER/Flash 3D幻燈片效果和照片畫框

本文轉載自查看原文 2014-03-09 17:16 1718 WEB前端/ JavaScript/ Flex4/AS3.0/ Flash

要求

必備知識

本文要求基本了解 JAVASCRIPT 和 XML基礎語法知識。
運行環境

支持Flash Player的瀏覽器/Flash Player11及以上
演示地址

演示地址下載地址

來自CU3ER官方的一段介紹:

什么是CU3ER？

CU3ER ，是一個三維圖像幻燈片和照片畫廊。這是視覺上的吸引力幻燈片和畫廊的理想解決方案，促進產品和服務在您的網站上。

我們創建了一套工具，讓您的CU3ER的生活更輕松。有CU3ER帳戶，您可以訪問：

cManager - web應用創建非常好看的CU3ER幻燈片
wpCU3ER - WordPress的插件在WordPress容易嵌入CU3ER的幻燈片

是什么讓CU3ER特別？

CU3ER帶來的創造力，你的網頁設計過程，使您的內容眼上口，並提供獨特的視覺體驗提升到您的網站訪問者。

此圖片滑塊配備的功能，增強的觀看幻燈片的用戶體驗的范圍很大。它們可以組合在一起 - 襯里轉換，3D視覺增強功能，用戶界面和指標。

過渡

3D視覺增強

指標

CU3ER提供了多套幻燈片模版,並提供了在線制作工具cManager,和完善的文檔和視頻教程。

3D模版:

照片畫廊:

適用於觸控面板:

獨特的相機和陰影效果:

帶縮略圖的3D效果:

帶Mac框的模版:

在線自作工具:

文檔:

下面是我用cManager導出的一個項目:

那么如何用最簡單方式將幻燈片導入到自己的項目中呢?

在要導入的頁面中添加以下幾行代碼:

<style>
 body{ background:#333333;}
 object{ box-shadow:0 0 15px rgba(0,0,0,0.8); margin:80px auto; display:block;}
</style>
<div id="CU3ER" >            
</div>        
        
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/CU3ER.js"></script>
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'CU3ER-config.xml', width:'840', height:'480' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
params.allowScriptAccess = "always";
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('CU3ER.swf', "CU3ER", 840, 480, "10.0.0", 
"js/expressinstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
var CU3ER_object = new CU3ER("CU3ER");
</script>