how to use - playback
To get started, download the demo file.
play on your desktop
- Unzip / open the sample .zip file.
- Double-click index.html to view in a browser.
- Press the big play button on the cassette.
- If necessary, you may need to update your local Flash Player security settings.
play via the internet
- Unzip and upload the example folder to your host public_html folder.
- If necessary, change permissions (recursively) for the mixwdget-example folder to 755.
- Check it out: http:// (your-site.com) /mixwidget-demo/
embed in webpage, myspace, or blog
- Upload the example folder to a host (see "play via the internet" steps above).
- Open embed.html in a text editor (or view source in a browser).
- Copy the embed code:
<embed width="430" height="330" type="application/x-shockwave-flash" src="mixwidget/mixwidget.swf" wmode="transparent"></embed>
- In your copied code, update the src path to point to your host:
http:// (your-site.com) /mixwidget-demo/mixwidget/mixwidget.swf
- Add the embed code to the new site.
- Try it out.
how to update your Flash Player security settings for desktop playback
Flash is careful about preventing outside websites and services from accessing your local files. This includes "safe" stuff like music files, pictures, and xml.
This setting only needs to be changed once for this example (as long as you don't move the folder) and will allow only the folder access to online content; your other folders & files will not be affected. Please note that these settings work for the example file only - your custom mixwidget may require more work.
- Navigate to your
Adobe Flash Security Settings
- This link will take to to a webpage containing your security control panel. Yes it looks like a webpage, yes it really controls your local player settings, and yes Adobe/Macromedia developers are all on crack.
- You should be in the "Global Security Settings" panel/tab
- Open the "Edit locations..." combo box
- Select "Add location..."
- Press "Browse for folder..."
- Navigate to your local mixtape folder (ex. ~/mixes/mixwidget-example, c:/mixes/my-rad-mix). *
- Press "Select" or "OK" to allow.
- Confirm your local path is listed in the "Always trust files in these locations:" list window.
- Open or refresh your index.html in your mixtape folder
- All tracks that are still available should play
* it will permit the highest level you go up in the directory so if you did c:/mixes you won't have this problem
for any mixes placed in c:/mixes
how to use - make your own
required files
| file |
description |
required |
| mixwidget.swf |
the mixtape widget |
x |
| resources |
| playlist.xspf |
full list of tracks in your mixtape |
x |
| config.xml |
display settings for the cassette |
x |
| image.jpg |
your cassette artwork |
|
| skin.jpg |
the cassette skin |
|
| embed code |
| index.html |
basic web-based install |
|
| fullscreen.html |
sample fullscreen code (good for popup) |
|
| embed.html |
sample code for embedded widget (myspace, etc) |
|
| swfobject.js |
required by index.html for javascript style embed |
|
how to use - the playlist
Based the popular XSPF playlist format, the playlist.xspf file contains your complete playlist including each track's location, title, and creator.
The XSPF specification allows additional data nodes, but mixwidget only needs three:
- location - url / path to audio file
- title - song / track title
- creator - name of track creator or artist
To edit the playlist, simply copy/paste new <track> nodes in the order you want tracks to play, change the required info, and save the file. You may change the name & location of playlist.xspf, but you'll need to update the Flashvars (variables) in the embed code.
how to use - the cassette
The look and style of the cassette is customized using a simple XML file
(config.xml).
There are lots of different settings you can apply so play around:
general
| title / creator |
name and mix title are shown when the mixwidget is first displayed |
image (i.e. user image)
| scale |
image scale (percentage) |
| mask ("full" or "body") |
portion of the cassette that shows your image |
| x / y |
x / y position of image |
style / color
| shadow (0 - 100) |
shadow strength |
| gloss (0 - 100) |
glossiness |
| outlines (0 - 100) |
edge lines visibility |
| |
|
| frameColor |
outer frame color |
| bodyColor |
inner body color |
| gearboxColor |
gear-box area color |
| gearColor |
gears color |
| threaderColor |
tape threader color |
text
| size |
font size |
| color |
text color |
| bgAlpha (0 - 100) |
text label background opacity |
| bgColor |
text label background color |
| trackText |
outer frame color |
| artistText |
inner body color |
| align - (center, left, right) |
text alignment / justification |
skin
The mixwidget main contain up to two different images: a custom user image
and a cassette-picture skin.
The skin is basically a picture of a cassette edited to match the size, outlines, and "holes" of the cassette. When used, the skin will replace the cassette background colors, but the glossy layer and edges can still be seen (and adjusted).
A skin can be enabled by setting the imageEnabled attribute in the skin node. If this
attribute is set to "true" skin.jpg will be used. Advanced users may want to
use a flashvar (skin) instead.
We've provided 37 ready-to-use skins courtesy of tapedeck.org.
Feel free to download the zip (4.6mb)
user image
The user image can be anything - a photo, artwork, or even another cassette skin. The user image rests on a layer above the skin and below the glossy layer and outlines. The mask setting allows you to choose if the image is full-sized ("full") or only shows through the middle body ("body") of the cassette.
When using the image node (see config.xml)
you must have a file called "image.jpg"
in the same directory as the swf.
Advanced users: you may use a flashvar to specify the path / file instead, but the properties of the image node will revert to defaults (x=0, y=0, etc).
Setting the image flashvar overrides the image node.
how to use - page settings
optional flashvar (embed) properties
| config |
path/file - replaces config.xml |
| playlist |
path/file - replaces playlist.xspf |
| image |
path/file - replaces image.jpg |
| skin |
path/file - replaces skin.jpg |
| autoplay |
"true" or "false" |
| volume |
(not implemented) |
display size
Mixwidget.org is fully scalable.
Size is defined in the embed code.
The original resolution is 345 x 265, but any size should work just
fine. Here are a range of sizes so you don't have to get the calculator out:
- 85 x 65
- 130 x 100
- 170 x 130
- 215 x 265
- 260 x 200
- 300 x 230
- 345 x 265
- 390 x 300
- 430 x 330
- 495 x 380
- 560 x 430
- 600 x 460
- 690 x 530
|
