- Upload YouTube videos, embed them in Flash
- Vectorian Giotto (Windows)
- SWFTools (Windows)
- Flash & dA
Disclaimer: All of this is how I did it. All of what I did was made by me with the help of free programs.
and commercially use the text of this tutorial, under the following conditions:
Attribution (credit me)
The rules of dA also apply to Flash files. Do not add music or an image to your Flash file if you don't have the permission to use them!
And for all the grammar nazis out there... I'm so terribly sorry^^. My main objective was not to create a perfect essay, it was to teach you how to do what I did. I'm not a native English speaker and I didn't pay much attention. Feel free to correct me in the comments.
Step 1: Upload a video with the music on YouTube. YouTube allows to embed videos in Flash files and I will tell you how.
Step 2: Compile an ActionScript 3 code that will put the YouTube video in a new SWF file. It's easy (promise) if you follow the steps below.
If you don't have a program that supports ActionScript 3 (like me), go to wonderfl.net/ . Warning: Using this service is free, but you will have to register before you can actually do something.
Go to the top right to the search bar and type in YouTube:
It will lead you to some results with finished projects by people who have already managed to do this.
Click on the first result, a nice coder named pekeq was nice enough to provide this one for us. Scroll down and click on "Fork".
This is when the service requires you to register. Not too complicated.
After you have chosen a username, you will get to a page that might look a bit confusing, because there's a lot of code. Don't worry, there's not much to do here. Do you see the circles in the image? Those are the only parts we will have to change.
OK, now it's time to go to your YouTube video and to get the ID of the video. The ID is inside of the link to the video.
For example: In the link www.youtube.com/watch?v=0BgL0wUs6Hs, it is the last part after the "=" . So, the ID of www.youtube.com/watch?v=0BgL0wUs6Hs is 0BgL0wUs6Hs.
Now that you have the ID, you can replace the ID in the code with your ID. In my case, I replaced
http://www.youtube.com/v/0BgL0wUs6Hs?version=3in the first circle in the above image and
0BgL0wUs6Hsin the second circle. The third circle is the default quality of the video. The options are
hd1080.I chose large, because that's a reasonable quality that won't be unwatchable on smaller computers and won't load forever for people with a slower internet connection. Small is just... really low quality.
OK, no more code. Now we need to leave the editor. To do that, simply click on "Finish Editing" in the top right corner.
This will lead you to a new page. Scroll down and click on "Download" on the right. You will get a ZIP file. Extract the file and upload the SWF to deviantArt.
An easy way to put an image and music together in a SWF file is to use Vectorian Giotto. There are two problems: I haven't found a way to make it loop and I don't know how to add an animation instead of only a still image.
You can get Vectorian Giotto here.
Open Vectorian Giotto
Import the image and the sound file by going to
Now save it as a SWF file by going to
File->Export Flash Movie.
Maybe you can add a loop by adding a keyframe and adding this ActionScript code to the frame:
I would like to point out that there are some disadvantages to this way: The audio file needs to be WAV (if it isn't, it needs to be converted, fortunately, this is very easy) and everything has to be done manually in the Windows Comand Line (fortunately, I will guide you through that).
C:/audio.WAV). Now, find the folder the package has been installed in (for me, it's
C:/Programme/SWFTools). If you look at the programs, you will see that there is are a lot of useful conversion programs (including
swfcombine.exe, both of which are explained further below).
The program we will need for now is
wav2swf.exe. Unfortunately, double clicking or pressing Enter will not run the program correctly. You need to go to the Windows command line. To do that, first press [Windows Key]+R or by going to
It should bring you to this dialogue, please enter
And that should bring you to the command line:
OK, now type in the path of the program we want to run. In my case, this would be
C:\Programme\SWFTools\wav2swf.exe. There should be a lot of text:
The first line tells us how to use the program: You enter the path of the program, space, options, space and then, you enter the path of your WAV file. I saved my audio file in
C:\(because I have to type less), so this is how it looks for me:
C:\Programme\SWFTools\wav2swf.exe -o C:\audio.swf C:\audio.wav
What will this do? It will take your WAV file (
C:\audio.wav) and somehow magically make a new file where you told it to leave it (
C:\audio.swf). You could leave the last one out, but it will save it as
%username%. The file will be a SWF file, containing nothing but the endlessly looping audio. If you don't want it to loop, you need to add the options
-d -l, in my example:
C:\Programme\SWFTools\wav2swf.exe -o C:\audio.swf -d -l C:\audio.wav
Not looping any more.
You probably won't need the other options.
png2swf.exe, just make sure that you pick the right program for the right image type and - if it is a GIF - that you de-optimised it, the conversion program displays single frames, not the resulting GIf animation. If you have an animation and the GIF lost colours/quality and if you still have the original files, take the time to make it a series of PNGs, the quality will be maintained.
I have a series of PNGs and I want to make a Flash animation. I type in:
Looking at the options, I would type in
C:\Programme\SWFTools\png2swf.exe -o C:\1.swf C:\1.png C:\2.pngto get an infinitely looped animation with automatically detected width, height and frame rate. You can change all of that. Example:
C:\Programme\SWFTools\png2swf.exe -o C:\1.swf -X 100 -Y 100 -r 10will create a SWF file (
C:\1.swf) by using one or more PNGs (
C:\1.png C:\2.png), with a width and height of 100 (
-X 100 -Y 100) and a framerate of 10 images displayed per second (
The difficulty is bringing the music and the animation together without the one being interrupted by the other one.
C:\Programme\SWFTools\swfcombine.exe -o C:\2.swf -T C:\1.swf C:\audio.swfshould do it. Make sure you have a capital T, otherwise there will be another result.
You are done! If you want, you can check out the other possibilities.
You can share pure audio files by uploading them to the Sta.sh. You can also upload archives such as ZIP and RAR to certain Categories, so if you put the audio files in there, people can get them.
It is also possible to embed videos from sites such as YouTube, even in different forms. However this only works in Journals and on Profile Widgets.
And apparently in the Sta.sh Writer...
I love that guy's beard.
It has to be submitted to the Flash Category
Additionally to the SWF file as a main file, a preview file has to be uploaded. This can be any JPEG/JPG, any PNG or a GIF with 150x150 or less pixels. To upload the preview image, wait until the main file is uploaded, then click on the pencil on the right and select "Change Preview Image".
I also want you to know that the rules of dA also apply to Flash files. Do not add music or an image to your Flash file if you don't have the permission to use them! And so on, and so forth...
More tutorialsThanks for reading my tutorial. Here, have some more:
Open Ocean animation tutorial (CreaToon, GIMP)
IntroductionThe ProgramsThe ConceptGIMP animationsGIMP: animated wavesGIMP: wind animationCreating some materialGIMP: single wavesGIMP: circle wavesGIMP: circle cloudsGIMP: parchment paper backgroundCreaToon animationsCreaToon: importCreaToon: setting up the sceneCreaToon: first pa
Easiest Journal CSS tutorial ever!Note: You need Premium Membership to use Journal Skins.
Go to RetSamys.
Click on "Send a Note" on the top right of the page. Alternatively, you can click here to send a note.
Tell me what you want coded for your Journal Skin in the Note.
Wait for my reply. As long as there aren't any questions/recommendations/tips/answers, it will contain the code.
Done. If there is anything unclear, don't hesitate to contact me.
CreaToon Tutorial: Rendering Window startup issueFrom what I could read from others, I am not the only one with this problem and for most, this is the reason why they give up using this program. I can understand their frustration, but at least in my case, I found a solution.
The preview/rendering window is all scrambled up (or in some cases black):
While this is what it should look like on startup:
Copied from CreaToon's FAQ:
When I start CreaToon, the rendering window is containing garbage. What's wrong?
This is a common problem when your computer's graphics card lacks proper OpenGL support. This may be due to an older driver version, or simply because the card doesn't properly support OpenGL. Look on the card manufacturer's site for the latest OpenGL drivers for your card.
Another solution that seems to work on most Intel integrated graphics cards (but which may cause CreaToon (or even your PC as a whole) to run too slowly) is to d
How to install and run CreaToon on Windows 8
What is CreaToon?
Unlocking and more Compatibility
Running the program
Disabling hardware acceleration
Re-enabling hardware acceleration
What is CreaToon?
Let me know if you have any ideas for tutorials.