• “两学一做”在山西——黄河新闻网 2019-07-13
  • 内地生报读香港高校本科人数持续下跌 2019-07-13
  • 【学习时刻】人民大学王义桅:金砖合作的“自信”与“自觉” 2019-07-12
  • 女子请“私家侦探”被骗3万 警方循线捣毁诈骗团伙 2019-07-11
  • 【学习时刻】北交大马院院长韩振峰:高校思想政治工作必须牢牢把握三大根本问题 2019-07-11
  • 全国“非遗”保护工作先进名单公布 2019-07-01
  • 紫光阁中共中央国家机关工作委员会 2019-06-25
  • 杭州控烟令修改草案拟允许室内设吸烟区,控烟专家:跌破眼镜 2019-06-25
  • 挪用近30万报纸征订款赌博 河南一报社聘用制干部获刑 2019-06-23
  • 2016年,有1145家上市公司大小非减持了3600亿元,还有210名上市公司高管减持了1400亿元。IPO已成了造就成千上万个十亿、百亿富豪的捷径, 2019-06-21
  • 专家“把脉”中国电影市场:提升品质方能逆袭 2019-06-21
  • “善款资助副局长儿子留学”真相须尽快落地 2019-06-19
  • 21岁女护士失联2天后确认遇害 嫌疑人为其前男友 2019-06-19
  • 中国地质公园名录旅行地中国国家地理网 2019-06-13
  • 玄关运用有四大原则 用的好才能财旺挡煞聚财 ——凤凰网房产 2019-06-10
  • 网页播放器开发系列笔记(一)

    广东十一选5一定牛 www.aavbg.com 各位朋友大家好,我是相信神话,从今天开始,我把最近开发的一个网页播放器,开发过程记录下来,希望与此感兴趣的朋友一起学习研究。也请大家多帮忙指教。

    一、写在前面

    有些东西写在前面,一边大家总体掌握开发的情况。这个播放器的从开始的美工,切图,开发全部是,我自己一个人开发的,虽然软件不大,但是麻雀虽小五脏俱全,对于刚学前台开发的人,是个思路,条条大路通罗马,也许这就是适合你的一条路。

    1.开发用到的语言

    这个网页播放器的开发,主要是基于html5,Javascript、css进行开发的。

    2.开发工具

    开发这个网页播放器主要用到如下软件:Photoshop(以下简称PS) 进行设计,并切图;HBuilderX主要编写HTML5代码,主要展示播放器界面;CSS是web页面美化语言,主要对播放器进行美化;Javscript是网页播放器核心代码,主要用于播放器的逻辑交互等功能。

    二、开发过程记录

    再我们开发播放器之前,应该对需要的播放器功能,开发流程要做详细的规划记录,每一个点的样式、功能,都要规划设计好,然后在一步一步开发实现。这样才能按时、按需开发,不至于开发过程中丢三落四,然后再补充,这样会很麻烦,增加开发难度。

    这个播放器的功能主要由以下几点功能:一是顺序播放;二是单曲循环;三是随机播放;四是播放进度条显示及调节;五是音量显示及调节;六是播放列表功能;七是歌曲切换、播放、暂停功能。

    开发流程主要如下图所示:

     

    (一)播放器页面设计及切图

    先看一下播放器的全貌。这个界面是根据功能需求,借鉴别的播放器,设计的一个播放器界面。我的美工是业余,大家凑合这看吧,重点讲解开发的东西。

     

     

    1播放器界面

    1.界面设计

    首先我先用PS设计出如图1的播放器界面。详细设计步骤不再表述,这是美工的主要工作,下面我主要讲解一下切图工作,这部分工作我认为还是自己动手比较合适,美工不知道我们的需求,也不知道怎么切割符合我们的要求,所以要亲自动手。掌握一些图片设计工具还是十分有必要的

    我们用PS打开设计图(如图2),还是老思路,首先是对设计图进行整体分析,具体怎么切割才符合简单、占用网速带宽少,又不失美观,做到心中有数。

    图2 PS界面


    PS界面介绍。首先我们来介绍一下PS软件界面,图2中是一个完整的PS界面,左侧是工具箱,中间是设计图,右侧最下方是图层面板(图中有详细的标注),这三个区域是我们常用的部分。

    ②获取单一图片背景色值。从设计图来看,播放器背景色单一,我们只要获取背景颜色RGB值即可,在网页展示的时候用CSS设置这个背景颜色值就可以了?;袢≌飧鲅丈?,在PS中十分简单,我们点击工具箱中的前景色,会跳出颜色面板,鼠标移动到设计稿背景色上,会有一个吸管工具,点击一下,颜色面板中会显示刚才吸管吸取的颜色值,整改操作过程图3全部标识清楚了,只要按照表示步骤1-4操作即可,我们的颜色值获取到了,颜色值为“f0f8ff”,这个数值我们记住,以后我们用的到。

    3 获取背景颜色值


    4播放按钮             5播放按钮拆解③分解设计图。所谓分解设计图就是把设计图分解成一个个图片,共我们在Html和css中使用。根据设计图来看,播放、暂停、上一首、下一首按钮在一起是个组合(如图4),

     

    图4播放按钮

     5播放按钮拆解

    所以我们要把图4拆解成背景,和播放、暂停、上一首、下一首图片(如图5),然后我们在CSS中把这些组合在一起。首先我们找到播放、暂停、上一首、下一首图对应图层,单击图层前面的眼睛图标,隐藏图层,操作如图6,最后显示效果如图7。选中组合背景图层,然后按住Ctrl按键单击该图层,这样显示区的图片就被选中了,然后在PS工具箱中找到剪裁工具,操作如图8所示。然后在图片上单击一下,出现剪裁预览样式如图9,然后单击回车按钮,随便选择其它一个工具箱中按钮,弹出对话框,选择裁剪按钮,就能得到我们想要的图片了,整改操作过程如图10所示。然后,依次选择“菜单”→“导出”→“存储web所有格式(旧版)”,然后预设选择“PNG-24”,然后选择存储即可,操作过程如图11所示。


     
    6显示需要的图层,关闭不需要的图层 

     

    7去除不显示图层后的效果 

     

    图层8 选中背景操作 

     

    9 剪裁预览样式

     

     

    10 剪裁成功

     

    11 存储图片

    记住这个流程,以后我们每一步需要提取图片的时候,都是大同小异的操作。总的思想是:项获取哪部分图片就显示哪部分图层,同时隐藏掉的图层,然后再剪裁保存。我们把这个操作叫走为“提取图片步骤”,以便我们后面使用方便。

    按照“提取图片步骤”,依次提取上一首、下一首、播放、停止按钮图片,如图5所示。同理我们提取进度条背景、音量控制背景,音量大小背景,进度播放头,音量播放头、随机播放选中和释放、单曲循环选中和释放等图片,最后提取图片如图12所示。但是值得一体的是,在获取进度背景、音量背景和音量播放背景时,只要获取一像素宽的图片即可,原因是:我们再后面HTML展示页面时,用CSS设置对图片平铺就可实现效果。这样我们所有的素材图片就全部准备好了,下一步我们将编写HTML代码和CSS代码,将所有提取分割的素材从新组合,以网页的形式展示。

     

     

    12 最后切割效果

    posted @ 2019-04-20 10:41 相信神话 阅读(...) 评论(...) 编辑 收藏
  • “两学一做”在山西——黄河新闻网 2019-07-13
  • 内地生报读香港高校本科人数持续下跌 2019-07-13
  • 【学习时刻】人民大学王义桅:金砖合作的“自信”与“自觉” 2019-07-12
  • 女子请“私家侦探”被骗3万 警方循线捣毁诈骗团伙 2019-07-11
  • 【学习时刻】北交大马院院长韩振峰:高校思想政治工作必须牢牢把握三大根本问题 2019-07-11
  • 全国“非遗”保护工作先进名单公布 2019-07-01
  • 紫光阁中共中央国家机关工作委员会 2019-06-25
  • 杭州控烟令修改草案拟允许室内设吸烟区,控烟专家:跌破眼镜 2019-06-25
  • 挪用近30万报纸征订款赌博 河南一报社聘用制干部获刑 2019-06-23
  • 2016年,有1145家上市公司大小非减持了3600亿元,还有210名上市公司高管减持了1400亿元。IPO已成了造就成千上万个十亿、百亿富豪的捷径, 2019-06-21
  • 专家“把脉”中国电影市场:提升品质方能逆袭 2019-06-21
  • “善款资助副局长儿子留学”真相须尽快落地 2019-06-19
  • 21岁女护士失联2天后确认遇害 嫌疑人为其前男友 2019-06-19
  • 中国地质公园名录旅行地中国国家地理网 2019-06-13
  • 玄关运用有四大原则 用的好才能财旺挡煞聚财 ——凤凰网房产 2019-06-10
  • 平特四连肖网站 青海快3走势图今天预测号码 白小姐马报102期 新疆喜乐彩票开奖 香港中特网一尾中特 吉林时时彩软件手机版 广西11选5计划群 重庆百变王牌助手下载 1767期南国彩票坐标图规 阿飞六合图库资料大全 排列三走势图网易彩票 今天时时彩开奖记录 打麻将胡牌公式 周三大乐透开什么号码开奖 黑龙江36选7开奖中奖查询