Website in Flash

Term Paper: Multimedia Systems (CSE3230T)

Kumar Abhishek 10812622

Acknowledgement

First and foremost, I would like to thank my teacher, Mr. Yashpal , who has assigned me this topic to bring out my capabilities.

I express my gratitude to my parents for being a continuous source of encouragement and for all their financial aid given to me.

I would like to acknowledge the assistance provided to me by the library staff of LPU.

My heartfelt gratitude to my friends for helping me to complete my work in time.

Introduction
Following steps are needed to create a basic website in flash:

Creating a web template using Photoshop Importing a Photoshop file in Flash CS5 Adding sounds and animation to buttons Adding Animation and Button interactivity Adding a Preloader Publishing the Flash content

Creating a web template using Photoshop Following are the steps needed to create a web template using photoshop: 1. You need to have Photoshop CS3 or higher version of photoshop installed on your machine.
Open Photoshop (which ever version you are having, we are using Photoshop CS3) and

choose File > New from the main menu bar; the New window is displayed. Set the parameters in this window as shown in Figure. Choose the OK button; a new photoshop file is opened.

 Create a new layer and rename it as background and open the background.jpg in the

photoshop file. The background is displayed, as shown in Figure.

 Create another layer and rename it as jewel cuffed braclet. Choose the Rectangular

Marquee Tool from the Tool box and create a vertical rectangle selection, as shown in Figure.

 Choose the Gradient Tool or press G to activate this tool. Set the hex values for right side

gradient color node to #000000 and left side gradient color node to #850900. Add radial gradient to the selection.
Next, add any HD image of a bracelet to the gradient box. Select the two layers (the

gradient box layer and the bracelet layer) and press CTRL + e to merge them together, as shown in Figure.

The ring image seems to be merging with the background layer because both of them have the same color. To make the ring stand out we will add outer glow to it. But, if you want to import this template in flash then prefer adding these effects in flash itself for better quality.
Double-click on the rings layer; the Layer Style window is displayed. Set the following

settings for the Outer Glow parameter in this window, as shown in Figure.

 Similarly add bangles.jpg, ravishing _rings.jpg, and the earings.jpg to the photoshop file.

Also, add the Outer Glow parameter to these images, as discussed in the previous step. Align all the four images, as shown in Figure.

 Use the text tool to enter labels to the images as RAVISHING RINGS, CUTTING

EDGE EARINGS, JEWEL CUFFED BRACELETS, FASHION PULSE BRACELETS (Font: Aparajita, Type: Regular, Size: 18pt, Color: White) respectively from left to right. Add outer glow to these text as discussed earlier in the tutorial.
Also enter the name of the company as ENTHEOS Jewels (Font: Rage Italic, Type:

Regular, Size: 72pt, Color: White). Apply drop-shadow on the Entheos layer; Layer Style window will be displayed. Choose the Drop-Shadow option from this window and choose the Ok button.
Also write the text, COLLECTION OF THE BEST KEPT SECRETS ON

EARTH (Font: Trajan Pro, Type: Regular, Size: 14pt,Color: White). Align all these texts as shown in Figure.

 Enter

text COLLECTIONS, TIMEPIECES, FRAGRANCES, STORES, EVENTS, DOWNL OADS, CONTACT US (Font: Orator Std, Type: Medium, Size: 18pt, Color: White) from left to right. Make sure that all the texts are on different layers.
Enter text FULLSCREEN and MUSIC (Font: Orator Std, Type: Medium, Size:

12pt, Color: White). These two texts should also be in separate layers. Align the texts added in step 9 & 10, as shown in Figure.

 Create a new layer and rename it as hanging pendant and open

the hanging_pendant.jpg in the photoshop file. You can add drop-shadow to it but avoiding adding if you want to import it in flash. Align this pendant, as shown in Figure.

 The web template is ready. You can also add images and menus of your choice in this template and enjoy. But remember, if you want to create the entire website in flash CS5 then do not add any effects on the images or on the text.

Importing a Photoshop file in Flash CS5

1. Start Adobe Flash CS5 on your system and choose File > New from the main menu bar;

the New Document window is displayed.

2. Select Action script 3.0 from the General tab and choose the OK button to open a new

flash document.
3. Choose File > Import > Import to Stage from the main menu bar or press CTRL + r from

the keyboard; the Import window is displayed. Navigate to the place where you saved the downloaded photoshop file. Select the file and choose the Open button from the Import window; the Import entheos_jewel.psd to stage window is displayed, as shown in Figure.

The left panel of this window displays the layers that were there in photoshop and the area on the right side displays the options related to the selected layer.
4. Select the top most layer Cutting Edge Earings, the options related to the selected layer

are displayed on the right.

5. Check the Create movie clip for this layer check box option. Use this option to change

the bitmap image into a movie clip in flash.

Adding the instance name is not required at that very moment. You can add the instance name to a movie clip even at the later stages.
6. In the Publish Settings area, choose Losseless option from the Compression drop-down

list. The loseless option avoids the image from getting distorted from any loss of data.
7. Next, choose the Jewel Cuffed Bracelets text layer, the properties of the respective layer

are displayed on the right.

8. Select the Editable Text radio button from the Import this text layer as: option area. This

will help you to edit the text even in flash. Also, choose Losseless option from the Compression drop-down list. Repeat these steps for all other layers, taking into consideration that whether they are the image layers or the text layers.
9. Next, make sure that Flash Layers is selected in the Convert layers to: drop-down list and

select the Place layers at original position check box. Also, select the Set stage size to same size as Photoshop canvas (1280 x 768) check box. This option will resize the flash documents with the size of the photoshop document. After doing all these changes, choose the OK button.
10. Choose Control > Test Scene from the main menu bar to publish the flash file; a separate

window is displayed displaying the static website layout, as shown in Figure. You can also press CTRL + ENTER key from the keyboard to do so.

 Adding sound and animations to buttons

1. Open the flash file that you downloaded from the above given link and double click on the

Ravishing rings button at the bottom of the first image. Next, select the text and press CTRL+F8 to create a movie clip. Rename it as abc_anim.
2. Paste the copied text in the movie clip. Make it a movie clip again so that we can add some

movie clip effects over it.

3. Next, set key frames at frame 5 and 8.Select the key frame at frame5 and open the property

inspector and add the blur filter to the movie clip in the stage area.
4. Also, add glow filter on all the three key frames with a white glow to the movie clips, refer

to the Figure for values for the blur and glow filter values.

5. Select the key frame at frame 8 and open the library. Expand the sounds folder and drag the

sound symbol named as button to the stage area. Notice that the selected key frame has a blue line in the centre indicating that the sound has been added to the key frame. 6. Press the ENTER key to test if the sound works, if not then repeat the last step again.
7. Next, select the key frame at frame8 and choose CTRL+F3 to open

the PROPERTIES panel and expand the SOUND area and choose the pencil icon on the right of the Effects property; the Edit Envelope dialog box is displayed, as shown in the Figure below.
8. Select the last key frame and add the stop script on this frame.

stop();

9. Expand the Effects drop-down list and select the Left Channel option from it. Choose the

play icon at the bottom left of the screen to hear the difference in the sound effect earlier and after changing the effects. 10. Choose the OK button.
11. Next, go back to the previous scene ( the ravishing rings button ) select the Over frame in

the timeline and choose the F5 button next add a key frame at the Down frame and replace the text on the stage with the animation movie clip with sound on this key frame. 12. Press CTRL+ENTER to test the button effect. Move the cursor on the ravishing rings button and press to view the effect. 13. Repeat the same step for all the other buttons in the project.
14. Next, we will add sound to the sliding transition. To do so, move to the main scene and

move the play head to frame5. Double-click on the first image to enter into the sliding clip timeline.
15. In layer named 3, choose the first key frame and open the sounds folder in

the LIBRARY panel. Drag the sound named slide in the stage area. The blue line in the frames assures that the sound has been added, as shown in Figure.

16. Similarly, add the sliding sound to other slides that you created. 17. Next, move to the main scene. We will add a continuous sound throughout the project.
18. Create a new layer at the top in the TIMELINE and rename it as sound. Select the first key

frame at frame1 in the timeline. Open the LIBRARY panel and drag the sound named main in the stage area.
19. Press CTRL+ENTER to view the sound effects added, the swf file will be displayed

separately in a window, as shown in Figure.

 Adding animation and button interactivity

1. Open the flash file that you downloaded from the above given link and create a new movie

clip by pressing CTRL+F8, enter the symbol name as ravishing rings in the Create New Symbol dialog box and choose OK.
2. Choose Window> Properties from the main menu bar and set the stage background color

to dark grey so that the text that will be entered in the white color is visible.
3. Also, choose Window > Library from the main menu bar and use the assets in the Library

to arrange the images, as shown in Figure.

Make sure that all the four images are placed on separate layers and name it as 1 to 4 starting from the left most figure.
4. Arrange the layers as shown in Figure below.

5. Make movie clips of the all the images, as discussed earlier and name them as 1,2,3,4 as

per there layer name. In the layer1, select frame number 16 in the timeline and press F6 to create a key frame there.
6. Next, move to layer 2 and add key frame at frame 10. Select the key frame at frame 10 and

use the left arrow button to move the respective movie clip below movie clip 1.
7. Lock the layer1 and select the movie clip 2 at frame10 and

choose Window>Properties from the main menu bar. From the Color Effect drop-down select Alpha and set its value to 0 at frame 10. Next, at the bottom right of the properties panel choose the Add Filter button and choose Blur from the fly out and set the values, as in Figure.

8. Move, your cursor at frame5 in the timeline of layer2 and right click on the frame and

choose Create Classic Tween, a straight line with one arrow at the right most frame is created indicating that the tweening has been added to that layer. Scrub the play head to view the motion of the movie clip. Incase you are not getting the tweening effect, refer to the following figure and repeat steps 6 to 8 again.

9. Repeat the same steps for all other layers. For layer 3 the end frame should be 13 in the timeline and for layer4 it should be frame number 15.
10. Move back to layer 1 and unlock it and add a key frame at frame 19 in the timeline and add

the glow filter to it with the X&Y value to 15 and quality to high. Next, add motion tweening in between the frames 15 to 19.

11. Again, add a key frame at frame 23 and change the glow filter value to 10 in

the PROPERTIES panel and add motion tweening there also. After adding tweening to all the four layers, the timeline should look as in Figure below.

12. Choose frame23 and choose Window>Code Snippets from the main menu bar to display

the code snippets panel and expand the Timeline Navigation rollout, as shown in Figure.

13. Double-click on the Click to Go to Frame and Play option in the Code Snippets panel, a

message box asking you to add a default instance name to the movieclip will appear, as shown in Figure. Choose OK to add the script on frame23.

A new layer with the name Actions is added to the timeline with a key frame at frame 23. The key frame has a symbol indicating that it has an action script 3.0 code over it.
14. Select the key frame with action script and press F9 to see the code, the actions panel is

displayed. At the bottom of the code, replace 5 with 17, refer Figure.

The script indicates that whenever the play head will come at frame 23 it will be reverted back to frame 17 and it will go in a loop making the glow animate.
15. Next create a new layer at the bottom of the timeline and name it as textbox. Create a

rectangular box on that frame with a linear gradient of black (right) to red (left). Make it a movie clip and name the movie clip as textbox. Add a blur filter to it. The movie clip will look as in figure.

16. In the textbox layer choose frame23 and press F5 to create frames. Next, make sure that

you have a key frame at frame1 (alpha=0), frame12 (alpha=0), frame16 (alpha=100). Add motion tween between frame 12 and 16.
17. Create a new layer above the textbox layer and name it as text. Create a text area over the

textbox and the desired text. Next, create a movie clip of this text area with name as text.

Repeat the same steps as in point 16 for this layer also. Scrub the play head in the timeline or press ENTER to view the transitions. Before proceeding further make sure that the timeline looks as in figure below

18. Now move back to scene1 by choosing the Scene1 icon at the top left of the stage area.
19. Choose View> Rulers from the main menu bar to display the rulers in the stage area. Move

your cursor to the horizontal ruler, press and drag to create cyan colored guideline. Adjust it to the top of the image.
20. Similarly, drag a vertical guideline to the leftmost border of the first image. Repeat the

steps to create a guide box enclosing all the four images refer Figure.

The guides will help us place the movie clip we created in the tutorial at the right place which will help in smoother transition of the tweening we created.
21. Choose the ABC SHING RINGS text at the bottom of the first image and press F8 and

name it as rings and convert it into a button. Select the rings button and choose Click to go to frame and stop from the Timeline navigation area of the Code Snippets panel. 22. Create one more layer in the timeline and rename it as home. Add the HOME text in the stage area at this frame and place it at the top menu before the COLLECTIONS text. Select the text and make it a button symbol as discussed earlier. Also, add the click to go to frame and stop functionality to this button using the code snippets and modify the script such that it stops at frame1. Choose frame5 in the home layer and choose F5.
23. Next, choose frame1 of the home layer and press F9 and write the following script code in

the actions panel stop(); This code will help stopping the play head to run to the next frame unless guided to do so at runtime. 24. Next, move the cursor at frame5 and choose F6 for all the active frames in the timeline. Select the 4 images in the stage area and delete them. Next, choose the frame 5 of ravishing rings layer and open the library panel by pressing CTRL + L.
25. Drag the ravishing rings movie clip on the stage area and align it in between the guides. 26. Press CNTRL + ENTER to view the functioning of two buttons: RAVISHING RINGS and

the HOME button. Click on the RAVISHING RINGS button to redirect to its related frame refer Figure.

27. Repeat the same steps to add transition for the remaining three images. Make sure every

time you do the create a transition all the main images should come at the same position as is there in this case.

Adding a PreLoader

1. Open the downloaded file in Flash CS5. Press CTRL+ENTER to publish the content of the flash movie.
2. Next, we will check that how this flash content will be downloaded actually in the web

browser at runtime. To do so, choose View > Bandwidth Profiler from the menu bar in the window. The bandwidth profiler gives a brief profile for the content to be downloaded, refer to the figure below.

The size refers to the complete size of the flash content at runtime.
3. Next, choose View > Download Settings; this will display the download settings that are

used by default in flash, i.e. 56 k (4.7 kb/s). Next, we will make flash simulate the content as it will do at runtime with internet speed of 4.7 kb/s.
4. Choose View > Simulate Download from the main menu bar. You will notice a grey

background with dots appearing at the center that indicates that the content is getting downloaded, as shown in figure below.

Also notice that the Bandwidth Profiler displays that how much content has been downloaded and how much is remaining with a speed of 4.7 kb/s. Next, we want to make a bar appear indicating the progress instead of these dots. 5. Save the flash file again with the name as index.
6. Next, choose File > New; the New Documents window is displayed. Choose the

Templates tab from there. Choose Sample Files from the Categories area and Preloader for External File option from the Templates area. Choose the OK button to open that file. A new file for the preloader is created in flash, indicating the preloader bar, as shown in

Figure.

7. Delete the background layer from the timeline as we dont need that. Also, make the stage area size to be similar to what we have for the index.fla file (main flash file).
8. Next, we will set the red progress bar at the center of the stage. To do so, select the

progress bar from the stage area and choose Window > Align from the main menu bar, the Align panel is displayed. Choose the Align to stage checkbox and choose the Align horizontal center and the align vertical center buttons, refer Figure below.

9. Next, choose frame 1 of the actions layer and press F9 to open the Actions panel. The actions panel displays the required code for our pre loader.
10. Next, add index.swf at the place of the circled area, refer Figure.

The marked area indicates the path of the file or the content to be downloaded. 11. Next save this preloader file at the same location as that of the index.fla file with name as pre_loader.
12. Press CNTRL +ENTER to view the published file. In case the index.swf file is not loading,

please check if the main folder where the preloader file is saved is having the index.swf file or not.
13. Next, choose View > Download Settings > DSL from the menu bar. Choose View >

Simulate Download to view the downloading at runtime. The pre loader will show the visual feedback of the download, refer Figure.

You can change the shape and the thickness of the preloader bar as per your wish. You can

also change the color of the pre loader bar to match with your webpage. In our case red color was going on with our web design color, so we stick to this color itself.

Publishing Flash Content

1. Unzip the downloaded file and open the index.fla file in your flash window.
2. Next, choose Window > Properties from the main menu bar to open the Properties panel.

Choose the Edit button on the right of the Profile property in the PUBLISH area. The Publish Settings window is displayed refer Figure below.

You can also open this window by choosing File > Publish Settings from the main menu bar.

3. Next, choose the Formats tab from the window and make sure that only the checkbox on the right of the Flash option is checked. Choose the folder icon on the right of this option and locate the path of the root folder which has all the existing files of this tutorial. Uncheck the HTML checkbox. We will publish the HTML file for our preloader file.
4. Again, choose the Flash tab in the window to display the properties related to it.

You can reduce the file size of the flash content by dragging the cursor on the right of the JPEG quality option in the window. Doing this will reduce the quality of all the JPEGs used in the project. We will leave it as it is for our tutorial.
5. Make sure that the Compress movie; include hidden layers and the Include XMP metadata

check boxes are selected in the SWF Settings area. Leave the other options untouched and choose the Publish button to publish the content as .swf. 6. Save the flash file and close it. 7. Next, open the pre_loader.fla file from the zipped folder that you downloaded in the beginning of this tutorial.
8. Next, choose File > Publish Settings from the main menu bar to open the Publish

Settings window.
9. Choose the Formats tab from the window and make sure that the check boxes are selected

in front of the Flash and HTML options. Rename the HTML file as index.html and also choose the folder icon in front of both the options to the folder where other files exist.
10. Next, choose the HTML tab from the window. Choose percent from the dimensions drop-

down. This will make sure that the entire flash window is displayed in the explorer on browsing.
11. Next, choose No Scale from the Scale drop-down. This will make sure that the flash

contents do not get scaled with different resolutions of the user.

12. Uncheck the Show warning messages check box and choose the Publish button. 13. Open the folder that has all the published files and double-click on the index.html file to

open the .swf file in the internet explorer, refer Figure below.

The title of the file in the browser tab appears to be pre_loader. This can be changed by using any of HTML editing softwares such as Dreamweaver. We can also use flash to do so.
14. Select the index.html file from the folder where it is saved. Right-click on this icon and

choose Open with > Flash CS5. The HTML content is opened in the Flash window, refer Figure below.

15. The title tag here contains the information for the title of the browser. Enter entheos jewells between the title tag, such that the code should look as given below. <title> Entheos jewells </title> 16. Save the file and open the html file in any of the web browser just to check that the title is coming as we mentioned in the last step, refer Figure below.

Now, you are ready to upload your website on the server and use it further.

References
1. ^http://www.adobe.com/resources/business/rich_internet_apps/ 2. ^ "Flash: 99% Bad". Retrieved 2011-01-08. 3. ^ Waldron, Rick (2006-08-27). "The Flash History". Flashmagazine. Retrieved 2001-06-

18.
4. ^ Gay, Jonathan (2001). "The History of Flash". Adobe Systems Inc.. Retrieved 2009-10-

18.
5. ^ "Grandmasters of Flash: An Interview with the Creators of Flash". ColdHardFlash.com.

Retrieved 2008-02-12.
6. ^ "AIR passes 100 million installations". Archived from the original on 2 February 2009.

Retrieved 2009-02-03.