]
Internet Explorerに合わせたCSSコーディングほど手間がかかる事はありません。古いWindowsPCをそろえて古いInternet Explorerで確認するのもわずらわしいですよね。。
IETesterというアプリを使えば、IE5.5、IE6、IE7、IE8での表示確認が一度にできます。Windows用ですが、無料で使えるのでダウンロードして損はないと思います。ボクはとても助かってます!^-^
▼IETester
配布元:My DebugBar | IETester
かなり限られた条件だと思いますが、ボクが見ているFirefoxではFlsahコンテンツを触ると周りに点線が出るという現象が起きてます。その点線は、テキストリンクや画像リンクに対してクリックしたときと同じ点線が表示します。
点線が出てしまう条件の予想 Windows XP
Firefox(Mac版 Firefoxでは出ませんでした。)
swfobject v2.2 でFlashを表示。 点線を消す方法 根本的解決になるかどうかはわかりませんが、swfobjectでも最終的にはobjectタグをdocument.writeしているので、objectタグに対してoutline: none;としてあげると、ボクの環境でFlashの周りの点線は消えました。
コレでいいのかなー^-^;
CSS 1
2
3
object{ outline: none; } 追記:この点線は、Firefoxでフォーカスがあたっているところに対しての点線でした。見てくれを重視するために、この点線自体を消したい場合は、全体に対してCSSでoutline:nonet;とするといいと思います。
Tweener(トゥイーナー)とは 例えば、1秒かけてX座標に100pxゆるやかにだんだん加速しながら移動後に、”テスト”と出力する場合。
ActionScript 1
2
3
4
5
6
// ActionScript2 import caurina.transitions.Tweener; Tweener.addTween([instance],{_x:100, time:1, transition:'easeOutQuint', onComplete:handler}); function handler(){ trace("テスト";); }
TweenerはActionScript3.0とActionScript2.0で使用する事ができ、インスタンスに対して「だんだんゆっくり止まる」「どんどん勢いよく移動」「びょーんびょーん(?)」と、いろんなイージングが設定できるトウィーン制御ライブラリです。とても簡単なScriptで実現できます!
導入手順 まずはGoogle Codeに公開されているライブラリをダウンロード。
配布元:http://code.google.com/p/tweener/
ダウンロードしたzipファイルを解凍すると、「caurina」というフォルダができると思います。それをflaファイル直下、またはFlashの環境設定でクラスパスを追加します。これで準備は完了しました。
Tweenerの使い方サンプルを簡単に説明 ActionScript 1
import caurina.transitions.Tweener; この1行は、Tweenerを使うために、ダウンロードしたTweenerライブラリをimportする記述です。ライブラリを管理している環境によって左右されますが、Flashの実行ファイルがある場所に「caurina」フォルダーを置いたら、「caurina」からの階層になります。
ActionScript 1
Tweener.addTween([instance],{ この1行の[instance]は、トゥイーンして動かしたいインスタンス名をいれます。[] ←括弧は必要ないので、例えば、「myInstance」というインスタンス名のムービークリップを動かすとした時の最初の1行は、
友人の結婚式の2次会で流すために動画編集をちょくちょくします。 今回は、その素材がアナモルフィックスだったときに、AfterEffectsのコンポジットの設定方法を紹介します。 紹介するってことでもないんですけどね^-^;
依頼は写真をスライドショーにするのと、コメントに対して字幕をつける内容だったんですが、オープニングのテキストだけをAfterEffetsで装飾しようと思いました。 どういうカメラで撮影してきたのかわかりませんが、キャプチャーした動画の素材がアナモルフィックスでした。 DV-NTSCは720x480の0.9ピクセル 4:3アスペクト比で、アナモルフィックスの場合も同じなんですが、アナモルフィックス素材自体が16:9に引き伸ばされること前提で撮られている。 ということで、カメラのレンズがアナモルフィックスレンズだったということです。見た目は縦長に写ってしまってますが、それは結局出力するものによります。 DVDプレイヤーで4:3のテレビで再生すると、上下に黒帯、レターボックスが出ますが、ワイドテレビの場合はぴったり出力されるか、プロジェクターとかも同じで、出力側の設定で今度は左右に黒帯ができるのを避ける事ができます。
この図いうと、1番の画像が通常のDV-NTSCで撮影したCCDの写り方とします。その素材をアナモルフィックスワイドスクリーンにすると、2番の画像みたいに横に伸びてしまいます。3番の画像が、DV-NTSCでアナモルフィックスのレンズやCCDの設定で撮影した素材とします。プレビューする画面によっては縦長に伸びて見えてしまいますが、実際にノンリニア編集ソフトで編集する場合は、4番の画像のように、圧縮されていた左右が横に伸びて、正しい形に出力されます。
Final Cut や Premireなどのノンリニア編集ソフトへ持っていく素材を作るときに気をつけなければなりません。AfterEffectsで設定するとき、コンポジット設定は以下の通りです。
プリセット:NTSC DV ワイドスクリーン
ピクセル縦横比:D1/DV NTSCワイドスクリーン(1.2)
この場合、AfterEffectsで見える正方形ピクセルでの縦横サイズは864x486です。
ピクセル縦横比にアナモルフィックス(2.1)とありますが、プリセットでどれを選んでも選択される事はありませんでした。何に使うんでしょうね^ー^;
docomo
作ろうiモードコンテンツ:Flash®
au
KDDI au: 技術情報 > 機種別情報一覧
softbank
softbank MOBILE CREATION
iPhoneにしてからすっかりFlash Liteの情報にアンテナを張ることが少なくなってしまいました。最新のFlash Liteのバージョンは3.1になってるんですねー。^-^;
とはいうものの、Flash Lite 1.1でコンテンツを作らざるを得ないのが現状だと思います。しかし、ちょっと凝ったコンテンツを作ろうと思ったらFlash Lite 2.0からじゃないと表現できなかったりします。なんと、docomoはFlash Lite 2.0の端末がないんですよねー。いち早く導入した変わりに、Flash Lite 2.0をとばしてFlash Lite 3.0に対応したみたいです。
ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。
WordPress以外でSyntaxHighlighterの使い方
ソースコードに色をつけるSyntaxHighlighterの導入方法
使うまでの手順 プラグイン新規追加で SyntaxHighlighter Evolved をインストール。
インストール後「使用する」を押してとりあえず完了。 ソースコードに対して、 [html] ソースコード [/html] とマークアップ。
※[ ]←これは半角で プレビューしてみてください。できましたか?
※この段階で表示できてなかったら、WordPressの外観からheader.phpにと、footer.phpにが入っているか確認してみてください。もし、入ってなければ、はの直前、はの直前に記入してください。 通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは[ ]←この括弧に種類を書いてパラメータを書いていきます。
通常表示 [html]
開始する行数の指定 [html firstline="10"]
自動でリンク設定されるURLテキストの解除 [html autolinks="false"]
右上に出るツールバーの解除 [html toolbar="false"]
行数を非表示にする [html gutter="false"]
シンプル設定 [html light="true"]
折り畳んで表示 [html collapse="true"]
行を強調させる。カンマで複数設定可能 [html highlight="4,6,8"]
ルーラを表示させる [html ruler="true"]
Tabの横幅の大きさをかえる [html tabsize="10"]
行数なくしてシンプルに、自動でつくリンクを解除 [html autolinks="false" light="true" highlight="4,6,8"]
Action Script [as3]
各言語のbrushと対応JavaScript(SyntaxHighlighter ver.2.0.320) Brush name Brush aliases File name ActionScript3 as3, actionscript3 shBrushAS3.
いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。
WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved
まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。
SyntaxHighlighterのライブラリをダウンロード ダウンロードはこちらから。
配布元:syntaxhighlighter - Google Code
解凍したフォルダー構成。
- Uncompressed
- Styles
- Script
この3つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。
HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" /> <script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script> <!-- 表示したい言語に応じて書きます --> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script> <!-- window.