It has never been easier to add plugins in Edge Animate with the script loading panel. You can choose to add a plugin file from a folder, provided you have downloaded the file from the plugin website and make sure all necessary contingent files are provided, or you can just add the provided code for linking the file to the site in which case you do not need the file on your server or hosting privider.
Today I will provide the way to use 2 plugins that allow a 360-degree spin of an image:
Both plugins are easy to use. All you need is to gather a collection of images that were taken at incrementing angles so they cover a range of 360 degrees.
So let's start!
You can find the plugin page here.
spritespin is a nifty plugin that can control your object with controls such as previous and next as well as reverse. Great for commecial sites where you want to show off your products.
Open EA, create a new file and save it. Insert the plugin from a file. Click on the + sign in the Scripts panel and choose the first option.
Copy you images files collection into the 'images' folder. If it does not exist in your composition folder, create it.
Create a container for the images by using the rectangle shape.
In Stage/compositionReady add the necessary code to activate the plugin. Create a variable for your shape and associate the plugin to it.
var spin = sym.$('container');
spin.spritespin();
Now you will need to add the name of the source files which will be read at load. You will also include the width and height of the frame (container) in which the images will be loaded. Next decide of a frame rate and the elapse time for the animation.
Your code should look like this:
var spin = sym.$('container');
spin.spritespin({
// path to the source images.
source: [
"images/dragon-001.jpg",
"images/dragon-002.jpg",
"images/dragon-003.jpg",
"images/dragon-004.jpg",
"images/dragon-005.jpg",
"images/dragon-006.jpg",
"images/dragon-007.jpg",
"images/dragon-008.jpg",
"images/dragon-009.jpg",
"images/dragon-010.jpg",
"images/dragon-011.jpg",
"images/dragon-012.jpg",
"images/dragon-013.jpg",
"images/dragon-014.jpg",
"images/dragon-015.jpg",
"images/dragon-016.jpg",
],
width : 500, // width in pixels of the window/frame
height : 300, // height in pixels of the window/frame
frame : 5,
frameTime : 100,
});
Now if you want, and I recommend it, you can add buttons to control the image. Use images or make the buttons directly in EA. In EA create a rectangle and a text field for each button. Drag the text to the rectangle layer to group them and name the buttons as mentioned below (if you will copy the code) or choose your own names provided you will change the id names in the code.
The following code was provided by the plugin site. All I did was to assign it to each button.
var api = spin.spritespin('api');
sym.$('prevBtn').click(function(){
api.stopAnimation();
api.prevFrame();
});
sym.$('nextBtn').click(function(){
api.stopAnimation();
api.nextFrame();
});
sym.$('spinBtn').click(function(){
api.toggleAnimation();
});
sym.$('reverseBtn').click(function(){
api.data.reverse = !api.data.reverse;
});
You can find reel.js here.
Proceed as above to insert the script, add you image sequence in the images folder.
I used the same images as on the plugin site. Here we just write the sequence name. The first image is inserted on the stage You must change the image from div to img.
I used the class 'sequence' but any other class name can be used. The example contains the first image of the sequence on the stage and into a symbol.
In Stage/compositionReady, add the following code. Note that the code is added to the class denoted by the period or dot before the name of the class. Any object having the class name will spin.
sym.$('.sequence').reel({
indicator: 5, // For no indicator just remove this line
images: images/DSCN####.JPG|691..702'
});
Note: the indicator is a little square that shows where you are in the spin of the image. You can remove this line for no indicator.