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

Cheng發表於2014-03-09
網站3D

要求

    • 必備知識

      本文要求基本瞭解 JAVASCRIPT 和 XML基礎語法知識。

    • 執行環境

      支援Flash Player的瀏覽器/Flash Player11及以上

    • 演示地址

      演示地址 下載地址

 
 

來自CU3ER官方的一段介紹:

什麼是CU3ER？

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

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

  • cManager - web應用建立非常好看的CU3ER幻燈片
  • wpCU3ER - WordPress的外掛在WordPress容易嵌入CU3ER的幻燈片

是什麼讓CU3ER特別？

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

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

過渡
3D視覺增強
指標
 
 

CU3ER提供了多套幻燈片模版,並提供了線上製作工具cManager,和完善的文件和視訊教程。

2014-03-09_145457
 
3D模版:
 
2014-03-09_145648
 
照片畫廊:
 
 
2014-03-09_145900
 
 
適用於觸控皮膚:
 
2014-03-09_145952
 
 
 
 
獨特的相機和陰影效果:
 
 
2014-03-09_150024
 
 
 
 
 
帶縮圖的3D效果:
 
2014-03-09_150101
 
 
 
 
 
 
帶Mac框的模版:
2014-03-09_150140
 
 
 
線上自作工具:
 
2014-03-09_145144
 
 
 
文件:
 
2014-03-09_160506
 
 
 
 
 

下面是我用cManager匯出的一個專案:

 
2014-03-09_160729
 
 
那麼如何用最簡單方式將幻燈片匯入到自己的專案中呢?
 
在要匯入的頁面中新增以下幾行程式碼:
<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>
 
 
專案匯出後可以通過修改config.xml配置檔案來從新自定義幻燈片資訊,
關於 config.xml 配置檔案的修改官方文件中提供了詳細的說明:
 
2014-03-09_161825
 
 
 
 
那麼有的人就會說了 XML配置檔案要手動修改嗎，那太麻煩了，沒什麼實用價值了啊！
好吧，你們贏了！！
關於 JAVA操作XML和 PHP操作XML將會到後續的文章中介紹，
請大家多多支援。
 
 
下面附上我的匯出專案的演示地址和下載地址,當然在文章的開始處已經給出了，我還是在寫一遍吧:
2014-03-09_152358
 

演示地址 下載地址

 
 
 
初來乍到，請大家大家多多支援！！
路過的留下腳印。
 
 
 
 
 
作者:Li-Cheng
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

相關文章