How To Create An Animated GIF In Photoshop

Here is a simple way to create a slideshow to show up on a smart phone or ipad:

1. A simple animation combines turning layers off and on- and using the tween command to animate the movement of an object on a layer
2. The first step is to set up your layers- create each separate photo on its own layer 
3. Then choose Windows>Animation to show Photoshop’s animation palette.
4. On the first frame- turn off visibility for all layers you do not want visible at the start of your animation (click the eye next to the layer). 
5. Add one frame at a time- turning on the layers you want visible for each frame of the animation (you add a frame to the animation by clicking the image that looks like a small notepad- inside of the Measurment log on the Animation palette)
6. Next- you create the animation frames using tweens (vaguely similar to flash) – by clicking the small icon in the Animation Palette that has an alt tag of ‘tween’.
7. Set how many frames to add, the parameters (for a slideshow- I would just add two frames and just use just opacity, but you can use position and effects for many different looks)
8. Adjust your timing- go through each of your frames and adjust the delay for each frame of your animation (time is shown in seconds) *You can change the time on multiple frames at once- by using your Shift-key
9. Export- File>Save for Web & Devices: Select Gif As your preset and test!

Embedded video to play when clicked

What this is used for: If you are embedding a video into your website- but you do not want to have a player.  What I would suggest is adding a play symbol to the first frame of your movie (but not a necessity)- and then when the user clicks on the movie- it will start playing- click again will stop. 

1. Create a new Actionscript 3.0 FLA

2. Import your video (File/Import/Import Video)

3. Set Video to what parameters you want and under properties give it an instance name of flv_video

4. Create a new layer and name it ‘Play’

5. Draw a shape over where you want the action to work (either the whole video or the play symbol on your first frame)- make it a random color

6. Select the shape and hit F8 to pull up your symbols- or right click/convert to symbol- make it a movie clip and give it an instance name of mc_play

7. Create a new layer and name it @ for Actionscript

8. In the first frame of layer @, open your actions or F9 and add:

mc_play.addEventListener(MouseEvent.CLICK,playMovie);

mc_play.buttonMode=true;

mc_play.useHandCursor=true;

function playMovie(e:Event){

flv_video.play();

}

9. Save and hit ctr+enter to test

10. Once it’s working properly- go back and make your movie clip- ‘mc_play’ transparent.  Export/embed into your webpage/Voila- done.

Embedding a Video into HTML- using Flash

Ok- so after a hectic day- and then to come home to a broken air-conditioner, I’m now sitting down to type a blog.  sigh… 

We’ll start with a basic Flash tutorial:

1. Open Flash and create a new flash doc.  Save it in a test file as Video.fla.  (I always create a test file on my desktop while I’m working)

2. Import the video you are wanting to embed- File/Import/Import Video

3. If you do not already have a flv- but have a video that is a different format- click Launch Media Encoder at the bottom of the Import Video Window

4. Once that opens- drag your movie into the window

5. Go to Edit/Export Settings

6. You can now change the start and stop point of your video, the format it is going to save it as, and the width and height. Go to Preset (upper right corner) and click flv/ Click Out Put Name- make sure the new video will be saved in the same folder as your Video.fla and name it Video/ Click ok- and you will be taken back to the main Media Encoder page. Click Start Queue

7. Close the Media Encoder once it is finished- and back on your import video window- hit browse and choose your new Video.flv.  Choose load external video with playback component.

8. Click Next

9. Choose your skin and skin color- we will go through how to create custom skins in a later article

10. Click Next

11. Click Finish

12. Set your stage to the size you want- by clicking the stage- and selecting edit under properties

13. Go to your Component Inspector to choose autoplay(true- it will start once your webpage loads, false will make it so it wont start until someone presses play and is the best option in my opinion- you don’t want to annoy people with a video right off the bat), change the skin and skin color, change the source, etc

14. Now save the fla(ctl+S), and save the swf (ctl+shft+alt+S) as video.swf. Make sure you are saving it in the same folder as the Video.fla and the source movie (Video.flv). This action will automatically save your skin in this location as well

Adding Video.swf to Webpage with HTML

1. Upload source Video- Video.flv, Video.swf file and skin.swf (whatever skin you use) to your website- however you do it. I use filezilla and create a new folder called flash

2. In the body portion of your html page or section- enter the following code (I used the names I gave everything above- if you used a different name- switch it out ).  Everything in the comment tags <!– –> are tips:

“<p><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”460″ height=”345″><!–Set your width and height–>

<param name=”Movie” value=”/Flash/Video.swf”><!– Where your swf is–>

<param name=”base” value=”/Flash”> <!–Tells the browsers where your video player and .flv are –>

<param name=”play” value=”false”><!–Sets autoplay, don’t count on this it should be in your video –>

<param name=”quality” value=”high”>

<param name=”wmode” value=”transparent”><!–If you would like to create a div tag or html above your movie- this will need to be transparent–>

<param name=”loop” value=”false”><!– If you want your video to loop automatically –>

<!–This is the embed code for firefox–><param name=”menu” value=”false”><embed src=”/Flash/video.swf” width=”460″ height=”345″ base=”/Flash” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; quality=”high” wmode=”transparent” loop=”false” menu=”false”></embed></object></p>”

Well….

It has only been 4 days- and I’m already too busy to post everyday.  So much for that :).  I’m just going to try and post at least once a week and we’ll see how that goes.  I’ll start today with a basic- “how to create a flash video to embed into your website” post.  Simple- but best to start with the basics before I dive into how to create a custom video player or such.  I’ll post that shortly- so keep your eyes open.

Welcome to my blog for all things Web!

So, inspired by ‘Julie & Julia’ (the blogging portion not the cooking portion), I’ve decided to start a blog.  Two, actually but this is the one that will be updated daily.  As I can’t cook- but I can code, I figured… HEY!  I can do a Web Blog.  Now, I am not just a developer- I have also taken a handful of web design classes- and I am also very proficient in SEO/Online Marketing/and Graphic and Packaging design.  Here- I have decided to blog at least once a day for the next year- starting today.  Everything from simple practices to advanced- and new things as I come across them.    Feel free to comment and ask questions or suggest ideas for me to blog about.  This is going to be a way for me to get information out there and hopefully learn more!

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!