jQuery FOTORAMA

program


久しぶりにjqueryでスライドショーの導入です。おさらいしながら入れてみました。

jquery 導入のおさらい

プラグインをダウンロードする

FOTORAMAからプラグインをダウンロード

jquery本体とプラグイン一式をHEAD内で呼びだす

このFOTORAMAに関しては、fotorama.jsとfotorama.css

<head>
  <title>Basic fotorama</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  <!-- Fotorama -->
  <link href="fotorama.css" rel="stylesheet">
  <script src="fotorama.js"></script>

</head>
BODYの記述
<body>

<!-- Fotorama -->
<div class="fotorama" data-autoplay="10min" data-transition="crossfade">
  <img src="img/00.jpg">
  <img src="img/01.jpg">
  <img src="img/02.jpg">
  <img src="img/03.jpg">
</div>
</body>

中国語入力をする(mac yosemite)

non-forget

MacもWindowsもPCの設定だけで、中国語を入力することができます。
Windowsはこのサイトが親切です。
Vistaでも入力は可能でしたので、諸外国語の入力対応は早くからの装備だったのですね。
以下はmac yosemiteでの手順です。

中国語(簡体字) ピンイン入力にする

画面右上の時計のヨコ、「あ」ひらがな　「A」英字、とあるところをクリック

"日本語"環境設定を開く

日本語の他に追加する + をクリック

選択　ピンイン

実際にピンインで入力する


中国語を選択(ショートカットを決めた方がいいかもしれません)

"nihao"とキーボードで入力、選択はspaceキーで。

スキャナに取りこまれたノイズ・紙質を消す

photoshop

シワや消しゴム跡程度を消し、描画を保存したい。
スキャナの調整を使わず、Photoshopで加工する。

Photoshopのレベル補正

一番右側のハイライトを左の任意の位置へ(初期255)

おおよそこれで消える

photoshopからFlashへ　３

image

タイミングをずらす

タイムライン

レイヤー名を選択。

ドラッグして、「sora」の終わるあたりに、「clover」の始まりを持ってくる。

「tanpopo」の先頭も「clover」の終わるあたりまでずらす。

アクションを記述

タイムライン

一番最初にactionに書き換えたレイヤー
「tanpopo」の終わるあたりにキーフレームを挿入(F6)

アクションパネルから記述。

ムービー終わると指定のURLに飛ぶようになった。


書き出し→ムービーの書き出しでフラッシュファイルが出来ました。



はてなダイアリーにはる

  1. jimdoでフラッシュをアップロード
  2. googleでブログパーツにする
  3. コードをはてなダイアリーに記述
jimdo

アップしてたサイトのコードからswfの該当URLを探したのですが、
他に方法あったら、教えてください。
選択範囲内のsrc以下がURL

google

URLを入れて、コードを出力。
コードをはてなダイアリー本文に貼ります・・・が、こちらはgoogleから見て、外部サイトなので、http:を//の前に書き加えてやる。
これをしてないとコードが丸見えになります（なりました)。

photoshopからFlashへ　２

image

キーフレームの挿入

タイムライン
  1. タイムラインの四角いのをドラッグ選択。
  2. control クリックでキーフレームを挿入。
  3. 同じく60と90にも挿入する。


これでキーフレームができた。

クラシックトゥイーンの挿入

タイムライン
  1. 30の位置を選択。


  1. 同じく60にも

クラシックトゥイーンができた。紫色の部分。

効果をつける

ステージ
  1. ステージの画像をクリック選択


  1. 範囲選択して全部のレイヤーを選択した。

これで、次の効果の作業を、一度に出来るようになった。

プロパティ
  1. カラー効果。今回はアルファ→０


  1. 90の位置も同じくレイヤー選択。アルファ0

これで、各レイヤーの最初と最後のフレームに、効果がついた。