Template:Tutorial

From Anipedia

(Redirected from Template:Flash tutorial)

Please read this page before making a tutorial for the first time. Also, I have taken the time to put ALL tutorial resources on this page. Universal images, tips for embedding flash and images and all of that. So please keep this page handy when writing your tutorial.

1 Model
2 Writing the tutorial
3 Embedding an SWF
4 Icons to use
5 Images
6 types of images
7 See Also

[edit] Model

Please try to follow the model of this page. The more similar each tutorial page looks, the easier it will be for readers.

[edit] Writing the tutorial

Keep in mind while developing tutorials you want to make the information as accessible as possible. Floating and resized images may make the process more frustrating for the reader. Having the images full-size and readily available on the page would be the best option in most cases.

Your tutorial will be most effective if you write it in the following order:

Outline: describe what the tutorial will teach.
Go through the steps: Write out the body of the tutorial. The tutorial should be organized like Tutorial:Motion tweening.
Proofread: When you are done writing, read the tutorial in its entirety to make sure it is understandable and thorough, but not too confusing.
Update categories, related links and FAQ: Think about what kind of questions being asked would lead to this tutorial page. Add them to the FAQ and direct their links to this page. Add the proper categories. Add related topics to the bottom of the page in a section called See Also.

[edit] Embedding an SWF

Use the <player> tag to embed an SWF. This is the syntax:

<player width="x" height="x" align="center|left|right|">name_of_uploaded_swf.swf</player>

The width, height and align fields are optional. The player will, however, resize your animation to something rather small if you don't specify.

[edit] Icons to use

Here are most of the icons from Flash CS3 to use as a visual resource in your tutorial.

[edit] Images

In every tutorial, images are an essential piece to showing the reader how to get the job done. When making images, please adhere to the following rules:

Any unused background in your images should be transparent or white.
If you are using text, please use the font Arial, preferably color #000000 (black).
If you're going to put a bounding box around your text, please use the color #ffffff (white) for the background, and 1 pixel border color #aaaaaa.
If you are having trouble matching these dimensions, please get as close as you can.
If you need to use arrows, programs like photoshop have a built-in arrow tool in the 'custom shapes' tool. Try and use that. If you don't have access to it, use black lines, like the ones found here.
Please use the appropriate image to fit the situation. In most cases, you'll want to use a centered non-floating image.
When you are done making your image, please upload it at the upload page.

To make a centered non-floating image, use the following code: <div style="text-align:center;">[[Image:Rtil.gif|none]]</div>

It will look like this on a page:

If you don't want to use a non-floating image, the following image tags are displayed in other fashions:

[edit] types of images

[edit] Standing image

Code: [[Image:Rtil.gif]]

This image will sit wherever it is put.

[edit] Float right

Code: [[Image:Rtil.gif|right]]

This will cause the image to automatically "float" on the right side of the frame, and all text will wrap around it. Clicking on the image will reveal the full-size on a new page..

Proin ut elit. Quisque volutpat mauris quis eros. Donec molestie interdum metus. Integer vitae leo. Phasellus egestas metus vel augue. Aenean turpis neque, tincidunt lobortis, egestas ut, congue non, sem. Nam velit. Vivamus porttitor. Morbi dui pede, accumsan id, imperdiet et, tristique eu, nibh. Etiam eu urna sed purus elementum faucibus. Morbi interdum erat quis quam. Suspendisse iaculis erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sollicitudin ultricies lectus. Sed ullamcorper auctor est. Fusce euismod. Praesent diam mauris, posuere quis, consectetuer non, vehicula ac, purus. Nullam sed nulla a nisi volutpat ultricies. Morbi a eros id mauris pulvinar gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Vestibulum sagittis commodo dolor. Nam placerat. Quisque ac lacus eget ante lobortis mollis. Quisque volutpat. Donec non lectus congue metus pharetra adipiscing. Sed nec nibh sit amet lorem scelerisque commodo. Nullam lobortis, libero ac molestie feugiat, eros massa congue leo, in sollicitudin dolor sapien vel leo. Nulla facilisi. Phasellus bibendum. Nullam et diam. Suspendisse viverra adipiscing nunc. Donec porta velit vitae eros. Quisque eu nibh nec felis elementum varius. Nunc accumsan est sit amet justo. Etiam placerat augue vitae urna dictum adipiscing. Quisque eleifend risus quis elit interdum imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus in turpis in dolor viverra cursus. Mauris semper. Donec eros mauris, molestie sed, lacinia a, lobortis et, nulla.

[edit] Float right w/ caption and frame

Code: [[Image:Rtil.gif|frame|right|caption]]

caption

This will cause the image to automatically "float" on the right side of the frame, and all text will wrap around it. The |frame|right| parameters tell the image to float to the right with its own individual frame. The last parameter adds a caption.

[edit] Float left

Code: [[Image:Rtil.gif|left]]

Same code as the float right except that the 'right' parameter is changed to 'left'.

[edit] Float left w/ caption and frame

Code: [[Image:Rtil.gif|frame|left|caption]]

caption

The only code that changes here is also the 'right' parameter, which is changed to 'left'.

[edit] Float w/ automatic thumbnail

Code: [[Image:Rtil.gif|thumb|clicking will reveal the full-sized image]]

clicking will reveal the full-sized image

This will cause the image to automatically "float" on the right side of the frame (which is the default), and all text will wrap around it. The last input will add a caption underneath the image. This can be helpful in letting the reader know what the image is associated with on the page. Clicking on the image will reveal the full-size on a new page. If the image is too large for the page (typically over 180px width or height), it generates a thumbnail automatically. The thumbnail is put in a seperate frame to keep the page organized.

[edit] See Also

Anipedia:Flash and animation tutorials

Retrieved from "http://anipedia.thebackalleys.com/index.php/Template:Tutorial"