跳到主要內容

奶綠茶photoGalleryV3.5

奶小茶的photoGalleryV3.5原始檔
2007/12/30 更新小Bug,請重新下載
線上Demo:
http://milkmidi.com/photogallery/galleryv3.html
1.支援SWFAddress,讓FLASH可以有上一頁下一頁和每張獨立網址的功能
2.圖片路徑圖說經由XML來設定
3.背景依據顯示圖片,自動變化成最接近的顏色
4.非商業用途,歡迎使用並修改(如果覺得我製作的好,也煩請加入我的logo)
5.可結合後端伺服器

00.art 相本集資料夾
com 奶綠茶的Class檔
swfaddress SWFAddress資料夾
swfobject swfobject資料夾
XML
galleryV3.fla 原始檔
index.html 主檔html
SWFAddress.as
SWFaddressEvent.as


Source Code Download
解壓密碼:回覆文章,即可看見Password

留言

匿名表示…
很流暢實用的相簿0.0
剛好符合使用需求
(整合多相本)

感謝囉
阿史寫道…
到處找免費的程式發現的,
效果不錯喔,請繼續加油~
匿名表示…
是個有趣的好東西!
匿名表示…
需要這個範例來修改~多謝..
匿名表示…
奶老師的作品和人品都沒有話說,一流的
匿名表示…
剛好想要看看這個範例的效果是怎麼做出來的
多謝
思想寫道…
謝謝老師的分享
匿名表示…
看不到密碼...
匿名表示…
這個好酷喔!!
最近剛好在找放作品集的程式
謝謝分享
mycute寫道…
很實用,說實在我做不出這樣的程式,收藏起來,希望有一天可以跟您一樣。
匿名表示…
感謝~真的很厲害的相簿
謝謝奶綠老師瞜
匿名表示…
真的相當的厲害!謝謝分享
匿名表示…
效果蠻棒的相簿^U^
匿名表示…
還可以用到滑鼠的滾輪
真是太方便了
匿名表示…
Thank you very much ar~!!
匿名表示…
謝謝老師的分享~這相簿真的很讚~
匿名表示…
謝謝綠奶老師的無私分享教學~
^+++^
目前學到一個階段一定會受益無窮囉
感恩感恩
匿名表示…
超酷的 獲益良多
感謝您的分享
Chia寫道…
謝謝老師您的分享,在您的網站終於找到PV3D的教學。
又看見這份教學,很感興趣的想學,謝謝無私分享。
匿名表示…
感謝老師的分享阿
匿名表示…
初學者想要學習
謝謝您的分享
匿名表示…
謝謝分享
匿名表示…
看起來好棒喔
正在學flash
謝謝
匿名表示…
Good!
匿名表示…
效果滿炫的
趕緊來學習
多謝大大分享
匿名表示…
很不錯的相簿,
非常感謝喔
匿名表示…
想看看奶綠怎們寫的 ^^ 謝謝囉
匿名表示…
感謝您無私的分享~
匿名表示…
good
匿名表示…
謝謝綠奶老師的分享,
大頭蝦寫道…
謝謝綠奶老師的分享
匿名表示…
謝謝妳的教學喔 阿里阿豆
匿名表示…
正在學做相本 參考一下喔
見義寫道…
正在學做相本參考一下哩
匿名表示…
需要這個範例檔案來修改作相簿,感恩~
匿名表示…
謝謝你的分享~~~
匿名表示…
感謝,這個效果真不錯~
匿名表示…
超棒的~~參考一下嚕
匿名表示…
感謝您的分享 !
匿名表示…
謝謝老師的分享
Kan寫道…
奶綠茶前輩您好,請問這有提供as3的exxample嗎? 小弟因為是從as3開始學...所以對as2的語法很陌生...
milkmidi寫道…
不好意思
這個範例是我多年前寫的
是用AS2寫
我沒有打算將他翻成AS3
不過我blog裡有許多的demo都是使用AS3寫的, 可以參考看看
匿名表示…
THX A Lot
匿名表示…
謝謝
匿名表示…
cool 老師真厲害
匿名表示…
Thank you very much ar~!!
匿名表示…
cool thanks
eray表示…
感謝奶老師提供原始檔學習!~
匿名表示…
that's cool for free
匿名表示…
that's cool for free
匿名表示…
感謝老師 正好需要這類的參考 謝謝!
匿名表示…
3q~很好ㄉ效果~感謝無私ㄉ貢獻
匿名表示…
謝謝~是一ㄍ好東西
匿名表示…
let me see ~
匿名表示…
很棒的設計~
正在學~
很多地方還是不太懂~
匿名表示…
感謝~!學習看看!
匿名表示…
很不錯的相簿.來研究一下
匿名表示…
水唷~多謝啦
欣宜寫道…
真是個不錯的東西
之前還為此弄了很久
真是感謝
匿名表示…
真是個不錯的東西
效果也很常好
感恩
欣宜寫道…
不錯的程式
感激
Aaron寫道…
Thank you so much
匿名表示…
Thank you very much ar~!!
匿名表示…
Thank you very much ar~!!
匿名表示…
Thanks for sharing!!
匿名表示…
需要多多學習啦
匿名表示…
卸卸分享範例,感激不盡!!
匿名表示…
終於找到範例,謝謝老師的分享!!
匿名表示…
感恩綠奶老師的無私分享教學!
覺得AS是天敵的人留^^///
匿名表示…
非常感謝喔!^O^
匿名表示…
一直想找這寫法
謝謝!!
感激不盡
匿名表示…
感謝你的介紹,正好有需要研究。謝謝。
匿名表示…
謝謝想要多學習了解,先說謝謝了
匿名表示…
非常感謝老師的分享
謝謝囉~
匿名表示…
做得好棒喔!
感謝分享~
來去好好學習
匿名表示…
正在學習AS3.0真的感謝你的分享m(_ _)m
匿名表示…
太棒了~
謝謝啦^^~
匿名表示…
果然是大師級的作品 好好研究一下
匿名表示…
真的超厲害
希望可以跟你學習
匿名表示…
感謝唷
oilbelly寫道…
3Q
真是好東西
匿名表示…
謝謝您
匿名表示…
謝謝您
匿名表示…
非常感謝!!!
匿名表示…
非常感謝!!!
匿名表示…
謝謝老師
剛好符合我想的需求
謝謝你了
匿名表示…
謝謝分享^o^
匿名表示…
謝謝分享 我找了很久了
匿名表示…
超棒的~~~~~~
steven寫道…
很實用,說實在我做不出這樣的程式,收藏起來。
匿名表示…
感謝分享
匿名表示…
very useful thanks a lot~~~
匿名表示…
謝謝分享
匿名表示…
感謝您的分享
匿名表示…
謝謝分享
chieh寫道…
謝謝,剛好在找這方面的資料
ping寫道…
感謝奶綠茶老師~
最近做線上作品集正需要>"<
Robson寫道…
這一個相本真的是太棒了~~
而且還分享下載~~
感謝奶老師~~~
螺絲蜂寫道…
期待!謝謝奶綠無私的分享
匿名表示…
謝謝作者提供,感謝
匿名表示…
Good!
呵呵~好久沒看~又升級了~
匿名表示…
good!!
匿名表示…
3q.............
匿名表示…
到處找免費的程式發現的,
效果不錯喔,請繼續加油~
PP寫道…
很棒的相簿!!!感謝奶綠老師, 謝謝分享~ :D
Vincent寫道…
it's Great.wonderful
匿名表示…
自動變背景色這一點真的是很貼心的功能~
Pea寫道…
:)
謝謝老師
匿名表示…
謝謝作者提供,感謝
way寫道…
不知道現在還能下載嗎?
匿名表示…
好棒的相簿播放軟體喔
icejuice寫道…
感謝芬想這麼棒的程式阿
匿名表示…
奶綠茶老師您好
那此相簿如何和access相連呢?
可否有範例檔案
Derek寫道…
奶綠茶老師您好
那此相簿如何和access相連呢?
可否有範例檔案
匿名表示…
向奶绿茶老师学习!
zc1415926寫道…
学习了!太牛了!!!
匿名表示…
學習
匿名表示…
好幾年後才發現這篇文章
學習學習收下囉
林顧仰寫道…
感謝~ 很不錯!

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…

gulp 前端自動化 - spritesheet

大家好,我是奶綠茶
今天來介紹如何使用 gulp 來自動化將圖片拼成 spritesheet
奶綠我使用的套件是 gulp.spritesmith
https://www.npmjs.com/package/gulp.spritesmith
可以使用 handlebars 格式,拼出自己想要的 css 格式
{{#sprites}} .{{name}} { background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}}; background-image: url({{{escaped_image}}}); } {{/sprites}} gulp 的設定
gulp.task('sprite',()=>{ console.log('sprite'); const spriteData = gulp.src('src/sprite_src/*') .pipe(spritesmith({ imgName: '../img/sprite.png', cssName: '_sprite.css', padding: 4, imgOpts: { quality: 100 }, cssTemplate: 'src/css/handlebars/basic.handlebars', })); const imgStream = spriteData.img .pipe(buffer()) .pipe(gulp.dest('dist/img/')); const cssStream = spriteData.css .pipe(gulp.dest('src/css')); return merge(imgStream, cssStream); });…