您現在的位置是:電腦技術吧?>? 編程技術 ??>??動態緩沖,緩沖gif??>??正文詳情

動態緩沖,緩沖gif

堯成周2019-11-26 16:01:24 人圍觀
簡介動態緩沖系數緩沖區公式在制作特殊效果時非常有用,在著名的三星導航菜單中使用。現在很多網站都備受關注,其中緩沖導航是其中一大亮點。本文以一個德國網站的導航為例,詳細

緩沖公式在制作特效中非常有用,著名的三星導航菜單就用到了此公式。

現在許多網站出盡風頭,其中緩沖導航是其一大亮點。

本文以一德國網站的導航為例,詳解緩沖導航的制作。

這個效果是我和溶劑共同完成的,他提供坐標的算法,我提供縮放的算法。

  圖片縮放控制  利用緩沖公式設置圖片的縮放比例,如果鼠標滑過某圖片,放大1.8倍。

如果其它圖片的序號與此圖片的序號相差1,就是此圖片兩邊的圖片,放大1.4倍,其它的為原始大小。

  圖片坐標控制  當某圖片放大時,相鄰的圖片的坐標等于此圖片的坐標加上這兩張圖片的寬度的一半,實現圖片無間距排列。

  線條和文字控制  線條用畫線函數實現,文字的坐標和縮放比例與對應的圖片相同。

  制作過程  1、啟動Flash,新建一個影片,設置影片大小為600px*200px。

  準備好如圖中的素材,圖片的實例名分別為zjs0到zjs4,文字的實例名分別為z0到z4。

  把中間的圖片坐標設為(300,130),選中全部的圖片,按CTRL K調出排列面板,設置為頂部對齊,使圖片的y坐標相同,圖片的x坐標通過AS來控制。

用同樣的方法使方字的y坐標相同,并調整好文字和圖片的間距。

  2、在主場景中的第一幀上添加下列代碼  //獲取中間圖片的x坐標  for (var i = 0; i5; i ) {  this[zjs i].n = i;  //每個圖片MC下定義一個變量  this[zjs i].onRollOver = function() {  control = true;  //鼠標滑過圖片時為真  };  this[zjs i].onRollOut = function() {  control = false;  //鼠標移出圖片時為假  };  }  onEnterFrame = function () {  for (var k = 0; k5; k ) {  this[z k]._x = this[zjs k]._x;  // 說明文字的x坐標等于本應圖片的x坐標  this[z k]._xscale = this[zjs k]._xscale;  this[z k]._yscale = this[zjs k]._yscale;  // 說明文字的縮放比例與圖片相同  }  if (control) {  mouse_in();  } else {  mouse_out();  }  // 條件真或假時調用函數  };  //坐標設置函數  function setX() {  for (var k = -2; k3; k ) {  this[zjs (k 2)]._x = myx this[zjs 2]._width*k;  //以中間圖片為準無間距排列  }  for (var k = Number(temp1) 1; k5; k ) {  //temp1為縮放比例最大的圖片下的變量值  var mc1 = this[zjs k];  var mc2 = this[zjs (k-1)];  //此圖片右邊的其它圖片  mc1._x = mc2._x (mc2._width mc1._width)/2-1;  //設置這些圖片的x坐標,1為消除圖片間的空隙  }  for (var k = Number(temp1)-1; k-1; k--) {  var mc1 = this[zjs k];  var mc2 = this[zjs (k 1)];  mc1._x = mc2._x-(mc2._width mc1._width)/2 1;  }  //縮放比例最大的圖片的左邊的圖片的x坐標設置  myLine();  //圖片下方的線條  }  //比例縮放函數  function move_scale(x, obj) {  speed = (x-obj._xscale)*.65 speed*0.6;  obj._xscale = speed;  obj._yscale = speed;  //緩沖公式,x為圖片的縮放比例,obj為MC  }  //鼠標滑過圖片時,圖片的縮放、x坐標設置函數  function mouse_in() {  for (var i = 0; i5; i ) {  var mc = this[zjs i];  //獲得實例名  if (mc.hitTest(_xmouse, _ymouse, true)) {  move_scale(180, mc);  //如果鼠標位于圖片的上方,圖片放大1.8倍  temp1 = mc.n;  //把此圖片下的變量賦給變量temp1  } else if (Math.abs(mc.n-temp1) == 1) {  move_scale(140, mc);  //兩側的圖片比例放大1.4倍  } else {  move_scale(100, mc);  //其它的圖片為原始大小  }  }  setX();  //設置圖片的x坐標  }  //鼠標移出圖片時,圖片的縮放、x坐標設置函數  function mouse_out() {  for (var i = 0; i5; i ) {  move_scale(100, this[zjs i]);  //縮放比例為1,恢復原始大小  }  setX();  //坐標復原  }  //線條函數  function myLine() {  createEmptyMovieClip(line, 1);  //創建一個空影片  with (line) {  lineStyle(0.1, 0xff9933, 100);  moveTo(zjs0._x-zjs0._width/2, zjs0._y 10);  lineTo(zjs4._x zjs4._width/2, zjs4._y 10);  //圖片下方水平的直線  moveTo(zjs0._x-zjs0._width/2, zjs0._y 5);  lineTo(zjs0._x-zjs0._width/2, zjs0._y 15);  //右邊垂直的直線  moveTo(zjs4._x zjs4._width/2, zjs4._y 5);  lineTo(zjs4._x zjs4._width/2, zjs4._y 15);  //左邊垂直的直線  }  }  按CTRL ENTER測試,本例制作完成。

掌握原理后,加上好的創意,相信你能做出更好的特效。

版權聲明:本文由 堯成周 整理編輯。

原標題:緩沖的動態圖,正在緩沖圖片動態

轉載注明出處:http://www.dn9ww09s.icu/program/14500.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常有趣的軟件。在這個軟件中,用戶可以使用幸運豆來交換商品。你需要什么步驟來為幸運戰利品充電?下一步,超人軟件將為你帶來一個關于如...

  • win7 防火墻,win7防火墻怎么打開

    win7 防火墻,win7防火墻怎么打開 相關圖片win7防火墻打不開防火墻是眾多用戶安裝的必備軟件之一,而為了讓用戶下載,各大安全廠商也紛紛自制防火墻。相比之下,Windows 7系統的防火墻外觀簡單,但經過多年的發展電腦防火墻...

  • 大問題經典句子,大問題經典語錄

    大問題經典句子,大問題經典語錄 相關圖片紅樓夢幾大經典問題本文主要討論夢織女的經典問題。讓我們看看編輯為你安排了什么!1在DW中,如何輸入空間?進入空間的問題似乎已經成為DW中的一個常見問題。我們可能在許多介紹...

  • pdf壓縮到指定大小,pdf文件怎么壓縮的小一點

    pdf壓縮到指定大小,pdf文件怎么壓縮的小一點 相關圖片如何縮小pdf文檔大小Pdf文件一直深受辦公人員的喜愛,使得Pdf文件的閱讀、編輯和轉換成為用戶關注的熱點問題。最近,如何壓縮PDF文件的大小已經逐漸移到桌面上。網友對于這個比較...

  • 便捷的方法,爬樹便捷方法

    便捷的方法,爬樹便捷方法 相關圖片便捷的疊衣方法本文主要介紹了Dreamweaver的便捷技巧和方法。讓我們在下面介紹他們!一。通過靈活使用樣式熟悉Web設計的用戶知道調用樣式有很多方法。我們可以右鍵單擊并選最便捷發...

  • 電競,電競網

    電競,電競網 相關圖片QQ電競牛角電子商務是一款為用戶提供最新、最熱門的電子商務信息的移動軟件。但最近,一個小伙伴xiaosuperman和蕭邊說,他們不能登錄時,使用牛角電子競爭。怎么了。im電競平臺...

  • 文字效果轉換彎曲,文字效果轉換彎曲倒v型

    文字效果轉換彎曲,文字效果轉換彎曲倒v型 相關圖片PPT文字彎曲如果你有更好的方法,本教程只提供一個想法供你分享,讓我們看看效果第一步:使用螺旋工具繪制螺旋第二步:根據情況從中心刪除多余的節點第三步:復制一個并適當調...

  • 一碼付,一碼付手續費

    一碼付,一碼付手續費 相關圖片支付寶掃碼付高速費融碼支付作為一款方便、實用、功能強大的收款軟件,受到了很多人的喜愛。那么榮碼怎么收費呢?下一步,超人軟件編輯將為您介紹rongcodepay收藏教程。如果你不多...

  • 你活得久,活得比你久一點

    你活得久,活得比你久一點 相關圖片你長得丑活的久H5能活多久?我想它還能活一秒鐘。這是W創始人三水先生在主旨演講中給出的答案。當然,三水先生的言外之意其實并不在具體的時間長度上,沒有人能保證H5能活多久,...

  • C盤滿了如何清理,C盤快滿了

    C盤滿了如何清理,C盤快滿了 相關圖片電腦d盤滿了怎么清理技巧磁盤C是計算機的系統磁盤。有些朋友為了方便,喜歡把文件放在桌面上,桌面上的文件一般默認存儲在C盤上。所以一般來說,我們不想把程序安裝在C盤上,這...

熱評文章

  • win7系統怎么設置路由器上網,win7如何設置路由器wifi

    win7系統怎么設置路由器上網,win7如何設置路由器wifi 相關圖片wind7系統怎樣連接路由器WiFi允許您隨時隨地隨意上網,不再受網線距離的限制。那么我們如何在win7系統中設置無線路由器呢?具體步驟是什么?讓我們和超人編輯器一起設置無線路由器...

  • 框架,Php框架

    框架,Php框架 相關圖片框架圖片大全本文主要介紹了在Python中實現簡單狀態框架的方法,涉及到Python狀態框架的實現技巧,具有一定的參考價值,需要的朋友可以參考下面的例子來描述在Pythonhtml簡單框架代碼...

  • win10系統平板模式,win10系統怎么退出平板模式

    win10系統平板模式,win10系統怎么退出平板模式 相關圖片win10平板模式怎么關剛剛升級win10系統的用戶對新版windows10有一定的了解。超人小編認為,win10最大的特點是可以同時應用于平板電腦和個人電腦,使桌面的桌面可以像平板電windows10平板...

  • 美團外賣打賞取消了嗎,為什么有些騎手打賞不了

    美團外賣打賞取消了嗎,為什么有些騎手打賞不了 相關圖片美團打賞騎手他知道是誰嗎近日,為了督促外賣男孩更好地為用戶服務,美團外賣推出了獎勵外賣男孩的功能。美團外賣的車手獎勵在哪里?接下來,超人將為我們帶來Android版美團外賣...

  • 設計師必備,設計師必備品

    設計師必備,設計師必備品 相關圖片設計師必備技能今天推薦的七個工件,包括經典的和新的,大致貫穿了整個UI設計的工作流程。從排版、配色、裁剪到注釋、預覽,都是由相應的良心工件推薦的,非常適合新手UI設計師...

  • word中間打字后面消失,word文檔前面打字后面消失

    word中間打字后面消失,word文檔前面打字后面消失 相關圖片word文檔打字不顯示在使用word文檔輸入內容的過程中,我們有時會遇到單詞輸入后消失的情況。怎么了?如果打字后的單詞消失了,我該怎么辦?事實上,打字后的單詞會消失文檔中打字...

  • 字體排版,字體排版技巧

    字體排版,字體排版技巧 相關圖片各種字體去年,JDC生產了很多優秀的五梅娘。。。不,H5,我們都很努力,當然,我們也積累了一些經驗和教訓。今天,從字體、排版、動態效果、音效、適配類型和創意等方面,結合文...

  • nginx配置多個server,一臺nginx支持多少并發

    nginx配置多個server,一臺nginx支持多少并發 相關圖片nginx和tomcat區別程序類人猿對nginx配置非常熟悉,但對于普通用戶來說,nginx配置是一件很奇怪的事情。Nginx是一個高性能的HTTP和反向代理服務器,以及IMAP/POPnginx反向代理配置教程...

  • 規范編寫,標準編寫規范

    規范編寫,標準編寫規范 相關圖片產品規范編寫標準這是一個相對復雜的CSS理論,它分為五個部分:基礎、布局、模塊、狀態和主題。然而,它的核心思想仍然類似于OOCSS,鼓勵使用類1。基本屬性基本屬性容易理解,這...

  • 悅跑圈怎么記錄跑步軌跡,悅跑圈查看跑步軌跡

    悅跑圈怎么記錄跑步軌跡,悅跑圈查看跑步軌跡 相關圖片悅跑圈怎樣修改跑步記錄隨著時代的發展,人們越來越關注自己的健康。其中,有很多人喜歡用越跑圈來記錄運動。岳潤泉的跑道怎么走?接下來,超人軟件小編將為大家介紹iPhone版的...

關注微信

变脸官网查询