Flash Photo Viewer

3 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Flash Photo Viewer
hungryhounduk
Hi All
Here is another tutorial on how to make your own PhotoViewer in Flash cooll;

This is just a simple Picture Viewer which i did in about 40 minutes cooll; Just to show you how it can be done.

Image

*The Surround I created in Photoshop, and the Pictures were taken into Photoshop as well and shrunk/Cropped to the size of 640 x 480 ( my Flash Stage Size ) so when i imported them into Flash all i had to do was position them centrally and they fit perfect.

* This Picture Viewer was ALL created in (1) MovieClip and consists of 5 Layers like the Screenshot Above

*As you can see by the Screenshot above I have 5 Layers in my Photo Viewer

Top Layer for the Actions
2nd Layer for the Buttons
3rd Layer for the Text
4th Layer for the Surround
5th Layer for the Pictures (the bottom layer)

How i did it

I first Imported all the Pictures i wanted to use into the Flash Library

Then I Dragged the Surround from the Library onto the Flash Stage (Layer 1, and renamed the Layer to Surround, Name your Layers as it makes it a lot easier to see what you are doing and then you wont forget where everything is Placed ) and centered it Horizontally and Vertically ( my stage size is 640 x 480 the same size as the pictures and the surround ) Then in the Surround Layer I Selected Frame (10) and Pressed (F5) to Extend the Timeline to Frame (10) then Press (F6) to add a Keyframe to Frame (10).

Next I added the Picture Layer and created (10) Keyframes (F6) on each Frame, I then Clicked on Each Keyframe on the Picture Layer to select it and Dragged my Pictures onto each Selected Keyframe so i had a Different Image on each Frame.

Next I created the Text Layer and as before i created (10) Keyframes on the Text Layer (F6) and then selected the first Keyframe on the Text Layer and Typed the Text that i wanted to Display and Positioned it where i wanted the text to be, Then i copied all the text on the first Keyframe and then Selected the 2nd Keyframe on the Text Layer and Pasted the text into it.

( Flash has a great way of doing things and if you copy anything within Flash you can then select another Frame and from the MAIN MENU choose PASTE IN PLACE or RIGHT CLICK on your Frame and choose Paste in Place from Menu, which make things alot easier as it gets put in exactly the same place on a Blank Frame )

So i did this for all (10) Keyframes in the Text Layer then clicked on each Keyframe after I pasted it all over to Change each lot of Text to what i wanted.

Next i created the Button Layer and again added (10) Keyframes and on the First Keyframe on the Button Layer i added 2 Buttons, Like the Text Layer I copied the 2 Buttons on the First Keyframe and then PASTED THEM IN PLACE on all my (10) Keyframes.

Next I added the ACTIONS Layer and again added (10) Keyframes, Then I selected each Keyframe on the Actions Layer and Pressed (F9) to Open the Frame Actions Window and typed in The Code Below
Code: Select all
stop();
in each Action Keyframe ( If i didn't add a stop Action to each Keyframe then the Movie would just run without stopping )

Next I went back to my Button Layer and selected the First Keyframe and I Deleted (1) button as i only wanted (1) button to start the Photos Viewer ( to go Forwards ) I selected the Button and Pressed (F9) to open the Button Action Window and i added the code below
Code: Select all
on (release) {
	gotoAndStop(2);

}
Which Tells Flash that when the Button is Released it moves to the second Frame and Stops

I did this for each Button on each Keyframe ( so the 2nd Keyframe had (2) Buttons (1) to go Back to Frame (1) and the other to Go Forwards to Frame (3) and so on for each Keyframe/Button up to Frame (10).

* When you have finished adding your Button actions to the Photo Viewer it is done.

*Now as I have Created this in (1) Movie Clip, If you Click on the SCENE 1 Tab you will be taken back to the Main Flash Stage ( Which will be Blank ) as We have not added the Movie Clip as it is still in the Library.

* Drag the Finished Movie Clip onto the Blank Main Stage and Center it Vertically & Horizintally


Then Press CTRL+ENTER to View it and then Save your Flash File to a Folder and Press CTRL+ENTER to Publish your SWF File, As with all Swf Files you can add them to VB in your Projects/Apps and also add them to Websites and also give out to Friends and Family cooll;

And that is it cooll;


Image

Checkout the Attachment Below with the SWF Flash file and see how well it works

* You can add as many Pictures you like to this Photo viewer, Even add your own Music so that it plays while you are viewing your Pictures cooll; The Possibilities are endless.

I hope you have enjoyed this Tutorial

Chris
You do not have the required permissions to view the files attached to this post.
Image
User avatar
Proprogrammer
VIP - Donator
VIP - Donator
Posts: 415
Joined: Sun Oct 03, 2010 11:14 pm

Re: Flash Photo Viewer
Proprogrammer
Thanks alot man, I am now trying to learn flash. :)
------------------------------------------------------------------------------
Proprogrammer, not just a Programmer.
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Re: Flash Photo Viewer
hungryhounduk
Thanks alot man, I am now trying to learn flash
Hey No Probs cooll;
Most people think FLASH is HARD, But it isn't. Once you have worked out what a MovieClip/Graphic/Button can do then you are halfway there....

Good Luck and its well worth the time and effort Learning, as it can do so much

Chris
Image
3 posts Page 1 of 1
Return to “Tutorials”