docs: documentation for 0.0.2-preview.2 (#44)

* Rename Demo.gif to StreamingImageSequenceDemo.gif
* Update StreamingImageSequencePlayableAsset.png
* Rename DragAndDropStreamingAssets.png to DragAndDropFolder.png
* Add images
* Updating docs
* Update main readme
* Update the description in package. Also increase the version to 0.0.2-preview.2

Author: sindharta

Documentation~/en/FaderPlayableAsset.md

@@ -0,0 +1,44 @@
+# FaderPlayableAsset
+
+A playable asset for fading Image component in Unity Timeline.
+
+# Tutorial 
+
+From an empty scene, do the following:
+
+1. Create an empty *GameObject* and add a *Director* component to it
+1. Copy the sequential images in a folder inside the Unity project, preferably under *StreamingAssets*
+   > Copying to a folder under *StreamingAssets* will save us from the process to import those images in Unity, which may take a long time if there are a lot of images
+1. Open the Timeline window, if not opened yet
+1. Add a FaderTrack in the Timeline Window
+
+   <img src="../images/AddFaderTrack.png" width=180>  
+   
+1. Right click on the timeline window and click *Add Fader Playable Asset*
+ 
+   <img src="../images/AddFaderPlayableAsset.png" width=480>  
+   
+1. Create an Image object by clicking the menu: GameObject -> UI -> Image
+
+1. Drag and drop the Image object to the object property of the FaderTrack 
+
+
+
+The Image object will be faded in/out as we play the Timeline or drag the time slider of the Timeline window.
+
+
+
+# Inspector
+
+<img src="../images/FaderPlayableAsset.png" align=right  width=320>  
+
+* **Color**   
+  The color to be applied to the Image component attached to the track.
+* **Fade Type**  
+  - FadeIn : from invisible (alpha=0) to visible   (alpha=1) 
+  - FadeOut: from visible   (alpha=1) to invisible (alpha=0) 
+
+
+
+
+

Documentation~/en/ImportingImages.md

@@ -2,27 +2,33 @@
 
 There are a couple of ways to import images into StreamingImageSequencePlayableAsset
 
-1. [Folder Drag and Drop to the track](#Folder Drag and Drop to the track)
-1. [Importing a file exported from Adobe After Effects using our StreamingImageSequence script for Adobe After Effects](Using StreamingImageSequence plugin for Adobe After Effects)
+1. [Folder Drag and Drop to the track](#folder-drag-and-drop-to-the-track)
+1. [Setting the folder via inspector](#setting-the-folder-via-inspector)
+1. [Using StreamingImageSequence script for Adobe After Effects](#using-streamingImageSequence-script-for-adobe-after-effects)
 
-# Folder Drag and Drop to the track
+## Folder Drag and Drop to the track
 
-This is done by doing drag and drop of the sequential images folder under *StreamingAssets* to the StreamingImageSequenceTrack.
+This is done by doing drag and drop of the sequential images folder to the StreamingImageSequenceTrack.
 
-<img src="../images/DragAndDropStreamingAssets.png" width=960>  
+<img src="../images/DragAndDropFolder.png" width=960>  
 
+## Setting the Folder via Inspector
 
-# Using StreamingImageSequence script for Adobe After Effects
+We can simply click the **Select** button, or we can also drag and drop a folder directly into the inspector.
+<img src="../images/DragAndDropInspector.png" width=640>  
+
+If the chosen folder is not under *StreamingAssets*, then the following import window will appear to confirm if we'd like to copy the images into *StreamingAssets*.   
+We can choose to skip copying by unchecking the checkbox to do so.
+
+<img src="../images/ImporterWindow.png" width=480>  
+
+> Copying to *StreamingAssets* is recommended because it saves us from the import process, which may take a long time if there are a lot of images.
+
+## Using StreamingImageSequence script for Adobe After Effects
 
 1. In Adobe After Effects, Run [StreamingImageSequence script for Adobe After Effects](https://github.com/unity3d-jp/StreamingImageSequence/tree/dev/AE~/Plugins) to export the images into a folder.
 2. In Unity, click the menu: Assets -> StreamingImageSequence -> Import AE Timeline, and select the *jstimeline* file in the exported folder.
 
 > This import will also create/setup the required Director and Image objects in the Assets/{jstimeline_name} folder.  
 Importing a *jstimeline* which has the same file name as a previously imported *jstimeline* will overwrite the existing assets in the folder, 
 so it is recommended to move these assets into another folder.
-
-
-
-
-
-

Documentation~/en/StreamingImageSequencePlayableAsset.md

@@ -0,0 +1,68 @@
+# StreamingImageSequencePlayableAsset
+
+A playable asset for playing sequential image sequences in Unity Timeline.
+
+# Supported Image Formats
+
+
+|             | Windows            | Mac                |
+| ----------- | ------------------ | ------------------ |
+| png         | :white_check_mark: | :white_check_mark: |    
+| tga         | :white_check_mark: |                    |
+
+
+# Tutorial 
+
+From an empty scene, do the following:
+
+1. Create an empty *GameObject* and add a *Director* component to it
+1. Copy the sequential images in a folder inside the Unity project, preferably under *StreamingAssets*
+   > Copying to a folder under *StreamingAssets* will save us from the process to import those images in Unity, which may take a long time if there are a lot of images
+1. Open the Timeline window, if not opened yet
+1. Add a StreamingImageSequenceTrack in the Timeline Window
+
+   <img src="../images/AddStreamingImageSequenceTrack.png" width=180>  
+   
+1. Drag and Drop the sequential images folder to the StreamingImageSequenceTrack added previously
+ 
+   <img src="../images/DragAndDropFolder.png" width=960>  
+   
+1. Create an Image object by clicking the menu: GameObject -> UI -> Image
+
+1. Drag and drop the Image object to the object property of the StreamingImageSequenceTrack, and click *Create StreamingImageSequenceNativeRenderer on Image* 
+
+   <img src="../images/CreateStreamingImageSequenceNativeRenderer.png" width=960>  
+
+
+The image sequences in the folder will then be shown inside the Image object, 
+and the Image object will be played/enabled/disabled as we play the Timeline or drag the time slider of the Timeline window.
+
+
+For other ways for importing images, see [ImportingImages](ImportingImages.md)
+
+
+# Curve
+
+We can also change the timing of the playback by adjusting the curve of the asset.   
+To do this, open the curve section, and right click on the curve to start adding keys.
+
+
+<img src="../images/StreamingImageSequenceCurve.png" width=640>
+
+
+# Inspector
+
+<img src="../images/StreamingImageSequencePlayableAsset.png" align=right width=400>
+
+* **Resolution** (Read Only)  
+  Shows the width and height of the first image in the folder
+* **Folder**  
+  The folder where the image files are located
+* **Images**  
+  The images inside the folder.
+  We can reorder the images by dragging the image file name up/down.
+* **Reset Curve**.  
+  Reset the curve timing in the PlayableAsset to be linear.
+
+
+