この度は自作Flash第一弾「StarFirstWatch」を公開致しました。初めてFlashのアクションスクリプトを書いたということもあり、何分至らない点もあるかと思いますが、何卒宜しくお願い致します。
それでは、詳細は続きから
はじめに:
まず初めに、当ブログパーツ「FlashStarFirsWatch」をダウンロードしていただき誠にありがとうございます。利用規約については以下のようになっております。
利用規約:
・著作権元記述の表示(著作権元はどのような形であれわかるように明記して下さい ※デフォルトのPresent’s by サンエタが記述してあればOKです。)
・Present’s by サンエタを削除してカスタマイズする場合は、どのような形であれ必ず著作権元(当サイト(3ET)である)ということがわかるように明記して下さい。
・上記2点の規約を守っていただければ、後は自由にカスタマイズ可能とさせていただきます。
作成詳細データ
・Flash 6.0
・アナログ表示時計
・ゆるやかに針を描写
表示対応ブラウザ
・IE:5.5 6 7 8
・Firefox:2.x 3.x
・Opera:9.x 10RC
・Google Chrom
・Safari
・Sleipnir
殆どの主要ブラウザの表示に対応していることを確認致しました。
作品名:「StarFirstWatch」
自分が初めて作ったFlash作品ということでFirstを名前の中に入れさせていただきました。
プレビュー:
「StarFirstWatch」をお試し表示する
ダウンロードナンバー(FC2ブログ共有プラグインナンバー)
?plugin=27690&index
プラグインナンバー:27690
共有プラグイン作者名で「annkoku」と検索してもOKです。
貼り付けコード:
以下のコードをコピーして、お使いのサイトに貼り付ければ、どのサイトでも「StarFirstWatch」を表示することが出来ます。
▼~コード~ここから※DNS障害対応版▼
<!--
まず初めに、この度はStarWatchをダウンロードしていただき誠にありがとうございます。
動作環境に関するご報告&詳しい仕様はコチラからお願いします。
http://3et.org/production/2009/08/starwatch.html
-->
<div id="headerFlash">
<script type="text/javascript" src="http://alis.s314.xrea.com/jsdir/swfobject.js"></script>
<img src="http://img3.imageshack.us/img3/2606/tokeidef.png" alt="3ET製StarWatch" />
<script type="text/javascript">
<!--
var so = new SWFObject("http://img7.imageshack.us/img7/5896/starwatchsun.swf", "ssp", "150", "150", "6","#FFFFFF");//サイズと背景色変更
so.write("headerFlash");
//-->
</script>
<div style="padding:1px 1px 1px 2px;font-size:xx-small;">Present's by <a href="http://3et.org/">サンエタ</a></div><noscript>お使いの環境ではこのFlashは動作しないようです。動作環境の報告は<a href="http://3et.org/">3ET</a>までお願いします。</noscript></div>
▲~コード~ここまで▲
カスタマイズ方法:
背景色を変更するには:
var so = new SWFObject(”http://3et.org/bloim/starwatchsun.swf”, “ssp”, “150″, “150″, “6″,”#FFFFFF”);//サイズと背景色変更
↑の部分の「#FFFFFF」の値を変更すると背景色が変わります。例えば背景を黒にしたい場合は「#000000」と変更すれば背景色が黒に変わります。
サイズはデフォルトで150×150となっております。上記の150の値を変更することにより、時計のサイズも変更することが出来ます。
制作秘話:
今回は自分が初めて作成したアナログ時計Flashという点で、何かと至らない点もあるかと思いますが、どうか宜しくお願い致します。
Flashの制作を行った+アクションスクリプトを書いた感想としましては、第一印象はJavaScriptと似ているな~と感じました。
なので、JavaScriptのコードを事前に学んでいる人にとっては、とっつきやすいと思います。実際に書いてみた感想としても、やっぱりJavaScriptにとてもよく似ていました。
初作ということもあり、なかなかFlashの座標指定・計算やスプライトの設置等に戸惑いました。
正直もっと簡単に制作できるかな~・・・と、思っていましたが、予想外に大変でした^^;自分の考えが甘かったな~と思い、実感しています。
ブラウザの表示に関しては、そのまま加工処理を行わずFlashを埋め込んでしまうと、IEやFirefoxにて、Flashを読み込むときにポップアップが表示されてしまうので、各ブラウザにてポップアップが表示されないように加工処理を施しています。
そのうちもっと慣れてくれば、「Flash制作講座」という、記事を書いてみたいと思いますので、よろしくお願いします。
デザインの各針の座標指定に関してはあんまりキッチリと揃っているのもなんだかな~・・・と思い、多少時計針の指針の位置をずらしています。
Flashのアクションスクリプトのコードのスクリプト言語に関してや実際にFlashを制作してみて思った感想など、他にも書きたいことは沢山ありますが、それはFlash関連の記事を作成したときに解説させていただきたいと思います。
それでは、今回は自作Flash「StarFirstWatch」をダウンロードしていただき誠にありがとうございました。
今後とも3ET&管理人のサンエタ共に宜しくお願い致します。
/*センタートップヘッダー*/
.centertop{
margin-left:2px;
width:605px;
height:320px;
background:url(http://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/whitebluetop.jpg);
background-repert:no-repeat;
margin-bottom:15px;
}
のurl部分を変更して、
/*センタートップヘッダー*/
.centertop{
margin-left:2px;
width:605px;
height:320px;
background:url(http://www.yun.com/mid/yun_727.jpg);
background-repert:no-repeat;
margin-bottom:15px;
}
にしたのですが、最初は画像が変わったのですが、再読み込みすると画像がなくなります。
どうすればいいでしょうか。教えていただければありがたいです。
よろしくお願いします。
コメント&ご質問ありがとうございます。
>最初は画像が変わったのですが、再読み込みすると画像がなくなります。
確認させていただいたところ、アップロードされたサイト「yun.com」の方では画像の直リンクが出来ないようにサーバー側や.htaccessなどでアクセス制限を行っているようです。
なので、yun.com以外のサイト(例えばfc2.comから画像の呼び出しを行うと403エラーをサーバー側が返し画像にアクセスすることが出来ません。
ちなみに、blogxx.fc2.comにおいては逆も同様です。同じblogxx.fc2.com以外の呼び出し直リンクは表示することが出来ないです。(例えば自分のサイトhttp://3et.orgからfc2アップローダーにアップロードされている画像を呼び出そうとすると403のアクセス制限が行われます。)
サーバーやサイトによっては直リンク対策として、サーバー側の設定や.htaccessなどでアクセス制限を行っている場合があります。
解決策として、現在日本人さんがお持ちのfc2ブログのアップローダーに画像をアップロードしてそこにリンクすることをオススメ致します。(同じblogxx.fc2.com内なので)
それでは、上記の件日本人さんの参考になれば幸いです。
教えていただきまして、ありがとうございました。教えていただいた方法でやってみます。