To get the code for your movie, find your movie on YouTube and copy and paste your URL here:
Creating Your Own Effects
This old-style movie effect was created online using The Effect Generator. You can edit the effect directly, by right-clicking on it and selecting ‘Edit’.
In The Effect Generator, you can search for and add YouTube videos, photos, clipart and mp3s, then select from a wide range of transitions and effects to add to them. See here for more examples.
In this tutorial, I’ll show you how to make use of the new YouTube Chromeless playerwithout any programming required, to create video content that fits in better with the style of your site, using video playlists, and even extra video effects like color cycling.
An Example
You’re probably used to the old blog standard YouTube embedded player, that looks like this:
But now you can have content embedded and running more directly in your site. Here’s an example that autoplays and repeats two different YouTube videos in sequence:
Notice that the new Chromeless style doesn’t really have a defined border, so it feels much more like content that’s integrated with your page, rather than just an embedded widget.
Goo-Tube have recently released Javascript and ActionScript 2.0 APIs (rather poorly excluding ActionScript 3.0) for this player, but all these require programming skills to use. I’ll show you a quick and easy way to make use of the player without any programming and embed it in your site in no time. You can either use an XML description of your video playlist, or else use my graphical editor.
XML-based Playlists
Here’s the XML playlist for the example video sequence above:
The root ‘Effect’ tag lets you define the width and height of your videos, and also the background colour to display during loading. The ‘Slideshow’ tag represents a container that displays each of it’s children in turn, then repeats. You can simply add or replace videos by adding or removing ‘YouTubeVideo’ children elements.
Here the children are the two YouTube videos with ids ‘FB2WUSvQStg’ and ‘FB2WUSvQStg’. The easiest way to find the YouTube id of the video you want is to look at the URL of the You Tube page for the video. The string of letters and numbers after “v=” in the URL is the id code. So for the URL:
http://www.youtube.com/watch?v=CCz1kmfqL7g
the id is ‘CCz1kmfqL7g’. Once you have the XML video playlist you want, simply surround with HTML code so that it looks like this:
<!--Video PLAYER: http://www.effectgenerator.com/ -->
<script class="fxml" type="text/xml">
<Effect height="240" width="320" bgcolor="#ffffff">
<SlideShow autoAdvance="false" gap="0">
<YouTubeVideo videoId="FB2WUSvQStg"/>
<YouTubeVideo videoId="fxu5CUPRU-U"/>
</SlideShow>
</Effect>
</script><script
src="http://www.effectgenerator.com/1.0.6/fxml.js"
type="text/javascript"></script>
<!-- ____ END Video PLAYER ___ -->
You can now put it directly in to your website. Since this uses JavaScript, it won’t work on sites like MySpace, but you copy the XML code into The Effect Generator (see below) to create Flash EMBED code for the video.
Using the GUI
You can also edit video sequences graphically inside my site The Effect Generator. Try right clicking on the video player above and selecting ‘edit’.
Start a new blank effect, and add the Slideshow component from the ‘Component Library’ on the right of the screen. Click the slideshow component and set it’s configuration not to auto advance (otherwise you will only see the first n seconds of each movie!). Then go to the ‘Public Media’ tab on the right and search for the YouTube videos you’d like to include.
Click ‘Publish’ and you can instantly add your video playlist to social networks, blogs, or get the Flash code to embed it.
Adding Lyrics and Other Effects
The XML description is actually an example of FXML - The Effect Generator’s internal language for describing Flash effects. This means that you can actually do a whole lot more than just sequence video using The Effect Generator. For example, you can add transitions between videos, text or graphic slides between them, overlay graphics or text, and more.
Here’s an example that uses the ‘Ticker’ component to move text across any video, adding lyrics for music. It also scales and rotates the video and adds a colour cycle effect. Right click on it to remix it into your own!
This week I’ve added a mouse ripple effect to The Effect Generator. This is a Flash adaptation of the classic Java applet animation. Try moving your mouse over the example below:
In this tutorial, I’ll show you how to use the png and jpeg capture tool in The Effect Generator to add web-2.0-style reflection to any jpg, gif or png image in seconds.
The Six Steps
Step 1 Load The Effect Generator, choosing ‘Empty Effect’ instead of a Flash template.
Step 2 Click ‘Image’ from the component library on the left-hand side of the window.
Step 3 Click ‘Upload’ from the configuration panel that appears at the bottom of the screen, and select your source jpeg, gif or png file.
Step 4 Select the ‘Decoration’ tab from underneath the component library on the left-hand side of the screen, and pick ‘Reflection’.
Step 5 Change the background color, transparency, height and width of your effect by seleting the root ‘Effect’ node from the Component Tree at the bottom middle of the screen.
Step 6 Click the ‘Download Screenshot’ camera icon at the top of the screen, third from left.
Configuring the Reflection
You can configure the reflection effect into other forms than standard vertical type. To do this, click on the ‘Image’ component in the component tree, and then click on the ‘Reflection’ effect in the ‘Effects’ box next door. This will bring up the reflection component settings:
The ‘Amount’ parameter specifies the height of the Reflection:
The ‘Angle’ parameter specifies the angle of the reflected image:
Finally, the ‘Alpha’ parameter controls the transparency of the reflection:
Other Image Manipulations
Reflection is only the first of a large number of image processing effects that you can use this tool for. Here are some others you might like to try:
In this tutorial, I’m going to describe how to create a photo slideshow using the Flash editor at effectgenerator.com.
Creating the Slideshow
A slideshow component displays other child components one after the other in sequence. To create a slideshow, click ‘Slideshow’ from the component library on the left-hand side of the screen. You can then add any other components to the slideshow by selecting them in turn. I’ll add some text and then some images.
The components are displayed in a tree in a configuration panel on the bottom-right side of the screen. You can select each component in turn to configure it using the options displayed on the right. For example, we can configure the text to read ‘Welcome!’.
You can upload images by selecting ‘Upload’ from the image configuration and selecting multiple files from your file-system. These files are then uploaded and automatically resized.
Configuring the Slideshow
We can now configure various parameters for the slideshow. Click on the ‘Effect’ component at the root of the component tree to change the width and height of the display.
Click on the Slideshow to be able to change the number of frames that is used for each slide. For example, by changing it to 50 frames per slide, the slideshow will run faster. You can also individual slides and change the ‘Duration’ parameter on the preview pane to change the duration of that particular slide.
Using Transitions
Transitions can be added to the slideshow component to change the way that each slide is displayed. To add a transition, first select the Slideshow component. Then go to the ‘Animations’ Tab on the left-hand side of the screen.
Display Transitions occur each time a component is made visible. By selecting ‘Transparency’, we can cause each component in turn to fade in. The parameters for each transition can be edited by selecting the transition in the ‘Effects’ box. We can introduce a fast fade by reducing the number of frames for the transition.
By selecting ‘Scale Up’ and lengthening the frame duration, we can create a slow zoom effect for each slide. Change the ’start value’ to the natural size of a component, 1, and the ‘end value’ to a size slightly bigger than 1, such as 1.2.
Hide Transitions occur when a component is finished displaying. For example, we might select ‘Scale Down’ to compress each component as it disappears.
Click on the Root Effect component to preview the entire effect. When you’re happy, click Publish to embed the effect in HTML or in a blog or social network.
Mixing Components
Other components can also be combined with Slideshows. For example, we can select ‘Snow’ From the Effect Generator Template library, and add this to our effect to create a layer of snow above our photos. Click on ‘Add Template to Current Effect’ to add the snow to the same canvas as your slideshow. You may need to drag the snow component above the Slideshow component so that the snow is overlayed above the Slideshow, not the other way around!
I’ve spent the last few weeks feverishly working away on my latest website, and today it is my great pleasure to invite you to try out my new creation, effectgenerator.com. The Effect Generator is whole new way of creating Flash content online for free, within a simple but powerful what-you-see-is-what-you-get drag-and-drop graphical editing environment.
Unlike most online Flash generators, which normally configure a limited range of template effects, The Effect Generator lets you select from whole multitudes of transitions, layouts, animations and public media, so your imagination is the only limit. The site also contains a moderately-sized template library, which, aside from illustrating the power of the effect building system, also lets you rapidly configure stock effects. Once created, effects can be rapidly posted to blogs, social networks, or any custom HTML page.
Here are some example effects created with The Effect Generator:
To try out The Effect Generator, click here. Here’s a quick 3 minute walk-through screen-cast:
Video text
Hello, welcome to effectgenerator.com - a quick way to author and publish stunning animated graphics online!
On the left-hand side of the screen, you will see a library of components. To add a component, simply click on the component and then it will be displayed in the preview pane on the top-right. In the preview pane you can drag components, rotate them and resize them as you see fit.
On the bottom-right of the screen you will see a configuration panel, where you can change, for example, the colour of the text you are dealing with, or select between a wide range of fonts.
As well as text, you can add images, either by selecting a URL, or by uploading an image directly from your computer. Likewise, these images can be dragged and resized within the preview pane itself.
There’s a library of transitions and animations, filed on the left-hand side under ‘Animations’, which can be applied to any components within the canvas. For example, if you select our text, select ‘Display Transitions’ and select ‘Scale Up, then the text will appear to grow when it is displayed. Similarly, you could add a Blur effect, and a Rotation effect. To the image, we might add a Shine effect.
Other simple components you might like to use include various simple shapes. We can add a Star to our text, and set it to fade in on display. Each transition animation can be set to last for a given length of time, as well as to occur between a given range of values.
Once your effect is complete, you can click on ‘Publish’, provide optional details about the effect, and then you will be presented with a URL that displays your effect, a URL for editing your effect, and a whole range of different plugins to post to different blogs or social networks.
The Effect Generator also comes with a range of templates that can be easily edited. For example, there are various different slideshows that can be configured individually with images uploaded from your PC, as well as a variety of different text effects. Each of these templates can either be opened directly, or added as new component in your existing canvas.
We hope you enjoy using The Effect Generator.
Technical Information
For the technically minded, The Effect Generator project is based around a new intuitive XML-embedded domain specific language for generating special effects graphic and layouts, called FXML. You can think of this as being a bit like HTML for Flash, only with the potential for much greater scalability and pluggable motion graphics effects. The most exciting features of FXML are its capacity for compositionality of stop-motion effects, and for generation via dynamic server-side scripting environments. The FXML player is a slimline flash movie (only 30k) that plays effects written in FXML code. The Effect Generator is a graphical Rich Internet Application for editing FXML, itself created in Flash.
