1 person found this helpful
The easiest way to do this is to convert the MP3 into an FLV video file that contains only audio. (You can do this using Adobe Media Encoder, which is included with Flash Catalyst CS5). Then:
- Import the FLV into Catalyst
- In the Properties panel, change the "Video controls" setting to "None"
- Create your own stylized play/pause/stop controls (converting your artwork into clickable buttons)
- Use the Interactions panel to make your stylized controls play/pause/stop the video player (and hence the audio stream)
- You can also build controls for mute or volume level -- create an interaction that plays an Action Sequence, then create a "Set Property" action targeted on the video player to set its "Muted" or "Volume" properties.
Hope that helps!
Thanks for getting back to me. Started to wonder if anyone cared...lol
I will try this and see if I can make it work with your suggestion.
If I could. I have another question if you could be so kind.
This website http://www.a-rrajani.com/index.htm all though kinda cheezy. Has a very simple flash image thing that I could do in flash. It wuold take me a little bit to do cause I'm rusty on my flash but just wondering if there is a simple way to accomplish this in FC?
It's easy to create an effect in Catalyst where an image slides onto the stage. The website you're looking at is a little trickier -- the images don't move, but are "uncropped" gradually to reveal the whole image. This is doable using masks, with a combination of Catalyst + Illustrator:
- Start with the image in Illustrator (you can "import" an image into an AI document via File > Place)
- Draw a tall skinny rectangle covering the leftmost part of the image (and let it stick out a bit off the top & bottom)
- Select both the rectangle and image and choose Object > Clipping Mask > Make
- Save this to an .ai file and import it into Catalyst
- Duplicate the state (or share the .ai artwork into a second state)
- In the other state, select Modify > Edit in Adobe Illustrator
- Select just the rectangle and resize it so it now reveals the entire image
(This can be a little finnicky -- it's best if you select it using the Layers panel, and make sure that only the rectangle is selected, not the image also or the group enclosing them both. Then drag the top edge of the rectangle's selection border to make sure that you don't accidentally select the whole group when you start your drag. There may be an easier way to do this but I am not that big of an AI whiz )
- Click Done to return to Catalyst
- You'll notice that the Timelines panel now shows a Resize effect for the mask changing size between the two states. You can smooth this transition or otherwise adjust it as desired.
Hope that helps -- good luck with your design!
fantastic response thanks
No problem, glad to help!
Peter! Thank you very much for the answer.
Hi and thanks for the tips on this, it worked perfectly. I was able to make a quick easy audio player. Any idea if there is a way to make something that can play multiple songs with with one control? I can just duplicate my buttons but that leaves the problem of multiple sound files playing at once. This doable in catalyst?
Is it possible to create a scrubber?
I don't mind having to open up the project in flash builder but I don't know any Flex/mxml code.
p.s I use cs5