8月 04

HaxeとOpenFL導入メモ

1.  FlashDevelopのインストール
最新版4.4.3をダウンロード&インストール
http://www.flashdevelop.org/community/viewtopic.php?f=9&t=3529

 

2. Haxeのインストール

HAXEをダウンロード&インストール

http://haxe.org/?lang=jp

 

3. OpenFLのインストール

haxelib.exeがあるフォルダに移動

自分の環境では
C:\HaxeToolkit\haxe

以下のコマンドを実行
haxelib.exe install openfl
haxelib.exe run openfl setup
haxelib.exe install actuate

 

以上で完了!

5月 04

jQueryMobile メモ

jQueryMobileについて覚えたことのメモ

続きを読む »

3月 29

pjaxのサンプル

pjaxの一番単純なサンプル

デモ

ソース
simple.html

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <script type="text/javascript" src="jquery.pjax.js"></script>
    <script type="text/javascript">
        $(document).pjax('a.link', {container:'#content', fragment:'#content'});
    </script>
</head>
<body>
<a href="simple.html" class="link">page1</a>
<a href="page2.html" class="link">page2</a>
<a href="page3.html" class="link">page3</a>
<div id="content">
    <h1>page1</h1>
</div>
</body>
</html>

page2.html

<html>
<head>
</head>
<body>
<div id="content">
    <h1>page2</h1>
</div>
</body>
</html>

page3.html

<html>
<head></head>
<body>
<div id="content">
    <h1>page3</h1>
</div>
</body>
</html>

ページ遷移時にエフェクトをつけたもの

デモ

index.html

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <script type="text/javascript" src="jquery.pjax.js"></script>
    <script type="text/javascript">
        //リンククリック時
        $(document).on("click", "a.link", function(e){
                    e.preventDefault();
                    var href = $(this).attr("href");
                    //フェードアウト
                    $("#content").animate({opacity:0}, 'fast', function(){
                        $.pjax({url:href, container:"#content", fragment:"#content", timeout:1000});
                    });
                }
        );

        $(document).on('pjax:end', function() {
            $('#content').animate({
                opacity : 1
            }, 'fast');
        });
    </script>
</head>
<body>
<a href="index.html" class="link">page1</a>
<a href="page2.html" class="link">page2</a>
<a href="page3.html" class="link">page3</a>
<div id="content">
    <h1>page1</h1>
</div>
</body>
</html>

2月 04

ベレ法でやわらかい物体を作る

ぷるぷるした四角と円を作ってみました。

デモ1

デモ2

上の方にあるチェックボックスとスライダーで表示方法や物体の軟らかさを変更可能。
ベレ法という粒子間に働く力をシュミレーションする方法で実装しています。

意外と気持ちのよい動きが出来たので、何かに応用したい。

デモ1のソース
デモ2のソース

参考書

1月 31

Mosaic Art Generator

・アプリ名

Mosaic Art Generator

・アプリ概要

持っている画像をモザイクアート化出来る!

・使い方

1.「Select Image」をクリックしてモザイクアート化したい画像を選択する
2.「Download」でモザイクアートを保存
3.「虫眼鏡」ボタンをクリックで詳細観覧モードへ。どのような写真を使ってモザイクアートが生成されたかを確認できる。

・アプリURL

http://matsu4512.jp/works/flash/mosaic_art_generator/MosaicArtGenerator.html

古い記事へ «