写真でアニメ・・・

昨日、アニメーション加工ソフト Giam を使って GIFアニメを作ることができたので　
それなら・・

「写真を入れたら、スライドショーのようになるのでは？」　と思い
試してみることにしました。


１．JTrim でファイルを開き、写真を選ぶ。
　　イメージの余白作成で写真枠を作る。(影も付けてみました)
　　この作業を写真ごとに行い保存。（今回は6枚使用）

２．Giam を使って写真を統合させる。
　　
　　でも・・・なぜか Giam のファイルが開かないのです。
　　　　　　　何度やり直してもエラーになってしまい困ったなぁ？

　　「何がいけないの？」　と思って
　　　Giam の使い方を調べたら、下記のように書いてありました。

　　　　　　
Gima の使い方
　　
　　アニメーションさせる画像を読み込む時は、ドラック＆ドロップ　が基本です。　
　　なぜなら Giam の [ メニューバー ] の [ ファイル ]⇒[ 開く ] では、jpg 形式が読み込めないからです。
　　[ ファイル ]⇒[ 開く ] のときは、[ ファイルからコマの付け足し ] を使えば　jpg　も読み込めます。

ようやくファイルが開いたので、再び作業を開始。
スライドショーのアニメができました。

←　1月に訪れた
　　ろうばいの郷 の風景です。
　　(6枚写真)

　　　　　　　

GIFアニメを作ってみよう

前回の　　教室で、アイコンの作り方を教えて頂いたので　
これを参考にして、作成中のホームページに変化を付けてみました。

クッリプアートから　GIFアニメを作る方法

１．ワード のクリップアートから枠を検索して画像を選ぶ。

２．JTrim の編集から文字を書き入れる。
　　( 枠に色を付けたいときは、編集の塗りつぶしを使用。)

３. アニメーション加工ソフト Giam を使って画像を加工する。
　　

今回、初めて Giam に挑戦しました。
使った画像は　6枚です。

　 　 　
　 　

この6枚を統合してGIFアニメを作り、
ホームページのサブタイトルとして使用することにしました。


←　これは、画像の変化を　繰り返しにしてあります。
　　 (　変化していますか？　　)
　　　　　　　　　　　　　　　　　　　　　　　　　　　

スクロールの練習

　教室で作成している　ホームページのトップ画面に　「変化を付けたいな」　と思って
文章の一部にスクロール　(右から左に文字が動いて止まる)　を入れてみようと・・・

編集のHTML画面を開き、動かす文字の前後にスクロールソースを書き加えました。


●　右から左に動かして、左で止める方法

　　　＜marquee behavior="slide"＞文字＜/marquee＞　を書き加える

<marquee behavior="slide">☆</marquee>

そうしたら・・・あれ？　
背景枠の外側から文字が現れてしまったのです。

だから・・・さらに余白 hspace="30" を書き加えて、
背景枠のところから文字が現れるようにしました。

　　　＜marquee behavior="slide"hspace="30"＞文字＜/marquee＞　を書き加える。

<marquee behavior="slide"hspace="30">☆・・・余白を入れたので、背景枠から表れて端の手前で止まりました。</marquee>　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　


　　　　　　　　　　　　　　　　　　　　


それから・・・今後の参考にと、他のスクロールも調べてみました。

●　右から左に動かす方法

　　　＜marquee＞文字・画像＜/marquee＞　を書き加える。

　　　<marquee>☆</marquee>



●　左から右に動かす方法

＜marquee direction="right"＞文字・画像＜/marquee＞　を書き加える。

<marquee direction="right">☆</marquee>


●　左右往復させる方法


　　　＜marquee behavior="alternate" loop="-1"＞文字・画像＜/marquee＞　を書き加える。

<marquee behavior="alternate" loop="-1">☆</marquee>



●　上から下へ動かす方法


　　　＜marquee direction="down"＞文字・画像のパス＜/marquee＞　を書き加える。

　　　下から上に動かすときは　direction="up" にする。　
　　　動いてから止めたいときは、この後に　 behavior="slide"　を付け加える。
　　　縦の長さを指定したいときは、さらに　 height="長さの数字"　を付け加える。
　
<marquee direction="up" behavior="slide" height="120">
　　　☆
　　　☆
</marquee>


上下左右に動かす方法

＜marquee direction="down" behavior="alternate"＞
＜marquee behavior="alternate"＞
＜文字・画像＞
＜/marquee＞
＜/marquee＞　を書き加える。

<marquee direction="down" behavior="alternate">
<marquee behavior="alternate">
☆
</marquee>
</marquee>


頑張ってスクロール画面を作り、編集のプレビュー画面で作動を確認。
「ちゃんと動いてるので、これで良し！！」　と、このブログに投稿。

なのに、投稿後の画面を見ると・・・　　　
「あれ？」　動いていません。

「なぜかなぁ～？」　と考えてみたら・・・そうでした。　　　　　　　
忘れていました。

ベータバージョンで作ると・・・投稿した時に、自分で作ったソースが反映されずに　　　
文字のまま残ってしまうという事を。　

でも、せっかくスクロールの勉強をしたので　　　
このまま記録として、残しておくことにします。　　

写真加工 (線を消す)

先日、フォトチャンネルを作っていた時のこと・・・

使用する写真の中に、電線のある写真が　1枚ありました。
写真を撮っている時には気づかなかったのですが、山小屋の電線が入ってしまったのです。

「空が青くて綺麗なのに・・・この線、消せないかなぁ？」
と、線を消す方法をパソコン検索で調べていると

「どうしたの？」　と、娘がやって来て　「それなら、これを使うと良いよ。」
「でも、母には難しいかもね。」　と言いながら

『写真編集ソフト　Adobe-Photoshop』　と　『テキスト本　はじめてのPhotoshop』　を貸してくれました。
なので、これを借りて電線を消す作業に没頭。　

まず、なげなわツールを使用しての作業・・・　
なんとか出来たものの・・・あ～あ　空の色がまだらになってしまい、やり直し。

今度は、ブラシツールを使用・・・
でも、これも空の色がまだらになってしまい、やり直し。

一日中、悩みながら作業をしている私のところへ・・・再び娘が登場。
「やっぱり、母には　まだ難しいみたいね。」　と言いつつ、最後の仕上げを手伝ってくれました。





これが　元の写真です。
空の真ん中に電線が　3本入っています。　

この線を消したかったので
アドビ フォトショップを使って
写真加工をしました。




　　　　　　　　　　　　　　　　



これが　加工後の写真です。
電線が消えています。

なげなわツールを使って
線を消した後、

ブラシツールを使って
空の色を調整しました。




細かい作業なので根気がいりますが、綺麗にできると嬉しいです。
今度は、自力で操作できるようになりたいな。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

試してみよう

　作成中のホームページ・・・

　トップページの　ブログへのリンク方法を 「別のウィンドウで表示する」　に変えてみました。

別のウィンドウで表示する方法　・・・　編集の　HTML画面で変更。

＜a href="ブログのURL"＞題名＜/a＞ のところに　target="_blank" を書き加えて
＜a href="ブログのURL"target="_blank"＞題名＜/a＞　にする。

今回は、一度リンクを張った後の変更だったので　編集画面を使ったけれど
始めから別ウィンドウで表示させたい時は、ハイパーリンクで　「_blank」　を選べばいいのだと思う。

　　　　　　

　スライドショーページの　「前のぺージへ戻る」　をクリックしたときに
「お気に入りの風景」　ページの　春・夏・秋・冬　に戻れるようにしました。

でも・・・これが苦戦の連続。
スライドショーが　「すなねぃる!!」　で作った画像だから、編集のHTML画面を開いても　画像の中身が表示されないのです。
　
困ったなぁ～。　
で、アドバンスドHTMLエディタ画面を開いたら・・・ありました・・・画像の中身が。

ヤッターと思って、リンクの張り直しをしたのですが
あれ？？　文字化けしています。

またまた　困ったなぁ～。
で、「ここで諦めてはなるものか！」　と　色々なサイトを訪問して調べ、やっと原因と解決方法が解りました。

でも、ん～ん
私には難しい文字・内容です。


アドバンスドHTMLエディタを使ったら文字化け・・・の解決方法

原因　　　アドバンスドHTMLエディタを使ったことで、作成ソフトの文字コードが
　　　　　「Shift_JIS」から　「EUC-JP」　に変わってしまった。

解決方法　＜meta http-equiv="Content-Type"content="text-html;charet=Shift_JIS"＞
　　　　　の　Shift_JIS　の部分を　EUC-JP　に変えればオッケーだよ。

と、書いてありました。

なので、この部分を探して文字コードを変えたら　文字化けが直りました。　
よかったぁ～。