こんな感じの三角形の書き方。
単純に、多角形ツールで三角形を書いて、「効果」→「スタイライズ」→「角を丸くする」だと、
下の様に、角のみが丸い三角形になってしまいます。
そこで考えた方法が下記の方法です。
１.多角形ツールで、三角形を書く。
2.グリッドを表示する。
3.グリッドにぴったり合う様に、三角形の頂点を配置する。
4.アンカーポイント切り替えツールで、グリッドにぴったり合う様に方向線を延ばす。
5.三角形を、120度回転させて、別の頂点も手順3,4を繰り返して、同じ長さに方向線を延ばせば完成。
他に方法が無いか、もう少し考えてみよう。
依然書いた、「Google AJAX Feed APIを使ってみた」の、応用版です。
複数のRSSを読み込んで、指定した文字が含まれている記事のみ表示します。
サンプルは、トヨタ、日産、ホンダの三社のRSSを取得して、「ハイブリッド」という文字が、記事のタイトルか内容に含まれている場合のみ、表示しています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RSSリーダーサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAARRyJD439CKrHDwanT8Fq0RROytLWb0IPRySwZrSZnSrYgPFbDRS8wX6SHXCMp5HCtXxVIHdRlc5bxQ"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>RSSリーダーのサンプル</h1>
<div id="feed_area"></div>
</body>
</html>
// JavaScript Document
var rss_arr = new Array();
var delay = 500;
var keyword = "ハイブリッド";
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];
google.setOnLoadCallback(function(){
$("#feed_area").html("読み込み中...");
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = "";
for(var j = 0; j<rss_arr.length; j++){
html += "<dl>";
html += "<dt>";
html += "<a href='";
html += rss_arr[j]["url"];
html += "' target='_blank'>";
html += rss_arr[j]["title"];
html += "</a>---";
html += date_change(rss_arr[j]["date"]);
html += "</dt>";
html += "<dd>";
html += rss_arr[j]["cont"];
html += "</dd>"
html += "</dl>";
}
$("#feed_area").html(html);
}
function date_change(n){
var renewal_day = "";
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + "年" + month + "月" + day + "日";
return renuwal_day;
}
最終的に、htmlの、
<div id=”feed_area”></div>
に、取得して精査した記事を入力します。
var rss_arr = new Array(); var delay = 500; var keyword = "ハイブリッド"; //rssのリスト var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml", "http://www.nissan.co.jp/NEWS/rss.xml", "http://www.honda.co.jp/hotnews/rss/auto.rdf"];
最初に、グローバル変数を宣言しています。
var rss_arrは、最終的に表示する記事を、各々連想配列として入力するための配列です。
var delayは、for文の処理を待つための時間です。
var keywordは、チェックする文字列です。
var rss_listは、取得するRSSのURLが格納された配列です。今回は、トヨタ、日産、ホンダのRSS。
google.setOnLoadCallback(function(){
$("#feed_area").html("読み込み中...");
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
この処理で、rssを読み込んで、精査して、連想配列を作って、出来た連想配列を配列に格納しています。
青文字のfor文は、変数rss_listの数だけ、（今回は3回）繰り返します。
緑文字で、google apiに、RSSを指定して、取得する記事数を指定しています。
if(!result.error){
以降が、読み込んだRSSに対する処理です。
黄色文字は、取得した記事分の繰り返し処理です。
赤文字のif文の条件が、記事のタイトルか記事の本文に、「ハイブリッド」という言葉があるかないかです。
もしあったら、そのつど新しいオブジェクトを作成して、連想配列を作って、記事のタイトルとURLと、記事の本文と、更新日を格納しています。更新日は、その後の処理でソートさせたいので、getTime()で、数値に変換しています。ひょっとしたら、変換しなくてもソート出来るかも？出来た連想配列を、配列rss_arrに格納します。
黒文字のsetTimeout(arr_sort,delay)で、for文の処理をちょっと待ってから、関数arr_sortを実行しています。
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = "";
for(var j = 0; j<rss_arr.length; j++){
html += "<dl>";
html += "<dt>";
html += "<a href='";
html += rss_arr[j]["url"];
html += "' target='_blank'>";
html += rss_arr[j]["title"];
html += "</a>---";
html += date_change(rss_arr[j]["date"]);
html += "</dt>";
html += "<dd>";
html += rss_arr[j]["cont"];
html += "</dd>"
html += "</dl>";
}
$("#feed_area").html(html);
}
function date_change(n){
var renewal_day = "";
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + "年" + month + "月" + day + "日";
return renuwal_day;
}
関数arr_sortは、配列の中身を、連想配列のdateでソートしています。
さらにsetTimeoutで処理を待って、htmlに書き出す関数html_writeを実行しています。
html += date_change(rss_arr[j]["date"])
は、そのまま出力すると数値なので、関数date_changeで、日付のフォーマットを作ってます。
// JavaScript Document
var rss_arr = new Array();
var delay = 500;
var keyword = “ハイブリッド”;
//rssのリスト
var rss_list = ["http://www2.toyota.co.jp/toyotajp/toyota/jp/news_all_rss.xml",
"http://www.nissan.co.jp/NEWS/rss.xml",
"http://www.honda.co.jp/hotnews/rss/auto.rdf"];
google.setOnLoadCallback(function(){
$(“#feed_area”).html(“読み込み中…”);
for(var k = 0; k<rss_list.length; k++){
var feed = new google.feeds.Feed(rss_list[k]);
feed.setNumEntries(50);
feed.load(function(result){
if(!result.error){
for(var i = 0; i<result.feed.entries.length; i++){
if(result.feed.entries[i].title.match(keyword) || result.feed.entries[i].content.match(keyword)){
var rss_obj = new Object();
rss_obj = { title : result.feed.entries[i].title, url : result.feed.entries[i].link, cont : result.feed.entries[i].contentSnippet, date : new Date(result.feed.entries[i].publishedDate).getTime()};
rss_arr.push(rss_obj);
}
}
}
});
}
setTimeout(arr_sort,delay);
});
function arr_sort(){
rss_arr.sort(
function(a,b){
var a_date = a["date"];
var b_date = b["date"];
if(a_date > b_date) return -1;
if(a_date < b_date) return 1;
return 0;
}
);
setTimeout(html_write, delay);
}
function html_write(){
var html = “”;
for(var j = 0; j<rss_arr.length; j++){
html += “<dl>”;
html += “<dt>”;
html += “<a href=’”;
html += rss_arr[j]["url"];
html += “‘ target=’_blank’>”;
html += rss_arr[j]["title"];
html += “</a>—”;
html += date_change(rss_arr[j]["date"]);
html += “</dt>”;
html += “<dd>”;
html += rss_arr[j]["cont"];
html += “</dd>”
html += “</dl>”;
}
$(“#feed_area”).html(html);
}
function date_change(n){
var renewal_day = “”;
var date = new Date(n);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
renuwal_day = year + “年” + month + “月” + day + “日”;
return renuwal_day;
}
めちゃめちゃ久々の更新です。
しかも内容は若干しょぼい。。。。
今まで、何かオブジェクトをドラッグさせる様な場合、
ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
stage.addEventListener(MouseEvent.MOUSE_UP, ballUp);
function ballDown(e:MouseEvent):void{
ball.addEventListener(Event.ENTER_FRAME, ballEnter);
}
function ballUp(e:MouseEvent):void{
ball.removeEventListener(Event.ENTER_FRAME, ballEnter);
}
function ballEnter(e:Event):void{
ball.x += stage.mouseX - ball.x;
ball.y += stage.mouseY - ball.y;
}
こんな感じの書き方をしてました。赤文字のballは、ドラッグして動かしたいオブジェクトのインスタンス名です。
これでも動くけど、もっと簡単に書ける方法を、いまさら知ったので、メモしときます。
ball.addEventListener(MouseEvent.MOUSE_DOWN, ballDown);
ball.addEventListener(MouseEvent.MOUSE_UP, ballUp);
function ballDown(e:MouseEvent):void{
ball.startDrag();
}
function ballUp(e:MouseEvent):void{
ball.stopDrag();
}
startDrag()、stopDrag()….
こんなメソッドがあったのね。。。。。
ジグザグ時計 – wonderfl build flash online
コードは、
http://wonderfl.net/c/dEsm
にあります。
flocessingのドキュメントはこちら。
今回はflocessingを使ってみたくて、簡単なサンプルを作ってみました。
39〜51行目のコンストラクタで、初期設定をしています。
41行目のdrawDefaultLineメソッドの処理内容は、108〜113行目に書いてあります。
flocessingで使えるメソッドであるstrokeとlineを使ってます。
109行目のstroke(0xffffff,1);は、線の色を設定しています。第一引数が色で、第二引数がアルファ。
110〜112行目のlineメソッドの使い方は、
line(x1,y1,x2,y2);
上記の様な感じで、線を開始する点と終わる点を記述します。
43〜45行目のメソッドaddTextは、「hours」、「minutes」、「seconds」を画面に表示させてるメソッドです。
内容は、115行目〜127行目に書いてあります。
まず、116行目〜118行目でテキストの設定をしています。今回は、117行目で色を白に設定し、118行目でサイズを30にしました。
次に、120行目〜122行目でテキストフィールドのインスタンス化と設定を行ってます。
123行目の
addField.text = word;
で、第一引数に指定された文字列を入れてます。
125行目の
addField.y = (stage.stageHeight / 3) * lineNumber - addField.height;
で、第二引数lineNumberを使って、yの値を設定しています。
ここで考えたのが、今回は縦に3分割するレイアウトとしたので、lineNumberには上から何番目かの数字を代入する様にしました。
例えば、minutesだったら、上から2番目なので44行目にある様に、addText(“minutes”, 2)と呼び出す様にしてあります。
これはあんまり汎用的ではないかも…….
126行目でaddChildして表示させます。
48行目〜50行目のaddHoursTextFieldメソッドは、数字が表示されるテキストフィールドを配置するメソッドです。
基本的には、addTextと殆ど同じです。128行目〜136行目にあります。
129行目〜132行目で、テキストフィールドの設定を行ってます。今回は、第一引数にテキストフィールドのインスタンスが指定されてます。
133行目〜135行目で、xとyと位置を決めて、addChildしてます。yの値の出し方は、addTextと同様。
この時点では、テキストフィールドは配置されたけど、その中には何も書かれてません。
最終的にDateで取得した時間が入ります。
ここまでで、コンストラクタ内にあるメソッドの説明は終了です。
次はdrawメソッドです。flocessignを使った場合、クラス内にdraw（）を書くと、勝手にenterframeで
繰り返してくれるらしいです。初期設定で止める事も出来るけど、今回は止めずに使ってみました。
54行目〜57行目で、現在の時間を取得して、時間、分、秒を各々変数に格納してます。
で、58〜66行目のif文ですが、条件の(nowSeconds != seconds)は、一秒毎に処理される様に書いてます。
65行目のnowSeconds = seconds;で、今の秒数を変数nowSecondsに格納して、それと等しくなければ（1秒経ったら）
if文を実行します。drawメソッドは、enterframeで実行されていているけど、if文の中身は、1秒に一回だけの処理でいいので、
こうしました。
で、今度はif文の中。
59行目〜61行目で実行しているcreatePointsメソッドについて。
このメソッドは、最終的にジグザグの波形を作る時のポイントを格納する配列を返すメソッドです。
第一引数に時間（ジグザグの数）、第二引数に、中心となるyの値を指定します。
メソッドの内容は75行目〜99行目です。
まず77行目のif文で、第一引数が０じゃないかどうかを分岐してます。
もし０なら、（０分とか、０秒とか）ジグザグにする必要がないので分岐してます。
で、その中の78行目〜94行目のfor文で、ポイントを配列に格納していきます。
79行目〜81行目は変数の定義
82行目の
xPoint = stageWidth/3*2-25 - (halfBase*(points - i));
は、格納するポイントのxの値です。
stageWidth/3*2-25は、画面の右側の、ジグザグが表示されるスペースの幅の中央です。
そこから、第一引数pointからi分引いた数と、山の半分の値である変数halfBaceをかけた値を引けば、
一番最初の山のxポイントが解ります。説明がむずかしい…..
次は、yの値ですが、ジグザグにするには、偶数か奇数かをif文で分岐し、さらに繰り返し処理の最初と最後もyの値を変えなくちゃなりません。その処理が、83行目〜91行目です。
最初の条件の(i==0 || i == points*2)は、最初と最後の繰り返しです。
この時のyの値は第二引数で指定したHeightになります。
次の条件(i%2)は奇数の時です。
この時のyの値は第二引数で指定したHeightから50を引いた値になります。
最後は偶数のとき。
この時のyの値は第二引数で指定したHeightに50を足した値になります。
92行目で変数xPointと変数yPointを使ってPointのインスタンス化をしています。
で、93行目で配列newArrayに格納します。
96行目と97行目で、ジグザグ線の開始位置と終了位置のポイントを配列に格納しています。
開始位置はunshiftで最初に、終了位置はpushで最後に格納しています。
で、98行目でreturnします。
次に62行目〜64行目で使っているdrwLineメソッドです。このメソッドは、第一引数に（ポイントが入った）配列を、第二引数に数値を取ります。第二引数の数値は、色の情報です。
内容は、101行目〜106行目です。
これはfor文とflocessingのstrokeとlineを使って、配列に格納されたポイントを順番に読み取って、線を書いていっています。
104行目の
line(point[i].x,point[i].y,point[i+1].x,point[i+1].y);
は、配列pointの、今の繰り返し番号？(iの事)の、xおよびyの値から、
その次の繰り返し番号(i+1)のxおよびyまで線を引いています。(日本語にすると余計難しい…)
67行目〜69行目で、addTextFieldで作った空っぽのテキストフィールドに時間を入れてます。
右側のString(hours + 100).substring(1)等の説明は、以前の記事に書いてあります。
http://blog.jokerstyle.org/archives/420
70行目〜72行目で、colorTransformで、色を消していってます。
以上で説明終了です。
終了ですが、とっても解りづらい説明になってしまった……
それに、正直もう少しブラッシュアップ出来そうな気がしてます。特にポイントを配列に格納したりする処理は、
別のクラスの方がいい気がする…..
もう少し勉強しなきゃ。
久々の更新になってしまいました。
表題の件、
スクプトを使って、テキストフィールドを作成して、文字を書く(配置する？)方法。
package{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
public class textFieldTest extends Sprite{
private var label:TextField;
public function textFieldTest(){
addTextField();
}
private function addTextField():void{
label = new TextField();
label.autoSize = TextFieldAutoSize.LEFT;
label.background = true;
var format:TextFormat = new TextFormat();
format.color = 0x000000;
format.size = 50;
label.defaultTextFormat = format;
label.text = "123456789";
label.x = (stage.stageWidth - label.width)/2;
label.y = (stage.stageHeight - label.height)/2;
addChild(label);
}
}
}
こんな感じで動きます。
コンストラクタをtextFieldTestとして、その中でaddTextField関数を実行してます。
まず、赤文字の部分でTextFieldをインスタンス化します。
緑文字の部分は設定です。今回は左揃えにするTextFieldAutoSize.LEFTと、背景の塗りを有効にするbackgroundを使用しました。(塗りの色の設定をして忘れたので、白ですが)
次に青文字の部分でTextFormatをインスタンス化して、プロパティを橙色文字で設定。
今回はテキストの色を黒にして、サイズを50としました。
紫文字でプロパティを設定したTextFormatをプロパティに追加。
以下、同様にプロパティを設定していく。テキストを「123456789」として、xとyの値を設定して、
最後にaddChildする。
下記の様になります。
