While I'm familiar with Flash Professional, the interface for Catalyst is completely different so I went to the Adobe website and watched a few tutorials on how to use the program. Eventually I came across this straightforward demonstration of use of Catalyst which I used to guide me to create the flash seen on the home page of my DSAJ website.
In this blog post I will recap the steps I took to create my DSAJ website flash.
Starting in Photoshop
I opened a document in Photoshop which was the exact size that I needed the Flash to be to fit into the designated space on my home page.
In order to move elements around in Catalysts from a PSD file, they need to be on their own layer.
Most of my design elements came from my vector library.
Using Bridge to browse for appropriate elements, I then opened the ones I selected in Illustrator, selected them individually and copied and pasted these on separate layers in Photoshop.
I also downloaded the Dominican and Jamaican flags using Google image search. I encountered a problem here because both files were GIFs and I was unable to drag and drop them into my PSD. This problem I solved by selecting them with the rectangular marquee tool, then switching to the move tool in PS and then dragging the selection into my PSD.
Once I had my images I added my text, selecting the Pricedown font becuase I think it best suited the typographic look I was aiming for. I added contrast to my text by giving the word Dominica the green color of the Dominican flag (using the eye-dropper tool), and gave the word Jamaica the yellow color taken from the Jamaican flag. Each word was placed on its own layer to allow me to move them around in Catalyst.
Moving over to Catalyst
Flash Catalyst allows you to add a PSD or AI file to work from, and all the individual layers will be available in the application for manipulation.
I imported my PSD into Catalyst however I quickly noticed that my text came out very jagged. This vexing problem was eventually only resolved by importing my text as non-editable images instead of as editable text which is the default option.
*screenshot from Catalyst with my PSD document opened
In Catalyst, states is the term used to describe the different stages of the Flash that the viewer will eventually see. I named the state with the unadjusted document end.
I then moved the elements on the various layers to different positions on the outside of the document so that they would come in from different directions. This state i named start.
I then used the timeline panel and for synchronized each element to transition from the start state to end state in one second, and for the elements to follow each other in one second intervals instead of all coming in at the same time.
I changed the start state to the default state so that in a browser this would be what the viewer saw first.
The next step was to add the interaction. Using the panel below I selected add Interaction > On application start > Play transition to state > End.
*interaction panel
The final step was to publish my Flash for deployment to my website. I went to File > Publish to SWF/ Air. I then chose the directory I wanted it published to, and keeping the default options I selected Publish.
Moving my flash into Dreamweaver
This was the simplest step. I simply selected my main content div in code view of my website in Dreamweaver where I wanted to place the flash.
Then I copied the code from the html document document which is automatically published together with the SWF, and pasted it into my website html, and voila....'Flash-ism'!!
Conclusion
Flash Catalyst does not eliminate the need for Flash Professional, however many of the things which were unwieldy and time-consuming in Professional is now a breeze in Catalyst. I have obtained a training DVD on Flash Catalyst from Lynda.com which I plan to follow during the summer to learn about the full potential of Catalyst.
No comments:
Post a Comment